APP界面設計中如何建立更好的層次感?

在進行設計工作的時候，層次感是個必要重要的內容。層次感是在滿足視覺合理性的基礎上，把要強調或者突出的主體與畫面中的其他元素進行區分。通過對版面中元素的大小、遠近和前後等多重關係進行梳理，並運用色彩加以區分，可以使元素和主體在畫面中具有一定的主次關係，讓人在觀看時產生一定的視覺層次和心理變化。

界面的層次感

極富視覺層次感的界面不僅極具設計美感，能取悅用戶，還可以建立起清晰直觀地視覺層級，方便用戶簡單快速的識別和讀取需要的界面內容，從而提升用戶體驗，降低跳出率。下面從五個角度分析如何在界面設計過程中營造層次感。

文字的層級區分

在界面設計中，文字部分的層級區分是決定一個界面是否具有層次感的重要因素。一般情況下，文字可以進行調整的屬性有字體、字號、色相、明度等。其中字號的大小是拉開文字層級的首要因素。其次是調整文字的粗細，如果界面中文字層級過多，字號的大小和字重無法很好地處理文字信息層級，則再考慮顏色和明度的調整。

文字層級的區分

無論是海報還是包裝設計，都要有主題文字來吸引讀者的視線，界面設計也是如此。通過首級文字拉開對比，可以讓用戶快速注意到這個界面中所要傳遞的重點信息是什麼。蘋果手機的系統從iOS11開始，就採用了更大的標題和字號來進行層級的區分，增大了字號的可選擇範圍，強烈的對比更具有層次感。

由於人的習慣是由上而下，由左及右的瀏覽順序，因此界面的信息瀏覽起點時在左上方，而左對齊有時界面設計中最常用的對齊方式。排版設計中，左上方一般防止信息流的主標題。如此就造就了上重下輕、左重右輕的布局方式。

左對齊時最常見的方式

大方向上統一，局部對比與調和，是在做界面設計時始終要遵循的原則。也就是說，界面中相同屬性的板塊要保持統一。如果在一個列表信息中，有多種不同的信息欄位，並不一定每一個欄位都要進行樣式上的區分。一些不必要區分的欄位可以保持統一，從而起到調和的作用。

元素的複雜程度

在做界面設計時，界面中的每一個元素的複雜程度時與鈣元素的重要程度掛鈎的。APP首頁都會做的相對複雜一些，層級較多，有banner，推廣，猜你喜歡等板塊。而一些二級頁則顯得比較清爽直觀，大多數是統一的feed流列表。如果在二級頁中加入一些多樣的運營入口或其他較複雜的板塊，就會顯得沒有層次，較為混亂。

例如，圖標的設計。在界面設計中，如果在非重要的層級使用了較為複雜的圖標，而重要層級中的圖標反而簡單，界面的層次感就會出現問題。把握好圖標的複雜程度，可以讓用戶更直觀的感受到主要功能交互與非主要功能交互，從而使界面更具層次感。例如電商類的APP，通常在首頁均使用了較為複雜的圖標，而在個人中心等位置的圖標，有的採用了最精簡的單色線性圖標，有的雖然為了保持產品的調性，也使用了彩色，但其複雜程度與首頁圖標差距很大。

首頁通常採用較為複雜的圖標

此外，合理的使用插圖也比較關鍵。前面文章有提到過，不是所有的空頁面都需要進行精心設計。讓產品內的彈窗和預設頁更具有層次，用戶體驗也會得到提升。

合理的間距

界面設計中需要遵循親密性原則。有些時候設計師會糾結，什麼時候該用分界線，什麼時候該直接空出間距。其實，一個APP如果想要營造比較好的層次感，基礎且正確的做法應該是根據信息的重要性進行區分。重要程度最弱的區域採用留白，其次是分割線。如果一個界面板塊過多，板塊之間的分割就可以使用粗分界線來處理。但一般來說，產品的主界面會通過較大面積的留白，清晰的布局讓界面看起來更輕鬆且具有呼吸感。而一些二級甚至三級輔助界面如果在使用這種較大面積的留白就會顯得過於追求形式。由於一級界面內容較為複雜，用戶需要獲取的信息較多，大面積的留白是有必要的。而對於一些以及、二級或者三級純列表界面來說，用戶獲取信息的方式就比較明顯了，往往只會關注列表內的幾個關鍵詞。這個時候，一屏所能承載的信息量就顯得尤為重要了。

信息的歸類

相同表意的信息歸到一起。在瀏覽界面時，用戶往往喜歡在某個板塊中看到所有有關的東西，而不相關的東西要有明確的提示，否則視覺上沒有層次感，很容易影響用戶獲取信息的效率。當界面中的一個大板塊內有很多小功能入口時，就需要進行入口的信息歸類了。

相似功能的層級歸類

瀏覽界面時，「查看更多」經常會出現在綜合性較強的界面中，代表著「進入二級頁」。「查看更多」最基本的做法是跟隨在當前版塊的標題後面，這種處理方式可以讓用戶非常清晰的了解到這個命令指的是與標題內容相關的更多內容。有些設計師喜歡放置在板塊的下方，但這會像一個功能按鈕，讓用戶點擊後可以去完成某一個有意義的行為。

合理的配色

色彩色運用在界面設計中是非常需要克制的，每一種色彩的使用都需要有緣由和目的，合理的顏色使用可以營造產品氣氛。在界面的設計中，相比於黑白灰，有彩色層級更高。設計師在做APP界面時，都喜歡給導航條加入主色色相，使其可以在強調產品性格的同時，從視覺層級上壓住整個界面，避免界面缺少重量感。並且無論界面中有多少顏色，由於導航條所佔面積較大，都可以避免界面顏色看起來比較雜，這也是層次感的一種簡單體現方式。而有些APP採用的白色導航條，是因為產品內的顏色並不是很多，飽和度也不是太高，採用白色的導航條會讓界面看起來清爽乾淨。

合理配色會讓界面更高級

界面設計中，通常彩色的元素一般都是可以點擊的。有些層級較低的按鈕一般會用彩色的文字來表示，但並不是所有的可點擊的文字都是彩色的，例如常見的列表頁。

此外，設計長篇幅的文本頁時，可以適當地將文字顏色調灰，而不是採用純黑色，這可以讓閱讀起來更輕鬆。長時間閱讀也不會感覺到疲憊。

本人是做UI設計工作的，特借貴平臺輸出一些內容為大家分享，旨在共同學習和進步。以上部分分享內容來自《規律與邏輯》。如有部分侵權請告知，將會立即刪除。