編輯導語：UI設(shè)計師在處理界面上的信息層級時，有很多小細節(jié)需要注意，比如界面上的排序、以及功能的使用性等等；本文作者分享了關(guān)于UI界面中一些常見的層級區(qū)分的設(shè)計技巧，我們一起來了解一下。

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

今天給大家?guī)淼闹黝}是關(guān)于UI界面信息層級的處理小技巧；大家都知道，UI設(shè)計師最重要的工作之一就是將界面上的信息清晰有序的呈現(xiàn)給用戶，使產(chǎn)品界面不僅有用，并且美觀易用。

當界面具有優(yōu)秀的信息層級時，用戶獲取信息的速度會更快，用戶體驗更好；而當界面毫無層級關(guān)系或?qū)哟稳鯐r，不僅界面視覺相對平淡，甚至會使用戶困惑信息之間的關(guān)系從而造成認知負擔。

01 優(yōu)秀的信息層級

那我們怎么去理解所謂「優(yōu)秀的信息層級」呢？我們先來看下這 2 張圖感受一下：

像左圖，我們可以一眼區(qū)分出重點信息/次級信息以及不同的信息模塊之前的關(guān)系，整體頁面更有節(jié)奏感；而右圖則因為模塊之間劃分不清晰、信息之間對比不夠，使所有的信息都混為一體，頁面看起來有點凌亂，信息獲取成本高。

因此，我們可以總結(jié)出「優(yōu)秀的信息層級」主要有這 2 個特點：

• 重點信息與次級信息對比適中；
• 信息與模塊的層級關(guān)系清晰；

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

02 創(chuàng)建優(yōu)秀信息層級的設(shè)計技巧

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

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

對設(shè)計師而言，我們可以通過一些設(shè)計手法將頁面中的信息進行優(yōu)化調(diào)整，可以從以下幾個維度著手：

1. 加大字號或字重

這是相對簡單的一種處理方式，我們都知道字體是有重量的，字體越大/越粗對應(yīng)的視覺重量越重；因此我們可以使用不同的字體大小與字重去體現(xiàn)信息。

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

舉個例子例子：

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

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

是不是頁面信息多了些層次感和節(jié)奏感呢？一看掃過去，我們可以快速的將頁面分成上下不同的模塊；同時，用戶關(guān)心的房型名稱和價格也相應(yīng)地從其他信息中突出了。

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

同時，適當?shù)膶Ρ冗€可以增加整體板式的視覺節(jié)奏感?！敢曈X節(jié)奏感」指的是運用視覺元素的重復、發(fā)散、對比、重疊等多種變化形成節(jié)奏的變化；這在平面設(shè)計中運用的比較多，是設(shè)計師必須掌握的技能；而在UI設(shè)計中，一些需要呈現(xiàn)強烈視覺風格的界面，也常常可以運用到類似的技巧。

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

有時候頁面層級比較多或者限制于一些設(shè)計規(guī)范，字號大小和字重變化不能達到層級區(qū)分的目的時，我們還可以通過增加修飾元素來標示重點。特別是類似下面這種信息層級多到爆炸的情況。

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

同時，如何去運用這些元素也需要大家平時多積累。如我們在看一些優(yōu)秀作品的時，多總結(jié)頁面的層級關(guān)系是通過哪些表現(xiàn)技法體現(xiàn)的，這樣我們在實際項目中，才能做到胸有成竹。

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

例子 1 ：

如上圖黃色框內(nèi)的信息，屬于推廣內(nèi)容的類別，需要讓用戶注意到，但同時字號/字重不能過于強調(diào)，否則又可能會搶了推廣內(nèi)容的視覺重點。

這里的處理方式是通過增加 icon ，讓信息更明顯，同時又不會奪去推廣內(nèi)容的視覺重心。大家也可以思考一下是否還有其他方式～

例子 2 ：

如上圖黃色框里的內(nèi)容，盡管整體文字信息層級比較豐富，但我們還是可以快速知道黃框里的內(nèi)容主要是分成了 2 個部分：當?shù)剡_人的基本信息和推薦內(nèi)容，這是為什么呢？

原因就在于「推薦內(nèi)容部分增加了底色」，底色形成了一個基礎(chǔ)塊面，我們視覺上會自動把底色塊里的所有信息先聚攏在一起。

3. 使用顏色區(qū)分信息

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

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

4. 拉開間距，引導視線

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

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

因此，我們的界面設(shè)計中也可以沿用此原理，不同模塊之間的間距適當拉開，使信息模塊區(qū)分的更明顯，如下面的 2 個例子：

除了不同模塊的區(qū)分外，文字信息還需要注意字距與行距；如果文本的行間距過小，會導致文字內(nèi)容擠在一起，使用戶閱讀時產(chǎn)生疲勞感。

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

5. 運用陰影、分割線創(chuàng)建層級

對信息模塊的區(qū)分，除了拉開間距外，時常還會搭配分割線/陰影的運用來創(chuàng)建層級。

不管用什么方式，我們都需要保持界面的干凈清爽，讓這些元素發(fā)揮層級區(qū)分的作用，而不是變成視覺干擾。

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

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

2）陰影不宜太深硬

3）克制使用這些元素

03 寫在最后

以上便是關(guān)于本期的所有內(nèi)容啦。我們分享了UI界面中一些常見的層級區(qū)分的設(shè)計技巧。

當然，從設(shè)計的形式上來說肯定遠不止這些，但其中的原理都是相通的，希望大家能夠有所收獲，并能運用到實際的項目中。

#專欄作家#

設(shè)計牛奶盒，微信公眾號：設(shè)計牛奶盒，人人都是產(chǎn)品經(jīng)理專欄作家。做一個有生活態(tài)度的設(shè)計牛奶盒。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。