![](https://img.haomeiwen.com/i857895/0997f9224626e1b8.png)
《别让我思考》简介:一本关于web可用性设计的一本书,然而其中的经验不仅适用于web,对任何需要阅读理解的应用界面都有参考价值
所以本文是个人在阅读本书过程中,将对个人最有价值的信息提炼出来的结果,并且本文也尝试着将书中提到的思维方式和技巧应用到 -- 简历样式设计,以及尝试着分析一些手机应用是否也采用了这些技巧。
(上述提到的两方面均在web设计之外,是为了证明《别让我思考》的内容确实可以适用到web设计之外的其他界面设计)
本文不是读书笔记,所以并不会将书中全部知识点都罗列出来,见谅。
书中知识点1:用户如何使用界面?
扫描 + 尝试,而不是:阅读 + 选择
究其原因,因为这样子更懒,需要花费的脑筋更少。
那么,对于扫描+尝试的界面使用习惯,什么样的设计更能符合用户的需求呢?
1.视觉上利于扫描。因为扫描的目的是有价值的信息,对于不同价值的信息,有合理的展示方式,从而,用户可以非常轻松的获得需要的信息
2.对尝试行为友好。相对简单,只需要让页面跳转之后均为可返回即可。
书中知识点2:如何让界面更利于扫描?
1.视觉层级设计
2.采用习惯用法
3.界面降噪
4.字数缩减
首先来看看腾讯网如何让页面变得更加利于扫描:
![](https://img.haomeiwen.com/i857895/4f6ef3ebb0cfc3b8.png)
1.视觉层级设计:将页面划分成有明确定义的区域,并为之建立清晰的视觉优先级,突出重要的区域
主要方法可以通过以下3种方式来提升区域的视觉优先级,最终达到不同区域有重要性区分的效果:
![](https://img.haomeiwen.com/i857895/5b19f476cefccb1a.png)
色块区分:
![](https://img.haomeiwen.com/i857895/7e3223ec0e7e8fee.png)
图片优先:
![](https://img.haomeiwen.com/i857895/54ff074f72a6a204.png)
文字样式:
![](https://img.haomeiwen.com/i857895/bd63f7a56b3991b9.png)
2.使用习惯用法,链接,按钮等存在交互操作的对象,使用已经众所周知的交互样式,最大限度降低学习成本
![](https://img.haomeiwen.com/i857895/36944cdf52e48e87.png)
![](https://img.haomeiwen.com/i857895/d0688eff4838625c.png)
3.降低视觉噪音:间隔线的作用在于将界面切分成不同的区域,然而间隔线不是主角。让用户感知到有间隔就行,不需要太刺眼的间隔线。
间隔线处理:
1. 颜色不应太明显,尽量与背景色不要有太大反差
2. 宽度不应太粗
间隔线的样式应该能够满足,用户在阅读内容的时候不会注意到间隔线的存在,但是却能够起到切割分块视觉区域的作用,深藏功与名。
![](https://img.haomeiwen.com/i857895/b4daf35753130043.png)
4.文字缩减到最少:欢迎词,指示说明词全部去掉。去掉不那么重要的文字
![](https://img.haomeiwen.com/i857895/c86e227fe658719a.png)
如何让界面利于扫描 -- 小结:
1. 为页面建立清晰的视觉优先级,突出重要的区域
2. 使用习惯用法,降低学习成本
3. 降低视觉噪音,弱化分割线等辅助内容
4. 减少不必要的文字
如果把上面的观点应用到简历界面会如何?
1. 色块区分
借助色块突出希望面试官第一眼看到的部分,有两个作用:
1.是让扫描阅读变得更加简单,通过色块引导面试官,降低阅读成本
2.让简历整体色调更加丰满,颜色不会过于单调
![](https://img.haomeiwen.com/i857895/a37221f306f4eae1.png)
2.关于图片:个人照片 -- 二维码链接
个人照片:无论如何,只要放到简历上,绝对就是第一视觉优先级的内容,慎放(除非照片拍的足够正式专业且形象气质俱佳,无可挑剔)
二维码链接:可将自己的作品集展示web页面链接转成二维码放在简历上,同样是高视觉优先级的内容。
![](https://img.haomeiwen.com/i857895/e4515b25bad5ccd4.png)
3.字体样式
![](https://img.haomeiwen.com/i857895/8c428693f25085a0.png)
4.降噪
![](https://img.haomeiwen.com/i857895/a1bd360742c36d52.png)
(由于简历部分涉及个人隐私,所以本文将关键信息均模糊处理)
----end---
![](https://img.haomeiwen.com/i857895/7ee1a073d73b026e.png)
网友评论