最近拜读了点石成金这本web和移动设计的经典书,虽然在移动互联网时代,web设计会显得有点过时,但是里面有一些基本的设计原则,应该是值得所有人借鉴的,就像作者所说:“人类大脑的容量不会马上发生变化,所以这些人类行为研究所得到的成果在很长时间内都不会失效,20年前他们遇到的困难,现在同样如此“。 这些可能是很常识性的原则,但是大道至简。了解这些设计原则,并举出说明,力图提高自己对设计感觉的把握能力,设计小白,勿喜轻喷。
1.当看一个页面时,它应该是不言而喻,一目了然,自我解释的,糟糕的设计是大而全,什么都往里面放;


12306改版前后相信大家一眼都能看出,改版之后把最重要的车票查询放到中心位置,去除了一些无用的展示,整个界面清爽了很多,用户进来就能锁定中间车票查询。
2.永远不要让用户花时间去思考某个东西是否点击,所以链接和按钮应该明显;

上图中某行APP中财富,转账等按钮,底色是蓝色,按钮是白色,第一时间我考虑这些按钮是否能点击,同时我第一感觉是否欢迎词也能点击(傻笑脸)。
3.命名不要自以为很酷或者自以为很聪明,应该是显而易见的;

4.如果不能做到让一个页面不言而喻,那么至少应该让它自我解释,比如一些复杂界面或者新功能,需要做简单的解释说明;

5.尽量利用习惯用法,习惯用法能让人瞬间理解,所以应该多研究主流产品的设计,找到用户的习惯用法;

6.设计创新要慎重,因为大部分创新可能是重复造轮子,如果想要对已有的习惯进行创新,那么一定要确认这是更好的,更实用的;

7.越重要的部分越突出,比如标题字体更大,更粗,颜色更特别,旁边有更多空白;

8.逻辑上相关的部分也在视觉上相关,比如可把相近的内容分成一组,放在同一个标题之下;

9.逻辑上包含的部分在视觉上进行嵌套中;

10.把页面划分成明确定义的区域,这样可以让用户很快决定关注页面的哪些区域,或者跳过哪些区域;

11.明显标识可以点击的地方,可以点击相当于视觉扫描的线索,比如用户需要关注哪些地方可以点击,某种形状,某些位置,某些格式;

在这款小区APP中,设计中把开门按钮设计成钥匙形状并且颜色上凸显出来,点击开门按钮就可以直接开门。
12.降低视觉躁声,比如眼花缭乱,组织不当,太过密集等;

13.为文本设置格式,以便扫描,比如使用标题,保持段落简短,和使用符号列表,突出关键词等;

14.必要的帮助和支持,提供简短,及时,不会错过的帮助和支持;

15.欢迎词必须消灭,欢迎词就像闲聊,内容无所谓;

16.不要忽视导航的用途,导航帮助我们找到想要的任何东西和告诉我们现在身在何处;

17.让一个返回主页的按钮始终可见,让用户无论迷失到何种地步,都能重新开始;

18.喜欢搜索的用户比喜欢浏览的用户更多,除非界面非常小,否则每个页面都应该有一个搜索框或者搜索页面的链接;

19.每个页面都需要一个名称,就像每个拐角都应该有一个路牌一样;

20.一个网站应该有一个 个性、生动、还有点俏皮的口号;

21.没有简单的正确答案,良好的、一体化的设计能满足需要,也就是说,经过仔细考虑,实现和测试的设计就是好设计,如果有争执,那么就让做一个可用性测试;

22.让用户感受到设计过程是花了心思的;

23.好的设计需要有良好的反馈,促进设计者能够不断的改进;

24.好的设计需要减少用户操作

25.知道用户可能有哪些疑问,并且给予解答;


网友评论