美文网首页
《认知与设计——理解UI设计准则》(第二版)笔记五

《认知与设计——理解UI设计准则》(第二版)笔记五

作者: 地上最萌程序兔 | 来源:发表于2017-12-11 11:38 被阅读0次

Chapter Five 我们的边缘视觉很糟糕

1. 中央凹与边缘视野

人类视野的空间分辨率有中央向边缘锐减。三个理由如下:

a. 视锥细胞分布

中央凹:约158000个/平方毫米

视网膜其他位置:平均9000个/平方毫米

b. 神经节细胞连接比

中央凹:1:1

视网膜其它位置:n:1

结论:边缘视觉信息在被传到大脑之前经过了压缩(数据有损)

c. 资源处理

中央:面积占1% ,而大脑视觉皮层的50%用于接受它

其它:占99%,另50%接受它

2. 边缘视觉用处

a. 引导中央凹:边缘模糊的影像可以引导中央凹去看(例如:市场寻找草莓,边界处模糊的红色会引导视线去查看它)

b. 察觉运动:边缘轻微的变化也会引导中央凹去注视他

c. 让我们在低亮度环境下视物

3. 用户界面举例

❌提示信息在中央凹以外 或 提示消息不明显(与环境背景融在一起)

图1 提示信息在中央凹以外,很难被发现                                            图2 提示消息不明显,与标题都是红色 容易被忽略

正确的让人注意到信息的方法:

a 放在用户所看的位置上(按钮 链接附近等)

b 标记出错误内容

c 使用错误|警示符号

d 其它信息尽量不使用红色 留给错误信息

图1改进,使用了以上四个方法

下面这个设计同样让人很好的注意到提示信息。

提示不要用力过猛!

以下三种提示方式请谨慎使用。

a 弹出式对话框

没有必要弹的对话框;很重要的信息(有的浏览器设置为阻止弹出)

b 使用错误提示音

未开声音;人多的地方声音造成困扰等

c 闪烁或短暂晃动

大多人厌恶闪烁抖动(广告多用这种形式);一定要使用的话,必须简短

不能滥用提示---避免用户对提示习惯化

⭐️通过设计 让信息自己跳出来;而非线性寻找信息

在众多信息中,使用放大、加粗、颜色使目标信息容易脱颖而出。边缘原理会让眼睛更好的捕捉这些特征。

《认知与设计——理解UI设计准则》(第二版)笔记六

相关文章

网友评论

      本文标题:《认知与设计——理解UI设计准则》(第二版)笔记五

      本文链接:https://www.haomeiwen.com/subject/jtkiixtx.html