《认知与设计》读书笔记(1)

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
2380 0 8 2018-08-10

知道一些设计准则,我们就更容易判断哪些方案会失败,自己进行设计时尽可以少走很多弯路。——王坚

一、 探索和利用视觉结构

(1)      信息呈现方式越是结构化和精炼,人们就越能更快、更容易地浏览。

在这里我对比了两个在线旅行服务网站,去哪儿网和携程网。从图可以看出,两个度假页面相比携程网的会更加精炼,用户在完成一个目标时,更容易浏览。

去哪儿网去哪儿网

Image title

携程网


(2)      一个长串的数字可以利用两种方式分隔:用户界面明确地为不同部分提供独立字段,或者界面提供一个字段,但是允许用户输入时将号码用空格或其他字符分隔开。

下图为中国建设银行的账号输入方式,因为银行卡号都比较长,所以要提供数字分隔。

Image title


(3)视觉层次能够让人从与其目标不相关的内容立刻区分出与其目标更相关的内容,如果要提供一个视觉层次,即信息的安排能够:

A、将信息分段,把大块的信息分割为各个小段

支付宝APP就在首页将信息分为了三部分,由字体和图标的大小来区分层次。

Image title


B、显著标记每个信息段和子段,以便清晰地确认各自的内容


C、以一个层次结构来展示各段及其子段,使得上层的段能够比下层得到更重点的展示。

下图为网易云音乐APP电台分类列表的界面设计,上层的文字与下层文字通过字体颜色和大小来进行了很好的区分。

Image title



二、 使用色彩的准则

(1)      用饱和度、亮度以及色相来区分颜色

避免采用轻微的差别,确保颜色之间有较高的反差。一个测试颜色差异的办法是在灰度模式下观察,如果你不能在灰度模式下区分出不同的颜色,那么这些颜色的差别就不够。

Image title图片中的上半部分为QQ音乐的分类。从颜色看五个部分都使用了可以很好区分的色相,但是从灰度图看,“流行指数”部分和“热歌”部分灰度比较相似,可以再加以区分一下。

下半部分为图虫网站的一个分类部分,在色相部分也是进行了加以区分,从灰度图看采用了有规律的分布,这样相邻的两个就很好区别开来。


(2)      使用独特的颜色

使用最轻易区分的颜色:红、绿、蓝、黄、黑、白

Image title



(3)      避免使用色盲的人无法区分的颜色对

深黑+红     深红+深绿     蓝色+紫色     浅绿+白色

不要在任何深色背景上使用深红色额,蓝色或紫色,但是可以在浅色背景上使用这些颜色。


(4)      在颜色之外使用其他提示(如形状、文字)


Image title

只使用颜色
Image title

颜色+形状


(5)      将强烈的对抗色分开,因为放在一起的对抗色会产生令人难受的闪烁感觉。

Image title


另外,我们的眼睛对蓝色和紫色不如对其他同颜色敏感,而且人类的视觉系统对于对比度敏感


全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票