網(wǎng)站建設中版式在移動(dòng)界面中的應用發(fā)布者：本站     時(shí)間：2022-03-27 10:03:31

隨著(zhù)信息和技術(shù)的發(fā)展，手機屏幕越來(lái)越大，界面開(kāi)始承載越來(lái)越多的信息，繁復的界面裝飾細節，讓界面顯得越發(fā)臃腫，人們開(kāi)始更多的關(guān)注界面的內容和功能，信息框架呈現出扁平化的趨勢，在設計風(fēng)格上，設計師們也不再追求3d、擬物化的設計，而是越來(lái)越崇尚扁平、簡(jiǎn)約的設計理念。
版面的構成是信息傳播的橋梁，發(fā)揮版面元素中各自的特點(diǎn)和功能，會(huì )使整個(gè)版面完成從視覺(jué)到內容的完善性和美觀(guān)性，從而更快、更準確的傳遞信息，所以版式設計一直以來(lái)廣泛應用在廣告、招貼、雜志等平面設計中。雖然在移動(dòng)應用中是以用戶(hù)的操作和使用體驗為主，但隨著(zhù)扁平化潮流襲來(lái)，我們不再通過(guò)細膩的質(zhì)感和光影提升界面的品質(zhì)，拉開(kāi)界面的層次，那我們靠什么來(lái)吸引我們的用戶(hù)，為用戶(hù)創(chuàng )造良好的閱讀和使用體驗呢？

 

二、版式設計在移動(dòng)界面中的應用


版式設計的常見(jiàn)布局有十三種：骨骼型，滿(mǎn)版型、上下分割型、左右分割型、中軸型、曲線(xiàn)型、傾斜型、對稱(chēng)型、重心型、三角型、并置型、自由型、四角型等。這些布局在平面設計中應用非常廣泛，而移動(dòng)界面的設計與平面設計最大的不同在于其功能性、可操作性和可交互性，版式的選擇也是基于產(chǎn)品的功能特性、目標用戶(hù)、使用場(chǎng)景等因素。
移動(dòng)界面按照其產(chǎn)品功能可以分為兩大類(lèi)：信息展示型界面和功能操作型界面。
 

1.信息展示型界面


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

1）以瀏覽引導為主


以瀏覽引導為主的界面在布局上會(huì )有一個(gè)明確的主線(xiàn)，而在常見(jiàn)的版式布局中上下分割型、左右分割型、中軸型、曲線(xiàn)型等布局在圖文的排版上對于用戶(hù)會(huì )有一個(gè)潛在的引導提示，因此應用比較廣泛。
下面的兩個(gè)圖片，雖然是不同的場(chǎng)景和功能，但都采用中軸型布局，即圖片和文字按垂直方向排列，引導用戶(hù)從上往下瀏覽，結構層次非常清晰。

版式在移動(dòng)界面中的應用
 

2）以品牌傳遞為主


對于以品牌傳遞為主的界面，更適合采用滿(mǎn)版型、重心型、自由型等布局樣式。
滿(mǎn)版型是用圖片充滿(mǎn)整個(gè)版面，視覺(jué)效果直觀(guān)而強烈。下面兩個(gè)界面即是采用了滿(mǎn)版型的布局，利用全屏的圖片和簡(jiǎn)潔的文案傳遞出產(chǎn)品的氣質(zhì)和理念，同時(shí)給人大方、舒展的感覺(jué)。

版式在移動(dòng)界面中的應用
 

3）以提高瀏覽效率為主
對于注重提高瀏覽效率為主的界面，通常界面中包含了較大的信息量，如何把信息快速、準確的傳遞給用戶(hù)，避免用的煩躁和困擾？
這類(lèi)應用中比較典型的是新聞、資訊以及圖庫等app的界面，我們在設計時(shí)可以借鑒骨骼型的板式，骨骼型是一種規范、理性的分割方法，在雜志排版中我們常見(jiàn)的骨骼有：豎向通欄、雙欄、三欄、四欄等。通過(guò)圖文的混合編排呈現理性而嚴謹的感覺(jué)，在信息的傳遞更為快速、清晰。
下面的左圖是一個(gè)新聞app，采用豎向分欄的布局，模塊化的結構使得信息的展現整潔和嚴謹。右圖是一個(gè)圖片展示app，則采用了三欄的布局，把圖片以這種瀑布流的形式展現給用戶(hù)，方便用戶(hù)快速瀏覽。但是由于平級的信息，很難區分主次，而人的視線(xiàn)很難在同一時(shí)間聚焦在兩個(gè)或者兩個(gè)以上的事物上，所以通過(guò)圖片錯路排列，使得畫(huà)面更為活潑。

版式在移動(dòng)界面中的應用
 

4）以信息展示為主


以信息展示為主的界面，比較常見(jiàn)的有記錄型、天氣類(lèi)等app，這類(lèi)app界面更強調信息的直觀(guān)性。在這類(lèi)app中應用的較多的布局有滿(mǎn)版型、上下分割、左右分割、中軸型、對稱(chēng)型、自由型等。
下面的兩個(gè)圖例雖然都以信息的展示為主，但因界面的信息量、app的功能特性因素的影響，左圖的運動(dòng)記錄界面信息量比較上，采用了中軸型布局，而右圖的天氣app信息量比較大，采用了滿(mǎn)版型布局。合理的布局選擇對于信息的展示有至關(guān)重要的作用。

版式在移動(dòng)界面中的應用
2 .功能操作型界面
以功能操作為主的界面主要是引導用戶(hù)操作，所以常見(jiàn)的布局主要有上下分割型、左右分割型、中軸型等。
下面的左圖是一個(gè)注冊頁(yè)面，btn采用了中軸型的構圖，清晰地展現了操作項和注冊流程。右圖采用了上下分割的版面構成，上面為圖片展示，下面部分為選項和操作，結構非常清晰。

版式在移動(dòng)界面中的應用
 

三、結語(yǔ)


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