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

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


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

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

一、设计规范的共性

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

二、设计规范有哪几类

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

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

相关推荐

  • 交互设计新人必看:怎样让你的线框图发挥出真正价值?

    当一个想法出来之后我们都知道先用线框画下来,但是画着画着,总觉得不对劲,总觉得加上视觉元素之后才能真正看出效果来。原作者:Dustin Senos翻译:zhuyuxuan地址:http://www.ui.cn/detail/148272.html转载请经…

    2017-08-01
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • 弹窗设计的5条基本原则

    当你将弹窗设计 及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

    2017-05-22
  • 订阅渠道

    一些第三方媒体渠道大家需要的可以订阅我是UE网最新文章,订阅阅读交互设计教程文章 微博:http://t.im/iamuewb 微信:http://t.im/nw5y 网易云课堂:http://t.im/iamue 网易云阅读的:http://t.im/iamue1 或者:ht…

    交互设计 2015-06-30
  • 运营设计常用“套路”拾趣(附实战案例)

    阳春白日风花香,又是一年芳菲至,在这最美的时节,各种运营活动又开启了,就此从视觉角度结合实战案例的小心得,对运营设计的“套路”浅谈一二。罗伯特.庞德说过:“这是一个两分钟的世界,你只有一分钟展示给人们,另一分钟让他们喜欢你。”

    2017-04-30
  • 为熟练用户设计:如何设计才能帮助用户提高使用效率?

    本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

    2017-05-19
  • UI设计案例分析:现代互联网和移动应用中出现的一些优秀的用户界面模式

    在这篇文章中,来自UXPin(一款用户体验设计的应用程序)的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式,并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

    2017-06-05
  • UED设计流程与原则

    UED设计流程在各个公司之间可能存在不同,国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等,其中的经验值得读者借鉴。 来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问…

    交互设计 2015-04-20
  • 应用中的游戏化设计

    作者:_Ammy   游戏借着其互动性、反馈性、挑战性、快速成长性等特点,拥有着让玩家长期专注于其中的神奇力量。而若将游戏的这些特点引入到一般的产品设计上,也可能会产生意想不到的效果,这就是游戏化。游戏化的…

    交互专题 2017-08-07
  • 不会编程?Axure一样可以做网站

    说起Axure,做产品的朋友再熟悉不过了,它是我们在日程工作中最常见的原型制作软件之一,今天分享的文章,主要是教大家如何使用Axure打造简单的个人网站,不会编程我们依然可以做网站。接下去将分为几个步骤去阐述:1. 这些我们必须知道的小知识axure是可以生成html文件的,这为我们使用它来制作网站提供了可能性axure只能搭建小型的个人网站 ,他不具备数据库,比较适合做展示类的网站和普通网站构建一样,我们需要购买域名和购置虚拟服务器2...

    2018-03-04