當(dāng)我們接到一個(gè)APP設(shè)計(jì)的需求時(shí),首先是進(jìn)行app信息組織模式分析:
在確定了需求和主流程后斥难,開始著手設(shè)計(jì)app界面,前提我們要面臨的第一個(gè)問題
就是如何將信息以最優(yōu)的方式組合起來,針對(duì)這個(gè)問題所作出的設(shè)計(jì)決策對(duì)整個(gè)app的核心體驗(yàn)起到關(guān)鍵作用。
第一種APP信息布局方式:宮格布局
這種APP信息布局方式也是我們目前最常見的一種方式只估,也是符合用戶習(xí)慣和黃金比例的設(shè)計(jì)方式,最知名的就是錘子手機(jī)的界面設(shè)計(jì)着绷。
知名的APP設(shè)計(jì)采用的九宮格蛔钙、六宮格等方式布局有:攜程APP、途牛APP蓬戚、支付寶APP等等夸楣。
下面我們來欣賞下經(jīng)典的宮格布局APP界面設(shè)計(jì)
羅永浩將錘子ROM的三個(gè)特點(diǎn)歸納為:美觀、細(xì)節(jié)設(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)容展示的方式孵班,簡(jiǎn)單明了。
手機(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)鍵詞的布局句柠。