今天和大家聊聊設(shè)計(jì)中的分割，很多人新人做設(shè)計(jì)時(shí)，會(huì)經(jīng)常糾結(jié)頁(yè)面分割用什么方式處理，是用線還是留白，還是用投影？今天我們來(lái)系統(tǒng)的研究下，分割的類型以及設(shè)計(jì)時(shí)候我們?nèi)绾稳ミ\(yùn)用。

更多設(shè)計(jì)文章，設(shè)計(jì)交流，歡迎添加 | 微信ddm7212

關(guān)注#公眾號(hào)：SKY蓋哥 ，第一時(shí)間獲得設(shè)計(jì)干貨和分享內(nèi)容。

一、分割線的作用

分割顧名思義就是做設(shè)計(jì)時(shí)候，分割頁(yè)面的設(shè)計(jì)手法，它的目的是讓我們的設(shè)計(jì)更加有序，不同內(nèi)容在頁(yè)面中呈現(xiàn)的方式更加讓用戶容易理解。是幫助內(nèi)容組織的很重要方式。當(dāng)然分割有很多種形式，色彩，線，間距，投影，圖標(biāo)，圖文等等，今天我們來(lái)系統(tǒng)的研究下分割在設(shè)計(jì)中到底如何使用的，以及什么時(shí)候使用什么樣的分割最合理，希望大家通過(guò)這一篇文章學(xué)會(huì)和掌握。

很多人提到頁(yè)面分割，可能腦海第一個(gè)想到，就是分割線，或者是色塊，其實(shí)不然，分割有很多種類型，不同類型在頁(yè)面中效果也不太一樣。那接下來(lái)，我們一起來(lái)看看頁(yè)面分割到底有幾種類型。

二、用線進(jìn)行分隔

▲使用水平的分割線來(lái)區(qū)分頁(yè)面內(nèi)容，除了分割內(nèi)容外，還做到分組的效果。如上圖阿迪的app和電商app都是通過(guò)類似的方式來(lái)處理。常用在表單中，能使界面瀏覽效率更高，更快速去檢索內(nèi)容；是頁(yè)面分割中最為常見(jiàn)的。

▲比如在airbnb的案例中，分割線就是用來(lái)分割內(nèi)容，起到分組的作用，讓頁(yè)面閱讀起來(lái)更加有節(jié)奏。

▲在dropbox的設(shè)計(jì)中，分割線也可以搭配icon來(lái)使用，讓頁(yè)面看起來(lái)視覺(jué)層次更強(qiáng)，同時(shí)分類更加明確。

▲分割線可以說(shuō)是我們每天都在運(yùn)用的，無(wú)論今天的內(nèi)容設(shè)計(jì)，還是像dropbox這樣的工具產(chǎn)品都離不開(kāi)分割線。但是分割線運(yùn)用時(shí)候，需要注意分割線顏色不要太深，否則會(huì)有山寨感。

▲線太深會(huì)讓頁(yè)面不夠精致，顯得山寨，所以常用的分割線一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度

三、用色塊分割

▲除了線以外，色塊分割也是比較常用的，一般在頁(yè)面中用灰色色塊來(lái)分割，這個(gè)色塊高度一般20px左右，常用于分割上下兩組的內(nèi)容為主。

▲華爾街新聞app設(shè)計(jì)中，大量運(yùn)用色塊對(duì)頁(yè)面進(jìn)行分割，頁(yè)面模塊更加清晰。

▲谷歌瀏覽器的設(shè)計(jì)中，運(yùn)用了色塊的分割，模塊更加明確。如果你們的產(chǎn)品需要很明確的劃分組和組的關(guān)系，可以運(yùn)用這種方式。

▲在很多電商設(shè)計(jì)中，這種風(fēng)格目前還是主流，對(duì)于頁(yè)面內(nèi)容比較復(fù)雜的頁(yè)面，需要這種分割明顯的樣式去區(qū)分模塊和功能。

缺點(diǎn)是風(fēng)格陳舊

用色塊分割，需要考慮產(chǎn)品整體的風(fēng)格規(guī)則，這種分割方式一個(gè)最大弊端就是風(fēng)格會(huì)有些陳舊，在當(dāng)今留白，輕量化設(shè)計(jì)當(dāng)?shù)澜裉?，太多色塊割裂感強(qiáng)，會(huì)顯得陳舊，所以使用的時(shí)候需要根據(jù)產(chǎn)品整體風(fēng)格去把握。

四、用圖標(biāo)進(jìn)行分割

▲除了線，色塊還會(huì)通過(guò)一些插入式的圖形進(jìn)行分割，如上圖，整個(gè)都是列表的信息流，在列表的前面適當(dāng)加一些圖標(biāo)來(lái)錨定整個(gè)頁(yè)面，會(huì)讓頁(yè)面看起來(lái)有更大的空間，瀏覽起來(lái)也更順暢。

▲谷歌瀏覽器的設(shè)計(jì)，也是通過(guò)圖形來(lái)錨定頁(yè)面節(jié)奏，讓設(shè)計(jì)看起來(lái)更加合理和秩序感。

▲谷歌新聞的列表設(shè)計(jì)，表單前面通過(guò)數(shù)字來(lái)錨定整個(gè)頁(yè)面的節(jié)奏和空間，讓大段文字看起來(lái)沒(méi)那么累。

▲谷歌的產(chǎn)品系列中，表單前面增加圖形或者文字會(huì)比較多，也成為他風(fēng)格統(tǒng)一的非常重要的一個(gè)DNA。在表單前面加圖標(biāo)或者其他視覺(jué)元素能讓頁(yè)面呼吸和留白更加的通透。

五、用留白進(jìn)行分隔

常用的的線，灰色色塊，圖標(biāo)分割這些都比較傳統(tǒng)，且對(duì)于頁(yè)面來(lái)說(shuō)一個(gè)最大缺點(diǎn)是占據(jù)了很多空間，本身移動(dòng)端屏幕就很有限，線，色塊，圖標(biāo)，無(wú)形增加了用戶認(rèn)知負(fù)擔(dān)，所以隨著設(shè)計(jì)趨勢(shì)的發(fā)展，用戶也更加關(guān)注內(nèi)容本身，所以慢慢的設(shè)計(jì)開(kāi)始嘗試用空白去分割頁(yè)面，同時(shí)還能消除了頁(yè)面多余的視覺(jué)噪音。

留白在頁(yè)面中是設(shè)計(jì)師沒(méi)有放任何視覺(jué)元素，使得混亂的頁(yè)面看起來(lái)有了喘息的空間，空白的原則創(chuàng)建了空間，通過(guò)格式塔的運(yùn)用，用戶自動(dòng)在視線上形成了分割，同時(shí)空白為頁(yè)面增加了很多呼吸空間，并且讓設(shè)計(jì)看起來(lái)更加簡(jiǎn)潔，在當(dāng)下也是越來(lái)越流行。

▲國(guó)外知名社交電影軟件MUST整個(gè)頁(yè)面都是采用的空白分割運(yùn)用在它設(shè)計(jì)中，通過(guò)內(nèi)容去區(qū)分頁(yè)面模塊信息。

▲有序的留白，從始至終貫穿著整個(gè)頁(yè)面設(shè)計(jì)，這種風(fēng)格也不需要任何線條就能將頁(yè)面層次很好的傳遞出來(lái)。

▲知名藝術(shù)電商網(wǎng)站Artsy就是運(yùn)用空白分割，頁(yè)面干凈富有藝術(shù)氣息。空白來(lái)分割越來(lái)越成為一種主流設(shè)計(jì)手法。

六、用色彩進(jìn)行分割

色彩也同樣可以用來(lái)分割內(nèi)容，將色彩運(yùn)用的好，不僅能吸引用戶將關(guān)注力停留在頁(yè)面上，更主要是能讓用戶更方便的注意到你想表達(dá)信息內(nèi)容。

▲Headspace整體頁(yè)面大多是通過(guò)這樣的色彩進(jìn)行分割，色彩本身就是和其他內(nèi)容有隔離關(guān)系，恰到好處的構(gòu)圖，加上色塊的運(yùn)用，很好的將內(nèi)容和模塊區(qū)別開(kāi)來(lái)。

▲在他的產(chǎn)品中到處可見(jiàn)這樣的設(shè)計(jì)，不僅讓頁(yè)面非常的年輕活潑，同時(shí)這樣的配色也會(huì)讓整體設(shè)計(jì)讓人印象深刻。但是需要注意是不能色彩太花了，圖形存在是為了內(nèi)容做烘托的，最要還是讓用戶關(guān)注內(nèi)容本身。

▲Stadium live這款直播產(chǎn)品，將色彩玩到了極致，整體頁(yè)面就通過(guò)色彩來(lái)區(qū)分內(nèi)容，非常符合娛樂(lè)化產(chǎn)品定位。

▲在它頁(yè)面很多地方都隨處可見(jiàn)色彩的大膽運(yùn)用，這個(gè)對(duì)于設(shè)計(jì)師配色功底要求較高。

▲這款A(yù)PP也是我非常喜歡的一款產(chǎn)品，大家感興趣可以去下載體驗(yàn)。也是用色彩做分割非常成熟的一款產(chǎn)品。

七、用投影做分割

陰影在設(shè)計(jì)中是非常重要的一個(gè)設(shè)計(jì)元素，除了能給頁(yè)面帶來(lái)設(shè)計(jì)層次，同時(shí)也能很好的區(qū)分內(nèi)容，業(yè)內(nèi)最出名的莫過(guò)于的google的材料設(shè)計(jì)語(yǔ)言，其中就是大量運(yùn)用投影來(lái)營(yíng)造頁(yè)面氛圍。

▲在google系統(tǒng)產(chǎn)品中，運(yùn)用投影來(lái)做頁(yè)面分割非常多，投影除了能拉開(kāi)頁(yè)面的空間感，同時(shí)在視覺(jué)上能更加突出。google日歷案例中，導(dǎo)航和核心操作加號(hào)按鈕都加深了投影。

▲google新聞頁(yè)面中同樣如此，除了導(dǎo)航區(qū)域，在卡片上也通過(guò)投影方式來(lái)分割內(nèi)容，增強(qiáng)層次。

▲在蘋果新聞的產(chǎn)品上，同樣看見(jiàn)了類似設(shè)計(jì)手法，通過(guò)按鈕或圖片的投影，增強(qiáng)頁(yè)面深度的運(yùn)用，不同于google的是蘋果的投影更加柔和。

▲Instacart產(chǎn)品也是如此，通過(guò)投影來(lái)區(qū)分內(nèi)容，他們的卡片外面都增加了投影加強(qiáng)頁(yè)面深度。總之，投影是非常好的一種增強(qiáng)頁(yè)面層次和細(xì)節(jié)的一種手法，大家運(yùn)用時(shí)候定好場(chǎng)景和規(guī)則。

八、行業(yè)趨勢(shì)

以上7種分割方法，基本覆蓋了所有視覺(jué)的分割手法，雖然沒(méi)有放品牌和網(wǎng)頁(yè)的案例，但是大體都是相同的，今天無(wú)論我們選擇哪種分割手法，本質(zhì)都是沒(méi)有錯(cuò)的，關(guān)鍵是要和整體的設(shè)計(jì)語(yǔ)言調(diào)性匹配起來(lái)，如果選擇一種就運(yùn)用一種，切忌多種混搭，這樣就不會(huì)出現(xiàn)頁(yè)面錯(cuò)亂的感覺(jué)。從整體移動(dòng)端設(shè)計(jì)趨勢(shì)來(lái)說(shuō)，曲線、留白和投影來(lái)分割是一個(gè)大的方向趨勢(shì)，值得我們多多關(guān)注。

最后

今天這篇文章只是一個(gè)設(shè)計(jì)中的基礎(chǔ)，它在于幫助我們梳理設(shè)計(jì)的內(nèi)容細(xì)節(jié)，別看一個(gè)小點(diǎn)的知識(shí)，當(dāng)你掌握的這些小點(diǎn)知識(shí)多了后，你的知識(shí)體系就會(huì)形成面，最終幫你帶來(lái)質(zhì)的提升，今天這篇文章是讓你打開(kāi)系統(tǒng)的思考，希望大家在使用時(shí)候，根據(jù)自己場(chǎng)景去定義。設(shè)計(jì)沒(méi)有一個(gè)絕對(duì)正確的標(biāo)準(zhǔn)答案，試了才知道。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)