每一年設(shè)計都會有新的設(shè)計方向，今年用的最多是留白分割，但我們設(shè)計的時候不能光看別的產(chǎn)品上使用，我們也照搬，我們需要的是找到對自己產(chǎn)品最適合的設(shè)計方向。而我們今天要討論的是模塊與模塊之間的分割設(shè)計，不同類型的分割設(shè)計都是如何使用的。
一、分割布局的作用
APP中分割布局是產(chǎn)品對界面信息架構(gòu)功能點梳理、分類之后形成的視覺排版產(chǎn)物，將視覺上或者內(nèi)容上需要區(qū)分的內(nèi)容用不同的分割形式，造就了視覺上對于一款app頁面信息的整體和獨立感，能夠幫助用戶了解頁面的層次結(jié)構(gòu)，賦予頁面內(nèi)容以組織性。
二、常見的分割方式
1、背景欄分割
背景欄分割有點像一個容器上放了不同維度的內(nèi)容，能夠在內(nèi)容區(qū)分的同時，還能保持界面的統(tǒng)一性。如下圖所示：
對內(nèi)容的干擾：強(qiáng)，這種布局會分散用戶的注意力，阻礙用戶快速掃覽
分割的強(qiáng)弱：弱
上下滑動的視覺感受：每個被分割的卡片都是相對獨立的維度，但是放在一個界面后，視覺上又會比較規(guī)整且統(tǒng)一，但由于分割感比較強(qiáng)，因此視覺阻斷較強(qiáng)，閱讀成本較高。
2、分割線分割
分割線是UI設(shè)計中最常見的一種分隔方式，能幫助用戶理解頁面層次，有分隔、組織的作用，一般是為了將內(nèi)容分割開，形成獨立的內(nèi)容和信息。如下圖所示：
對內(nèi)容的干擾：弱，分割線因為存在感不太強(qiáng)，適合劃分有關(guān)聯(lián)性的內(nèi)容，并且能夠有效的提升瀏覽效率
分割的強(qiáng)弱：一般
上下滑動的視覺感受：貫穿線的存在感由線的顏色深淺決定，目前大部分頁面的分割線存在感都不是很強(qiáng)，也因此瀏覽時信息比較流暢。
3、留白分割
利用間距來設(shè)計界面，對應(yīng)的就是現(xiàn)在流行的無框設(shè)計，不適用分割線，純粹依靠間距來實現(xiàn)界面的排版，目前來說這是一個大趨勢，很多主流的APP都是通過留白來做的頁面分割。
對內(nèi)容的干擾：弱，由于本身是依靠間距來分割的不同模塊，因此不存在對內(nèi)容的干擾。
分割的強(qiáng)弱：弱
上下滑動的視覺感受：頁面大多是以圖片為主，本身的邊緣就具備分割作用，內(nèi)容少并且極有規(guī)律，整體界面風(fēng)格簡潔大方易識別。
4、卡片投影
卡片投影一直是以小巧整齊的內(nèi)容容器的形式而存在，每一個卡片的都承載不同的信息，是用戶了解更多細(xì)節(jié)信息的入口。如下圖所示：
對內(nèi)容的干擾：強(qiáng)
分割的強(qiáng)弱：強(qiáng)
上下滑動的視覺感受：陰影在卡片上的疊加，使卡片上的內(nèi)容層級在視覺上提高了不少，能更好的拓展視覺深度以及可操作性，但使用這種分割對空間的要求有點高，也因此會顯得整體頁面視覺比較空。
三、不同類型 APP 常見的分割方式
1、電商類APP
電商類的APP屬于業(yè)務(wù)比較復(fù)雜的界面，既要保證首頁業(yè)務(wù)展示的完整性，又要保證用戶使用時的流暢感，設(shè)計時都要考慮一些技巧和思考維度，那么電商類的首頁都是采用的什么樣的分割形式呢？我們來分析一下，如下圖所示：
淘寶、一淘和京東使用的是大背景上增加白色卡片作為分割版塊，使功能復(fù)雜的頁面看起來很規(guī)整并且簡潔，同時界面的空間使用率也很高。
2、音樂類APP
音樂類APP屬于界面功能比較簡單一點的頁面，功能上最根本就是聽歌，但不同的流媒體音樂都有各自的個性，及獨特的賣點，也因此視覺設(shè)計上都有各自的風(fēng)格，如下圖所示：
上圖中蝦米、QQ、MOO音樂模塊的分割使用的都是留白分割，雖然整體視覺上風(fēng)格都不同，但是使用的分割方式都是大留白，讓整個頁面看起來很統(tǒng)一且規(guī)整。
3、漫畫類APP
漫畫類的APP大多都是靠內(nèi)容IP撐起來的，產(chǎn)品的核心是IP，也因此設(shè)計的時候封面占漫畫首頁的80%，這也要求了分割線不能太過強(qiáng)的存在感，如下圖所示：
快看漫畫、騰訊動漫、知音漫畫都是用的留白分割，我看過之前知音漫畫的改版，之前使用的是背景分割，對此我的看法是上面提到的背景分割對用戶閱讀時造成的干擾比較大，而漫畫類的首頁圖片存在感就很強(qiáng)，因此降低分割線的存在感才是合適的做法。
4、內(nèi)容類APP
內(nèi)容型APP的產(chǎn)品核心在于UGC內(nèi)容的呈現(xiàn)，因此這種類型界面設(shè)計時就需要凸顯用戶和內(nèi)容的關(guān)聯(lián)性，從而促進(jìn)信息在用戶之間溝通。如下圖所示：
最右、Lofter、即刻背景欄分割，因為作為UGC內(nèi)容頁面，每個用戶發(fā)送的內(nèi)容都相對獨立，而且上面按鈕比較多，簡單地說就是一個功能多且內(nèi)容少的一個獨立模塊，因此使用背景欄分割，是內(nèi)容自然的呈現(xiàn)出來，讓用戶發(fā)掘自身興趣所在。
5、FM音頻類
在碎片化時間越來越多的快節(jié)奏的時代里，知識類電臺漸漸成長為電臺市場的生力軍，同時“聽”也已經(jīng)變成了工作生活中很重要的場景，如下圖所示：
得到、蜻蜓FM、喜馬拉雅使用的是背景分割，F(xiàn)M類的APP首頁內(nèi)容有很多不同的種類，情感、學(xué)習(xí)、英語等滿足各種用戶的需求，所以使用背景分割，能更好的將這些信息處理并形成統(tǒng)一的視覺輸出。
小結(jié)：從上面五種不同的類型的產(chǎn)品，我們能夠看出，分割與產(chǎn)品類型是有一定關(guān)聯(lián)的，所以我們在設(shè)計的時候，首先要確定好產(chǎn)品的類型，才能更好的選擇界面分割方式，從而能有更好的視覺輸出和效果。

當(dāng)前文章：APP設(shè)計常見分割方式
分享路徑：http://jinyejixie.com/news/114333.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有App設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)