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

发布时间:2019-08-29 17:13:11 阅读:50

自数字产品设计诞生以来,出现了一个大问题。设计人员被迫使用与产品开发过程完全分离的软件。

设计师从组织的其他部分出发,用他们的光栅图形或矢量设计工具绘制图片。无论它们是在Gimp,Photoshop,Fireworks还是Sketch中工作,过程看起来都是相同的:设计师将其意图呈现为一组静态图像并将其发送给工程师。使用静态画板显示界面的不同状态非常繁琐。因此,设计师并没有详细说明一切现在,工程师必须从一组不完整的静态图像构建整个用户界面。所有的互动状态都需要经常进行冗长的来回沟通。

结果?由于静态设计无法准确表示体验,因此用户的测试非常简单。这个过程充满了低效率,导致团队沮丧和产品不成功。

幸运的是,现在有更好的设计方法。基于代码的设计工具范例正在迅速取代基于图像的设计工具。设计师可以直接在代码中渲染他们的设计意图而不需要知道如何编码,不是在光栅或矢量设计工具中绘制设计的静态表示新的工具集(特别是UXPin!)提供了一个新的工作流程:

- 为设计师和工程师建立单一的事实来源

- 为设计人员提供完整的代码功能,而无需任何编码专业知识

- 在一个协作的创作过程中将它们连接起来。

使用UXPin进行代码库设计

基于图像的设计有什么问题?

如你所知,有设计工具的两种模式:基于图像的基于代码的设计工具。

基于图像的范例是几十年来使用的旧设计工具方法(最值得注意的是 - 最初于1988年推出的Photoshop)。这个想法是,当设计师绘制某些东西时,他们会构建光栅或矢量图形。这种方法允许最大的灵活性。一切都可以通过这种方式有效地绘制 - 从图标到具有最美丽细节水平的高级插图。但是,它经常在专业数字产品开发中出现问题。原因如下:

  • 缺乏互操作性:除了插图,图标和照片之外,  这些图形从不用于构建产品的实际界面。在基于图像的设计工具中进行界面设计的设计人员在代码中设置的约束之外工作,因此,在不知不觉中,可以创建编码困难且成本高昂的事物。
  • 缺乏准确性:  虽然它们可以创建非常详细的设计,但基于图像的工具也会在开发过程中导致最不准确的结果。他们使用完全不同的方法来渲染设计师的工作成果。因此,当工程师应用相同的规格时,设计人员在基于图像的工具中选择的文本,渐变和颜色在代码中看起来不同。这导致了团队之间的大规模错位。看看这个例子这个热闹的推文指出了它。
  • 静态设计: 基于图像的设计工具工作流程侧重于为界面的每个状态构建静态画板,然后将它们链接在一起。这种方法在专业项目中打破。即使是简单的模式(例如下拉列表)也很快在静态工作流程中变得难以管理。为什么?由于大量的画板和缺乏保存交互式组件的可重用性的能力。而且,这些工具只允许非常基本的交互,而无法设置元素状态,内容变量,条件逻辑等。
  • 设计工程协作薄弱: 这些工具与工程流程完全分离,无法有效合并。这种脱节是两个世界产出的本质。虽然开发人员使用用户实际体验的技术作为最终产品,但基于图像的设计工具的用户引入了额外的抽象层,这与最终用户体验相差甚远。缺乏真正的交互,可重用的交互式组件或从代码中导入组件的能力使工程师和设计人员彼此脱节和沮丧。

基于代码的设计有什么特别之处?

很高兴你问。使用基于代码的设计工具,当用户绘制某些内容时,该工具会创建相关的html / css / js并使用浏览器,从而使引擎可视化地显示结果。它提供最逼真的保真度(设计人员和开发人员使用相同的技术),最强大的交互以及与工程师最密切的合作。所有相关方都有很多好处,但今天,我们只关注设计师:

设计师的好处

  • 最逼真的保真度: 与基于图像的工具不同,基于代码的方法在设计者的意图和可编码的结果之间提供100%的匹配。这是因为基于代码的工具使用与Web开发中使用的技术相同的技术来渲染所有设计项目!如果你可以在UXPin中制作它,你绝对可以使它成为代码!
  • 设计人员和开发 人员面临同样的限制:使用基于图像的工具,设计人员可以创建困难的东西,甚至无法在代码中重新创建。另一方面,基于代码的工具允许设计人员和开发人员完全相同的约束(代码的限制!)。这可以确保他们真正保持同步。
  • 交互式组件而不是画板:基于代码的设计工具使用组件级别的最高级交互,而不是链接画板。这种方法模仿了开发,并使设计人员能够创建高度可重用的交互式设计系统。
  • 最强大,最真实的交互: 对象可以在屏幕上移动,相互交互并创建复杂的模式。就像在代码中一样,但不需要知道如何编码。这对于与工程师的协作(在编写最终版本之前实际体验产品)和用户测试至关重要。基于代码的范例中自然的元素,如真实文本输入或复选框,在基于图像的工具中不存在!
  • 设计师和工程师之间最强大的合作: 基于代码的范例为设计和工程协作提供了一种全新的,革命性的方法。

这只是设计师的一面。请继续关注另一篇关于基于代码的设计对公司工程师和整个组织的好处的文章。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"为什么设计师需要从基于图像的设计切换到基于代码的设计",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560