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