文/王杰 投稿 App界面布局設(shè)計(jì)是APP設(shè)計(jì)中非常重要的一環(huán),合理的運(yùn)用APP界面布局會讓APP的界面顯得很清晰美觀。那么常見的APP界面布局有哪些呢?


①頂部導(dǎo)航。整個(gè)的應(yīng)用的導(dǎo)航在頂部,用戶通過左右滑動(dòng)來切換不同的導(dǎo)航選項(xiàng)卡,主內(nèi)容區(qū)域?qū)⑹且粋€(gè)動(dòng)態(tài)面板。當(dāng)用戶點(diǎn)擊導(dǎo)航條目或者左右滑動(dòng)手指的時(shí)候,就切換主內(nèi)容區(qū)域的動(dòng)態(tài)面板的狀態(tài)。

②標(biāo)簽式導(dǎo)航。具有多個(gè)主要功能劃分的應(yīng)用都采用了這個(gè)方式;適合3~5個(gè)導(dǎo)航菜單,核心功能比較突出,也能夠以很直觀的方式通知用戶。

③抽屜式。抽屜式布局是指導(dǎo)航隱藏在左側(cè)或者右側(cè),用戶通過滑動(dòng)拖拽的方式,像打開抽屜一樣將導(dǎo)航部分拖出。這種布局適合主內(nèi)容較多,不希望菜單欄占據(jù)固定位置消耗空間的應(yīng)用程序。

④九宮格式。九宮格其實(shí)不一定是九個(gè)格,可以根據(jù)需要靈活地調(diào)整。九宮格布局的特點(diǎn)就是直觀,所有的功能一目了然。
⑤下拉列表式。在這種布局中菜單默認(rèn)是隱藏的,用戶點(diǎn)擊后滑出,有點(diǎn)兒類似于抽屜布局,不過一般是上下滑動(dòng)的。

⑥異形。在這類布局中,會采用一些非常規(guī)的菜單來進(jìn)行導(dǎo)航,例如:圓形的導(dǎo)航盤、飛出式菜單等。

⑦分級菜單。多層級的菜單這種設(shè)計(jì)適合與項(xiàng)目很多但是每個(gè)項(xiàng)目的內(nèi)容比較簡單的界面應(yīng)用,例如:聯(lián)系人、地址等。推薦閱讀:界面設(shè)計(jì)的理智與情感!


1、公司/組織的圖標(biāo)(Logo)在所有頁面都處于同一位置。
2、用戶所需的所有數(shù)據(jù)內(nèi)容均按先后次序合理顯示。
3、所有的重要選項(xiàng)都要在主頁顯示,重要條目要始終顯。

5、重要條目要顯示在頁面的頂端中間位置。
6、必要的信息要一直顯示。
7、消息、提示、通知等信息均出現(xiàn)在屏幕上目光容易找到的地方。

8、確保主頁看起來像主頁(使主頁有別于其它二三級頁面)。
9、主頁的長度不宜過長。
10、APP的導(dǎo)航盡量采用底部導(dǎo)航的方式。菜單數(shù)目4~5個(gè)最佳。

11、每個(gè)APP頁面長度要適當(dāng)。
12、在長網(wǎng)頁上使用可點(diǎn)擊的“內(nèi)容列表”。
13、專門的導(dǎo)航頁面要短小,避免滾屏,以便用戶一眼能瀏覽到所有的導(dǎo)航信息。

14、優(yōu)先使用分頁(而非滾屏)。
15、滾屏不宜太多(最長4個(gè)整屏)。
16、需要仔細(xì)閱讀理解文字時(shí),應(yīng)使用滾屏(而非分頁)。
17、為框架提供標(biāo)題。

18、注意主頁中面板塊的寬度。
19、將一級導(dǎo)航放置在左側(cè)面板
20、避免水平滾屏。
21、文本區(qū)域的周圍是否有足夠的間隔。
22、各條目是否合理分類于各邏輯區(qū),并運(yùn)用標(biāo)題將各區(qū)域進(jìn)行清晰劃分。推薦:UI圖標(biāo)設(shè)計(jì)基礎(chǔ)(視頻教程)
