您当前所在的位置:首页 / 新闻中心 / 产品技术
新闻中心
行业资讯
常见问题
知识百科
产品技术
推荐新闻

重构设计:使用嵌套符号和开发人员

发表于:2019-06-01

最近,我们已经收到越来越多的高保真动画原型请求,用于新的商业宣传工作。通常,这些请求带有一周的时间表,因此有必要在整个UX / UI设计过程中削减一些角落。好吧,更像是所有的角落 - 像这样的任务是一个充满了硝基燃料的地狱之旅,一个令人激动的挑战,吸引任何渴望有机会吃饭和睡眠不好几天的人,希望能够提出一些深刻而有说服力的东西。

当这个过程有效并且我们基于这个快速组装的原型进行项目时,我们有时会发现自己处于尴尬的境地。对于客户来说,似乎我们刚刚完成了我们估计在一周内需要几个月的所有工作。任何类型的用户研究,偏好测试,用户访谈,以确定哪些功能对v1最重要?不。竞争对手应用的详细分析?忘掉它。应用程序流的强大映射,包括各种状态的所有屏幕?当然不。使用基本可点击原型进行流量测试的线框图?没朋友。我们走进树林,一周后带着一个奖杯回来了 - 一个完全品牌化和流畅的动画可点击原型,具有相当多的假设功能。而且客户喜欢它。

我们不应该重新估计这个项目需要多少UX工作?还剩下什么呢?好吧,总之...... 一切。因此,即使在应用程序似乎已基本完成之后,也开始了一个漫长而艰巨的过程,即重置客户期望并捍卫对发现期的需求。但这是另一篇博文的主题。今天,我想专注于提供客户喜欢的高保真音调原型的实际后果:乱糟糟的草图文件。

筑巢

由于Bohemian Coding 在Sketch 41中引入了嵌套符号覆盖,因此UX / UI设计者的世界发生了变化。最后,有一个广泛且易于学习的系统,可以使用原子设计原理进行设计。这已经彻底改变了用户体验和用户界面设计,像Airbnb这样的组织在创建综合设计系统的标准模型方面取得了巨大进步。

现在,设计人员在为任何产品构建灵活,可扩展的系统,设计充满信心,可扩展和适应动态内容的元素时,可以像开发人员一样思考。设计人员现在正在尽可能少地进行设计,目的是使开发人员更容易编写文档和实现,并使未来的修订更容易处理。嵌套符号和符号覆盖使Sketch成为一个非常强大的设计工具,我们正在为我们所处理的每个新项目使用这些实践。

这个过程有两个问题:

  1. 在你去的时候构建一个系统是非常耗时的,因为当你还在设计整个应用程序的过程中,你将花费大量时间重新编辑和改进你的符号,颜色样式和文本样式。一下子刮。

  2. 回过头来修复表面上非常混乱但非常混乱的Sketch文件是非常耗时的,即使你首先使用了一些符号来使事情变得更容易。

一旦这个动态,可扩展的系统到位,它就很容易维护和定制。但到那里提出了重大挑战 - 并且需要进行大量的重构。

重构设计

重构是开发人员的日常实践:“代码重构是重构现有计算机代码的过程 - 改变因子 - 而不改变其外部行为。重构改进了软件的非功能属性。“(谢谢,维基百科!)

设计师习惯于逐步完善设计。我们通常更愿意将其视为更大设计流程的一部分。但我经常努力向我们的开发人员说明为什么设计还没有为文档做好准备,以及我通过'精炼'设计到底做了什么 - 以及为什么到目前为止,当comps看完之后它已经花了很长时间。然后我意识到我已经在做什么了。“重构”清楚地表达了清理草图文件,重新命名和重新组织符号结构以遵守DRY(不要重复自己)和KISS(保持简单,愚蠢:)的原则。更重要的是,这是一个与我的开发人员立即产生共鸣的词。

这似乎是语义问题,但以这种方式解释设计过程的这一步骤有助于改善设计与开发之间的沟通,甚至可以更容易地向更加技术导向的客户解释我们的过程。

解决设计债务问题

那么,我们如何重构我们的设计呢?

  1. 一致的色彩。将所有视觉元素和类型元素拖动到一起并在视觉上比较它们以找出不需要的额外阴影,然后将它们修剪掉。

  2. 系统化类型。将所有唯一类型资源拖动到一个位置,然后修剪fat以创建多个全局类型样式,然后运行整个应用程序并普遍应用它们。一块一块。确保类型样式被恰当地命名 - 由于某些名称更容易与本机iOS可访问性快捷方式集成,因此有一些不同的思想流派  ,但是现在我发现通过基本属性命名类型样式很有用,而不是通用“身体”或高度特定的位置/功能名称。

  3. 策划,重命名和重新组织符号。摆脱不再使用的额外符号,花些时间确保所有符号资产都落在全像素上,以避免出现奇怪的抗锯齿问题。为符号创建命名系统,以便于查找和替换它们。此外,您应该花时间指定符号的大小调整规则,这样当您必须将此设计从移动设备转换为平板电脑时,您不必重新设计所有内容。哦,你可能想安装Jason Burns的神奇Symbol Organizer插件。

  4. 用符号替换任何落后者设计元素,并仔细检查所有测量值。这需要时间和耐心,但逐屏幕,并确保您的重复设计元素被标记出来。Sketch Runner是一个非常棒的Sketch插件,可以让它快速下降符号。这也是确保您的符号全部在网格上的理想时间。我们喜欢在8pt网格上工作 - 4pt以获取详细信息 - 并且有一些有用的工具可以将您的默认微调数量转换为草图中的8pt(因为Bohemian Coding在2017年5月未添加自定义微调值作为功能) 。

  5. 生成样式指南。有很多工具可以自动完成这个过程,但我还没有找到任何完美的工具。我仍然想为颜色,类型样式和图标生成自己的拉片。

这些是我每次需要快速重构设计时遵循的基本步骤。这是一个不断发展的过程,它肯定会改变 - 但到目前为止,它是为了更好的文档,更快乐的开发人员,以及更容易的时间进行更改和提出全新功能。如果你也做了这种工作,并有任何其他建议的做法,请在评论中发声!

游客