2021-9-12 濤濤
今天和大家聊聊設計中的分割，很多人新人做設計時，會經常糾結頁面分割用什么方式處理，是用線還是留白，還是用投影？今天我們來系統的研究下，分割的類型以及設計時候我們如何去運用。
更多設計文章，設計交流，歡迎添加 | 微信ddm7212
關注#公眾號：SKY蓋哥 ，第一時間獲得設計干貨和分享內容。
一、分割線的作用
分割顧名思義就是做設計時候，分割頁面的設計手法，它的目的是讓我們的設計更加有序，不同內容在頁面中呈現的方式更加讓用戶容易理解。是幫助內容組織的很重要方式。當然分割有很多種形式，色彩，線，間距，投影，圖標，圖文等等，今天我們來系統的研究下分割在設計中到底如何使用的，以及什么時候使用什么樣的分割最合理，希望大家通過這一篇文章學會和掌握。
很多人提到頁面分割，可能腦海第一個想到，就是分割線，或者是色塊，其實不然，分割有很多種類型，不同類型在頁面中效果也不太一樣。那接下來，我們一起來看看頁面分割到底有幾種類型。
二、用線進行分隔
▲使用水平的分割線來區分頁面內容，除了分割內容外，還做到分組的效果。如上圖阿迪的app和電商app都是通過類似的方式來處理。常用在表單中，能使界面瀏覽效率更高，更快速去檢索內容；是頁面分割中最為常見的。
▲比如在airbnb的案例中，分割線就是用來分割內容，起到分組的作用，讓頁面閱讀起來更加有節奏。
▲在dropbox的設計中，分割線也可以搭配icon來使用，讓頁面看起來視覺層次更強，同時分類更加明確。
▲分割線可以說是我們每天都在運用的，無論今天的內容設計，還是像dropbox這樣的工具產品都離不開分割線。但是分割線運用時候，需要注意分割線顏色不要太深，否則會有山寨感。
▲線太深會讓頁面不夠精致，顯得山寨，所以常用的分割線一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度
三、用色塊分割
▲除了線以外，色塊分割也是比較常用的，一般在頁面中用灰色色塊來分割，這個色塊高度一般20px左右，常用于分割上下兩組的內容為主。
▲華爾街新聞app設計中，大量運用色塊對頁面進行分割，頁面模塊更加清晰。
▲谷歌瀏覽器的設計中，運用了色塊的分割，模塊更加明確。如果你們的產品需要很明確的劃分組和組的關系，可以運用這種方式。
▲在很多電商設計中，這種風格目前還是主流，對于頁面內容比較復雜的頁面，需要這種分割明顯的樣式去區分模塊和功能。
缺點是風格陳舊
用色塊分割，需要考慮產品整體的風格規則，這種分割方式一個最大弊端就是風格會有些陳舊，在當今留白，輕量化設計當道今天，太多色塊割裂感強，會顯得陳舊，所以使用的時候需要根據產品整體風格去把握。
四、用圖標進行分割
▲除了線，色塊還會通過一些插入式的圖形進行分割，如上圖，整個都是列表的信息流，在列表的前面適當加一些圖標來錨定整個頁面，會讓頁面看起來有更大的空間，瀏覽起來也更順暢。
▲谷歌瀏覽器的設計，也是通過圖形來錨定頁面節奏，讓設計看起來更加合理和秩序感。
▲谷歌新聞的列表設計，表單前面通過數字來錨定整個頁面的節奏和空間，讓大段文字看起來沒那么累。
▲谷歌的產品系列中，表單前面增加圖形或者文字會比較多，也成為他風格統一的非常重要的一個DNA。在表單前面加圖標或者其他視覺元素能讓頁面呼吸和留白更加的通透。
五、用留白進行分隔
常用的的線，灰色色塊，圖標分割這些都比較傳統，且對于頁面來說一個最大缺點是占據了很多空間，本身移動端屏幕就很有限，線，色塊，圖標，無形增加了用戶認知負擔，所以隨著設計趨勢的發展，用戶也更加關注內容本身，所以慢慢的設計開始嘗試用空白去分割頁面，同時還能消除了頁面多余的視覺噪音。
留白在頁面中是設計師沒有放任何視覺元素，使得混亂的頁面看起來有了喘息的空間，空白的原則創建了空間，通過格式塔的運用，用戶自動在視線上形成了分割，同時空白為頁面增加了很多呼吸空間，并且讓設計看起來更加簡潔，在當下也是越來越流行。
▲國外知名社交電影軟件MUST整個頁面都是采用的空白分割運用在它設計中，通過內容去區分頁面模塊信息。
▲有序的留白，從始至終貫穿著整個頁面設計，這種風格也不需要任何線條就能將頁面層次很好的傳遞出來。
▲知名藝術電商網站Artsy就是運用空白分割，頁面干凈富有藝術氣息?？瞻讈矸指钤絹碓匠蔀橐环N主流設計手法。
六、用色彩進行分割
色彩也同樣可以用來分割內容，將色彩運用的好，不僅能吸引用戶將關注力停留在頁面上，更主要是能讓用戶更方便的注意到你想表達信息內容。
▲Headspace整體頁面大多是通過這樣的色彩進行分割，色彩本身就是和其他內容有隔離關系，恰到好處的構圖，加上色塊的運用，很好的將內容和模塊區別開來。
▲在他的產品中到處可見這樣的設計，不僅讓頁面非常的年輕活潑，同時這樣的配色也會讓整體設計讓人印象深刻。但是需要注意是不能色彩太花了，圖形存在是為了內容做烘托的，最要還是讓用戶關注內容本身。
▲Stadium live這款直播產品，將色彩玩到了極致，整體頁面就通過色彩來區分內容，非常符合娛樂化產品定位。
▲在它頁面很多地方都隨處可見色彩的大膽運用，這個對于設計師配色功底要求較高。
▲這款APP也是我非常喜歡的一款產品，大家感興趣可以去下載體驗。也是用色彩做分割非常成熟的一款產品。
七、用投影做分割
陰影在設計中是非常重要的一個設計元素，除了能給頁面帶來設計層次，同時也能很好的區分內容，業內最出名的莫過于的google的材料設計語言，其中就是大量運用投影來營造頁面氛圍。
▲在google系統產品中，運用投影來做頁面分割非常多，投影除了能拉開頁面的空間感，同時在視覺上能更加突出。google日歷案例中，導航和核心操作加號按鈕都加深了投影。
▲google新聞頁面中同樣如此，除了導航區域，在卡片上也通過投影方式來分割內容，增強層次。
▲在蘋果新聞的產品上，同樣看見了類似設計手法，通過按鈕或圖片的投影，增強頁面深度的運用，不同于google的是蘋果的投影更加柔和。
▲Instacart產品也是如此，通過投影來區分內容，他們的卡片外面都增加了投影加強頁面深度?？傊?，投影是非常好的一種增強頁面層次和細節的一種手法，大家運用時候定好場景和規則。
八、行業趨勢
以上7種分割方法，基本覆蓋了所有視覺的分割手法，雖然沒有放品牌和網頁的案例，但是大體都是相同的，今天無論我們選擇哪種分割手法，本質都是沒有錯的，關鍵是要和整體的設計語言調性匹配起來，如果選擇一種就運用一種，切忌多種混搭，這樣就不會出現頁面錯亂的感覺。從整體移動端設計趨勢來說，曲線、留白和投影來分割是一個大的方向趨勢，值得我們多多關注。
最后
今天這篇文章只是一個設計中的基礎，它在于幫助我們梳理設計的內容細節，別看一個小點的知識，當你掌握的這些小點知識多了后，你的知識體系就會形成面，最終幫你帶來質的提升，今天這篇文章是讓你打開系統的思考，希望大家在使用時候，根據自己場景去定義。設計沒有一個絕對正確的標準答案，試了才知道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務