常見的APP信息布局方式--手機(jī)APP設(shè)計(jì)

當(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)鍵作用。

Paste_Image.png

第一種APP信息布局方式:宮格布局
這種APP信息布局方式也是我們目前最常見的一種方式只估,也是符合用戶習(xí)慣和黃金比例的設(shè)計(jì)方式,最知名的就是錘子手機(jī)的界面設(shè)計(jì)着绷。
知名的APP設(shè)計(jì)采用的九宮格蛔钙、六宮格等方式布局有:攜程APP、途牛APP蓬戚、支付寶APP等等夸楣。
下面我們來欣賞下經(jīng)典的宮格布局APP界面設(shè)計(jì)

Paste_Image.png
Paste_Image.png

Paste_Image.png

羅永浩將錘子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)成的列表布局插件和模板触趴。

Paste_Image.png
Paste_Image.png

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

第三種APP信息布局方式:大圖展示布局
這類布局多見于引導(dǎo)頁設(shè)計(jì)和一些圖片分享app、或者文藝范披蕉、攝影類的APP主導(dǎo)的布局方式颈畸。

Paste_Image.png

代表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)域是常見的布局方式携御。如下圖:

Paste_Image.png
Paste_Image.png

等等。這樣圖表布局讓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)鍵詞的布局句柠。

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末浦译,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子俄占,更是在濱河造成了極大的恐慌管怠,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缸榄,死亡現(xiàn)場(chǎng)離奇詭異渤弛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)甚带,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門她肯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鹰贵,你說我怎么就攤上這事晴氨。” “怎么了碉输?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵籽前,是天一觀的道長。 經(jīng)常有香客問我敷钾,道長枝哄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任阻荒,我火速辦了婚禮挠锥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘侨赡。我一直安慰自己蓖租,他們只是感情好粱侣,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蓖宦,像睡著了一般齐婴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上球昨,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天尔店,我揣著相機(jī)與錄音眨攘,去河邊找鬼主慰。 笑死,一個(gè)胖子當(dāng)著我的面吹牛鲫售,可吹牛的內(nèi)容都是我干的共螺。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼情竹,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼藐不!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起秦效,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤雏蛮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后阱州,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挑秉,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年苔货,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了犀概。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡夜惭,死狀恐怖姻灶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诈茧,我是刑警寧澤产喉,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站敢会,受9級(jí)特大地震影響曾沈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜走触,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一晦譬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧互广,春花似錦敛腌、人聲如沸卧土。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尤莺。三九已至,卻和暖如春生棍,著一層夾襖步出監(jiān)牢的瞬間颤霎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工涂滴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留友酱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓柔纵,卻偏偏與公主長得像缔杉,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子搁料,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容