我是前端开发设计师!!!

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

2017-06-11  本文已影响24人  艾尔cc

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.用户喜欢勉强应付:用户不关心产品内部机制,达标就好;只要能用就不去轻易地改变。

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

4.针对扫描而设计:

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

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

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

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

4.2尊重习惯

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

4.3 明确能点击的元素

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

4.4 降低视觉噪声

5.信息架构:卡片法

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

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

7.设计有用的信息

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

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

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

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

8.系统一致性

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

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

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

9.设计规范

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

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

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

上一篇下一篇

猜你喜欢

热点阅读