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