大家在學習UI設計時，經常會接觸到頁面的布局，而往往頁面布局的方式會直接影響到一個app或網頁的視覺，通常好的布局，能夠給用戶帶來非常舒服的視覺效果，更容易得到用戶的接受和好評。然而，想要好的布局，就需要將最經常用的分割方式一起找出來，分析其優缺點，只有知道了他們的優缺點，才能運用得當。
A、背景欄分割
背景欄分割有點像是一個容器上放了不同維度的內容，而在內容區分的同時，還能保持界面的統一性，如圖：
背景欄分割有點像一個容器上放了不同維度的內容，能夠在內容區分的同時，還能保持界面的統一性。
優點：設計時好的布局，可以提高屏幕的利用率，同時能讓界面看起來更加的有秩序，大大的降低了用戶對大量信息的理解時間。
缺點：對圖標視覺的要求相對較高，因此在做這種頁面時，一定要把控好圖標的色彩搭配和細節的一致性，不然畫面會顯得很粗糙。
總結：這種布局分割適合內容多且不好梳理的頁面，利用背景分割，將每個部分分成獨立的模塊，將用戶的注意力留在想看的模板，同時提高用戶的理解能力，如圖：
B、分割線分割
UI設計中最常見的一種分割分割方式就是分割線，它能有效的幫助用戶理解頁面層次，有分隔、有組織的作用，一般時為了將內容分割開，形成獨立的內容和信息，如圖：
優點：這種設計方案比較保守，當不知道用那種方式來做分割時，可以選擇這種，一般都不會錯。
缺點：需要處理好線的粗細，間距和顏色，線條不宜過粗，顏色不能太重，若處理不好會讓頁面有一種擠壓及粗重的感覺。
總結：這種分割線通常使用在UGC模塊上，首先需要考慮到屏幕的利用率，其次對每個用戶產生的內容要進行分割，但存在感不能太強，避免干擾用戶對內容本身的注意力，所以通常會使用在UGC模塊上。
C、留白分割
所謂的留白其實是指頁面元素間或包圍頁面元素的空白空間，雖然這種手法可能會被認為浪費空間，但不得不說，目前大部分app的首頁都是采用留白分割，如圖：
優點：使用留白能讓整個頁面在視覺上展現的更加舒適，去除很多的邊邊框框的束縛，顯得更加規整，且不雜亂。
缺點：要求界面元素統一，重復，同時圖片的大致調性要一致，不然會顯得界面和凌亂，而且留白的增多也意味這會減少屏幕的利用率，因此在使用留白做分割還是要符合產品調性和整體頁面的展示效果。
總結：這種分割較為適合產品調性較簡潔，同時頁面圖片較多的界面，因為與其說時留白做分割，不如說時圖片做分割。
D、卡片投影分割
卡片投影一直以小巧整齊的內容容器形式而存在，每一個卡片都承載不同的信息，時用戶了解更多細節信息的入口，如圖：
優點：能快速吸引用戶的注意力，而且容易出現視覺效果，設計師的時候大部分設計師都比較喜歡用卡片投影。
缺點：屏幕的利用率比較低，更主要的時開發實現有些難度，上線版一般和設計稿差距很大。
總結：卡片投影更適合信息量多，但視覺較為精簡的頁面，因此目前很多的電商，金融類首頁用的都是卡片投影式的設計。
其實，總的來說，任何表現形式都是為了更好的呈現功能和內容，但作為一名合格的設計師，你不能盲目的去追隨趨勢，一定要了解為什么采用這種形式。
QQ：2782950027
郵箱：2782950027@qq.com
