前言
總結(jié)下手機界面改版要考慮的布局，主要的分為以下2大類
主導(dǎo)航
列表式
陳列館式
九宮館式
選項卡式
旋轉(zhuǎn)木馬
行為擴展式
多面板
圖表式
次導(dǎo)航
抽屜式
超級菜單式
彈出式
圖片輪盤式
其中疲眷，所有的主要導(dǎo)航都可以做為次級導(dǎo)航扯罐，但次級導(dǎo)航不太適合用作主要導(dǎo)航 。為什么？因為次導(dǎo)航是隱藏起來，隱而不見、只有觸發(fā)時才顯示抹竹。
主導(dǎo)航
1、列表式
特點：
內(nèi)容從上向下排列止潮，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點窃判，好比一條街上有理發(fā)店，飯店喇闸，你想從理發(fā)店到飯店袄琳，得先多理發(fā)店出來，才能進入飯店燃乍。
優(yōu)點：
1唆樊、層次展示清晰
2、視覺流線從上向下刻蟹，瀏覽體驗快捷逗旁。
3、可展示內(nèi)容較長的菜單或擁有次級文字內(nèi)容的標(biāo)題
不足：
1舆瘪、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點
2片效、同級內(nèi)容過多時红伦，用戶瀏覽容易產(chǎn)生疲勞
3、排版靈活性不是很高
4淀衣、只能通過排列順序昙读、顏色來區(qū)分各入口重要程度
場景：
列表菜單適合用來顯示平級菜單，且較長或擁有次級文字內(nèi)容的標(biāo)題舌缤。
2箕戳、陳列館式
特點：
布局比較靈活某残，設(shè)計師可以平均分布這些網(wǎng)絡(luò)国撵，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對列表式玻墅，其優(yōu)點在于同樣的高度下可放置更多的菜單介牙，更具有流動性，曝布流就屬于其中一種澳厢。
優(yōu)點：
1环础、直觀展現(xiàn)各項內(nèi)容
2、方便瀏覽經(jīng)常更新的內(nèi)容
不足：
1剩拢、不適合展現(xiàn)頂層入口框架
2线得、容易形成界面內(nèi)容過多，顯得雜亂
3徐伐、設(shè)計效果容易呆板
場景：
適合以圖片為主的單一內(nèi)容瀏覽型的展示
3贯钩、九宮格
特點：
相比陳列館式，布局比較穩(wěn)定為一行三列式布局办素。
優(yōu)點：
1角雷、清晰展現(xiàn)各入口
2、容易記住各入口位置性穿，方便快速查找
不足：
1勺三、菜單之間的跳轉(zhuǎn)要回到初始點
2、無法向用戶介紹大概的功能需曾，只能點擊進去才能獲知吗坚，初始狀態(tài)不如列表式明朗
3、容易形成更深的路徑
4呆万、不能直接展現(xiàn)入口內(nèi)容
5商源、不能顯示太多入口次級內(nèi)容
場景：
適合入口比較多的展示，而且導(dǎo)航之間切換不是很頻繁的情況桑嘶，也就是業(yè)務(wù)之間相對獨立炊汹，沒有太多的瓜葛。
4逃顶、選項卡式
特點：
導(dǎo)航一直存在讨便，具有選中態(tài)充甚，可快速切換到另一個導(dǎo)航。
優(yōu)點：
1霸褒、減少界面跳轉(zhuǎn)的層級
2伴找、分類位置固定
3、清楚當(dāng)前所在的入口位置
3废菱、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向
4技矮、直接展現(xiàn)最重要入口的內(nèi)容信息
不足：
功能入口過多時，該模式顯得笨重不實用
場景：
大部分放在底部殊轴，方便用戶操作衰倦，切換的時候，選中狀態(tài)高亮顯示旁理，有少數(shù)放在頂部樊零。
適合分類少及其內(nèi)容同時展示，導(dǎo)航菜單項數(shù)量為3-5個孽文；各導(dǎo)航菜單項之間內(nèi)容/功能有顯著差異驻襟；用戶在各個導(dǎo)航選項之間需要非常頻繁的切換操作
5、旋轉(zhuǎn)木馬
特點：
重點展示一個對象芋哭，通過手勢滑動按順序查看更多
優(yōu)點：
1沉衣、單頁面內(nèi)容整體性強，聚焦度高
2减牺、線性的瀏覽方式有順暢感豌习、方向感
不足：
1、受屏幕寬度限制烹植，它可顯示的數(shù)量較少斑鸦，需要用戶進行主動探索
2、由于各頁面內(nèi)容結(jié)構(gòu)相似草雕，容易忽略后面的內(nèi)容
3巷屿、不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面
場景：
適合數(shù)量少墩虹，聚焦度高嘱巾，視覺沖擊力強的圖片展示
6、行為擴展式
特點：
能在一屏內(nèi)顯示更多的細(xì)節(jié)诫钓，無需頁面的跳轉(zhuǎn)
優(yōu)點：
1旬昭、減少界面跳轉(zhuǎn)的層級
2、對分類有整體性的了解
3菌湃、清楚當(dāng)前所在的入口位置
不足：
分類位置不固定问拘，當(dāng)展開的內(nèi)容比較多時，跨分類跳轉(zhuǎn)不方便
場景：
適合分類多及其內(nèi)容同時展示
內(nèi)容展示的信息多
7、多面板
特點：
能同時呈現(xiàn)比較多的分類及內(nèi)容骤坐。
優(yōu)點：
1绪杏、減少界面跳轉(zhuǎn)的層級
2、對分類有整體性的了解
3纽绍、分類位置固定
4蕾久、清楚當(dāng)前所在的入口位置
不足：
2、界面比較擁擠
場景：
適合分類多及其內(nèi)容同時展示
內(nèi)容展示的信息不多
8拌夏、圖表式
特點：
用圖表的形式直觀的呈現(xiàn)信息
優(yōu)點：
1僧著、總體性強
2、直觀
不足：
1障簿、詳情信息顯示的有限
場景：
適合總-分結(jié)構(gòu)或表現(xiàn)時間段內(nèi)的趨勢走向的展示
次導(dǎo)航
1盹愚、抽屜式
特點：
突出核心功能，隱藏其它功能卷谈。
優(yōu)點：
1杯拐、不占用寶貴的屏幕空間霞篡，讓用戶首先能聚焦于內(nèi)容
2世蔗、導(dǎo)航的菜單項目不受數(shù)量限制，應(yīng)用的所有信息組織入口都可以加入到抽屜導(dǎo)航中
3朗兵、擴展性強污淋，配置靈活，一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導(dǎo)航中
不足：
1余掖、隱藏框架中其他入口寸爆、用戶需要一定記憶成本
2、對入口交互的功能可見性要求高
3盐欺、容易與應(yīng)用內(nèi)的其他交互模式?jīng)_突赁豆，比如側(cè)滑手勢操作
場景：
適合功能較多，信息結(jié)構(gòu)較復(fù)雜的產(chǎn)品冗美，用戶的注意力聚焦在主信息流的瀏覽上魔种，不用頻繁切換“子產(chǎn)品模塊”，且擴展性比較好
2粉洼、超級菜單式
特點：
默認(rèn)具有選中態(tài)节预，導(dǎo)航/分類比較多，可快速切換到另一個導(dǎo)航/分類属韧。
優(yōu)點：
1安拟、層次展示清晰
2、瀏覽時產(chǎn)生流暢體驗
3宵喂、可展示內(nèi)容較長的標(biāo)題
4糠赦、可展示標(biāo)題的次級內(nèi)容
不足：
1、菜單之間的跳轉(zhuǎn)要回到初始點
2、同級內(nèi)容過多時拙泽，用戶瀏覽容易產(chǎn)生疲勞
3唆铐、排版靈活性不是很高
4、只能通過排列順序奔滑、顏色來區(qū)分各入口重要程度
場景：
比較復(fù)雜的信息架構(gòu)艾岂，導(dǎo)航分類比較多。
3朋其、彈出式
特點：
沒有跳出感王浴，適合內(nèi)容比較少和簡單操作的呈現(xiàn)。
優(yōu)點：
1梅猿、在原有界面上進行操作氓辣，不必跳出界面，體驗比較連貫
2袱蚓、在用戶需要的時候才顯示（重要提示除外）钞啸，不主動干擾
不足：
1、顯示的內(nèi)容有限
場景：
適合內(nèi)容較少的顯示
4喇潘、圖片輪盤式
特點：
節(jié)省空間体斩，可使用箭頭，圓點或顯示不全的圖片告訴用戶還有更多的內(nèi)容可查看颖低。
優(yōu)點：
1絮吵、查看更多內(nèi)容不必跳出界面，體驗連貫忱屑。
2蹬敲、節(jié)省空間。
不足：
橫屏寬度有限莺戒，更多的內(nèi)容有數(shù)量上限制伴嗡，如微信只展示5個好友信息。
場景：
適合圖片或信息組塊更多的展示方式从铲。
小結(jié)
以上都是基本布局瘪校，在實際的設(shè)計中，我們可以像搭積木一樣組合起來完成復(fù)雜的界面設(shè)計食店，例如手游吧的頂部導(dǎo)航用的是選項卡渣淤，下面采用多面板的布局。
另外要考慮到各種布局的優(yōu)劣吉嫩，并有最完美的布局价认，要考慮信息結(jié)構(gòu)、重要層次以及數(shù)量上的差異自娩，提供最適合的布局用踩，以增加產(chǎn)品的易用性和交互體驗渠退。
https://www.xuanfengge.com/category/h5/h5-h5
