阿格曾经作为咨询顾问服务过安徽某车企,当时有一个任务就是协助甲方ui定稿。因为该国企对我们团队不是很满意,所以在ui定稿时,对我们千方百计的刁难。虽然他们提出了很多问题,但是客观的说,问题不在点子上。
那么到底该如何判断ui设计好不好呢?方法很简单:根据设计原则打分呀。
常用的交互设计原则
常用原则的解释
超级案例
常用的交互设计原则
首先我们做的是数字化产品的设计,也就是APP、官网或者后台操作页面。这类产品包含了交互行为+界面设计。也就是说,我们对ui设计评判时,需要考虑这交互和页面,而不是单纯的感觉好不好。随着互联网发展这么多年,很多设计法则都算是常识了。今天列举12条:
席客法则
菲茨定律
米勒定律
奥卡姆剃刀原理
泰斯勒定律
冯-雷斯托夫定律
状态可感知
操作可预期
贴近认知
接近法则
一致性法则
防错原则
常用原则的解释
之前在其他平台原则的解释,我直接复制过来。
交互设计法则1:希克法则
阿格备注:选择越多,时间越长。
一个人面对的选择越多,所需要作出决定的时间就越长。
产品设计注意事项:
(1)产品设计时,为了让用户尽可能的做下一步,则尽量减少选项。
(2)如果实在选项很多,可以使用分类。
有没有感觉这个设计法则很熟悉,是的,微*型就是这么设计的。
小结:少就是多。
交互设计法则2:菲茨定律
预测用户点击一个目标的时间,取决于目标的大小和离手指的位置。
说人话案例:app上很多付款按钮,颜色深按钮大,还靠近右手。这个就是利用了菲茨定律。(95%的用户都是右手玩手机)。
产品设计注意事项:1.连续操作的按钮,应该靠近一些。
2.可点击的按钮,应该尽可能大些。
3.屏幕的四条边和角,是有很大利用价值的。
4.如果不想用户点击,可以逆菲茨定律使用。(比如恶心的某杀毒软件,取消是亮色且靠近右边)
交互设计法则3:米勒定律
“神奇的7+2法则”:米勒定律指普通人只能短时记忆7(+2/-2)项目信息。
产品设计注意:
1.产品设计要减少呈现的主体,最多只能9个信息。
2.信息太多,应该进行分组呈现。
例子:还是那个维沙星
交互设计法则4:奥卡姆剃刀原理
“如无必要,勿增实体”。其实就是设计要“简单有效”。
产品设计注意:
1.避免增加无意义的视觉元素。
2.但是也不要过度追求极简,有可能适得其反。
交互设计法则5:泰斯勒定律
需要复杂操作的部分,交给代码来解决。宁愿开发工作1个月的代码,也要减少用户一步的交互操作。
原因:如果用户有千万级,一步就是1000万个同样操作。
产品设计启示:
1.要用代码降低用户操作成本。
2.代码不能代替用户操作,比如产品升级,需要用户确认。
交互设计法则6:冯-雷斯托夫效应
当存在多个相似物体时,与众不同的那个更容易被记住。又被称为:隔离效应。
阿格ps:又称你就是人群中,最靓的那个仔效应。再称鹤立鸡群效应。
产品设计启示:
1.利用环境差异,让元素快速获得视觉焦点。
2.利用经验差异,使用户记住特殊的时间点。
例子:电商的结算页按钮,那么醒目。(没错,我就是这页最亮的按钮)
互设计法则7:状态可感知
可感知就是:用户很容易就知道,它在什么状态。
举个栗子:有4个tab按钮,用户查看的那个tab,要明确的显示出来。(不用靠猜)
产品设计启示:
1.操作的菜单栏,一定要有选中的状态。
2.同步信息时间长,要给loading提示;
3.当前在哪里,要显示出来。
4.各种状态要有相应提示。
交互设计法则8:操作可预期
阿格解释:设计产品时,当需要用户做什么时,需要给他预期,且满足它。
举个栗子:一个模块加了向下的小箭头,一般用户的预期都是点击后,能展开或者跳转。
产品设计启示:
1.让用户在操作前可预期,操作后有反馈。
2,通过文案提示的方式,进行用户教育。
3.通过小问号的方式,点击展开操作说明。
4.通过按钮状态的差异,提示用户。
例子:微某星是集大成者
交互设计法则9:贴近认知
阿格解释:使用用户熟悉的文字、图形等标识。
如果用华与华的话来说:设计要借用文化母体的力量。越接近用户熟悉的文字、图形、名词,用户的理解成本就越低、记忆成本就越低,传播成本就越低。
产品设计启示:
1.图标(icon)要使用符合用户认知的,避免纯新造图标。
2.提示语,要使用符合用户认知的,避免专业词汇。
3.除了贴近用户习惯,还应该贴近使用场景。
互设计法则10:接近法则
接近法则又称为邻近法则:彼此靠近多元素倾向被视为一个组。
产品设计启示:
1.元素的关联性越大,间距就越小。
2.无关联元素,不要近到让用户产生误解。
3.间距的对比,需要用户非常容易的感知到。
阿格解释:这个其实就是归类,比如订单相关是一类;积分相关是一类,归类方便记忆和查找。
交互设计法则11:一致性
一个平台的设计,需要有一致性。也就是同一用语、功能、操作需要保持一致。
产品设计启示:
1.结构一致性:保持一种类似的结构,新的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担。
2.色彩一致性:主色调需要保持一致。
3.操作一致性:产品迭代后,仍然让用户保持对原产品的认知,减小用户的学习成本。
4.反馈一致性:用户在操作按钮或者条目时,点击的反馈效果应该是一致的。
5.文字一致性:文字的字体、字号、字色、布局应该都是一致的。
经典例子:维星呀,行业典范,大神膜拜。
交互设计法则12:防错原则
阿格解释:大部分意外都是设计疏忽造成的,而不是人为操作疏忽。在设计之初,就可以通过防错机制,降低损失的概率性。
产品设计启示:
1.删除信息,需要再次确认。部分场景,需告知恢复机制。
2.无网络连接时,给用户提示。
3.电话号码、身份证号,输入错误时给予位数提示。
4.商品缺货时,给予替代解决方案。
栗子太多鸟:
1.win电脑多回收站;
2.删除按钮的确认弹窗
3….
超级案例
毫无疑问,微信。目前市面所有平台中,设计规范执行的最好的平台,没有之一。如果你愿意拿上面12条设计原则去比对,你会发现满足所有原则。所以张小龙,才是我们产品行业的top高山,只能景行行止。