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

當前文章：APP設計常見分割方式
分享路徑：http://www.js-pz168.com/news/114333.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有App設計等

廣告

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