[读书笔记]让你的设计深入人心-- 可用性设计

Reading Notes: 让你的设计深入人心 -- 让你的设计深入人心

--注：笔记来源于《大巧不工 - Web前端设计修炼之道》2017.06.11

---

1.CSS2盒子模型黄金法则：box-sizing

a.如果某个盒子有填充，请不要给它设计高度；

b.如果某个盒子有宽度，请不要给它设计任何填充；

2.HTML5 select新增data属性表示数据来源。

3.可用性法则：Don't make me think

a.用户喜欢扫描而非阅读：我们擅长、不需要阅读全部、节奏快；

b.用户喜欢尝试性选择：按照自己的理解来，选择多半不是最佳选择，而是第一个自己认为合理的选择；

c.用户喜欢勉强应付：用户不关心产品内部机制，达标就好；只要能用就不去轻易地改变。

图片发自App

4.针对扫描而设计：

4.1层次清晰：页面有清晰的层次才能保证用户能在很短时间内熟悉你的页面。

a.通过加大字号、加粗字体、加深颜色来区分层次（案例：旧版淘宝移动页面订单列表）；HTML标签的层次。

b.对于逻辑上或者业务上相关度高的部分要进行整合，不同逻辑性内容有明显的边界。

c.页面上体现包含关系。

4.2尊重习惯

尊重用户在网站上产生的习惯，降低学习成本。

4.3 明确能点击的元素

链接可点击的认知与引导，是否引导足够、是识别性强。

4.4 降低视觉噪声

5.信息架构：卡片法

‌

图片发自App

6.标签云：由一套相关的标签（链接）以及与之对应的权重组成。需谨记：“链接生来不平等，我们要想尽办法让用户容易定位到那些重要的链接。”

7.设计有用的信息

提供无用的信息不但不能帮助用户，反而会伤害用户。

错误的信息设计并不是要设计“警告信息”，而是要设计“提示信息”，帮助用户解决使用中所出现的问题。

图片发自App

错误类型分两种：环境类报错、错误操作。预防和引导性提示。

8.系统一致性

在一致性的设计原则上，必须做到几个一致：视觉一致、操作一致、内外一致。

之前提过用户总是勉强应付，不到万不得已不会去求助系统，所以保持软件产品在概念、元素、视觉的一致可以使用户快速的了解产品，降低支持成本，从而减少用户犯错误的几率。

图片发自App

9.设计规范

问题来源：两人的水平不同，知识面不同，沟通往往要涉及大量的细节内容。

图片发自App

---

最后，分享一张完整的读书笔记，来自我的小米便签。