移动端主导航的设计模式

      任何产品的功能以及内容都需要以某种导航框架组织起来,使产品结构清晰,目标明确。在用户体验要素中,框架层里面有个很重要的概念就是导航设计,作者对导航设计的定义是:元素的组合,允许用户在信息架构中穿行。导航通常就是引导用户使用产品、完成目标的工具。这篇文章主要记录下在看了多个大牛分享主导航设计后,自己的总结体会。主导航时呈现应用的主要功能架构及布局的导航方式,是应用的顶层架构。

标签式导航(tab 式导航)

      tab 式导航是移动应用中最普遍、最常用的导航模式。适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在 5 个以内,多余 5 个用户难以记忆而且容易迷失。总而言之,这个 tab 适合的场景主要有两个方面:1.各个 tab 功能重要程度都高的时候;2.用户需要频繁切换的时候
      标签式导航主要细分为底部 tab 式导航、顶部 tab 式导航、底部 tab 的扩展导航这三种。

底部 tab 式导航

      底部 tab 式导航是最基本的导航,像微信、淘宝、QQ 等全部都是底部 tab 式导航。这是符合拇指热区操作的一种导航模式。大部分是以文字+icon 的形式呈现,使用户减少记忆负担。


底部tab式导航

优点:

  • 切换方便快捷
  • 可见性好

缺点:

  • 可扩展性不高,一般 3-5 个 tab
  • 占用一定空间,沉浸式体验不足

适用场景

  • 各个功能重要程度都高的时候
  • 用户需要频繁切换的时候

底部 tab 的扩展导航(舵式导航)

      舵式导航是底部 tab 导航的扩展形式,有些情况下,简单的底部 tab 导航难以满足更多的操作功能,因此在标签栏的中间加入了功能按钮(多为发布型的功能按钮),来作为应用最核心的操作功能入口。是 app 里面使用最频繁的一个功能,一般都会重点突出。并且,该标签中很多时候会有二级导航,二级导航里可扩展性就比较强。


舵式导航

优点:

  • 突出重要且频繁使用的操作入口,较大限度引导用户进行操作
  • 二级导航可扩展性强

缺点:

  • 中间按钮旁边的按钮点击率会降低
  • 同底部 tab 式导航

适用场景

  • 如果你的 app 几个重要的功能,并且它们切换频繁,其中一个作为 app 的核心功能或者是操作。这个时候可以选择舵式导航

顶部 tab 式导航

      顶部标签导航顾名思义就是 tabbar 位于顶部,最早知道它是在 Material Design 里面,Android 的物理按键已经放在底部了,为了不产生堆叠,所以将标签导航置于顶部不会显得突兀。这种导航的最大优点在于在能够使用户清晰的看到 APP 的分类。它很少用作一级导航,一般是二级导航比较多,且几乎都是纯文字的形式。顶部 tab 式导航大致分为分段选项卡、固定选项卡、滚动选项卡四种。

分段选项卡

      分段选项卡实现容器内不同视图或内容间的切换。分段选项卡是由两个或两个以上宽度相同的分段组成,正常情况下不超过 4 个,视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航,对主导航内容再次分类,可以在顶部导航栏的下方,也可以直接放在导航栏上。


分段选项卡

优点:

  • 分段选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务
  • 让用户清楚地知道有多个可供选择的视图
  • 支持用户在不同视图间切换

缺点:

  • 选项卡个数有限,一般不超过 4 个。
  • 只支持点击分段实现视图间的切换,不支持左右滑动的切换。

适用场景

  • 对主导航内容再次分类,重要级相同且不超过 4 个。

固定选项卡

      固定选项卡固定在屏幕顶部,适用在应用的主要类别之间切换,并且支持左右滑动切换到不同视图。


固定选项卡

优点:

  • 固定选项卡可以承载重要性和频率处于同一级别的功能模块、信息或任务
  • 让用户清楚地知道有多个可供选择的视图
  • 支持用户在不同视图间切换,并且支持左右滑动切换,方便操作
  • 显眼——位置处于页面顶部,基于用户由上至下的浏览习惯,固定选项卡处于页面“显眼处”;

缺点:

  • 选项卡个数有限,一般不超过 4 个。
  • 只支持点击分段实现视图间的切换,不支持左右滑动的切换。

适用场景

  • 对主导航内容再次分类,重要级相同且不超过 4 个。

滚动选项卡

      滚动选项卡与固定选项卡同属选项卡式,最大区别在于:一个模块中可以显示多个(超过 5 个)类别的视图,并且还可以进行扩展或移除(自定义如新闻类的频道、现在比较火的直播类的各类游戏),同样支持左右滑动切换到不同视图。


滚动选项卡

优点:

  • 没有选项卡个数的显示,并且还支持扩展或移除
  • 可以承载重要性和频率处于同一级别的功能模块、信息或任务
  • 支持用户在不同视图间切换,并且支持左右滑动切换,方便操作

缺点:

  • 滚动选项卡越多,用户的选择压力越大,这也是滚动选项卡无法避免的劣势,所以当类别过多的时候,一般都默认显示一定数量,其他都放在二级页面,由用户自由添加。

适用场景

  • 标签较多时
  • 一般用作二级导航

底部、顶部组合 tab 导航

      有些应用存在上下两层标签,这是由于应用的信息量巨大且信息的布局有多个层级导致的。这种界面布局较为复杂,特别注重逻辑清晰。


底部、顶部组合tab导航

优点:

  • 底部、顶部组合 tab 导航解决了诸如新闻资讯类、直播类等信息量巨大且有多个层级的应用的布局问题。这种组合导航方式的运用还是比较多的

缺点:

  • 双层 tab 占用了更多的页面空间,具体内容的展示空间进一步被压缩,获取信息的数量相应减少。
  • 页面标签过多,信息量太大,用户容易选择困难,且造成使用混乱。所以,这种组合导航必须注重逻辑梳理清晰,界面排布合理,尽量减少给用户带来负面影响。

适用场景

  • 信息量巨大且有多个层级的应用

抽屉式导航

      抽屉式导航又称侧边(抽屉) 式导航,是一种瞬时的导航方式,即只有在我们需要的时候才会显示出来(通过点击调出),在我们做出选择后,再次消失。


抽屉式导航

优点:

  • 节省页面展示空间。
  • 让用户注意力聚焦到当前页面
  • 扩展性较好

缺点:

  • 抽屉式导航可能会降低产品一半的用户参与度。由于整个导航的隐藏,对于用户来说,首先是不易发现,再者是给用户切换功能带来了操作成本
  • 航菜单按钮一般位于左上角,在大屏手机时代,单手持握时属于操作盲区
  • 不适合频繁切换的应用

适用场景

  • 当应用的核心功能流程单一,主界面就能满足用户核心场景下的需求,不需要频繁在几个功能模块之间进行切换,即可将其他的功能模块(通常是分类、设置、个人中心等)做一个收纳,利用抽屉导航隐藏起来
  • 一些使用率较低的功能就需要设计师帮用户“隐藏起来”

抽屉式导航的三种风格

      抽屉式导航有三种风格:浮层、嵌入式(向右推动原有界面)、新兴的模式(向右滑动的 3D 效果)。轻滑:通过轻滑或点击的手势打开抽屉,抽屉部分遮挡或覆盖原来页面的内容。嵌入式:通过轻滑、平移或点击打开抽屉,把原先的页面内容部分推出屏幕外。新兴模式:打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面向右推开,还采用 3D 效果将其推到后面。


抽屉式导航的三种风格

下拉菜单式

      下拉菜单式简称下拉式,也是一种瞬时的导航方式,即只有在我们需要的时候才会显示出来。能让用户在有限的屏幕空间上做更多的动作,可以用来筛选同一信息列表下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转,即可实现操作目的。下拉菜单也可以是浮层或嵌入式的形式.这种导航形式是来源于 Material Design 里面的 Menu.Menu 是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。


下拉菜单式

当信息层级变多的时候,菜单导航里要展示一层或者两层信息,比如大众点评采取的形式:


下拉菜单式

优点:

  • 节省页面展示空间。
  • 点击 icon 即可唤醒,操作方便
  • 点击空白处即可隐藏
  • 唤醒的菜单位于 icon 附近,易感知

缺点:

  • 绝大部分菜单导航位于页面顶部,手势操作不方便
  • 入口不明显,容易忽视

适用场景

  • 菜单导航不能作为主导航,一般为辅助导航
  • 当一个页面承载的功能太多,可以将一些功能收纳到某一元素里的时候

悬浮 icon 导航

      悬浮 icon 导航,是将导航页面分层,无论你到达 APP 的哪个页面,悬浮 icon 永远悬浮在上面,你依靠悬浮层随时可以去想要去的地方,同时,为了让悬浮 icon 不遮挡某个页面的操作,通常悬浮的 icon 都可以在屏幕边缘自由移动。在 Android 的 Material Design 中,同样提出了悬浮 icon 的设计概念


悬浮icon导航

优点:

  • 悬浮式 icon 是一个非常便捷的操作入口,也适应大屏幕时代

注意:

  • 悬浮式 icon 会遮挡某些页面的操作,在设计的时候应该考虑进去,比如无论在那个页面永远为悬浮 icon 留有位置。
  • 在某些信息层级繁多且复杂的 APP,让用户自主决定是否需要调出悬浮式 icon,或者让用户自定义菜单会更加符合用户的心理预期

适用场景

  • 更适应大屏的导航模式

感谢以下大牛的分享:

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :