每一年設(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頁面信息的整體和獨(dú)立感,能夠幫助用戶了解頁面的層次結(jié)構(gòu),賦予頁面內(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ì)中最常見的一種分隔方式,能幫助用戶理解頁面層次,有分隔、組織的作用,一般是為了將內(nèi)容分割開,形成獨(dú)立的內(nèi)容和信息。如下圖所示:
對(duì)內(nèi)容的干擾:弱,分割線因?yàn)榇嬖诟胁惶珡?qiáng),適合劃分有關(guān)聯(lián)性的內(nèi)容,并且能夠有效的提升瀏覽效率
分割的強(qiáng)弱:一般
上下滑動(dòng)的視覺感受:貫穿線的存在感由線的顏色深淺決定,目前大部分頁面的分割線存在感都不是很強(qiáng),也因此瀏覽時(shí)信息比較流暢。
3、留白分割利用間距來設(shè)計(jì)界面,對(duì)應(yīng)的就是現(xiàn)在流行的無框設(shè)計(jì),不適用分割線,純粹依靠間距來實(shí)現(xiàn)界面的排版,目前來說這是一個(gè)大趨勢(shì),很多主流的APP都是通過留白來做的頁面分割。
對(duì)內(nèi)容的干擾:弱,由于本身是依靠間距來分割的不同模塊,因此不存在對(duì)內(nèi)容的干擾。
分割的強(qiáng)弱:弱
上下滑動(dòng)的視覺感受:頁面大多是以圖片為主,本身的邊緣就具備分割作用,內(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ì)顯得整體頁面視覺比較空。
三、不同類型 APP 常見的分割方式1、電商類APP電商類的APP屬于業(yè)務(wù)比較復(fù)雜的界面,既要保證首頁業(yè)務(wù)展示的完整性,又要保證用戶使用時(shí)的流暢感,設(shè)計(jì)時(shí)都要考慮一些技巧和思考維度,那么電商類的首頁都是采用的什么樣的分割形式呢?我們來分析一下,如下圖所示:
淘寶、一淘和京東使用的是大背景上增加白色卡片作為分割版塊,使功能復(fù)雜的頁面看起來很規(guī)整并且簡(jiǎn)潔,同時(shí)界面的空間使用率也很高。
2、音樂類APP音樂類APP屬于界面功能比較簡(jiǎn)單一點(diǎn)的頁面,功能上最根本就是聽歌,但不同的流媒體音樂都有各自的個(gè)性,及獨(dú)特的賣點(diǎn),也因此視覺設(shè)計(jì)上都有各自的風(fēng)格,如下圖所示:
上圖中蝦米、QQ、MOO音樂模塊的分割使用的都是留白分割,雖然整體視覺上風(fēng)格都不同,但是使用的分割方式都是大留白,讓整個(gè)頁面看起來很統(tǒng)一且規(guī)整。
3、漫畫類APP漫畫類的APP大多都是靠?jī)?nèi)容IP撐起來的,產(chǎn)品的核心是IP,也因此設(shè)計(jì)的時(shí)候封面占漫畫首頁的80%,這也要求了分割線不能太過強(qiáng)的存在感,如下圖所示:
快看漫畫、騰訊動(dòng)漫、知音漫畫都是用的留白分割,我看過之前知音漫畫的改版,之前使用的是背景分割,對(duì)此我的看法是上面提到的背景分割對(duì)用戶閱讀時(shí)造成的干擾比較大,而漫畫類的首頁圖片存在感就很強(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)容頁面,每個(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首頁內(nèi)容有很多不同的種類,情感、學(xué)習(xí)、英語等滿足各種用戶的需求,所以使用背景分割,能更好的將這些信息處理并形成統(tǒng)一的視覺輸出。
小結(jié):從上面五種不同的類型的產(chǎn)品,我們能夠看出,分割與產(chǎn)品類型是有一定關(guān)聯(lián)的,所以我們?cè)谠O(shè)計(jì)的時(shí)候,首先要確定好產(chǎn)品的類型,才能更好的選擇界面分割方式,從而能有更好的視覺輸出和效果。
(鄭重聲明:本文版權(quán)歸原作者海鹽社潘團(tuán)子所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如有侵權(quán),請(qǐng)聯(lián)系我們刪除;如作者信息標(biāo)記有誤,請(qǐng)聯(lián)系我們修改。)
當(dāng)前文章:APP設(shè)計(jì)常見分割方式
分享路徑:http://m.rwnh.cn/news/114333.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷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)