交互设计之层次设计配色篇（表达逻辑—

层次的必要性

传统的屏幕信息的传递方式是线性的，无间断且方向确定的。

例如，不经加工的文本信息，依照人类（国人）习惯，就是按照从左到右，从上到下依次阅读。

未经处理图片或视频，也是按照一张一张或一帧一帧的顺序线性切换。

单向的信息传递没有反馈和互动，无法形成信息回路，传播的流程会简化，弱化信息传递的效果。

而人类认识事物的秩序是从特殊到普遍再到特殊，对于展示给用户的产品，首先要输出给用户的必须是最主要的，也就是特殊的部分，其次再是想要传递的其他信息。

产品的设计以视觉形态呈现为主，对信息有效的整理、呈现使得层次分明成为必然。层次的设计符合人类认识事物的习惯，通过设计层次使得信息输出有主有次，降低用户获取信息成本。

如何传递层次概念

1、前进色与后退色。

提到层次，最直观的影响因素就是颜色搭配。

层次的设计表达主要通过前进色与后退色（也称为膨胀色与收缩色）的搭配。

同一平面下，给人感觉突出的色彩为前进色（膨胀色），通常为明度高、饱和度高的鲜艳色彩，红色、橙色等暖色系。

   危险路标、警告牌等。

给人视觉收缩效果的颜色则为后退色（收缩色）。此类颜色大多为明度低、饱和度低的暗淡色彩，例如藏青色、黑色等。

   黑色显瘦的穿衣搭配就是利用收缩色效果。

在页面设计时，应遵循背景色用暗淡后退色，主体背景以浅色展示，展示主要内容选用鲜艳的前进色。这样通过颜色层次搭配的页面不需要多余设计，色彩语言将需要表达的主次从属关系展示出来后，在视觉效果上已按照人类认识事物的规律进行设计，阅读起来更加舒适即所谓提高用户体验。

需要注意的是，为了更好的视觉效果，背景颜色若采用纯色，可在纯色中添加一些元素设计（渐变、图形、线条等）防止用户视觉疲劳。

案例展示：

如apple官网：黑色背景、白色主题内容展示手机、蓝色链接按钮，层次分明。

依照apple官网的设计，用户首先会看到的就是屏幕中的手机、接着是iPhone xr的名称，介绍、购买与否，最后才是背景中的导航条和搜索框。

接下来看个反例。

支付宝的界面大概是很久没更新（截止20190619），目前还是这种比较鲜艳的设计，不过好歹在白色背景下有突出显示。

2、配色的选择。

我们说，一味拙劣的模仿套用优秀设计只是东施效颦，无法理解设计语言就无法让自己的产品拥有活力。总不能说apple选用了黑色背景，我也选择黑色背景。前进色和后退色的选择那么多，该如何选择适合的配色。

配色的选择先问自己三个问题：靓不靓、配不配、奇不奇。

颜色靓不靓——用户群喜好。

这个靓不靓，不是针对设计者而言，而是对用户而言。

产品的终端用户决定了产品迭代方向。面向女性用户的产品一般依照女性用户喜好设计。

颜色配不配——产品服务特性。

这个配不配，指的是搭配，与产品提供的服务搭配。产品的设计语言需要与产品服务保持一致。如科技公司大多用蓝色等，如果有一天，阿里系软件全变成紫色，你会觉得搭配嘛？

颜色奇不奇——产品可识别性。

形成与自己产品特色的色彩搭配是产品脱离竞品的第一步。最近美团就准备把他们以前常用的蓝绿色换成“美团黄”，这就是考虑到产品的可识别性，毕竟美团小哥的身影穿梭在城市间已经成为一道风景线，这就是行走的产品识别标记。所以，对于颜色的新奇，并不是找一些哗众取宠的颜色，而是标记产品的可识别性。

红橙黄绿青蓝色app一览

综上，通过前进色与后退色的选取搭配、颜色的选择，设计出产品的层次结构，提高用户体验。

注意：色彩的膨胀收缩并无绝对之分，体现在明度、色相等因素，譬如深蓝做背景下，同样可以以浅蓝作为前进色，此处不作赘述。