編輯導語：UI設計師在處理界面上的信息層級時，有很多小細節需要注意，比如界面上的排序、以及功能的使用性等等；本文作者分享了關於UI界面中一些常見的層級區分的設計技巧，我們一起來了解一下。
Hello，馬上放假啦！先給大家拜個早年，新年快樂鴨～
今天給大家帶來的主題是關於UI界面信息層級的處理小技巧；大家都知道，UI設計師最重要的工作之一就是將界面上的信息清晰有序的呈現給用户，使產品界面不僅有用，並且美觀易用。
當界面具有優秀的信息層級時，用户獲取信息的速度會更快，用户體驗更好；而當界面毫無層級關係或層次弱時，不僅界面視覺相對平淡，甚至會使用户困惑信息之間的關係從而造成認知負擔。
01 優秀的信息層級那我們怎麼去理解所謂「優秀的信息層級」呢？我們先來看下這 2 張圖感受一下：
像左圖，我們可以一眼區分出重點信息/次級信息以及不同的信息模塊之前的關係，整體頁面更有節奏感；而右圖則因為模塊之間劃分不清晰、信息之間對比不夠，使所有的信息都混為一體，頁面看起來有點凌亂，信息獲取成本高。
因此，我們可以總結出「優秀的信息層級」主要有這 2 個特點：
想要做到以上 2 點，從設計技巧上來説也是有套路的。下面我們來看看有哪些技巧吧~
02 創建優秀信息層級的設計技巧大家在工作中可能都聽過類似的聲音：“感覺信息不是很突出” “感覺看起來字好多”。很多時候都是因為頁面的信息層級沒有拉開，也就是説重點信息和次級信息對比不夠。
當對比度不夠的時候，信息重要程度都是相似的，我們會把信息看成一團，沒有重點。
對設計師而言，我們可以通過一些設計手法將頁面中的信息進行優化調整，可以從以下幾個維度着手：
1. 加大字號或字重這是相對簡單的一種處理方式，我們都知道字體是有重量的，字體越大/越粗對應的視覺重量越重；因此我們可以使用不同的字體大小與字重去體現信息。
對於一級標題或重點信息，我們可以適當增大字號及字重去拉開標題與其他信息的層級，使人一眼看過去就可以抓住界面的重點，提高信息獲取效率。
舉個例子例子：
如上圖所示，文字信息間的字重都是一樣的，字號也沒有拉開對比，顯得文字非常多，一眼看過去沒有重點。
我們來看看簡單的加大字號與字重，拉開文字之間的對比會如何呢？
是不是頁面信息多了些層次感和節奏感呢？一看掃過去，我們可以快速的將頁面分成上下不同的模塊；同時，用户關心的房型名稱和價格也相應地從其他信息中突出了。
因此，當設計的界面收到類似“字太多”“頁面太平”的反饋時，就可以試試“大膽”地加大字號及字重。
同時，適當的對比還可以增加整體板式的視覺節奏感。「視覺節奏感」指的是運用視覺元素的重複、發散、對比、重疊等多種變化形成節奏的變化；這在平面設計中運用的比較多，是設計師必須掌握的技能；而在UI設計中，一些需要呈現強烈視覺風格的界面，也常常可以運用到類似的技巧。
有時候頁面層級比較多或者限制於一些設計規範，字號大小和字重變化不能達到層級區分的目的時，我們還可以通過增加修飾元素來標示重點。特別是類似下面這種信息層級多到爆炸的情況。
常見的修飾元素可以有短線/圓點/基礎塊面等，這些元素需要根據產品本身的視覺語言和風格去使用。
同時，如何去運用這些元素也需要大家平時多積累。如我們在看一些優秀作品的時，多總結頁面的層級關係是通過哪些表現技法體現的，這樣我們在實際項目中，才能做到胸有成竹。
下面舉 2 個例子簡單的分析一下～
例子 1 ：
如上圖黃色框內的信息，屬於推廣內容的類別，需要讓用户注意到，但同時字號/字重不能過於強調，否則又可能會搶了推廣內容的視覺重點。
這裏的處理方式是通過增加 icon ，讓信息更明顯，同時又不會奪去推廣內容的視覺重心。大家也可以思考一下是否還有其他方式～
例子 2 ：
如上圖黃色框裏的內容，儘管整體文字信息層級比較豐富，但我們還是可以快速知道黃框裏的內容主要是分成了 2 個部分：當地達人的基本信息和推薦內容，這是為什麼呢？
原因就在於「推薦內容部分增加了底色」，底色形成了一個基礎塊面，我們視覺上會自動把底色塊裏的所有信息先聚攏在一起。
3. 使用顏色區分信息無論是什麼產品，其視覺語言中都會有不同色階的灰色；因為顏色深淺、冷暖也可以起到信息層級區分的作用。如重點信息是黑灰，次級信息是深灰，輔助信息是淺灰，再結合字重/大小的變化，我們可以讓頁面層級更清晰。
使用顏色變化拉開信息層級時，需要注意灰色變化的文字適用於白或黑色背景，遇到彩色背景時，不太建議使用，因為容易顯得界面髒。
格式塔原理中有個叫接近性原理，指的是位置相近的各元素我們傾向於認為是一個整體；還有研究驗證，接近性原理中距離的接近，比起顏色/形狀的接近，更容易被認為是一個整體。
如圖（2），我們可以發現，當元素之間的距離達到一定程度時，即使它們有着完全不同的特徵，我們也更傾向於認為互相靠近的元素是相關的，組成了一個整體。
因此，我們的界面設計中也可以沿用此原理，不同模塊之間的間距適當拉開，使信息模塊區分的更明顯，如下面的 2 個例子：
除了不同模塊的區分外，文字信息還需要注意字距與行距；如果文本的行間距過小，會導致文字內容擠在一起，使用户閲讀時產生疲勞感。
當字間距與行間距比例不正確時，會使閲讀方向發生錯位，造成用户認知障礙。
對信息模塊的區分，除了拉開間距外，時常還會搭配分割線/陰影的運用來創建層級。
不管用什麼方式，我們都需要保持界面的乾淨清爽，讓這些元素髮揮層級區分的作用，而不是變成視覺干擾。
因此在運用這些元素時，要注意以下這些問題：
1）分割線與背景的對比度不宜過大
2）陰影不宜太深硬
3）剋制使用這些元素
以上便是關於本期的所有內容啦。我們分享了UI界面中一些常見的層級區分的設計技巧。
當然，從設計的形式上來説肯定遠不止這些，但其中的原理都是相通的，希望大家能夠有所收穫，並能運用到實際的項目中。
#專欄作家#設計牛奶盒，微信公眾號：設計牛奶盒，人人都是產品經理專欄作家。做一個有生活態度的設計牛奶盒。
本文原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議。