用户体验设计的核心词在于用户,我们在进行用户体验设计时,需要以用户为中心进行设计。一般来说,人们在一个熟悉的环境中会感到安全和舒适,而在一个陌生的环境中往往会觉得紧张与拘束。如果把这一情况放到用户体验设计中同样成立,我们在进行产品设计时,应尽可能降低用户的学习成本,而降低用户学习成本最好的方式便是以用户熟悉的方式进行产品的设计——这便是遵循设计规范进行设计的好处之一。
而另一方面,产品的最终使用者是用户,对用户来说,可用性是他们选择使用一款产品最基础的条件,对于用户体验设计师来说,在充分了解各平台设计规范后进行设计,是保证产品可用性的基本前提,这也是为什么了解设计规范,是用户体验设计师必备的入门基础知识。
一般来说,设计规范是一份文档说明,可以是网页版的,也可以是某一具体文档版的。在设计规范文档里,会涉及到如该平台的设计理念、界面布局、设计控件和其他相关信息,设计人员在看完该文档后进行的设计,能够具有该系统的部分共性的特点——在如平面设计等视觉为主的设计领域,千篇一律是非常不应该的,但是在交互或者UI设计领域,一个界面中若有系统共性的元素存在,是能降低用户的学习成本,提升用户体验的。这一共性特点可以是设计规范中推荐的设计方案,也可以是直接对官方控件的引用。
设计规范并不是一层不变的,会随着系统的升级而同步更新,即使系统并未升级,官方也不定期会对其进行修订,所以不定期的,特别是在每次新系统发布会后第一时间去查看设计规范是非常有用且有必要的。下面是几大常见系统的设计规范的获取地址。
1、Windows系统
如图所示,是Windows系统官方的设计规范。
该规范的地址为https://developer.microsoft.com/en-us/windows/desktop/design,一般来说,设计规范都可以在对应的开发者网站中找到,而开发者网站一般是http://developer.xxxx.xxx,从Windows的设计规范中可以看到,规范分成三部分——Design a great UX、UX Checklist和Create a winning UI。覆盖从UX到UI的范围,在规范的下面,可以看到是特别针对触屏的说明。
从Windows 8开始,具备触屏功能的PC电脑开始普及,不同于如iOS操作系统是从一开始就是为触屏而生,Windows最开始并不具备触屏功能。从这里可以看到,一个好的用户体验,是需要根据用户的交互行为进行思考。
Windows操作系统到目前为止,支持的交互行为包括:键盘、鼠标、触控、触控笔以及无障碍方式,其中无障碍是指针对对视觉和听觉受损人群而特别提供的,这个并非所有软件都需考虑。关于交互行为的具体内容可以查阅https://msdn.microsoft.com/library/windows/desktop/dn742463.aspx。
到目前为止每次Windows随着系统版本的升级,均有较大的变动,对应的设计规范也一定会发生变化,建议大家在每次有Windows新版本发布后,第一时间查看设计规范的网页,看是否有更新。
2、Mac OS系统
Mac OS系统的设计规范,被苹果命名为《OS X Human InterfaceGuidelines》,大家可以在苹果的开发者网站https://developer.apple.com中找到,如图所示。
该规范的地址为https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/,可以看到这个地址非常的长,不排除苹果在后续更新此设计规范时对地址做一个变动。为了防止地址变动,下面对如何从开发者网站中找到该规范入口做一个简单说明,除了Mac OS系统,所有与苹果相关的系统的设计规范以及其他文档均能使用该方式找到。
首先在浏览器中输入苹果开发者文档的网址,https://developer.apple.com/library/,如图所示。在该页面中,包含了苹果所有的系统平台,如iOS、OS X(即Mac OS)、watchOS和tvOS等。
其次,找到需要寻找的设计规范对应的操作系统,在每个操作系统下会有一个连接,这里以Mac OS系统为例,单击OS X Library蓝色连接,跳转到如下图所示界面。
在该界面的右上角的搜索框中,输入关键词,如“Human Interface Guidelines”,然后按下回车,跳转到如下图�所示界面,第一个连接即Mac OS系统的设计规范。除了通过系统的搜索框查找外,还有更快的速度是在图2-17所示界面中,直接按下command+F(Windows系统中是ctrl+F),在浏览器最带的搜索工具中在当前界面搜索关键词,也能很快找到该文档。
苹果的设计规范除了提供网页版的文档外,还提供iBooks格式的文档,大家可以使用iBooks应用,在图书商店中进行搜索即可找到。方便日后离线阅读。
苹果的设计规范均采用左右布局,左侧是菜单导航,右侧是正文,非常清晰直观。在苹果的设计规范中可以看到苹果的设计哲学和设计理念,认真阅读并深入思考能够帮助我们研发出非常优秀的产品。
3、iOS系统
iOS系统的设计规范的入口寻找方式和Mac OS非常相似,如�下图所示。
该规范的地址为https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/,经过多年的发展,该规范现在已经相当成熟和完善,在该规范中包含了苹果在移动设计方面非常优秀的设计理念,应是所有移动平台研发者的入门必读物,该规范每年也会随着iOS系统的升级而更新。
前面有提到,好的交互以及好的产品应该和其所运行的硬件充分融合,要善于利用最新的硬件技术。在该规范中,有专门一章为《iOS Technologies》,在这里会有对iOS硬件设备的技术有详细介绍,每次有新的设备发布时,建议大家来看看是否有更新,来加深我们对新的硬件设备的理解。
目前该规范已经有第三方团队翻译的中文版,如腾讯的IXUS团队便有将该规范进行翻译,大家可以很容易在网上找到,对于英语阅读困难的同学来说这无疑是一件非常好的事情。
4、安卓(Android)系统
从2013年谷歌推出Material Design后,官方变把这一设计规范作为安卓系统的设计规范,但是需要注意的是,原生的安卓系统以及谷歌研发的APP如Gmail等采用了Material Design外,目前在安卓系统上还有非常多的APP并未遵循该规范进行研发。
关于Material Design之外的安卓设计规范我们会在下一节中详细介绍到,但是在此之前,了解并熟悉Material Design是非常有必要的。“Material”是材料的意思,该规范认为界面中的任何元素都可以如真实世界材料一样,在界面中通过投影和运动的变化,来体现彼此的层级和高度,相比其他的设计规范,Material Design会多一个空间的纬度,Z轴。Material Design设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引。
对于大部分设计师来说,该规范是全新的产物,也正因为这样,我建议不管各位是否需要研发遵循Materal Design设计的产品,都应该详细了解该规范。在我看来,该规范对于合理动效的理解,让我们在任何平台上进行设计时都可以从中借鉴。
并且Material Design是一套跨平台的设计规范,该规范对于我们进行跨平台产品的设计时,也有着非常积极的参考意义,如�下图所示,是该规范的官方网站,可以看到官网的设计便遵循了该规范,并且该网站是响应式网页站,当我们将浏览器窗口变窄时,菜单会自动隐藏起来。
该规范的地址为http://www.google.com/design/spec/material-design/,非常幸运的是,1sters团队已经将该设计规范翻译出了中文版,现在该规范的中文版已经托管在计科学院Wiki平台上,地址为http://wiki.jikexueyuan.com/project/material-design/,但是中文毕竟非官方产物,存在一定的滞后性,如果英文阅读能力没问题的同学,建议还是直接阅读官方原版。
如果初次阅读该规范的同学会有难以理解的感觉,最好的办法是多使用安卓设备,特别是Nexus系列采用安卓原生ROM的移动设备,并多使用采用Material Design设计的APP,实际操作再结合文档,相信一定能对该设计规范有个非常好的理解。
5、Web平台设计规范
Web平台并非一个固定的系统平台,在本书中所指的Web平台是指使用HTML5/CSS3技术来编写的应用,这类应用本质上是一个网页或者网站,不受系统以及设备的限制,理论上可以在任何设备上使用。所以实际上并不存在一个具体的固定的设计规范。
但是对于用户体验设计师来说,因为Web应用具有跨平台以及兼容性的特征,如果要让用户在不同的设备上实现无差异的体验,还是有一些需要注意的事项。
首先是响应式的设计,虽然从理论的角度,移动设备和桌面设备都可以浏览访问同一个Web应用,但是为了获取更好的体验,还是应针对不同的设备设计不同的界面,且这些界面彼此之间的切换应该是自适应的,这些界面中绝大部分内容是相同的且界面切换是有一定逻辑可循的。如图所示,是华为的官网首页在桌面端和移动端的显示效果,并且当我们在桌面平台上将浏览器的宽度进行缩放时,可以看到相互之间的一个转化。而如果对于Web-APP,一般来说就针对不同设备类型进行单独设计即可,如移动端、平板端和桌面端,也可以根据产品的实际需要,只进行某一个端的设计。
其次是当用户进入到某一界面,应该让浏览器自行判断用户当前所使用的操作系统,然后自动显示针对该系统进行信息的展示,一般对于应用程序的下载界面的设计尤为突出。如用户需从该界面下载某一应用,用Windows电脑访问该界面应自动跳转到该应用的Windows版本的下载界面,如果用Mac电脑访问该界面应自动跳转到Mac版本的下载界面,如果是iOS设备访问应自动跳转到iOS版本的下载界面等——可能有朋友会问,既然iOS的应用程序都是从App store下载的,为什么不直接跳转至App store?这是因为在进行界面设计的时候,帮用户进行判断是一方面,另一方面需要同时保留用户自行选择的权限。如下图所示,是Adobe Experience Design的官网,使用Windows系统电脑访问该界面的显示,可以看到banner下发蓝色横条上不是下载按钮,而是登录按钮,并对情况进行说明,实际上用户登录后依然可以下载到Mac版的安装包,并且除了这里,在右上角也很明确地有针对Windows系统的说明按钮。
最后是,对于Web-APP的设计,绝大部分产品都会选择Web-APP和原生的APP设计成相同的界面,这样做一方面能够节省开发成本,另一方面能够降低用户的学习成本。但是需要注意的是,Web因为其自身的一些特点,在某些情况下,为了更好的用户体验,并不特别建议直接采用和原生APP完全相同的设计,在以下一些情况需要特别注意:
1、Web相比原生APP,对网络的要求相对较高,需要考虑加载素材的大小;
2、Web相比原生APP,更容易发生误操作,误操作发生后返回成本相对原生APP更大,所以应尽量避免误操作的出现;
3、Web相比原生APP,对硬件的利用率没这么高,若加入过多的动效会可能导致一些卡顿等情况的出现,若出现了这种情况,一般应选择流畅度优先。
最常见的例子,如当Web-APP在微信中打开时,需要注意微信左上角的返回按钮,这时候应尽量避免不要把按钮设计在界面的左上角。
以上是对于常见平台的设计规范的获取和简单地介绍。好的体验设计,往往从规范中来,到规范中去。
制定设计规范的初衷,是为了更好地用户体验,深入了解规范后,进行设计时,心中有规范,却高于规范,是所有的每一个我们,所应追求的高度。