人人都爱设计原则
设计原则其实就是对一些设计过程中基于人类的认识规律对设计做出的一些指导性原则,并且对已经成为行业共识的设计经验做个总结,用来指导产品、交互、UI界定问题、提高效率。
首先让我们看一下业内受到追捧的一些设计原则,这里我们叫它“殿堂级的设计原则”。
殿堂级的设计原则
1.可学习性
我们说一个产品如果它的可学习性不强那它绝不是一个好的产品,那么只有说这个产品可学习了,这种产品才是优秀的产品。
所谓的可学习性指的是
1)尊重用户使用习惯和经验,让用户无需思考或简单学习即可操控产品。
比如网易云音乐,它应该是起步比较晚的的一款音乐产品,但是却在短时间之内能够获得比较大的用户市场份额,并且用户口碑非常好。网易云音乐里面有很多值得我们产品经理思考的一些成功的经验,比如说在可学习方面,网易云音乐做的非常好,网易云音乐也是业内首创的一种以胶片式的、实体的老唱片的形式作为对音乐的一种隐喻。为什么要用这种老唱片的形式呢?因为大家觉得有品质的音乐就是应该以这种老唱片的形式播放出来。并且随着音乐节奏的不同,老唱片的速度也会发生不同的变化。这非常符合用户的固有经验,尤其是我们所谓的传统生活、传统行业、现实生活中的一些经验都能平移到我们互联网的一些产品经验里面。这时用户在使用一款新的产品的时候,哪怕他没有任何经验,他只要有这种现实生活经历,就能够把这个页面和我们现实生活当中播放有品质音乐的那个场景联系起来,就能达到我们所谓的效果,即“无需思考、简单完成任务”。
2)明确当前所在位置,知道当前能干什么、接下来要干什么,能快速辨别界面中的元素并明白其功能。依旧以网易云音乐举例,当前出来一个单曲的播放页面,这页能播放音乐、暂停音乐、下载、评论等。
3)设计合理的隐喻、提示。比如网易云音乐的暂停键就可以对应以前的收音机、录音机。
2.一致性
一致性值得是减少用户学习的成本,培养用户习惯,体现产品设计的严谨。可由以下几个方面达到一致性:
1)交互逻辑的一致性:比如列表页点击就会进入详情页,详情页返回就到列表页。这种逻辑在产品的每一个模块、页面都是一致的。
2)元素的一致性:比如对于微博中的电影或人,旁边都会配一个“加关注”的按钮,这些按钮的颜色、文案、摆放位置都需要一样。
3)语词的一致性:比如说很多产品在界面上的文字和使用帮助里的文字往往会出现不一致的情况,这是怎么造成的呢?可能界面上的文字是UI设计师或产品经理写的,而使用帮助是由运营人员写的,所以不同的人出现的文案可能不一样。包括说同样内容的、功能的这些文案在不同的界面里出现的可能也不一样。
4)信息架构的一致性:比如对一款产品来说,它的信息架构应该是统一的,并且在不同平台上它的信息架构相对来说也应该是一致的。比如说一级分类有哪些,二级分类有哪些,三级分类有哪些,从三级分类能否找到它的二级分类,由二级分类能不能返回一级分类,这都是我们的信息架构。信息架构不应该因为它们所在的平台、功能、模块不同而造成不一致的现象。
5)视觉的一致性:比如说同样的一个功能在不同的页面是否长得一样,“收藏”究竟是用五角星还是红心?如果用了一个,其他的就都要是这一个。即视觉统一,让用户在整个产品内部形成一种通用的认知。如图为微博的一张图片采用的卡片式设计,而卡片式设计无论是微博的主界面还是二级界面、三级界面,都是用的这种卡片式的设计。这种卡片式的设计在不同的层级页面里面的视觉是一致的,能够让用户在整个产品的内部形成一种通用的认知。
我们所讲的一致性不是为了一致而一致的,主要目的是为了减少用户思考的时间,减少用户学习的成本,能够让用户觉得在同一款产品里面不需要二次学习,在同一款产品里面能够快速的去操作,所以说一致性对我们的产品设计而言非常的重要,并且表现的是我们对于产品设计的严谨性。其实一致性做起来并不复杂并不难,但是我们要给予过多的关注,要知道在交互逻辑、元素、词语、信息架构、视觉等等方面做到一致。现在我们都是敏捷性开发,不同的功能包括不同的工种都有对应的人,细分起来非常的多,这时候就需要我们的产品经理做一个统一的把控,把一致性这关把控好。
3.简洁性
所谓简洁性,少即是多,尽可能精简界面上的元素。可以说简洁性是我们业内最为追捧的一个设计原则,因为“苹果”让大家意识到了简洁的重要程度,也引领了整个设计风格。那么简洁性看起来非常简单,就是减少减少再减少,用最少的元素表达最丰富的含义。但实际操作起来,简洁往往比复杂更难。下面对“简洁”提了三个维度:
1)减轻视觉干扰:把一些干扰的视觉元素都去掉,动效也好,色彩也好,都是为我们的产品所服务的,如果这些视觉干扰了用户理解产品,影响用户完成产品的主流程操作,那么这些视觉我们宁可不要。
2)精简文字表述:文字对于我们互联网产品来说是一种鸡肋,没有不行,但如果有的话,不能太多,尤其对于移动互联网来说,移动互联网屏幕比较小,用户读起来比较费劲,如果文字过多的话,那么用户用起来必然耐心不足,并且读完的可能性极小。
3)简化操作步骤:我们所谓的简洁性不仅仅是视觉简洁和文字简洁,更多的是交互上的简洁。如果能够两步完成的事情,我们尽量不要五步完成,如果需要一步完成就绝不需要多步完成。举个简单的例子,大家知道杀毒软件或者手机管家,还有电脑管家,做的最好的是鼻祖360,360有一个一键杀毒,还有一键体检,这个功能做到了极致。为什么?因为杀毒也好、修补丁也好、查木马也好,这些操作在于用户看来非常的专业也相对的复杂,用户不知道该怎么做,到底需要几步。所以对于我们一般的“小白”用户来说,最简单的方式就是你告诉我有一个按键,我只要一点击,这个安全助手、手机卫士就能够一键帮我去体检、去修复,把木马和垃圾都查杀掉。所以说简化操作是我们简洁性里面最重要的一个操作。
如苹果的官网,白色为整体的背景颜色,实物、产品放在了画面中间,有了足够的留白,这种简洁、背景与主题非常突出的设计,能够让用户第一时间关注到产品本身,而不是背景页面。而且这种简洁性和苹果的风格一脉相承,让用户感觉非常的有科技感、高大上。
4.流畅性
流畅性指的是我们在设计产品的时候,一定要明确产品最基本的核心任务,保证顺利执行,辅助操作不要影响核心任务。避免界面上的视觉噪音和其他干扰,避免打断。无论是视觉上还是交互上都要避免打断。比如视觉上、声音上都不要干扰用。在交互上主要要避免模态化的打断,模态框的使用要谨慎。
比如网易云阅读的产品,阅读类的产品主要功能在于读,点赞、收藏等功能为辅助功能,这些功能不是主功能,所以在操作时尽量不要打扰用户。
5.及时反馈
界面中任何可操作的地方,当用户发生操作时,都应该及时予以反馈。让用户了解操作已经生效,界面还在用户的控制之下。比如阅读时翻页的动效、PPT翻页的动效,这些动效都是一种及时的反馈,让用户知道你做的翻页的操作我给了你足够的响应,让用户觉得这个操作是有效果的,用户最怕的就是自己动了而你没有动,这时候用户会怀疑是自己的网络出了问题还是自己的内存不足还是产品出了bug,要让用户觉得一切尽在掌握。
反馈内容包括:用户操作反馈和产品状态反馈。所谓操作反馈就是指我点了一下有了反应,状态反馈就是处于什么状态需要有反馈。比如说当前正在上传,那么就需要一个上传的进度条,当前正在下载,就需要有下载的速度以及距离下载完成需要的时间。这种状态的反馈能够让用户知道当前所处的环境和条件究竟是什么样的,每个用户都有操控的欲望,能够让用户把一切尽在掌握,用户才会觉得自己是这个产品的主人而不是被引领者。
6.可探索性
探索产品应该允许用户犯错,不能埋怨用户,要给用户重新尝试的机会,让用户处于放松的心态。如果用户多次点击进入了一个不该进入的页面,能够迅速的返回,这就是所谓的可探索性。可探索性表现的最好的一类页面就是空白页面,空白页面是我们每一个产品都不希望用户看到的一个页面,但是又不可避免。这时就需让用户有可探索性,在空白页面不要焦虑紧张,在空白页面给用户一些适当的引导,能够让用户尽快的返回正常的页面。做到可探索性主要有以下几点:
1)帮助用户避免出错:比如说如图手机百度登陆的界面,登陆的界面有种短信登录,短信登录当然要输入手机号,那么这个时候手机百度的做法是直接给用户调出数字键盘,而且这个数字键盘不许返回文字的键盘,这个做法是非常好的,能够避免用户输入英文、汉字、符号等,但有的产品在短信登录的时候就没有做这步限制,那么用户就会容易操作错误,这就不是一种好的设计。我们能做的就是帮助用户避免出错。
2)出错提供纠错功能:比如说用户已经开启了大写的按钮,我们应该提醒用户此时输入的字母都为大写,是否修改?或者说用户此时操作的界面和用户所在的居住地定位不一致,比方定外卖所买的东西在几公里以外或非本地区,这种都需要这种及时的纠正功能。
3)出错反馈要亲和:一旦用户出现错误,反馈要亲和,不要过于生硬,不要把像技术人员那种代码式的语言反馈给用户。要让用户感觉到是一个真实的、和蔼可亲的人正在和他交流。
数不清的设计原则(平时看到)
1.一个界面为主要角色设计,而不是为所有人设计。
这个原则可能大家平时会看见过,它其实讲的是我们平时的一个界面、一个服务对象要明确,我们是为了这个功能的核心用户也就是所谓的目标用户而设计的,而不是为了所有的人去设计的。那么我们要考虑到目标用户的特征和心理诉求,而不是为了所有的人。
2.为日常场景设计,不要让边缘场景主导你的设计。
比如说日常的场景是这个产品它的使用场景叫做日常的场景,而边缘场景指的是这个产品的主要的边缘的场景。那么我们判断一个产品的日常场景和边缘场景就要看这个产品的主要功能是哪些,比如说对于导航地图类的产品,它的日常场景主要出现在出门前还有行驶在路上,这是它们典型的日常场景,而边缘场景比如说一些琐碎的时间例如在卫生间、在家里、在工作当中,这些日常的边缘场景就不属于主要的场景。
3.在满足需求的前提下,界面的信息越少越好。
这个原则与之前所讲的简洁性是一脉相承的。
4.在满足需求的前提下,界面的功能越少越好。
在满足的需求的前提下功能越少越好,功能越少用户操作越简单方便,页面看起来也会越简单。
5.在满足需求的前提下,界面的交互次数越少越好。
同理,在满足需求的前提下,交互步骤越少越好,能用两步来完成的就不要用四步来完成,能用一个界面一个操作来完成的就不要用多个页面多个操作来完成。
6.日常场景使用的界面应放在主要位置,且尽量的大。
比如那微信举例子,大家使用最多的是微信聊天和朋友圈,那么它的位置就放的比较靠前,而我们不经常使用的像理财通、美丽说、大众点评、京东购物,那这些场景都不在微信的主要场景里面,所以它们放的位置就不那么重要,页面占的幅度也不那么大。
7.界面颜色不超过3种,避免大面积使用刺眼的颜色。
页面当中的视觉不要干扰我们用户主要的一些操作,不要为了增加视觉效果而增加视觉效果,不要因为视觉增加而增加用户的使用成本和视觉成本。
8.减少用户的记忆负担,让用户识别,而不是回忆。
这个相当于我们刚才所讲的可学习性,让用户能够尽量的根据自己的常识去辨认出产品的视觉风格或者产品逻辑上的、功能上的一些交互,而不是通过回忆、查阅。
9.尊重用户的习惯思维和行为。
10.充分考虑用户的使用场景和干扰源。
要辨别出来用户主要的使用场景,还比如百度地图这种导航类的产品,我们必须考虑到用户在这种户外的条件下网络状况不太好,户外不利于双手操作,这时要考虑到单手操作以及无网络的条件下,所以要把主要的操作按钮搁到右手边,并且考虑到离线的操作,在无网络的条件下依然可以查路线与导航。这都是充分考虑用户场景的一些功能。
11.尊重用户的付出,自动保存用户输入的内容。
这其实也是充分考虑到用户的使用场景,移动端用户这种输入成本是非常高的,我们要对用户的输入内容进行自动保存,不要让用户重复的去输入。比如说在百度搜索里面,用户搜索过的信息会被记录下来成为历史记录,当用户进行二度搜索的时候,就可以不用重新输入,直接就可以进行点击完成自动输入。
12.主操作栏的内容不宜过多,一般不超过三项。
其实这也是简洁性的一项要求,只是更详细。主操作栏一般不要超过三个,因为过多的话,对用户来说选择会出现困难,也不知道点击哪个。最好像360、安全卫士、手机卫士那样一键体检、一键杀毒、一键清理垃圾。
设计万变不离其宗
我们把刚才的那些原则都放在一起,我们会发现所谓的设计原则,它无疑满足以下几个要求:
1.设计价值
设计原则的主要目的是要让设计产生价值,之所以有设计这个流程而不是让开发人员直接去做,是因为设计本身是要符合用户这种需求的。能够最快速地满足用户这种需求,所以我们在评判一个设计好不好的时候,我们先看这个设计的价值。如果说这个设计符合用户的需求,能够快速满足用户的目标,那么这个设计才能说是有价值的设计。如果说你的设计没有能够强化用户的需求、满足用户目标,这个设计可以说没有价值,这一层做不好,后面的都免谈。
2.概念原则
所谓的概念原则指的是我们的产品以什么形式呈现给用户最好?同样的功能是放在Web端还是手机端?是用APP的形式还是用Web APP的形式?是为新手做引导还是为中间用户提供方便等等。那么以什么样的样式呈现给用户还是要考虑到用户是怎样使用我们的产品的,是在什么时候用到我们的产品,并且在这个时候他的主要目的是什么,也就会使用到我们的用户场景和用户需求。
3.行为原则
比如说及时反馈、可学习性、交互上的简洁性都是行为原则,如果我们把众多的原则进行分类,就可以分为这三类原则,殿堂级原则是我们应该主要去掌握的,其他那些林林总总的原则希望大家能够对应到殿堂级原则,并且能够分类到它是属于这种行为原则、概念原则等等。
4.界面原则
界面原则可能偏重视觉方面了,比如界面布局是否突出重点,并且一个界面能不能同时最好完成一个任务,不会页面跳转等,主要是保证界面能够把我们的信息传递准确,能够让用户清晰地看到这个页面所表达的内容。
产品设计黄金定律
设计如果真的由黄金定律,那无疑就是用户需求。对一个产品而言,它的立足之本就是满足用户需求,所谓满足用户需求就是体现产品的这种价值,我们设计的目的也是为了把这种价值最大化,能够让我们的产品能够帮助用户,最快捷的来解决他的实际问题,来最大程度上的实现我们的产品价值,所以设计的一切是以用户为中心,把用户的需求当做自己的需求,把解决用户的问题当做自己的问题。所以我们设计的黄金定律还是满足用户的需求。