UI設(shè)計(jì)中一項(xiàng)很基本的工作就是界面設(shè)計(jì)，但是，如果一開始就是從界面這個(gè)概念去入手的話，往往會(huì)覺得無從談起。所以，我會(huì)一個(gè)界面拆分成幾個(gè)模塊：框架、導(dǎo)航和內(nèi)容。然后根據(jù)每個(gè)模塊的特征去選擇適合的展示方式，然后再拼湊成一個(gè)完整的界面。

關(guān)于導(dǎo)航的部分，我之前已經(jīng)總結(jié)過了，詳情請(qǐng)見：《APP常用導(dǎo)航總結(jié)》。今天主要講講框架和內(nèi)容控件的部分。

框架

對(duì)于框架，其實(shí)比較簡(jiǎn)單。因?yàn)楝F(xiàn)在有種趨勢(shì)是“以內(nèi)容為中心”，所以，界面設(shè)計(jì)的重點(diǎn)并不在框架上。加之現(xiàn)在iOS和Android平臺(tái)都有比較成型的規(guī)范，所以直接套用就行了。

對(duì)于Android而言，框架最主要就是工具欄，然后我們需要考慮的是工具欄上放置什么功能入口。工具欄一般有：頂部工具欄、懸浮工具欄和底部工具欄。

對(duì)于頂部工具欄而言，需要預(yù)留位置給標(biāo)題，最左邊的位置要預(yù)留給漢堡菜單或者返回按鈕或者品牌logo。所以需要自定義的就是右邊的區(qū)域，不過這里不建議擺放過多按鈕（我見過最多的是4個(gè)），關(guān)于這里放置什么按鈕，就沒有一套成型的理論的，根據(jù)實(shí)際界面來規(guī)劃即可。不過一般來說只會(huì)放置最常用的按鈕，然后把剩下的按鈕折疊起來?；蛘呖梢詤⒖几?jìng)品的習(xí)慣，畢竟用戶也是有使用慣性的。

對(duì)于懸浮工具欄和底部工具欄，限制沒有頂部工具欄那么多，所以這里的設(shè)計(jì)大多就是八仙過海各顯其能。需要注意的是，懸浮工具欄和底部工具欄都只是選用的，但是頂部工具欄是必須要有的。

頂部工具欄【1】

懸浮工具欄【1】

底部工具欄【1】

Android界面框架的第二個(gè)點(diǎn)是懸浮按鈕，這個(gè)其實(shí)也是一個(gè)功能入口。這個(gè)入口要放置當(dāng)前界面最最重要的功能，并且最好是正向操作的功能。關(guān)于懸浮按鈕的介紹請(qǐng)見Material design設(shè)計(jì)指南之按鈕：浮動(dòng)操作按鈕，這里不再重復(fù)累贅。懸浮按鈕也是選用的，只有當(dāng)頁面有且只有一個(gè)非常重要的操作的時(shí)候，才需要考慮懸浮按鈕。

懸浮按鈕【2】

內(nèi)容

講完了框架的部分，現(xiàn)在講講內(nèi)容的部分。內(nèi)容的空間選擇主要有：列表、網(wǎng)格、和輪播圖。

1、列表

如果展示得信息以文字為主，列表是一種非常適合的形式。由于單個(gè)列表項(xiàng)占據(jù)的寬度剛好是手機(jī)屏幕的寬度，在閱讀單個(gè)列表的時(shí)候，不容易受到其他列表項(xiàng)的干擾。其次，列表項(xiàng)的操作便利性較其他的控件來說會(huì)更好。什么意思呢？手機(jī)屏幕是一個(gè)二維的界面，當(dāng)你需要點(diǎn)擊一個(gè)位置的時(shí)候，你需要確定的是一個(gè)二維坐標(biāo)，但是當(dāng)你在點(diǎn)擊一個(gè)列表時(shí)，由于列表的寬度就是屏幕的寬度，所以你只需要保證高度夠得到列表即可。

列表項(xiàng)（網(wǎng)易新聞）

2、網(wǎng)格

內(nèi)容布局的第二種是網(wǎng)格，當(dāng)內(nèi)容是以圖標(biāo)或者圖片為主的時(shí)候，網(wǎng)格是一種比列表更加適合的形式。網(wǎng)格有如下幾種布局，一種是放功能圖標(biāo)的，比如常見的九宮格導(dǎo)航，這個(gè)時(shí)候，相同空間內(nèi)，網(wǎng)格可以容納更多的入口，但是容易造成視覺上的負(fù)擔(dān)，所以，當(dāng)圖標(biāo)過多的時(shí)候，需要進(jìn)行分組展示；一種常見的網(wǎng)格是豎向的瀑布流，這種布局在圖片應(yīng)用中格外常見；還有一種比較少見，是一種橫向的瀑布流，橫向的瀑布流一般只有一列，但是可以橫向拓展，可以“左拉”出更多內(nèi)容。

網(wǎng)格分布的圖標(biāo)（美團(tuán)）

豎向瀑布流（花瓣）

橫向瀑布流（百度外賣）

3、輪播圖

不論是列表或是網(wǎng)格，不同的項(xiàng)之間是并列的。但是在輪播圖中，一次只會(huì)展示一個(gè)項(xiàng)，其他項(xiàng)都是隱藏起來的。所以這也就意味著大片區(qū)域都用來展示一個(gè)內(nèi)容，同時(shí)又沒有其他內(nèi)容的干擾，所以輪播圖非常適合用來展示重要的信息?？梢钥吹?，在一個(gè)頁面中，往往輪播圖是最搶眼的地方，所以有時(shí)候，一些廣告之類的推廣消息也會(huì)選擇放置在這里。需要注意的是，一個(gè)頁面中一般只有一個(gè)輪播圖。同時(shí)，輪播圖中圖片的個(gè)數(shù)也要有限制（我見過最多的是簡(jiǎn)書，竟然有8個(gè)，個(gè)人覺得太多了），不然數(shù)量太多的時(shí)候重要性就下降了。

輪播圖（網(wǎng)易游戲）

變種輪播圖（nice）

變種輪播圖（chrome）

關(guān)于界面的框架和內(nèi)容控件就說到這里，算是對(duì)界面設(shè)計(jì)的最后一部分總結(jié)。結(jié)合之前的導(dǎo)航總結(jié)，加上這部分的框架和內(nèi)容總結(jié)，設(shè)計(jì)頁面的時(shí)候就能有個(gè)依據(jù)和參考。

#專欄作家#

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。