層次的必要性

傳統的屏幕信息的傳遞方式是線性的，無間斷且方向確定的。

例如，不經加工的文本信息，依照人類（國人）習慣，就是按照從左到右，從上到下依次閱讀。

未經處理圖片或視頻，也是按照一張一張或一幀一幀的順序線性切換。

單向的信息傳遞沒有反饋和互動，無法形成信息回路，傳播的流程會簡化，弱化信息傳遞的效果。

而人類認識事物的秩序是從特殊到普遍再到特殊，對于展示給用戶的產品，首先要輸出給用戶的必須是最主要的，也就是特殊的部分，其次再是想要傳遞的其他信息。

產品的設計以視覺形態呈現為主，對信息有效的整理、呈現使得層次分明成為必然。層次的設計符合人類認識事物的習慣，通過設計層次使得信息輸出有主有次，降低用戶獲取信息成本。

如何傳遞層次概念

1、前進色與后退色。

提到層次，最直觀的影響因素就是顏色搭配。

層次的設計表達主要通過前進色與后退色（也稱為膨脹色與收縮色）的搭配。

同一平面下，給人感覺突出的色彩為前進色（膨脹色），通常為明度高、飽和度高的鮮艷色彩，紅色、橙色等暖色系。

危險路標、警告牌等。

給人視覺收縮效果的顏色則為后退色（收縮色）。此類顏色大多為明度低、飽和度低的暗淡色彩，例如藏青色、黑色等。

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

在頁面設計時，應遵循背景色用暗淡后退色，主體背景以淺色展示，展示主要內容選用鮮艷的前進色。這樣通過顏色層次搭配的頁面不需要多余設計，色彩語言將需要表達的主次從屬關系展示出來后，在視覺效果上已按照人類認識事物的規律進行設計，閱讀起來更加舒適即所謂提高用戶體驗。

需要注意的是，為了更好的視覺效果，背景顏色若采用純色，可在純色中添加一些元素設計（漸變、圖形、線條等）防止用戶視覺疲勞。

案例展示：

如apple官網：黑色背景、白色主題內容展示手機、藍色鏈接按鈕，層次分明。

依照apple官網的設計，用戶首先會看到的就是屏幕中的手機、接著是iPhone xr的名稱，介紹、購買與否，最后才是背景中的導航條和搜索框。

接下來看個反例。

支付寶的界面大概是很久沒更新（截止20190619），目前還是這種比較鮮艷的設計，不過好歹在白色背景下有突出顯示。

2、配色的選擇。

我們說，一味拙劣的模仿套用優秀設計只是東施效顰，無法理解設計語言就無法讓自己的產品擁有活力。總不能說apple選用了黑色背景，我也選擇黑色背景。前進色和后退色的選擇那么多，該如何選擇適合的配色。

配色的選擇先問自己三個問題：靚不靚、配不配、奇不奇。

顏色靚不靚——用戶群喜好。

這個靚不靚，不是針對設計者而言，而是對用戶而言。

產品的終端用戶決定了產品迭代方向。面向女性用戶的產品一般依照女性用戶喜好設計。

顏色配不配——產品服務特性。

這個配不配，指的是搭配，與產品提供的服務搭配。產品的設計語言需要與產品服務保持一致。如科技公司大多用藍色等，如果有一天，阿里系軟件全變成紫色，你會覺得搭配嘛？

顏色奇不奇——產品可識別性。

形成與自己產品特色的色彩搭配是產品脫離競品的第一步。最近美團就準備把他們以前常用的藍綠色換成“美團黃”，這就是考慮到產品的可識別性，畢竟美團小哥的身影穿梭在城市間已經成為一道風景線，這就是行走的產品識別標記。所以，對于顏色的新奇，并不是找一些嘩眾取寵的顏色，而是標記產品的可識別性。

紅橙黃綠青藍色app一覽

綜上，通過前進色與后退色的選取搭配、顏色的選擇，設計出產品的層次結構，提高用戶體驗。

注意：色彩的膨脹收縮并無絕對之分，體現在明度、色相等因素，譬如深藍做背景下，同樣可以以淺藍作為前進色，此處不作贅述。

總結

以上是生活随笔為你收集整理的交互设计之层次设计配色篇（表达逻辑——前进色与后退色）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。