7. 一致性

一致性:相同类型的信息应该有类似的样子。

对“设计”这个概念,有这样一种定义:有意识的归纳、组织、展现信息。如果是这样的话,那一致性几乎就等于设计了。因为,归纳、组织的依据是一致性。比较类似的几个信息归为同一类,用同一种方式展现出来。

一致性在产品设计中普遍存在,设计者几乎需要时刻惦记着一致性。字号一致、颜色一致、间距一致、图片大小一致… 类型太多了。下面介绍几类常见的。
 


 

视觉样式一致性

YAHOO各个栏目的logo,保持了一定的一致性。让人能看得出这些logo都是YAHOO的频道,也能看出各自的内容。
Instagram里,用户的头像都是圆的。用户一看到是圆的图,就知道那是位用户。

微信里,个人头像是方的,公众号头像是圆的。用方与圆区分了不同的角色,很容易识别。
但是,进入公众号内,公众号向我说话,头像就又是方的了。这里被当做是一对一的对话,一个人对我说话,人是方的。这就让用户有点儿错乱了。

方圆、大小、颜色、边框、阴影… 视觉样式上的一致是最容易被注意到的一致性。
 


 

位置上的一致

Google不同的产品中,右上角始终是一致的。
但这其实花了很多年。从google创建出各个不同的服务开始,一直到大约2017年才逐渐把右上角统一成一样的。

亚马逊网站里,隐含的一致性:亚马逊的首页、栏目页,筛选分类都在左侧,展现主要主要的列表内容在右侧宽栏。
详情页中,展现主体内容在左侧宽栏,进一步的购买操作在右侧。
各个页面布局虽然不是完全一致,但通观各个页面,却能看出一定的规律:
筛选在左侧;
中间栏是主体内容;
右侧是进一步的操作。

引导着用户的浏览、操作都是从左到右的顺序。先在左侧选择分类,再浏览中间的列表,看到不错的就点击进详情,在详情里仔细看,满意,再按右侧的购买按钮。
以至于商品详情页(第三张截图),商品有多张图,小缩略图的列表也是在左侧的,仍旧保持了“筛选在左侧”。

这种位置上的一致性是对产品整体的设计规划,因为各个页面要展现的内容不一样,不能严格的“一刀切”,要求统一的布局。但仍旧可以做到一定程度上的,隐含的一致性。这种一定程度上的一致性,也是有价值的,用户可能并没明确的意识到这种规律,但却能感受到“用起来比较顺手”。
 


 

行为的一致

这是Instagram里的一个广告,广告是混排在内容列表中的,主体是一张图。
其它常见的社交产品,点缩略图进入图片浏览模式,看大图。INS图片是不能点击放大的,“图片展示出来就是最大化的,不需要再放大了”,这是INS的设计理念。

广告实在是需要有链接,链接到广告详情页面去。但广告图也是图,按照INS对图片的设计规范,不可以给广告图片加上链接,跳转到新页面。于是链接放在了图下面,那个的”去逛逛“。

广告图有链接,这是惯例。用户看到这个广告图,有兴趣,也是会去点这个图。可是图上没链接,前面一篇说“操作的要求”,其中一条:操作后,结果有明示。用户点击了之后,不能没反应。INS的设计是:点图片,下面的“去逛逛”反色,提示用户。图片就是不给链接。
费了这么多周折,就是为了保持“图片不能点击”这个行为的一致性。

INS在2016年推出了“快拍”功能,用左上角的相机,每位用户可以发布一组小视频或图片,展示的时候像是自动播放的幻灯片,24小时后自动删除。新浪微博后来模仿着也做了这个功能,叫“故事”。

INS希望强推这个“快拍”功能,于是,有“快拍”的用户,点他的头像先是展示快拍,在快拍页面里再点其头像,才进个人主页。原本点头像是进个人主页的,现在,没有快拍的用户,也还是进个人主页。那,点头像会打开什么,就不一致了。这肯定不行。

INS的办法:有快拍的用户头像上额外加了个彩色的圈。彩色圈是用户的“快拍”,点有彩色圈的头像不是点击了头像,而是点到了圈上,打开该用户的“快拍”,快拍页里的头像则不再有圈了。这就保持了行为的一致性:点头像进个人主页。

INS里,点用户头像进入个人主页,个人主页里有他发布的照片列表,点某个缩略图看照片大图,大图页里有作者头像,于是出现了无限循环:个人主页->照片详情->个人主页…
新浪微博里也有同样的情况:“点头像可以进入个人主页;
个人主页里有主人发布的帖子,点击可以看详情。”
为了保证这两句设计要求始终是有效的,无限循环虽然有点儿傻,但也只能将就了。

保持这种一致性,用户才能习得“点头像可以看他的个人主页”。如果有时候能进,有时候不能,用户就没法得出这样的总结了。人是根据少数几次经验去总结出规律的,而不是电脑般的用大数据量做统计。我们不确定用户会遇到产品里的哪几处,所以要保持各处一致,让用户无论遇到了哪几处,都能总结出对的规律。

连续几个案例都是关于Instagram的,INS对一致性也真是较真儿。经常有人会说,INS的设计好,对一致性的坚持,或许就是一个原因吧。
“好的设计”很大一个部分都与一致性有关。
 


 

文字概念的一致

这是一两年前某个版本的微博。
从第1处看,“我的好友”是我关注的人。
从第2处看,“新的好友”是新的粉丝,那么,“好友”是“粉丝”,粉丝是关注我的人。
我关注的人,关注我的人,到底哪一批人是好友?全乱套了。

微博目前的版本中,这个问题改的好些了,至少没有这么显著的语义矛盾了。“关注”进入“关注页面”;
“粉丝”进入“粉丝-新的好友”。

top Created with Sketch.