设计师总结的四个界面设计规范的经验

最近为了设计提高效率和质量，我开始研究如何做规范。看了一圈别人做的设计规范，又回想了一下自己以前做的，总结了以下几个经验。

设计规范的共性

不同的规范虽然内容差别很大，但是对比一下它们的目录，却又很多相似之处，通常包含：布局、组件、配色、图标这四部分。组件里的分类无非是导航、菜单、表单、列表、表格、按钮、弹出框诸如此类，我就不一一列出了。

设计规范有哪几类

总体看来，我发现这三类设计规范出现概率很高：

1、给产品经理看的

IOS和早些年的Android(现在已经统一改用Material Design)设计规范就属于给产品经理看的，里面写的东西大多围绕如何选择大的方向、哪种处理方式更加合理展开的，界面细节却没有详细介绍。

这种规范适合用来做演讲，内容不多，都很有道理，参杂这很多创新的功能。而拿着它做设计却很痛苦，因为它不告诉你如何才能达到理念中所勾勒的那个目标，图标、尺寸、陪色、字体……很多东西都不明确。

2、给设计师看的

这种规范通常的好处是内容很丰富、图例很多、建议比较详细，能够让设计师以此为基础发挥自己的创造力。Material Design就属于这一类，而且里面很多1:1的范例可以直接拿来做参考这点非常感人。

但这种规范也有不足之处。一是它缺乏针对具体场景的规则，常常把所有可能用到的元素都拿出来一一细说，然而却不告诉你应该在什么场合使用什么。二是容易理想化，因为做这种规范的人通常是纯粹的设计师，所以里面很多设计想法未必有足够的可实现性，或是一些创意未必经得过实践的考验。Material Design里面很多看起来简单的设计其实是很难实现的，例如用分辨率敏感的dp取代像素单位其实大部分情况下很难实现。

Material Design的文本框中，说明文字会变换位置和大小，排多了看起来会很乱。

3、给程序员看的

这类不太关心布局、交互、配色等细节，而是告诉读者他们能做出什么东西，怎么做出那些东西。这类规范笔我原本预想的要多很多，其中令我印象最深刻的是Windows Phone的设计规范，因为我本科时参加过微软创新杯(还得了全国一等奖)，为了设计比赛作品我曾花很大精力研究过这个规范(当时英语又烂)。程序员的队友都称赞Windows的设计规范有多好多好，只有我觉得用起来无比痛苦。现在想来，Windows Phone的设计规范虽然称之为设计规范，区别于Windows Phone的开发规范，但它完全是个教程序员如何实现各种界面的指南。产品经理可能还可以用它来看看页面类型，对设计师来说却没有太大帮助。

这种规范对于不需要设计师的场景还是非常有帮助的，比较相比前两种，这种的可实现性非常高。

设计规范的选取

我认为上文提过的三种设计规范都很重要，且适用于不同的场合。第一类给产品经理看的规范适合设计初期，确定理念、报告思路阶段。第二类给设计师看的规范适合在设计定型阶段，这个时候界面具体长什么样已经确定了，但是未来的实施过程还会带来一些不确定因素。第三类规范适用于开发阶段，根据界面来规范代码，能够大大提升前段的开发效率。

设计规范的常见遗漏

由于第一类规范的内容要求不多，所以这里的遗漏主要针对后面两类。

1、文本格式

设计师常过分专注于画图，而忘记了文字也应该有所规范。例如，日期可能的格式有很多，例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。再比如说单位，是用“大小：100M”、“大小：100兆”还是“大小(M)：100”呢?

这些文本格式定义起来并不花时间，可是如果没有规范的话，可能同一个东西在每个页面的展示方式都不一样，对用户来说也挺烦的。

2、特殊状态

做设计和做规范的区别是，做设计时，只有在知道某个东西有某个状态时，才会去设计那个状态;做规范时，通常要假定所有数据和操作都有状态，不同东西在不同地方的同类状态最好能够统一。

所有操作都可能失效，不管是按钮、链接、输入框、下拉菜单……什么情况在失效时显示失效状态，什么时候完全隐藏该操作，这些都是可以统一考虑设计的东西。

所有的操作都可能出错，尤其是输入框的出错率极高。如果出错了，如何告诉用户哪里错了?如何纠正?由此还可以联想到，如何在一开始就避免用户犯错?

所有摆放数据的地方都有可能没有内容，也许是列表为空，也许是字段为空。这种情况该如何明确又美观地告诉用户这里没有内容不是网络问题也不是系统问题?

△ 页面没有内容的显示效果

所有内容都有可能出现异常，网络不稳定、格式不支持、系统出错等。这种状况如何明确又美观地告诉用户可能是哪里出现问题，如何补救?

成功也需要有成功的状态，有些时候页面不止一项任务，第一项成功了，第二项失败了，用户走到第三项时不一定还记得第一项是成功的还是失败的。

3、多级多选和过量

一个灵活的界面规范能够应对大部分的内容变化。例如导航和菜单的项目数量和级数通常是不确定的，下拉选框也不一定只能勾选一项内容。更灵活的情况还有，一篇文章可能长达数十屏，这时该自动识别文章内的标题并生成目录，还是分页展示?

4、使用指南

使用指南是设计过程中通常被拖到最后才想起来的东西，在规范里也常被忽视。其中最重要的是用户首次使用时看到的操作指南，这种操作指南可能不只在首页出现，并且未来可能随着设计的变更而变更，所以这种首次使用的操作指南是很有必要做成规范的。

△ 首次使用的操作指南

此外，使用过程中，在关键时候出现的操作提示也可以有规范。例如用户进入一个新功能时，可能会出现该功能的介绍。

5、尺寸适配

响应式界面已经被说了这么多年了，而被明确放在规范里的，除了Material Design之外还真是很难找到了。如果你想了解响应式界面，可以看我之前的文章《设计响应式界面该清楚哪些》。响应式界面有很多分类和实现方式，不论是视觉、交互还是前段都有所涉及，每个页面和元素都可能根据实际情况需要特殊处理，这也是为什么响应式设计很难定制规范。

△ 响应式界面：如果是页面是容器，内容就像水一样

除了整个页面的适配之外，小的组件也最好是可能变化尺寸的。例如同一张图表，可能被放在一个很空旷的页面，也有可能被放在一个很拥挤的页面，需要调整尺寸时，哪些可以缩放哪些不能缩放，对其的中心是什么……这些如果能够明确，设计将会变得越来越像拼图。

除了整个页面的适配之外，小的组件也最好是可以自动调整尺寸。例如同一张图表可能被放在一个很空旷的页面，也有可能被放在一个很拥挤的页面。组件需要调整尺寸时，哪些可以缩放哪些不能缩放，对其的中心是什么……这些如果能够明确，设计将会变得越来越像拼图。

6、动效

动效也火了很久了，但是似乎还是停留于表面，缺少一套可依赖的标准。动效师并不好当，既要有超高的编码能力，又要有敏感的美学神经。也许就是因为这么困难，才导致大部分设计规范即便包含动效这一目录，里面填充的内容也非常模糊不清。

7、音效

大部分应用是没有音效的，因为音效很容易让人厌烦，而且节奏不好把控。但是对于音乐、视频等媒体应用，音效的发挥空间却很大，至今尚未开发。

撇开这些不谈，如果有音效，何时使用何种、多大音量、时长多少、震动模式(手机)时需不需要震动反馈，很多东西都可以考虑。

8、手势

和键盘的快捷键一样，偏爱触屏手势的也大有人在，而且手势也能让产品更加独特。如果允许使用手势，这部分也可以有所规范。

9、国际化

如果界面上的语言种类不止一种，那么如果文字转换后过长或过短怎么办?用户在看不懂当前语言的情况下如何切换语言?不同的语言该选择什么字体才不至于太难看(例如中文的默认字体通常是宋体)?

10、小众人群

虽然我们最关心的还是主流用户，但是很多小众人群组合起来也是可以构成一定分量的。例如，触屏应用能不能给左手使用者舒适的体验?桌面应用能不能够让没有鼠标或是没有键盘的人使用?色盲和色弱能区分界面上的色块?视力较差的人能不能放大字。