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

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

列表式导航

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


列表式导航

优点:

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

缺点:

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

适用场景

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

注意:

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

宫格式导航

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


宫格式导航

优点:

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

缺点:

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

适用场景

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

陈列馆式导航

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


陈列馆式导航

陈列馆式导航-网格布局

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


陈列馆式导航-轮盘布局

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


陈列馆式导航-瀑布流网格布局

优点:

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

缺点:

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

适用场景

  • 产品展示,多种信息推荐

卡片式导航

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


卡片式导航

优点:

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

缺点:

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

适用场景

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

仪表盘式导航

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


仪表盘式导航

优点:

  • 数据更加生动直观易读

适用场景

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

轮播式导航

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


轮播式导航

优点:

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

缺点:

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

适用场景

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

折叠菜单式导航

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


折叠菜单式导航

优点:

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

适用场景

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

注意:

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

感谢以下大牛的分享:

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :