让 UI 设计流程更标准

1,543 阅读7分钟
原文链接: mp.weixin.qq.com

四年的界面设计经验让我著迷于整理、整顿资讯,让我想出一套在设计 UI 时的系统方法。


这是一个属于物件导向、来自程序设计的方法,以许多为人熟知的想法集合而成。可以搭配你最喜欢的设计软件或写程序工具使用。它让设计师与工程师搭档合作,且都进入同一个状况:更好的沟通,就可以有更好的理解,造就更好的产品。


这个方法主要用在设计的后期阶段,有充裕时间思考视觉系统 (visual system) 物件的关系时,藉以调教专案。利用在早期的产品原型或 wireframe 阶段代表更容易用于设计和程序。


当然,将视觉元素整合到设计流程的概念不是什么新玩意。Material Design、SCSS 变数、Macaw、Origami 和原子设计 (Atomic Design) 等套件启发我的想法。


我要的很简单


当进行一个大型专案的时候,我真是受够 Sketch 缺乏结构的设计流程。即使最近的更新(像是 Nested Symbols)和样式外挂 Craft 确实让情况有些正面进展,但是仍还无法到达完美无瑕工作流程的的要求。为了让我的诉求更明显,以下有几个案例:


变数 (variables) 的清楚概览


我想要有更清楚的总览,可以看到我已经用了哪些圆角、字形大小、文字和背景颜色,避免搞出 20 种文字大小和灰色的五十道阴影。

这些一团乱的是什么鬼?


样式的分类方法 (grouping)


修改变数后,设计的哪些部分会跟著改变?我想要定义特定场合适用的字型。为了确保可读性,UI 使用无衬线 (sans-serif),而有衬线 (serif) 用在大字体。另一个案例:使用了两种字型样式,一种给亮色背景;一种给暗色背景。

诶⋯怎么判断字型使用的场合?


变数的配对


我要所有 16 像素的 Karla 字型是 1.2 倍行高,不管是一个段落、一个便签、项目的说明或引言。

试著维护同样的字体粗细及行高组合很痛苦。


修改只有用一次的变数


已经有 50 个以上 Artboard 的专案进行到一半,我想要做小小的修改,但是不想要让他们全部都一起变。比方说,我想要修改一个头条文字的字型,但是所有的头条文字都一起同步变化。

人家只是想要换头条文字的字型⋯


我发现在每个专案都得要重复做一样的例行事务,像是主要文字颜色、次要文字颜色和不开放的文字颜色。还发现根本无法掌控我做的视觉阶层 (visual hierarchy)。这就是我尝试将修改自动化的最重要原因。


基本原则


每个东西都是物件 (objects)


每个版面是物件组成的:标题、页尾、头条文字、按钮、下拉选单和连结。你可以把这些物件当做独立的个体,进行各自的设计。


每个东西的特征


每个东西都有它们自己的特征 (properties),头条文字有它自己的颜色、大小或行高;每个按钮都有特定的大小、背景颜色或字型。它们的代码就是这样运作,所以在设计时为什么不这样思考?


特征的继承


好玩的来了。你做了一些基础建设,用变数的方式建立一组调色盘 (swatches),例如 $font-size-s、$grey-500、$border-radius-s、或 $sans-serif,这些变数资料库集合成所谓的视觉阶层。

 一些基本要素


接著建立一些分类 (categories)变数,像是 $font-size-main、$color-link-secondary、$border-radius-secondary 或 $font-headlines。它们的角色就像基本调色盘和物件的中间人。把它们用在不同场合,跟使用 SCSS 时一样。


最后,将那些继承变数用在物件上:按钮、段落、头条文字、清单项目名称、清单项目描述、引言等等⋯。然后就:

 

准备好所有事情


你可以设计物件的类型(主要、次要、单色或外框的按钮)或状态(不能使用、一般、移入的按钮)。这有点复杂但是不会花太多的时间,这可以让你获得充分的准备,之后的你会感谢现在的你。

设计物件的任何可能类型


如何使用?


刚开始,整理好然后开始思考它们之间的关联。下一步是改造或加强使用的工具,让这套系统更好用,也就增进我们的工作效率。


例如:在 Sketch,样式不能像 SCSS 一样继承。这就是为什么我会把所有视觉组合都都建立视觉样式。

我为所有用到的视觉组合建立视觉样式。


只是要修改清单项目描述的话,无可避免地我会把所有相同样式的物件改变,我只是想要修改某一个而已。我得要一口气改变所有使用 的物件。

想像一个结点 (node-based) 编辑器(比如说 Mindnote),你可以快速检视和维护专案的视觉关联。它还可以读取 SCSS 档案、连结 Sketch,可以直接更新你的共用样式。

像这样的节点编辑器对于维护视觉阶层有帮助。


使用案例


字型


用 $sans-serif 当作 UI 和头条文字,$serif 当作长文用,还有 $display 在少数场合使用。


字形大小和行高


在这个案例,行高都是固定和特定某个字型、某个大小搭配(例如:每个 12 像素大小的 Karla 必须 1.8 倍行高;14 像素大小的是 1.75 倍;16 像素的是 1.6 倍⋯等等)。你可能觉得它们是不同的,其实无可避免地有关。请记得:因为视觉比例的缘故,较大的文字需要较小的行高。还可以个别设定单行(行高:1)与多行的物件,这样就可以正确设定内边界 (padding)。


颜色


就像我刚刚提到的,选择 UI 字型样式的颜色时,总是需要一些基本、次要、不开放场合使用的颜色,它们在整个专案也有延续性。


把你使用的颜色调出不同的明暗当做基本色盘,在色环的底端找出更多不同的明暗色调:之后不管在明亮或暗色的介面都可以有更精致的细节。


为何有这样的想法

 

更容易维护


建立一组关联和样式的系统让你可以对作品更了若指掌。物件的分类 (collection) 可以当做概览或文件,让你可以很快修改。将一些物件放在一页篇幅的内容,比起完全从零开始容易得多。有好一段时间没碰到的专案或可能你得要将它交接给另外一个设计师时,建立新的设计也会比较简单。



看起来更一致


用物件和参数的方式做成基本集合,让你用更少种类的段落、标题、页尾、弹出视窗、按钮或清单项目,而如果你从完全空白开始,那就会用一大堆。先在资料库中抓出来,如果真的不行,那才建立新的物件。你的作品看起来更为一致,再也不会有「六种几乎一样的文字颜色」的情况。


更容易理解


一致性对于使用者也有好处。一组 UI 里面,恰好数量的样式不会让他们觉得眼花撩乱。说到「恰好数量」,我的意思是:介面的复杂度,决定简易的程度 (level of simplicity depends on the complexity of an interface),只用简单的设计让你非常有可能搞砸复杂内容的页面。


案例档案

 

建造视觉阶层的方法有千百种,你可以从这里下载我的 Sketch 档案当作案例。(得要用到 Karla 字型,它可以在 Google Fonts 下载。)


祝你玩得愉快!


如果喜欢我们的文章欢迎分享同时也别忘了关注我们,持续为你分享设计文章。文章仅供学习有任何建议,转载或投稿欢迎来信:zovy123@qq.com  😊