说在前面的话,UI设计是需要去实践,去尝试,去做出东西的职业。只有真正去做了,才会发现问题,才能将理论切实的运用。因为它涉及太多内容了,所以一开始是不可能思考的面面俱到的,做得多了,将它们变作一种本能思考,才是最好的办法。
我的第一个虚拟app名叫酒友,做的第一个界面就是它的主页。当时花了很多的时间去思考,也体验了很多酒类app去借鉴,设计出来之后自我感觉良好,但在陆陆续续把其他界面补全之后才发现,设计生涯第一个界面真的是最丑的。
关于设计规范,我按照自己的理解把它分为两种。一种是系统的总体设计规范,比如苹果的IOS系统就有自己的设计规范。一种是单独产品的设计规范,是设计师在设计某一产品时需要去确定的只应用于该款产品的设计规范,或者换句话说是确定这款产品的总体风格。这一节主要谈一谈第二种。
设计规范包括了许多细节,一些是在用户体验时能直观感受到的,而一些不能。但它们都是为了一个目标而存在,那就是保证一致性,简单说就是保持风格统一。
我们先来说说主色的选择。就拿我的酒友来说,这款app旨在为爱酒人士提供一个可以自发组织线下品酒交流聚会的平台,算是一款交友app。但我一开始就把它定位为用户体量小但身价更高的产品,其注册需要进行资格考评,并有已注册的会员提供的邀请码。这样做的目的是保证该app的用户都是真正的爱酒人士。所以为这样一款app设计UI时,它的主色选择我第一个想到的是紫色,高贵而神秘。当时也有考虑过选用绿色,但绿色和酒类的偏红色调有点相冲,所以便舍弃了。
请注意,这里主色的选择是由产品定位决定的,并不是由产品性质决定的。这个其实都可以,比如同样是交友类的产品,微信主色为绿色,而QQ主色却是蓝色;电商类的产品,当当依然选绿色为主色,而淘宝选择橙红为主色。我个人认为主色的选择是灵活的,没有一个固定的套路(说不定就是公司老大拍脑门确定的),只要选择的颜色不会亮瞎用户的双眼,也不会完全的让用户产生体验上的错觉(比如天气app整个大红主色是要闹啥?),就基本没什么问题。
主色确定以后,要根据主色进行配色,挑选辅助色,点缀色等。相信大家都有过这种体会:有时打开一个游戏,会感觉它的画面看上去很舒服,很和谐。这很大一部分要归功于配色。而杀马特之所以给人很low的感觉,也是它的颜色搭配太冲,太不和谐。其实现在有很多配色的书籍,如果实在不懂配色,可以拿书籍做参考。我认为配色的能力算是审美能力的一部分,它是可以逐渐锻炼上去的,多去留意身边的配色之美。当在某些照片、图片中见到一些让我们感到很舒服的配色时,截图保存,再到PS里用吸管吸一吸,查看一下,再记录下来,这样当我们下次进行配色时就可以拿来进行参考。而要真正去学习配色,我感觉还是有一定难度的,可能还要看天赋。从最简单的色彩组成,到一些色彩心理学,知识点很多。
颜色暂且说到这里。在设计规范中,除去颜色是可以比较直观的在第一时间影响用户的体验之外,还有一个,那就是间距大小和间隔方式。在间距中,又以边距最为重要。如果一款产品的每个界面,都采用不同大小的边距,那后果是很致命的。在之前的章节中也说过,用户在体验时,需要保持一致性。一致性是较大的一个概念,不仅仅体现在边距统一上。但单就边距统一来说,它可以保证用户在使用产品时,基本不会产生:“我刚刚用的是同一个产品吗?”的疑问。如果边距不统一,在切换界面时,尤其是一些产品会要求频繁的切换时,会让用户在视觉上产生错乱,相信我,这种不一致性很影响用户体验。
各内容的间距大小、每个界面中不同类区域的间隔方式的不同,同样会影响一致性,道理和上段所说是一样的。所以在制定设计规范时,请明确边距大小和主要的间隔方式,间距的大小有时无法在最一开始就确定,那么在后期也要进行统一。
在谈到边距那一段,可能有的读者会注意到,我有用到一个词:基本(它可以保证用户在使用产品时,基本不会产生:“我刚刚用的是同一个产品吗?”的疑问)。为什么是基本?因为还有其他影响因素。比如各类互动元件的样式。在同一款app中,我们尽量把所有按钮的样式进行统一(如长宽比、圆角大小等)。一般来说,按钮(默认未触碰状态)的设计有两种:一为颜色填充整个按钮,提示文字基本都是白色(类似面性图标);二为线框版的按钮,提示文字用主色或其他配色(类似线性图标)。那么在设计处于同一状态的各个按钮时,请尽量确保它们属于相同的类型。下两图均选自豆瓣app。
同时,文字的字号大小和选色也是需要统一的。首先,字号的大小可能同样无法在前期完全确定(因为不可能在所有界面中只有一个大小的字号),但也要尽量去确定。在《简约至上-交互设计四策略》中,有一个策略是“组织”,我觉得它同样适用于字号大小的确定。在前期规划时,明确页面中不同内容的优先级,即进行优先级的分类(也就是组织)。
比如,在一个呈现文章列表的页面,其中的文字优先级大体可以这么分:导航栏标题文字>文章标题文字>内容摘要文字>作者ID文字。在分好优先级后,并不是按照这个优先级依次降低字号大小。试想当优先级排序太多时,这种依次降低字号大小的做法必然导致过大的最高优先级(或者过小的最低优先级,这种更糟糕),所以必须考虑文字选色的因素再进行字号大小的调整。先通过优先级的排序大体确定字号上下限(一般20px以下的字就很不好看了),然后确定中间的一些字号。
我个人认为所有界面有3-4个不同大小的字号就可以了,如果3-4个字号无法满足优先级排序(或者同一优先级下需要再次划分先后),那就要通过颜色的改变细分优先级。通常低优先级的字可以改为深灰色(#999999)或浅黑色(#666666)。总而言之,在确保文字字号和选色的整体一致性下,保证内容传达的优先级。
关于设计规范我想说的大概就这么多,写的有点乱了。下一节聊一聊主页设计时的感悟。