關于手機網站的布局,網上已經有很多人發布過類似的文章了,在這里,文匯軟件的小編通過查閱和多年的建站經驗總結下手機界面使用的布局,主要有以下幾種:
主導航
列表式

特點:
內容從上向下排列,導航之間的跳轉要回到初始點,好比一條街上有理發店,飯店,你想從理發店到飯店,得先多理發店出來,才能進入飯店。
優點:
1、層次展示清晰
2、視覺流線從上向下,瀏覽體驗快捷。
3、可展示內容較長的菜單或擁有次級文字內容的標題
陳列館式

特點:
布局比較靈活,設計師可以平均分布這些網絡,也可根據內容的重要性不規則分布,相對列表式,其優點在于同樣的高度下可放置更多的菜單,更具有流動性,曝布流就屬于其中一種。
優點:
1、直觀展現各項內容
2、方便瀏覽經常更新的內容
九宮格

特點:
相比陳列館式,布局比較穩定為一行三列式布局。
優點:
1、清晰展現各入口
2、容易記住各入口位置,方便快速查找
選項卡式

特點:
導航一直存在,具有選中態,可快速切換到另一個導航。
優點:
1、減少界面跳轉的層級
2、分類位置固定
3、清楚當前所在的入口位置
3、輕松在各入口間頻繁跳轉且不會迷失方向
4、直接展現最重要入口的內容信息
旋轉木馬(輪播)

特點:
重點展示一個對象,通過手勢滑動按順序查看更多
優點:
1、單頁面內容整體性強,聚焦度高
2、線性的瀏覽方式有順暢感、方向感
行為擴展式

特點:
能在一屏內顯示更多的細節,無需頁面的跳轉
優點:
1、減少界面跳轉的層級
2、對分類有整體性的了解
3、清楚當前所在的入口位置
多個面板

特點:
能同時呈現比較多的分類及內容。
優點:
1、減少界面跳轉的層級
2、對分類有整體性的了解
3、分類位置固定
4、清楚當前所在的入口位置
圖表式

特點:
用圖表的形式直觀的呈現信息
優點:
1、總體性強
2、直觀
次導航
抽屜式

特點:
突出核心功能,隱藏其它功能。
優點:
1、不占用寶貴的屏幕空間,讓用戶首先能聚焦于內容
2、導航的菜單項目不受數量限制,應用的所有信息組織入口都可以加入到抽屜導航中
3、擴展性強,配置靈活,一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中
超級菜單式

特點:
默認具有選中態,導航/分類比較多,可快速切換到另一個導航/分類。
優點:
1、層次展示清晰
2、瀏覽時產生流暢體驗
3、可展示內容較長的標題
4、可展示標題的次級內容
彈出式

特點:
沒有跳出感,適合內容比較少和簡單操作的呈現。
優點:
1、在原有界面上進行操作,不必跳出界面,體驗比較連貫
2、在用戶需要的時候才顯示(重要提示除外),不主動干擾
圖片輪盤式

特點:
節省空間,可使用箭頭,圓點或顯示不全的圖片告訴用戶還有更多的內容可查看。
優點:
1、查看更多內容不必跳出界面,體驗連貫。
2、節省空間。
其中,所有的主要導航都可以做為次級導航,但次級導航不太適合用作主要導航。為什么?因為次導航是隱藏起來,隱而不見、只有觸發時才顯示。
以上都是基本布局,在實際的設計中,我們可以像搭積木一樣組合起來完成復雜的界面設計,例如手游吧的頂部導航用的是選項卡,下面采用多面板的布局。
另外要考慮到各種布局的優劣,并有最完美的布局,要考慮信息結構、重要層次以及數量上的差異,提供最適合的布局,以增加產品的易用性和交互體驗。
