设计师是时候从基于图像的设计切换到基于代码的设计了

为什么要从基于图像的设计切换到基于代码的设计？

自从数字产品设计诞生以来，就一直存在一个大问题。 设计师与产品开发过程分离，被迫只使用软件。

设计师使用光栅图形或矢量设计工具来绘制图片，因为它们与组织的其他部分是孤立的。 在大多数情况下，即使它们在 Photoshop、Gimp、Sketch 或 Fireworks 等不同软件中工作，该过程仍然相同。 一组静态图像作为设计师呈现的意图发送给工程师。

通过静态美术板展示界面的不同状态是极其繁琐的。 因此，设计师没有详细说明一切。 最终，整个用户界面由工程师在一组不完整的静态图像的帮助下构建。 通常在冗长的来回通信中，所有的交互状态通常都会被消除。

静态设计不能准确地表示体验，因此测试通常会让用户感到厌烦。 正是由于这些低效的流程，组织会导致产品不成功和团队沮丧。

由于当今技术的发展，我们有了更好的设计方法。 基于图像的设计工具正在迅速被基于代码的设计工具范式所取代。 从矢量设计工具或光栅中提取的设计的静态表示被渲染设计所取代，其中设计人员直接在代码中对其进行设计，而实际上并不知道如何编码。

新的工具集提供了一个新的工作流程，其中：

• 设计师和工程师都建立了单一的事实来源
• 无需任何编码经验，它赋予设计人员编码的全部力量
• 设计师和工程师二人组通过单一的协作创作过程联系在一起，创造了壮观的工作流程演变

使用 UXPin 的基于图像到基于代码的设计

这里的第一个也是基本的问题是，在从基于图像的设计过渡到基于代码的设计之前，基于图像的设计有什么不好或效率低下的地方。 您可能很清楚有两种设计工具范例，即基于代码的设计工具和基于图像的设计工具。

基于图像的设计工具是一种已经使用了几十年并且相当古老的方法。 设计人员在绘制某些东西时必须构建矢量或光栅图形，这是这种工具方法的想法。

通过这种方法，设计人员拥有最大的灵活性。 从高级插图到简单的图标，一切都可以通过这种方式有效地绘制，包括最美丽的细节层次。 尽管在专业数字产品开发方面它通常会中断。 这就是它发生的原因。

1.缺乏互操作性：产品的实际界面，除了照片、插图和图标，从来都不是用这些图形构建的。 在基于图像的设计工具中进行界面设计时，设计人员会在代码中设置的约束之外工作。 正因为如此，他们可以创造出编码成本高昂的东西，以及以未知方式难以实现的东西。

2.缺乏准确性：除了创造出细节丰富的精彩设计外，开发过程中最不准确的结果往往是使用基于图像的工具。 设计师的作品是用完全不同的过程渲染的。

因此，即使使用相同的规格，设计师和工程师选择的渐变、文本和颜色代码也会有所不同。 因此，团队受到了大规模错位的影响。

3.静态设计：基于图像的设计工具的工作流程重点是为最终链接在一起的所有界面状态构建静态画板。 对于专业项目，这是一种闯入方法。 在静态窗口中，最简单的模式变得像一个无法管理的下拉菜单。

发生这种情况的原因是缺乏保留交互式组件以实现可重用性的能力以及大量的画板。 最重要的是，这些工具只允许基本交互，而不能为内容、元素状态、条件逻辑等设置变量。

4. 设计工程协作弱：工程过程与此工具完全不同，无法合并。 两个世界的输出都与它的本质脱节。

用户使用的技术是开发人员工作的最终产品，而基于图像的设计引入了远离最终用户体验的额外抽象层。

由于可重用的交互组件、缺乏真正的交互以及从代码中导入连接的能力，设计师和工程师彼此之间产生了脱节和沮丧。

基于代码的设计的独特性

当我们强调从基于图像的设计到基于代码的设计的过渡时，了解这种设计的特殊之处很重要。 当用户使用基于代码的设计工具绘制某些东西时，它会创建相关的 CSS/HTML/JS 并使用浏览器。 这使得引擎可以直观地显示结果。

以下是设计师从基于图像的设计过渡到基于代码的设计后的好处。

1. 保真度：当一个人使用基于代码的设计时，设计师的意图和可编码的结果之间存在 100% 的匹配度。 要渲染所有设计项目，基于代码的设计中使用的技术与 Web 开发中使用的技术相同。

2. 消除设计人员和开发人员之间的约束差异：设计人员在基于图像的工具中可以创建难以设计且无法在代码中重新创建的东西。 这些完全相同的约束条件适用于基于代码的工具中的设计人员和开发人员。 因此，它确保设计人员和开发人员保持同步。

3. 用交互组件代替画板：基于代码的设计工具使用组件上最先进的交互来代替链接的画板。 这种方法直接使设计师能够创建高度可重用的交互式设计系统，并且它还模仿了开发。

4. 逼真而强大的交互：随着从基于图像到基于代码的设计的过渡，对象可以相互交互，在屏幕上移动，并创建复杂的图案。 它不需要知道如何编码，这对于与工程师的协作和与用户的测试最重要。

5. 创建有史以来最强大的协作：通过基于代码的范例实现了一种全新的、革命性的工程和设计协作方法。

相关文章

网页设计师与网页开发者的区别