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

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

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

廣告

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