界面设计规范:历经实战,我总结了四个经验

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


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

界面设计规范:历经实战,我总结了四个经验

一、设计规范的共性

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

二、设计规范有哪几类

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

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、小众人群

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

 

作者:雨涵_Zoe

来源:http://www.jianshu.com/p/637456fd3f31

本文由 @雨涵_Zoe 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26375/

(0)
CatherineCatherine
上一篇 2017-05-14 04:31
下一篇 2017-05-14 06:22

相关推荐

  • 交互实战|Web端表单项目总结

    本文作者分享了其所参与的Web端表单项目,enjoy~在拖放期间,需要处理许多特定的状态。我们把这些状态称为趣味瞬间(interesting moment)。书中提到,趣味瞬间是由15个事件与6个相关元素组合而成。

    2017-04-29
  • 6周锻造1名优秀的产品设计师

    金牌讲师: 杨老师(某大型央企交互设计主管,前网易、腾讯交互设计师) 从业7年多的交互设计老司机; 出身北邮设计艺术学硕士专业,经历网易、腾讯及某大型央企设计部门锤炼; 开课至今,已经培养了近100多名优秀…

    交互专题 2017-08-07
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • 度秘一下不如营造情景,一个产品的服务分发应该怎么玩?

    刚刚落幕的2015百度世界大会,百度推出了秘书化搜索工具“度秘”。这是李彦宏在宣称All in O2O后,做出的最符合百度风格的一件事情,也是百度希望能继续主导服务分发的尝试。

    2017-06-04
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 移动应用设计的最佳实践

    移动应用现在是提供内容和服务的主流方式。但在热闹的移动应用市场,面对五花八门的各种APP,如何让你的APP受重视,脱颖而出得到用户的青睐?留白应该作为一种主动的元素,而不是作为被动的背景——Jan Tschichold温馨提示:创建最好的移动应用消息策略应该用不同的通知类型——推送通知,电子邮件,应用内通知和新闻源消息。多样化你的通知类型——你的通知工作应该完美协调,创造最佳用户体验。

    2017-05-14
  • 【10min学交互设计精髓】做产品要有风度(9)

    图片来源于网络小伙伴萌,有一周没见了,有没有想我呀~~快来看看今天咱们讨论些什么,有任何想法和建议都可以给我留言哦。我们常常谈起情商,人与人的相处方式。作为pm,有没有想过产品和人的相处方式呢?这个课题…

    2017-08-01
  • 从用户体验设计的角度,学习服务设计的思考方式和闪光点

    初学服务设计,读了一本好书——《This is Service Design Thinking: Basics, Tools, Cases》(by Marc Stickdorn,Jakob Schneider),推荐并笔记。而本文基本描述了我对服务设计的初步理解,以及服务设计给我带来的在用户体验设计领域的灵感触发。“服务设计是有效的计划和组织一项服务中所涉及的人、基础设施、通信交流以及物料等相关因素,从而提高用户体验和服务质量的设计活动。…… 服务设计将人与其他诸如沟通、环境、行为、物料等相互融合,并将以人为本的理念贯穿于始终。…… 简单来说,服务设计是一种设计思维方式 ,为人与人一起创造与改善服务体验。…… 服务设计强调合作以使得共同创造成为可能,让服务变得更加有用,可用,高效,有效和被需要 ,是全新的、整体性强、多学科交融的综合领域。…… 服务设计的关键是“用户为先 + 追踪体验流程 + 涉及所有接触点 + 致力于打造完美的用户体验”。”——百度百科“When you have two coffee shops right next to each other, and each sells the exact same coffee at the exact same price, service design is what makes you walk into one and not the other.” – 31 volts service design, 2008“However, creativity is not so much a gift as a process of listening to the ideas “flowing” through one’s head and being prepared to articulate them.”

    2017-05-07
  • 网页设计中视频运用的7个技巧

    随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

    2017-05-08