編輯導語：UI設計師在處理介面上的資訊層級時，有很多小細節需要注意，比如介面上的排序、以及功能的使用性等等；本文作者分享了關於UI介面中一些常見的層級區分的設計技巧，我們一起來了解一下。

Hello，馬上放假啦！先給大家拜個早年，新年快樂鴨～

今天給大家帶來的主題是關於UI介面資訊層級的處理小技巧；大家都知道，UI設計師最重要的工作之一就是將介面上的資訊清晰有序的呈現給使用者，使產品介面不僅有用，並且美觀易用。

當介面具有優秀的資訊層級時，使用者獲取資訊的速度會更快，使用者體驗更好；而當介面毫無層級關係或層次弱時，不僅介面視覺相對平淡，甚至會使使用者困惑資訊之間的關係從而造成認知負擔。

01 優秀的資訊層級

那我們怎麼去理解所謂「優秀的資訊層級」呢？我們先來看下這 2 張圖感受一下：

像左圖，我們可以一眼區分出重點資訊/次級資訊以及不同的資訊模組之前的關係，整體頁面更有節奏感；而右圖則因為模組之間劃分不清晰、資訊之間對比不夠，使所有的資訊都混為一體，頁面看起來有點凌亂，資訊獲取成本高。

因此，我們可以總結出「優秀的資訊層級」主要有這 2 個特點：

想要做到以上 2 點，從設計技巧上來說也是有套路的。下面我們來看看有哪些技巧吧~

02 建立優秀資訊層級的設計技巧

大家在工作中可能都聽過類似的聲音：“感覺資訊不是很突出” “感覺看起來字好多”。很多時候都是因為頁面的資訊層級沒有拉開，也就是說重點資訊和次級資訊對比不夠。

當對比度不夠的時候，資訊重要程度都是相似的，我們會把資訊看成一團，沒有重點。

對設計師而言，我們可以透過一些設計手法將頁面中的資訊進行最佳化調整，可以從以下幾個維度著手：

1. 加大字號或字重

這是相對簡單的一種處理方式，我們都知道字型是有重量的，字型越大/越粗對應的視覺重量越重；因此我們可以使用不同的字型大小與字重去體現資訊。

對於一級標題或重點資訊，我們可以適當增大字號及字重去拉開標題與其他資訊的層級，使人一眼看過去就可以抓住介面的重點，提高資訊獲取效率。

舉個例子例子：

如上圖所示，文字資訊間的字重都是一樣的，字號也沒有拉開對比，顯得文字非常多，一眼看過去沒有重點。

我們來看看簡單的加大字號與字重，拉開文字之間的對比會如何呢？

是不是頁面資訊多了些層次感和節奏感呢？一看掃過去，我們可以快速的將頁面分成上下不同的模組；同時，使用者關心的房型名稱和價格也相應地從其他資訊中突出了。

因此，當設計的介面收到類似“字太多”“頁面太平”的反饋時，就可以試試“大膽”地加大字號及字重。

同時，適當的對比還可以增加整體板式的視覺節奏感。「視覺節奏感」指的是運用視覺元素的重複、發散、對比、重疊等多種變化形成節奏的變化；這在平面設計中運用的比較多，是設計師必須掌握的技能；而在UI設計中，一些需要呈現強烈視覺風格的介面，也常常可以運用到類似的技巧。

2. 增加圖形用於標示重點

有時候頁面層級比較多或者限制於一些設計規範，字號大小和字重變化不能達到層級區分的目的時，我們還可以透過增加修飾元素來標示重點。特別是類似下面這種資訊層級多到爆炸的情況。

常見的修飾元素可以有短線/圓點/基礎塊面等，這些元素需要根據產品本身的視覺語言和風格去使用。

同時，如何去運用這些元素也需要大家平時多積累。如我們在看一些優秀作品的時，多總結頁面的層級關係是透過哪些表現技法體現的，這樣我們在實際專案中，才能做到胸有成竹。

下面舉 2 個例子簡單的分析一下～

例子 1 ：

如上圖黃色框內的資訊，屬於推廣內容的類別，需要讓使用者注意到，但同時字號/字重不能過於強調，否則又可能會搶了推廣內容的視覺重點。

這裡的處理方式是透過增加 icon ，讓資訊更明顯，同時又不會奪去推廣內容的視覺重心。大家也可以思考一下是否還有其他方式～

例子 2 ：

如上圖黃色框裡的內容，儘管整體文字資訊層級比較豐富，但我們還是可以快速知道黃框裡的內容主要是分成了 2 個部分：當地達人的基本資訊和推薦內容，這是為什麼呢？

原因就在於「推薦內容部分增加了底色」，底色形成了一個基礎塊面，我們視覺上會自動把底色塊裡的所有資訊先聚攏在一起。

3. 使用顏色區分資訊

無論是什麼產品，其視覺語言中都會有不同色階的灰色；因為顏色深淺、冷暖也可以起到資訊層級區分的作用。如重點資訊是黑灰，次級資訊是深灰，輔助資訊是淺灰，再結合字重/大小的變化，我們可以讓頁面層級更清晰。

使用顏色變化拉開資訊層級時，需要注意灰色變化的文字適用於白或黑色背景，遇到彩色背景時，不太建議使用，因為容易顯得介面髒。

4. 拉開間距，引導視線

格式塔原理中有個叫接近性原理，指的是位置相近的各元素我們傾向於認為是一個整體；還有研究驗證，接近性原理中距離的接近，比起顏色/形狀的接近，更容易被認為是一個整體。

如圖（2），我們可以發現，當元素之間的距離達到一定程度時，即使它們有著完全不同的特徵，我們也更傾向於認為互相靠近的元素是相關的，組成了一個整體。

因此，我們的介面設計中也可以沿用此原理，不同模組之間的間距適當拉開，使資訊模組區分的更明顯，如下面的 2 個例子：

除了不同模組的區分外，文字資訊還需要注意字距與行距；如果文字的行間距過小，會導致文字內容擠在一起，使使用者閱讀時產生疲勞感。

當字間距與行間距比例不正確時，會使閱讀方向發生錯位，造成使用者認知障礙。

5. 運用陰影、分割線建立層級

對資訊模組的區分，除了拉開間距外，時常還會搭配分割線/陰影的運用來建立層級。

不管用什麼方式，我們都需要保持介面的乾淨清爽，讓這些元素髮揮層級區分的作用，而不是變成視覺干擾。

因此在運用這些元素時，要注意以下這些問題：

1）分割線與背景的對比度不宜過大

2）陰影不宜太深硬

3）剋制使用這些元素

03 寫在最後

以上便是關於本期的所有內容啦。我們分享了UI介面中一些常見的層級區分的設計技巧。

當然，從設計的形式上來說肯定遠不止這些，但其中的原理都是相通的，希望大家能夠有所收穫，並能運用到實際的專案中。

#專欄作家#

設計牛奶盒，微信公眾號：設計牛奶盒，人人都是產品經理專欄作家。做一個有生活態度的設計牛奶盒。

本文原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議。