移动端内容界面结构的导航设计模式

2019-07-21 产品阅读量

上篇文章整理了移动端主导航常见的设计模式，本篇文章将从内容界面结构的角度阐述下常用的导航设计模式。

列表式导航

列表式导航当界面信息的种类比较单一，或者只是作为信息的链接入口时，我们可以使用列表式结构。这种结构可以高效、清晰地展示信息，可以容纳的信息比较多。列表式导航大多作为辅助导航来展示二级甚至更深层次的内容，若要作为主导航，必须满足层级浅且内容平级的条件

优点：

从上往下符合用户的阅读习惯
列表式的信息格式比较一致，延展性很强，可以不断地增加信息
导航效率较高，可引入搜索功能
适合层级较深的信息结构
可以方便地进行分组分类

缺点：

当同级内容过多时，由于形式的统一，用户浏览容易造成视觉疲劳
越往下功能操作率越低
列表式可能有多层级，用户需在每个页面选择一次进行导航，直至到达目标位置，并且模块之间的切换需要返回到列表主页，操作步骤较多
如果列表中信息量比较庞大，往往需要加入搜索功能，否则用户寻找信息会很困

适用场景

功能名称较长
功能较多
内容展示为主
二级菜单或多级菜单较多

注意：

列表式导航的数量保持在一屏以内，超过一屏最好再分一级
将最终要的内容归纳在前 4 个列表更容易被人们记住
要注意为列表内容分类

宫格式导航

宫格式（又称跳板式）主要作为信息聚合的入口，在这种界面中，用户 80%的行为都在寻找信息入口。信息呈现的内容比较少，但是多个项目选取的效率比较高。

优点：

扩展性好
入口多，重要的功能都能呈现
用户能够直观选择出自己需要的功能模块

缺点：

平铺的内容多，用户的选择机会多，所以会增加选择压力（席克定律）
如果要切换功能的话必须返回到原始页面，操作流程多

适用场景

各功能模块重要性都比较高
功能模块比较多
用户切换不频繁的时候

陈列馆式导航

陈列馆式导航设计区别于宫格式，在于可用来呈现实时内容（经常更新、视觉效果直观的内容），如新闻、菜谱、视频或照片等，内容彼此独立、无层级关系。可以采用网格布局或轮盘布局，还可以采用幻灯片模式进行展示。一般做为次级导航使用。

半隐藏部分内容，指引用户左右滑动察看

瀑布流网格布局，瀑布状的上下布局，引导用户的视觉方向，体验流畅，吸引用户浏览并沉浸其中

优点：

与列表式、宫格式相比较，陈列馆式表现形式、视觉效果更加丰富
展示直观，且方便浏览经常更新的内容

缺点：

不适合展现顶层入口框架
界面内容较多时，容易造成视觉疲劳

适用场景

产品展示，多种信息推荐

卡片式导航

卡片式导航的原型是扑克牌，模仿了扑克牌中常见的切牌、洗牌、弃牌、翻牌等手法，是一种比较新颖的导航设计模式

优点：

方式新颖，配合操作动效，比较吸引用户
页面内容整体性强

缺点：

不适合展示过多页面，只能逐个察看，浏览效率低
不能跳跃性地察看间隔页面，只能按顺序察看相邻页面
各页面结构内容相似，容易忽略后面的内容。

适用场景

内容展示为主，信息间不存在联系

仪表盘式导航

仪表式导航提供了一种度量关键绩效指标（KPI）是否达到要求的方法。经过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。但不要载入过多信息，对于要展示的关键指标或数据需经过仔细研究再做决定。

优点：

数据更加生动直观易读

适用场景

需要使用关键指标或数据作为应用入口的时候

轮播式导航

信息较少且足够扁平的时候。在天气的应用中较多使用。

优点：

这种方式最大程度保证了页面的简洁性和内容的完整性，一般都结合页面指示器（即小圆点），操作方便，左右滑动切换

缺点：

承载入口的数量有限，超过 10 个可能就太多了
用户只能切换到相邻页面，难以快速切换到目标页面。且容易迷失位置，所以需要页面指示器（页面过多时，需用其他指示方式如数字，来表示位置）指示用户当前的位置

适用场景

轮播式导航也常用于察看图片，常于其他导航模式结合，作为广告 banner 呈现
天气应用就使用了轮播导航，一个页面展示当前城市的完整天气情况，左右滑动切换察看其他城市的情况，十分方便

折叠菜单式导航

折叠菜单式导航（又称手风琴式），就是运用动态的效果，将二级的信息展开，无需跳转到新的页面，使用户在同一个页面上查看到更多的信息，不需要任何跳转。折叠菜单式一般层级较少，展开后就可看到具体内容，且内容量相对较小，方便再次收起

优点：

通过折叠的方式，用户在当前页面就能获取大量信息，这种方式比跳转到二级页面再跳转回来更高效

适用场景

有限空间上需要展示更多的内容

注意：

一定要使用常见的图标来进行指示折叠式菜单的打开或关闭状态，避免用户产生疑问

感谢以下大牛的分享：