六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

版式在app界面中的設(shè)計(jì)應(yīng)用

2016-11-11    ui設(shè)計(jì)分享達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,?請(qǐng)點(diǎn)這里 

 

隨著信息和技術(shù)的發(fā)展,手機(jī)屏幕越來越大,界面開始承載越來越多的信息,繁復(fù)的界面裝飾細(xì)節(jié),讓界面顯得越發(fā)臃腫,人們開始更多的關(guān)注界面的內(nèi)容和功能,信息框架呈現(xiàn)出扁平化的趨勢(shì),在設(shè)計(jì)風(fēng)格上,設(shè)計(jì)師們也不再追求3d、擬物化的設(shè)計(jì),而是越來越崇尚扁平、簡(jiǎn)約的設(shè)計(jì)理念。


版面的構(gòu)成是信息傳播的橋梁,發(fā)揮版面元素中各自的特點(diǎn)和功能,會(huì)使整個(gè)版面完成從視覺到內(nèi)容的完善性和美觀性,從而更快、更準(zhǔn)確的傳遞信息,所以版式設(shè)計(jì)一直以來廣泛應(yīng)用在廣告、招貼、雜志等平面設(shè)計(jì)中。雖然在移動(dòng)應(yīng)用中是以用戶的操作和使用體驗(yàn)為主,但隨著扁平化潮流襲來,我們不再通過細(xì)膩的質(zhì)感和光影提升界面的品質(zhì),拉開界面的層次,那我們靠什么來吸引我們的用戶,為用戶創(chuàng)造良好的閱讀和使用體驗(yàn)?zāi)兀?


版式設(shè)計(jì)在移動(dòng)界面中的應(yīng)用


版式設(shè)計(jì)的常見布局有十三種:骨骼型,滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對(duì)稱型、重心型、三角型、并置型、自由型、四角型等。這些布局在平面設(shè)計(jì)中應(yīng)用非常廣泛,而移動(dòng)界面的設(shè)計(jì)與平面設(shè)計(jì)最大的不同在于其功能性、可操作性和可交互性,版式的選擇也是基于產(chǎn)品的功能特性、目標(biāo)用戶、使用場(chǎng)景等因素。


移動(dòng)界面按照其產(chǎn)品功能可以分為兩大類:信息展示型界面和功能操作型界面。


1. 信息展示型界面


我們常見的以閱讀和傳遞信息為主的界面有:新聞、天氣、閱讀、購(gòu)物、音樂、食譜、健康等app的某些界面,另外還有新手引導(dǎo)頁(yè)也是比較常見的以傳遞信息為主的頁(yè)面。而這些app又基于其不同的功能特點(diǎn),界面的板式也有各自的特點(diǎn)。


以瀏覽引導(dǎo)為主


以瀏覽引導(dǎo)為主的界面在布局上會(huì)有一個(gè)明確的主線,而在常見的版式布局中上下分割型、左右分割型、中軸型、曲線型等布局在圖文的排版上對(duì)于用戶會(huì)有一個(gè)潛在的引導(dǎo)提示,因此應(yīng)用比較廣泛。


下面的兩個(gè)圖片,雖然是不同的場(chǎng)景和功能,但都采用中軸型布局,即圖片和文字按垂直方向排列,引導(dǎo)用戶從上往下瀏覽,結(jié)構(gòu)層次非常清晰。

01.webp.jpg

 

以品牌傳遞為主


對(duì)于以品牌傳遞為主的界面,更適合采用滿版型、重心型、自由型等布局樣式。


滿版型是用圖片充滿整個(gè)版面,視覺效果直觀而強(qiáng)烈。下面兩個(gè)界面即是采用了滿版型的布局,利用全屏的圖片和簡(jiǎn)潔的文案?jìng)鬟f出產(chǎn)品的氣質(zhì)和理念,同時(shí)給人大方、舒展的感覺。

 

02.webp.jpg

以提高瀏覽效率為主


對(duì)于注重提高瀏覽效率為主的界面,通常界面中包含了較大的信息量,如何把信息快速、準(zhǔn)確的傳遞給用戶,避免用的煩躁和困擾?


這類應(yīng)用中比較典型的是新聞、資訊以及圖庫(kù)等app的界面,我們?cè)谠O(shè)計(jì)時(shí)可以借鑒骨骼型的板式,骨骼型是一種規(guī)范、理性的分割方法,在雜志排版中我們常見的骨骼有:豎向通欄、雙欄、三欄、四欄等。通過圖文的混合編排呈現(xiàn)理性而嚴(yán)謹(jǐn)?shù)母杏X,在信息的傳遞更為快速、清晰。


下面的左圖是一個(gè)新聞app,采用豎向分欄的布局,模塊化的結(jié)構(gòu)使得信息的展現(xiàn)整潔和嚴(yán)謹(jǐn)。右圖是一個(gè)圖片展示app,則采用了三欄的布局,把圖片以這種瀑布流的形式展現(xiàn)給用戶,方便用戶快速瀏覽。但是由于平級(jí)的信息,很難區(qū)分主次,而人的視線很難在同一時(shí)間聚焦在兩個(gè)或者兩個(gè)以上的事物上,所以通過圖片錯(cuò)路排列,使得畫面更為活潑。

03.webp.jpg

以信息展示為主


以信息展示為主的界面,比較常見的有記錄型、天氣類等app,這類app界面更強(qiáng)調(diào)信息的直觀性。在這類app中應(yīng)用的較多的布局有滿版型、上下分割、左右分割、中軸型、對(duì)稱型、自由型等。


下面的兩個(gè)圖例雖然都以信息的展示為主,但因界面的信息量、app的功能特性因素的影響,左圖的運(yùn)動(dòng)記錄界面信息量比較上,采用了中軸型布局,而右圖的天氣app信息量比較大,采用了滿版型布局。合理的布局選擇對(duì)于信息的展示有至關(guān)重要的作用。

04.webp.jpg

2. 功能操作型界面


以功能操作為主的界面主要是引導(dǎo)用戶操作,所以常見的布局主要有上下分割型、左右分割型、中軸型等。


下面的左圖是一個(gè)注冊(cè)頁(yè)面,btn采用了中軸型的構(gòu)圖,清晰地展現(xiàn)了操作項(xiàng)和注冊(cè)流程。右圖采用了上下分割的版面構(gòu)成,上面為圖片展示,下面部分為選項(xiàng)和操作,結(jié)構(gòu)非常清晰。

05.webp.jpg

結(jié)語(yǔ)


在扁平化的潮流下,很多產(chǎn)品也借鑒了雜志排版的一些方式,為用戶帶來了良好的閱讀和使用體驗(yàn)。我在上面的示例中也只是列舉了一些個(gè)人認(rèn)為比較典型和有意思的布局,而針對(duì)不同功能的app,選擇適合的版式構(gòu)圖類型,大膽的結(jié)合板式設(shè)計(jì)的一些經(jīng)典的形式,也許能為我們的設(shè)計(jì)拓展新的思路。

 

藍(lán)藍(lán)設(shè)計(jì)www.wnxcall.com?)是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì)?、 cs界面設(shè)計(jì)?、 ipad界面設(shè)計(jì)?、 包裝設(shè)計(jì)?、 圖標(biāo)定制?、 用戶體驗(yàn) 、交互設(shè)計(jì)、?網(wǎng)站建設(shè)?、平面設(shè)計(jì)服務(wù) 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔