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

關于導航的部分，我之前已經總結過了，詳情請見：《APP常用導航總結》。今天主要講講框架和內容控件的部分。

框架

對于框架，其實比較簡單。因為現在有種趨勢是“以內容為中心”，所以，界面設計的重點并不在框架上。加之現在iOS和Android平臺都有比較成型的規范，所以直接套用就行了。

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

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

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

頂部工具欄【1】

懸浮工具欄【1】

底部工具欄【1】

Android界面框架的第二個點是懸浮按鈕，這個其實也是一個功能入口。這個入口要放置當前界面最最重要的功能，并且最好是正向操作的功能。關于懸浮按鈕的介紹請見Material design設計指南之按鈕：浮動操作按鈕，這里不再重復累贅。懸浮按鈕也是選用的，只有當頁面有且只有一個非常重要的操作的時候，才需要考慮懸浮按鈕。

懸浮按鈕【2】

內容

講完了框架的部分，現在講講內容的部分。內容的空間選擇主要有：列表、網格、和輪播圖。

1、列表

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

列表項（網易新聞）

2、網格

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

網格分布的圖標（美團）

豎向瀑布流（花瓣）

橫向瀑布流（百度外賣）

3、輪播圖

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

輪播圖（網易游戲）

變種輪播圖（nice）

變種輪播圖（chrome）

關于界面的框架和內容控件就說到這里，算是對界面設計的最后一部分總結。結合之前的導航總結，加上這部分的框架和內容總結，設計頁面的時候就能有個依據和參考。

#專欄作家#

本文原創發布于人人都是產品經理，未經許可，不得轉載。