作為一名專業(yè)的APP設計師，版式設計也是我們?nèi)粘ＴO計當中的一項基本功。

那你到底對版式設計有多深的理解呢？ 你現(xiàn)在可以摸著旁邊妹子的手說，什么是版式設計ma ?

版式設計又分為哪幾種呢？ 這個時候妹子看中你無辜的眼神就知道你答不上來啦。

就看看這么可愛的 章魚姐姐吧~

好啦，今天25學堂的小編跟大家一起學習下APP版式設計之信息展示型的UI界面設計要點

第一 ? 設計常識解讀：什么是版式設計？

版式設計是現(xiàn)代設計藝術的重要組成部分，是視覺傳達的重要手段。表面上看，它是一種關于編排的學問；實際上，它不僅是一種技能，更實現(xiàn)了技術與藝術的高度統(tǒng)一，版式設計是現(xiàn)代設計者所必備的基本功之一。

版式設計是指設計人員根據(jù)設計主題和視覺需求，在預先設定的有限版面內(nèi)，運用造型要素和形式原則，根據(jù)特定主題與內(nèi)容的需要，將文字、圖片（圖形）及色彩等視覺傳達信息要素，進行有組織、有目的的組合排列的設計行為與過程。

第二 ?版式設計的常見布局：總共分為十三種

骨骼型，滿版型、上下分割型、左右分割型、中軸型、曲線型、傾斜型、對稱型、重心型、三角型、并置型、自由型、四角型等。

第三 ?APP信息展示型界面設計的要點

常見的APP信息展示型界面是以閱讀和傳遞信息為主的界面有：新聞、天氣、閱讀、購物、音樂、食譜、健康等app的某些界面，另外還有新手引導頁也是比較常見的以傳遞信息為主的頁面。

而這些app又基于其不同的功能特點，界面的板式也有各自的特點。

類型一：以瀏覽引導為主

以瀏覽引導為主的界面在布局上會有一個明確的主線，而在常見的版式布局中上下分割型、左右分割型、中軸型、曲線型等布局在圖文的排版上對于用戶會有一個潛在的引導提示，這樣的APP比較多。也最常見的。

比如下面的兩個APP界面，雖然是不同的場景和功能，但都采用中軸型布局，即圖片和文字按垂直方向排列，引導用戶從上往下瀏覽，結構層次非常清晰。

類型二：以品牌傳遞為主

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

滿版型都是用圖片充滿整個版面，視覺效果直觀而強烈。視覺效果也較好。漂亮好看。

下面兩個界面即是采用了滿版型的布局，利用全屏的圖片和簡潔的文案傳遞出產(chǎn)品的氣質和理念，同時給人大方、舒展的感覺。

類型三：以提高瀏覽效率為主

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

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

類型四：以信息展示為主

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

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

以上這些就是今天學堂君跟大家分享APP版式設計教程：信息展示型UI界面設計的四種類型。希望大家可以有所收獲。知道如何在APP界面上合理的應用版式設計技巧和版式設計的套路。