行业信息 如何做界面设计规范?

如何做界面设计规范?

2018.12.26
深圳界面设计

最近为了界面设计提高效率和质量,我开始研究如何做规范。看了一圈别人做的设计规范,又回想了一下自己以前做的,发现了有趣之处。


设计规范的共性

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


1、给产品经理看的

iOS和早些年的Android(现在已经统一改用Material Design)设计规范就属于给产品经理看的,里面写的东西大多围绕如何选择大的方向、哪种处理方式更加合理展开的,界面细节却没有详细介绍。这种规范适合用来做演讲,内容不多,都很有道理,参杂这很多创新的功能。而拿着它做设计却很痛苦,因为它不告诉你如何才能达到理念中所勾勒的那个目标,图标、尺寸、陪色、字体……很多东西都不明确。


2、给设计师看的

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


3、给程序员看的

这类不太关心布局、交互、配色等细节,而是告诉读者他们能做出什么东西,但它完全是个教程序员如何实现各种界面的指南。产品经理可能还可以用它来看看页面类型,对设计师来说却没有太大帮助。这种规范对于不需要界面设计师的场景还是非常有帮助的,比较相比前两种,这种的可实现性非常高。


设计规范的选取

我认为上文提过的三种设计规范都很重要,且适用于不同的场合。类给产品经理看的规范适合设计初期,确定理念、报告思路阶段。


第二类给设计师看的规范适合在设计定型阶段,这个时候界面具体长什么样已经确定了,但是未来的实施过程还会带来一些不确定因素。第三类规范适用于开发阶段,根据界面来规范代码,能够大大提升前段的开发效率。


1、文本格式

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


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


2、特殊状态

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


所有摆放数据的地方都有可能没有内容,也许是列表为空,也许是字段为空。这种情况该如何明确又美观地告诉用户这里没有内容不是网络问题也不是系统问题?所有内容都有可能出现异常,网络不稳定、格式不支持、系统出错等。这种状况如何明确又美观地告诉用户可能是哪里出现问题,如何补救?成功也需要有成功的状态,有些时候页面不止一项任务,项成功了,第二项失败了,用户走到第三项时不一定还记得项是成功的还是失败的。


3、多级多选和过量

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


4、使用指南

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


5、尺寸适配

响应式界面已经被说了这么多年了,而被明确放在规范里的。响应式界面有很多分类和实现方式,不论是视觉、交互还是前段都有所涉及,每个页面和元素都可能根据实际情况需要特殊处理,这也是为什么响应式界面设计很难定制规范。


响应式界面:如果是页面是容器,内容就像水一样

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


6、动效

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


7、音效

大部分应用是没有音效的,因为音效很容易让人厌烦,而且节奏不好把控。但是对于音乐、视频等媒体应用,音效的发挥空间却很大,至今尚未开发。撇开这些不谈,如果有音效,何时使用何种、多大音量、时长多少、震动模式(手机)时需不需要震动反馈,很多东西都可以考虑。


8、手势

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


9、国际化

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


10、小众人群

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


总结:通过研究界面设计规范,我发现了很多自己之前没有想到的东西,也发现制定规范却是能够大大提升效率,不论是对团队中的哪个角色来说。你对于设计规范有什么心得和想法呢?来源于:www.lampard.cn   深圳界面设计