2016-11-11 ui設(shè)計分享達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點這里
隨著信息和技術(shù)的發(fā)展，手機屏幕越來越大，界面開始承載越來越多的信息，繁復(fù)的界面裝飾細節(jié)，讓界面顯得越發(fā)臃腫，人們開始更多的關(guān)注界面的內(nèi)容和功能，信息框架呈現(xiàn)出扁平化的趨勢，在設(shè)計風(fēng)格上，設(shè)計師們也不再追求3d、擬物化的設(shè)計，而是越來越崇尚扁平、簡約的設(shè)計理念。
版面的構(gòu)成是信息傳播的橋梁，發(fā)揮版面元素中各自的特點和功能，會使整個版面完成從視覺到內(nèi)容的完善性和美觀性，從而更快、更準(zhǔn)確的傳遞信息，所以版式設(shè)計一直以來廣泛應(yīng)用在廣告、招貼、雜志等平面設(shè)計中。雖然在移動應(yīng)用中是以用戶的操作和使用體驗為主，但隨著扁平化潮流襲來，我們不再通過細膩的質(zhì)感和光影提升界面的品質(zhì)，拉開界面的層次，那我們靠什么來吸引我們的用戶，為用戶創(chuàng)造良好的閱讀和使用體驗?zāi)兀?
版式設(shè)計在移動界面中的應(yīng)用
版式設(shè)計的常見布局有十三種：骨骼型，滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對稱型、重心型、三角型、并置型、自由型、四角型等。這些布局在平面設(shè)計中應(yīng)用非常廣泛，而移動界面的設(shè)計與平面設(shè)計最大的不同在于其功能性、可操作性和可交互性，版式的選擇也是基于產(chǎn)品的功能特性、目標(biāo)用戶、使用場景等因素。
移動界面按照其產(chǎn)品功能可以分為兩大類：信息展示型界面和功能操作型界面。
1. 信息展示型界面
我們常見的以閱讀和傳遞信息為主的界面有：新聞、天氣、閱讀、購物、音樂、食譜、健康等app的某些界面，另外還有新手引導(dǎo)頁也是比較常見的以傳遞信息為主的頁面。而這些app又基于其不同的功能特點，界面的板式也有各自的特點。
以瀏覽引導(dǎo)為主
以瀏覽引導(dǎo)為主的界面在布局上會有一個明確的主線，而在常見的版式布局中上下分割型、左右分割型、中軸型、曲線型等布局在圖文的排版上對于用戶會有一個潛在的引導(dǎo)提示，因此應(yīng)用比較廣泛。
下面的兩個圖片，雖然是不同的場景和功能，但都采用中軸型布局，即圖片和文字按垂直方向排列，引導(dǎo)用戶從上往下瀏覽，結(jié)構(gòu)層次非常清晰。
以品牌傳遞為主
對于以品牌傳遞為主的界面，更適合采用滿版型、重心型、自由型等布局樣式。
滿版型是用圖片充滿整個版面，視覺效果直觀而強烈。下面兩個界面即是采用了滿版型的布局，利用全屏的圖片和簡潔的文案傳遞出產(chǎn)品的氣質(zhì)和理念，同時給人大方、舒展的感覺。
以提高瀏覽效率為主
對于注重提高瀏覽效率為主的界面，通常界面中包含了較大的信息量，如何把信息快速、準(zhǔn)確的傳遞給用戶，避免用的煩躁和困擾？
這類應(yīng)用中比較典型的是新聞、資訊以及圖庫等app的界面，我們在設(shè)計時可以借鑒骨骼型的板式，骨骼型是一種規(guī)范、理性的分割方法，在雜志排版中我們常見的骨骼有：豎向通欄、雙欄、三欄、四欄等。通過圖文的混合編排呈現(xiàn)理性而嚴(yán)謹(jǐn)?shù)母杏X，在信息的傳遞更為快速、清晰。
下面的左圖是一個新聞app，采用豎向分欄的布局，模塊化的結(jié)構(gòu)使得信息的展現(xiàn)整潔和嚴(yán)謹(jǐn)。右圖是一個圖片展示app，則采用了三欄的布局，把圖片以這種瀑布流的形式展現(xiàn)給用戶，方便用戶快速瀏覽。但是由于平級的信息，很難區(qū)分主次，而人的視線很難在同一時間聚焦在兩個或者兩個以上的事物上，所以通過圖片錯路排列，使得畫面更為活潑。
以信息展示為主
以信息展示為主的界面，比較常見的有記錄型、天氣類等app，這類app界面更強調(diào)信息的直觀性。在這類app中應(yīng)用的較多的布局有滿版型、上下分割、左右分割、中軸型、對稱型、自由型等。
下面的兩個圖例雖然都以信息的展示為主，但因界面的信息量、app的功能特性因素的影響，左圖的運動記錄界面信息量比較上，采用了中軸型布局，而右圖的天氣app信息量比較大，采用了滿版型布局。合理的布局選擇對于信息的展示有至關(guān)重要的作用。
2. 功能操作型界面
以功能操作為主的界面主要是引導(dǎo)用戶操作，所以常見的布局主要有上下分割型、左右分割型、中軸型等。
下面的左圖是一個注冊頁面，btn采用了中軸型的構(gòu)圖，清晰地展現(xiàn)了操作項和注冊流程。右圖采用了上下分割的版面構(gòu)成，上面為圖片展示，下面部分為選項和操作，結(jié)構(gòu)非常清晰。
結(jié)語
在扁平化的潮流下，很多產(chǎn)品也借鑒了雜志排版的一些方式，為用戶帶來了良好的閱讀和使用體驗。我在上面的示例中也只是列舉了一些個人認(rèn)為比較典型和有意思的布局，而針對不同功能的app，選擇適合的版式構(gòu)圖類型，大膽的結(jié)合板式設(shè)計的一些經(jīng)典的形式，也許能為我們的設(shè)計拓展新的思路。
藍藍設(shè)計( m.gerard.com.cn?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標(biāo)定制?、 用戶體驗 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.gerard.com.cn
