關于手機網(wǎng)站的布局，網(wǎng)上已經(jīng)有很多人發(fā)布過類似的文章了，在這里，文匯軟件的小編通過查閱和多年的建站經(jīng)驗總結下手機界面使用的布局，主要有以下幾種：

主導航

列表式

特點：

內(nèi)容從上向下排列，導航之間的跳轉(zhuǎn)要回到初始點，好比一條街上有理發(fā)店，飯店，你想從理發(fā)店到飯店，得先多理發(fā)店出來，才能進入飯店。

優(yōu)點：

1、層次展示清晰

2、視覺流線從上向下，瀏覽體驗快捷。

3、可展示內(nèi)容較長的菜單或擁有次級文字內(nèi)容的標題

陳列館式

特點：

布局比較靈活，設計師可以平均分布這些網(wǎng)絡，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對列表式，其優(yōu)點在于同樣的高度下可放置更多的菜單，更具有流動性，曝布流就屬于其中一種。

優(yōu)點：

1、直觀展現(xiàn)各項內(nèi)容

2、方便瀏覽經(jīng)常更新的內(nèi)容

九宮格

特點：

相比陳列館式，布局比較穩(wěn)定為一行三列式布局。

優(yōu)點：

1、清晰展現(xiàn)各入口

2、容易記住各入口位置，方便快速查找

選項卡式

特點：

導航一直存在，具有選中態(tài)，可快速切換到另一個導航。

優(yōu)點：

1、減少界面跳轉(zhuǎn)的層級

2、分類位置固定

3、清楚當前所在的入口位置

3、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向

4、直接展現(xiàn)最重要入口的內(nèi)容信息

旋轉(zhuǎn)木馬（輪播）

特點：

重點展示一個對象，通過手勢滑動按順序查看更多

優(yōu)點：

1、單頁面內(nèi)容整體性強，聚焦度高

2、線性的瀏覽方式有順暢感、方向感

行為擴展式

特點：

能在一屏內(nèi)顯示更多的細節(jié)，無需頁面的跳轉(zhuǎn)

優(yōu)點：

1、減少界面跳轉(zhuǎn)的層級

2、對分類有整體性的了解

3、清楚當前所在的入口位置

多個面板

特點：

能同時呈現(xiàn)比較多的分類及內(nèi)容。

優(yōu)點：

1、減少界面跳轉(zhuǎn)的層級

2、對分類有整體性的了解

3、分類位置固定

4、清楚當前所在的入口位置

圖表式

特點：

用圖表的形式直觀的呈現(xiàn)信息

優(yōu)點：

1、總體性強

2、直觀

次導航

抽屜式

特點：

突出核心功能，隱藏其它功能。

優(yōu)點：

1、不占用寶貴的屏幕空間，讓用戶首先能聚焦于內(nèi)容

2、導航的菜單項目不受數(shù)量限制，應用的所有信息組織入口都可以加入到抽屜導航中

3、擴展性強，配置靈活，一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中

超級菜單式

特點：

默認具有選中態(tài)，導航/分類比較多，可快速切換到另一個導航/分類。

優(yōu)點：

1、層次展示清晰

2、瀏覽時產(chǎn)生流暢體驗

3、可展示內(nèi)容較長的標題

4、可展示標題的次級內(nèi)容

彈出式

特點：

沒有跳出感，適合內(nèi)容比較少和簡單操作的呈現(xiàn)。

優(yōu)點：

1、在原有界面上進行操作，不必跳出界面，體驗比較連貫

2、在用戶需要的時候才顯示（重要提示除外），不主動干擾

圖片輪盤式

特點：

節(jié)省空間，可使用箭頭，圓點或顯示不全的圖片告訴用戶還有更多的內(nèi)容可查看。

優(yōu)點：

1、查看更多內(nèi)容不必跳出界面，體驗連貫。

2、節(jié)省空間。

其中，所有的主要導航都可以做為次級導航，但次級導航不太適合用作主要導航。為什么？因為次導航是隱藏起來，隱而不見、只有觸發(fā)時才顯示。

以上都是基本布局，在實際的設計中，我們可以像搭積木一樣組合起來完成復雜的界面設計，例如手游吧的頂部導航用的是選項卡，下面采用多面板的布局。

另外要考慮到各種布局的優(yōu)劣，并有最完美的布局，要考慮信息結構、重要層次以及數(shù)量上的差異，提供最適合的布局，以增加產(chǎn)品的易用性和交互體驗。