移动应用设计细节分析——导航

移动设计模式整理分析——导航篇

产品导航设计优缺点分析

8种移动APP导航设计模式大对比

---

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）或用幻灯片演示。

适应需求：

①信息足够扁平，结构并列；

②内容常浏览、更新频繁。

优点：

①直观，简洁，便于浏览，体验流畅；

②承载内容丰富，沉浸感好。

缺点：①容易发生空间位置迷失；②浏览一段时间后，容易产生疲劳感。