當(dāng)我們接到一個(gè)APP設(shè)計(jì)的case的時(shí)候，首先是進(jìn)行app信息組織模式分析：

在確定了需求和主流程后，開始著手設(shè)計(jì)app界面，前提我們要面臨的第一個(gè)問題

就是如何將信息以最優(yōu)的方式組合起來，針對(duì)這個(gè)問題所作出的設(shè)計(jì)決策對(duì)整個(gè)app的核心體驗(yàn)起到關(guān)鍵作用。

之前25學(xué)堂跟大家分享的移動(dòng)APP布局設(shè)計(jì)經(jīng)驗(yàn)之道：獨(dú)門七字訣

如下圖的APP列表頁面的分布布局方式：

今天，25學(xué)堂跟大家再來回顧下常見的APP信息布局方式。

第一種APP信息布局方式：宮格布局

這種APP信息布局方式也是我們目前最常見的一種方式，也是符合用戶習(xí)慣和黃金比例的設(shè)計(jì)方式，最知名的就是錘子手機(jī)的界面設(shè)計(jì)。錘子手機(jī)界面設(shè)計(jì)欣賞

知名的APP設(shè)計(jì)采用的九宮格、六宮格等方式布局有：攜程APP、途牛APP、支付寶APP等等。

下面我們來欣賞下經(jīng)典的宮格布局APP界面設(shè)計(jì)

九宮格是一種比較古老的設(shè)計(jì)，它最基本的表現(xiàn)其實(shí)就像是一個(gè)三行三列的表格。

采用宮格布局的優(yōu)勢(shì)：

非常方便的適配所有的移動(dòng)手機(jī)機(jī)型。因?yàn)檫@樣的結(jié)構(gòu)是最有利于內(nèi)容區(qū)域隨屏幕分辯率不同而自動(dòng)伸展寬高，同時(shí)也是ios和android開發(fā)人員比較容易編寫的一種布局方式。

信息內(nèi)容展示的方式，簡單明了。

手機(jī)APP設(shè)計(jì)教程之四條APP產(chǎn)品設(shè)計(jì)黃金法則當(dāng)中也提到了宮格布局的交互設(shè)計(jì)好處。

第二種APP信息布局方式：列表布局

列表布局就是以列表的形式展示具體內(nèi)容，并且能夠根據(jù)數(shù)據(jù)的長度自適應(yīng)顯示。

列表布局就是List View ? 是可以滾動(dòng)的列表布局方式，最常見的應(yīng)該屬于android的列表布局，這也是最快速的app布局方式。因?yàn)闊o論ios開發(fā)和android 都有現(xiàn)成的列表布局插件和模板。

以上的APP界面基本都是以列表布局為主導(dǎo)。最能代表的就是分類信息的展示形式。還有產(chǎn)品列表、對(duì)話列表等等。

第三種APP信息布局方式：大圖展示布局

這類布局多見于引導(dǎo)頁設(shè)計(jì)和一些圖片分享app、或者文藝范、攝影類的APP主導(dǎo)的布局方式。

代表APP，mono貓弄、one APP等等。

第四種APP信息布局方式：圖表信息布局

app里面采用圖表布局，讓APP更具商務(wù)氣質(zhì)。幾乎所有的APP 商業(yè)圖表都符合這一構(gòu)圖原則，可以說是商業(yè)圖表背后的布局指南。

優(yōu)點(diǎn)有：完整的圖表要素；突出的標(biāo)題區(qū)；從上到下的閱讀順序。

缺點(diǎn)有：標(biāo)題不夠突出，信息量不足，移動(dòng)APP空間利用不足等。

但是目前APP圖表的布局方式，已經(jīng)在某些領(lǐng)域是常見的布局方式。如下圖：

等等。這樣圖表布局讓APP更加生動(dòng)形象。

第五種APP信息布局方式：標(biāo)簽布局

標(biāo)簽布局來源移動(dòng)android開發(fā)當(dāng)中的一個(gè)術(shù)語：標(biāo)簽布局（Tab Layout）25學(xué)堂今天跟大家講的標(biāo)簽比這個(gè)tab layout范圍要大點(diǎn)。除了tab布局。還有標(biāo)簽關(guān)鍵詞布局，熱度布局等等。

以標(biāo)簽的方式顯示它的子視圖元素，就像在Firefox中的一個(gè)窗口中顯示多個(gè)網(wǎng)頁一樣。為了狂創(chuàng)建一個(gè)標(biāo)簽UI（tabbed UI），需要使用到TabHost和TabWidget。TabHost必須是布局的根節(jié)點(diǎn)，它包含為了顯示標(biāo)簽的TabWidget和顯示標(biāo)簽內(nèi)容的FrameLayout。

最常見的標(biāo)簽布局就是tab標(biāo)簽布局。還有搜索的時(shí)候，熱門關(guān)鍵詞的布局。

今天25學(xué)堂就跟大家先整理在這里，如果各位還有好的APP信息布局方式，我們一起來分享和討論。

本文屬于25學(xué)堂的原創(chuàng)文章，請(qǐng)勿轉(zhuǎn)載！