1.扁平式导航
1.1 经典Tab式导航
常见于屏幕底端或屏幕顶端两种，选用选项卡式导航则各选项之间为并列关系，其中常选状态为最重要，操作最频繁一项。为已选择的菜单项设置不同的视觉效果，用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。
微信
通用布局
适应需求：
①用户需要频繁地在不同分页切换；
②主要功能/入口不太多，结构并列。
优点：
①给人感觉直观，方便用户快捷操作；
②直接展现最重要入口的内容信息；
③可以轻松在各个主要入口频繁跳转使用，减少点击次数；
④清楚当前所在的入口位置，不会迷失方向。
缺点：①占位置；（改进：上下滑动隐藏显示导航）
safari-上滑隐藏导航
②容量有限；（改进：Tab上增加Popover或Actionsheet）
③沉浸式体验较差，导航会分散用户的注意力。（改进：同①）
1.2舵式导航
样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。常用与UGC产品，将发布按钮突出强调，目的在于鼓励用户进行原创发布。
新浪微博
适应需求：当页有同级的几大部分内容，又需要一个非常重要且频繁的操作入口；
优点：优点类似Tab导航，且最重要的功能突出，引人注意，不需寻找。
缺点：同Tab；更影响沉浸感。
1.3宫格导航 / 跳板式导航 / 快速启动板（Springborad）
往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。
适应需求：多个同等重要的内容项（＞5个）
优点：选项清晰明显，易点击。
缺点：①无法在多入口间灵活跳转，不适合多任务操作；
②容易形成更深的路径；
③不能直接展现入口内容；
④选择多、外形相近，用户认知压力大，选择效率低。（改进：利用不规则的布局方式凸显某些项的重要性，或让用户自定义。）
不规则的宫格导航
注意：不要过度使用色彩，可能会让用户不知所措和产生疲倦感。
1.4超级菜单式（略）
2.层级式导航
2.1列表菜单（List Menu）
通常用于二级页，不会默认展示任何实质内容，所以通常app不会在首页使用它。
适应需求：
①项目标题较长或含有次级内容；
②二级以下页面；
③项目间需要分组（通过间距、标题等进行分组，形成扩展列表）。
优点：结构清晰，易于理解，冷静高效；
缺点：层级深，用户容易感到迷茫，不知道在哪。（改进：结合其他导航方式，如如“跟随式”固定导航，帮助用户定位目标）
“跟随式”固定导航
2.2抽屉式导航（Drawer）
抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。
老知乎
适应需求：
①核心功能突出且较为单一；
②需要对多个视图统一操作；
③内容展示需要足够空间，要求高沉浸感体验；
④App信息层级较多，需要节省空间。
优点：
①界面简洁，焦点集中。核心功能和内容信息最大限度展现在用户眼前，有效保护了用户对核心功能的体验；
②兼容性好；
③导航扩展性好；
缺点：
①不直观，点击较多、路径较深，切换麻烦；
②右手操作不便；（改进：边缘交互，屏幕左侧边缘拉出菜单）
③隐藏性高，学习成本高；
④顶部导航栏信息过载。
2.3点聚式
Naver-幽灵小绿点
优点：①灵活，有趣；②使界面更开阔。
缺点：类似抽屉，；对入口交互的可供性（affordance）要求高
3.内容/体验主导式导航
3.1 图片轮盘式
当你的应用信息足够扁平，可以尝试轮播导航。
适应需求：
①信息足够扁平，结构并列；
②需要高沉浸感与流畅体验感。
优点：
①最大程度的保证应用的页面简洁性，高流畅性，操作与浏览无缝过渡；
②单页面内容整体性强，对展示类App有奇效（如探探、商品展示App……）。
缺点：
①第一眼无法掌控所有内容；
②控制感弱，定位难；
③由于各页面内容结构相似，容易忽略后面的内容
3.2 陈列馆式（Gallery）
陈列馆式的设计通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格、瀑布流（waterfall）或用幻灯片演示。
适应需求：
①信息足够扁平，结构并列；
②内容常浏览、更新频繁。
优点：
①直观，简洁，便于浏览，体验流畅；
②承载内容丰富，沉浸感好。
缺点：①容易发生空间位置迷失；②浏览一段时间后，容易产生疲劳感。
网友评论