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

《ui版式設(shè)計(jì)在移動(dòng)界面中的應(yīng)用》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、一網(wǎng)學(xué)-有課堂的遠(yuǎn)程培訓(xùn)：www.ywxue.com____________________________________________________________________________________________UI版式設(shè)計(jì)在移動(dòng)界面中的應(yīng)用到扁平化時(shí)代，吸引用戶已經(jīng)不能靠質(zhì)感了，那還有什么利器可以為用戶體驗(yàn)加分呢？請(qǐng)不要忽略版式設(shè)計(jì)！雖然以前大多運(yùn)用在平面設(shè)計(jì)中，但時(shí)日不同，UI設(shè)計(jì)師也要學(xué)習(xí)了，因?yàn)樗娴暮苡杏?！今天這篇好文總結(jié)了目前最流行的13種移動(dòng)界面版式設(shè)計(jì)，還有實(shí)例分析，趕緊來學(xué)

2、習(xí)！一網(wǎng)學(xué)，致力于網(wǎng)頁設(shè)計(jì)培訓(xùn)、UI設(shè)計(jì)培訓(xùn)、淘寶美工培訓(xùn)，平面設(shè)計(jì)培訓(xùn)，是最好的遠(yuǎn)程設(shè)計(jì)培訓(xùn)學(xué)校。一、前言隨著信息和技術(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ì)一直以

3、來廣泛應(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ì)最大的不同在于其功能性、可操作性和可交互性，版式的選擇

4、也是基于產(chǎn)品的功能特性、目標(biāo)用戶、使用場(chǎng)景等因素。移動(dòng)界面按照其產(chǎn)品功能可以分為兩大類：信息展示型界面和功能操作型界面。一網(wǎng)學(xué)-有課堂的遠(yuǎn)程培訓(xùn)：www.ywxue.com____________________________________________________________________________________________1.信息展示型界面我們常見的以閱讀和傳遞信息為主的界面有：新聞、天氣、閱讀、購(gòu)物、音樂、食譜、健康等app的某些界面，另外還有新手引導(dǎo)頁也是比較常見的以傳遞信息為主

5、的頁面。而這些app又基于其不同的功能特點(diǎn)，界面的板式也有各自的特點(diǎn)。1）以瀏覽引導(dǎo)為主以瀏覽引導(dǎo)為主的界面在布局上會(huì)有一個(gè)明確的主線，而在常見的版式布局中上下分割型、左右分割型、中軸型、曲線型等布局在圖文的排版上對(duì)于用戶會(huì)有一個(gè)潛在的引導(dǎo)提示，因此應(yīng)用比較廣泛。下面的兩個(gè)圖片，雖然是不同的場(chǎng)景和功能，但都采用中軸型布局，即圖片和文字按垂直方向排列，引導(dǎo)用戶從上往下瀏覽，結(jié)構(gòu)層次非常清晰。2）以品牌傳遞為主對(duì)于以品牌傳遞為主的界面，更適合采用滿版型、重心型、自由型等布局樣式。一網(wǎng)學(xué)-有課堂的遠(yuǎn)程培訓(xùn)：www.ywx

6、ue.com____________________________________________________________________________________________滿版型是用圖片充滿整個(gè)版面，視覺效果直觀而強(qiáng)烈。下面兩個(gè)界面即是采用了滿版型的布局，利用全屏的圖片和簡(jiǎn)潔的文案?jìng)鬟f出產(chǎn)品的氣質(zhì)和理念，同時(shí)給人大方、舒展的感覺。3）以提高瀏覽效率為主對(duì)于注重提高瀏覽效率為主的界面，通常界面中包含了較大的信息量，如何把信息快速、準(zhǔn)確的傳遞給用戶，避免用的煩躁和困擾？這類應(yīng)用中比較典型的是新聞

7、、資訊以及圖庫(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ò)路排

8、列，使得畫面更為活潑。一網(wǎng)學(xué)-有課堂的遠(yuǎn)程培訓(xùn)：www.ywxue.com____________________________________________________________________________________________4）以信息展示為主以信息展示為主的界面，比較常見的有記錄型、天氣類等app，這類app界面更強(qiáng)調(diào)信息的