几种常见移动导航模式详析

虽说一款应用的生死不是由导航决定,但毋庸置疑,导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说,没有优劣之分,端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式,接下来会对其一一举例说明(注:重要模式会重点分析,其余简略,篇幅略长,不喜可跳过)


虽说一款应用的生死不是由导航决定,但毋庸置疑,导航模式的选择在产品用户体验上占有很大的比重。就导航本身来说,没有优劣之分,端看你的应用适合哪种。下面是我罗列的一些常见的移动导航模式,接下来会对其一一举例说明(注:重要模式会重点分析,其余简略,篇幅略长,不喜可跳过)

几种常见移动导航模式详析

标签式

标签式导航是ios平台上公认的最经典的导航模式,看市场上几乎有80%的应用都在使用就能知道。标签式导航关注的是平行空间的展示,它的优点是适用于多个内容体系,且重要程度相似(平级关系),能频繁在不同页面间切换,切换成本底,只需一次点击;缺点是占用一定高度空间,且标签数量有限,最多5个标签。

下图中图1-淘宝,是标签式导航的标准使用形式,每个标签作为一个导航分类放在标签栏中(注意都是名词)。图2和图3可以算是标准形式的变形(还有其他变形形式,后面再讲),虽然也是有5个标签,但处于中间位置的标签不是作为导航使用,而是一个行为召唤按钮。行为召唤按钮主要强调某项重要功能的快捷使用,该功能需要是应用最核心且最常用的功能,优先级很高。比如图2的instagram,它的目标是以一种快速、美妙和有趣的方式将你随时抓拍下的图片分享出来,它关注的是能随时随地抓拍。因此,作为行为召唤按钮的“拍照”放在标签栏上就很有必要。

几种常见移动导航模式详析

但是,有些应用对于行为召唤按钮的放置并不合理。如下图的图3-简书,虽然文章的撰写是简书的核心功能,将其作为标签栏中的一个按钮,即能在视觉上凸现出来,又能减少操作负荷,似乎很棒。但却忽略了一个重要的问题,从使用环境来说,文章或者文档的撰写是需要在安静且能集中注意力的环境下,但移动app天然具有干扰多且注意力不集中的问题。而且在手机上输入上百字也是一件痛苦的事。对于这款产品的手机用户来说,可能用户对内容的消费比对执行动作更重要。

另外,还有一种常见的标签式导航的变种,即传统的标签式+点聚式。这里先专门讲一下点聚式,最为我们所熟知的点聚式就是曾经经典的path结构,即抽屉导航+点聚式,如下图所示—改版前图示,它的目的是将用户最频繁使用的多个核心功能点汇聚在主界面中显示,方便用户随时呼出使用。只是,如今单独使用点聚式的应用越来越少,就连path也对这种传统的点聚式进行了调整,变成了依附于标签的点聚式结构,如下图中的path改版后。还有下图中的样式1和样式2,也是这种形式的不同展现。他们的共同点是,使用同一个导航入口,进行多个同级功能的不同操作,大部分都是2-5个不同的操作选项,当然也会有更多,比如下图中的新浪微博,点击“加号”入口,出现了更多的功能选项,且这些功能的优先级相若。

几种常见移动导航模式详析

其实,在Android 5.0中,这种点聚式更常用的表现形式是悬浮响应按钮,它代表的是这个app中最主要的操作。只是就目前来讲使用场景有限,实际应用并不理想。

抽屉式

抽屉式导航的目的是带给用户更为沉浸的体验。它的特点是,“阅读”为王,点击切换少,专注于主体信息本身。从表现形态来看,抽屉导航很符合产品的二八法则,即产品中只有20%的功能常用,所以要突显,剩下的80%不常用,因此隐藏。它不像标签导航一样强调平级关系的切换,而是突出重要且核心的功能。抽屉导航的另一些优点是,侧边导航收纳的导航标签可以是5个以上,节省屏幕空间。缺点是无法快速完成导航切换,操作成本高。

关于抽屉导航,在Android和ios平台的使用也有区别。抽屉导航在Android平台上比ios更常使用。由于在ios上,抽屉导航没有专门的设计规范,所以使用上较为随意,表现形式也不受拘泥。

如果以抽屉导航和主页在空间位置为评判依据,其在风格上主要有3种表现:

第一种是浮层,即导航抽屉处于主页上层,通过滑动或点击的手势打开抽屉,抽屉部分遮挡或覆盖原来页面的内容,如下图中图4,这种风格多数会在Android上出现。

第二种是叠加式,即导航抽屉位于主页的底部,打开抽屉,原来的主页会向屏幕右侧滑动,显出主页下方的导航抽屉,如下图中图5,这种风格在ios上很普遍。第三种是嵌入层,即导航抽屉和主页处于同一层,通过轻滑、平移或点击打开抽屉,把原先的页面内容部分推出屏幕外,如下图中图6(注意导航和主页衔接处无阴影)。

而第三种风格经常会有如下图图7的变形,就是说在打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面向右推开,还采用3D效果将其推到后面。了解不同风格可在设计时斟酌使用。

几种常见移动导航模式详析

选项卡式

对于选项卡导航,不同平台有不同的设计规则。今天主要说说ios上选项卡的表现,选项卡的本质即是,实现容器内不同视图或内容的切换。虽然对于选项卡本身,ios没有专门的规范约束,但这并不妨碍广大设计者们自由发挥。目前市场上主要有3种形式的选项卡:分段选项卡、固定选项卡和滑动选项卡。

分段选项卡:是由两个或两个以上宽度相同的分段组成,正常情况下不超过4个,视觉上会有一个很明显的描边按钮。分段选项卡经常会作为二级导航,对主导航内容再次分类,可以在顶部导航栏的下方,也可以直接放在导航栏上,如下图所示。标签之间互相关联,只能点击切换,操作效率较低。

几种常见移动导航模式详析

另外,就是固定选项卡和滑动选项卡,两者都可以直接点击或左右滑动切换选项,且一级和二级导航都能使用。区别就是滑动选项卡可以有更多选项,且能直接通过手指滑动导航找分类,适用于相关类别多的应用,如下图的电子商务网站。

几种常见移动导航模式详析

下拉菜单式

现如今,下拉菜单式导航并不常用。下拉菜单和导航抽屉一样,是以突出内容为主的导航模式;一般位于产品顶部,通过点击呼出导航菜单。

由于导航菜单位于屏幕顶部,不适合结合手势,操作负荷大,因此不适合需要频繁切换功能,且能在一定程度上节省屏幕空间。一般情况下,下拉菜单很容易被滑动选项卡取代,且滑动选项卡可以结合手势操作,使用效率更高,这也是现在下拉菜单很少被使用的原因,除非你的下拉菜单选项中有很明显的优先级区分。

比如下图所示,图8的新浪微博首页作为默认选中项,显示和用户相关的所有微博,常态下用户只需要一直浏览下去即可,很少需要主动点击切换,除非想要筛选某些特定的微博内容,此处的内容优先级很容易区分。同理,图9也是如此,用户关注更多且更感兴趣的是以项目为维度的内容分组,因此用下拉菜单来表现。另外,多数菜单是以点击后弹框的形式出现,也有一些是从底部滑出一个新的页面调出菜单,如下图中的图10。

几种常见移动导航模式详析

宫格式

宫格式导航,是一种类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。

这种导航经常用于工具类app中,它的优点是功能拓展性强,可增加多个入口。缺点是单页承载信息能力弱,层级深,不适合频繁任务切换。如下图的美颜相机就是标准的宫格式结构,每个功能类似于独立的app,且作为一级导航使用,这种表现形式现在越来越少。而剩下的其他三张图示,属于宫格式的一种变形,我称之为数据入口,这种只作为各种大数据入口的导航模式现在更多作为二级导航使用,特别是平台类产品。

几种常见移动导航模式详析

列表式

列表式导航也是一种十分常见的导航模式,纯粹的列表导航很少见,一般都是搭配着别的导航模式一起使用,大多作为二级导航。

列表中可以放置图片、标题或者详情文字等来展示信息,列表本身是一个传达信息效率很高的载体,因此使用列表的时候要注意,每个列表所占的屏幕空间,以及每屏能显示多少条列表等。

如下图所示的图1-1采用了列表的分组模式,图2-2中列表中的每项信息可能都会影响用户的点击转化,所以如这种形式的列表,细节信息很重要。

几种常见移动导航模式详析

图1-3和图1-4为二级列表,点击列表右侧的小符号,可以展开或者隐藏信息,这方便用户查找信息并快速定位,多数情况下,点击右侧小符号可能会出现快捷编辑模式或者部分详情信息,便于用户直接编辑或者浏览。而点击整个列表,通常会进入新一级的详情页面。因此,设计师在设计的时候要注意。

图示式

图示式是一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。

由于图片可能需要经常更新,因此需要配置固定的栏目或标题,防止不断更新的图片让用户找不到入口。这种形式的导航常常会采用网格布局,如下图所示,每行基本上会有1-3个图示单位,不同的网格布局决定了每屏容纳的图示个数,因此用户浏览效率及点击转化率也会有所不同。

几种常见移动导航模式详析

幻灯片式

幻灯片的导航方式,适用于图片或整块内容的并列展示,用户通过手指左右滑动来切换当前内容。正常情况下,幻灯片的数量不宜太多,最好控制在7-8个以内,避免用户操作疲劳。如下图所示,使用幻灯片设计最好在设计上提供视觉暗示,让用户清楚的知道所处的位置以及幻灯片数量,例如添加分页标识码,或者隐喻还有下一张图片等。

几种常见移动导航模式详析

 

本文由 @butter 原创发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31769/

(0)
CatherineCatherine
上一篇 2017-06-02 17:06
下一篇 2017-06-02 20:09

相关推荐

  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 网站分页导航对用户体验和优化的影响几何?

    欢迎点击上方蓝字免费订阅温馨提示:请点击上面的蓝色字体,再点击“关注”,这样您就可以继续免费收到精彩的内容了。在博客、杂志甚至是大多数站点中,分页的点击次数可能比搜索还要多,因为在很多时候,访客并没有明确自己的需求,只是在网页中一页接着一页的浏览信息,如果在分页上有良好的用户体验同时又能引导访客进行浏览,就能大大增加网站的黏性。但在很多站点中,分页并没有得到足够多的重视,即便是花时间来制作分页也不过是基于图标的样式和设计,对分页组件的整...

    2018-02-01
  • 专业干货!一个特别好用的搜索框必须考虑的五个方面

    编者按:今天@励定洲 这篇译文开门见山,从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能,内附大量实例(想知道谷歌搜索有哪个交互不好吗),结合实践,深入浅出,帮你掌握在线搜索的这五个方面。

    2017-06-02
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02
  • 【汇总】2015年阿里巴巴交互设计师笔试题目

    经验分享之交互设计面试 从网上各种渠道扒下来有关2015年阿里巴巴交互设计师的笔试题目 按照各方面的信息初步确定一共是四题,基本上都是要码字 要交作品,要交简历(应该是第一题的公共问题) ps:出题应该是一套…

    交互设计 2015-08-19
  • 喊话优酷:求别再强奸用户体验了好吗

    之前,我给大家做过腾讯视频、爱奇艺视频国际版与国内版的应用对比,可以说,有着谷歌商店的规范,这些国内的视频软件巨头,几乎看不见广告。不管是视频开头那丧心病狂,长达120秒,两分钟的广告,还是应用内Banner处各种穿插的广告,都没有了。看视频没有广告,点开就看,这种感觉可以说是相当nice的。但是!谷歌商店里却没有优酷视频!emmm...颇有种老奸巨猾的既视感。所以,优酷用户不想忍受广告,好想只能开会员,破财消灾...但是!开了会员,也...

    2018-03-21
  • 贼干的货 | 交互设计中的格式塔原理

    小编说格式塔心理学认为知觉不能被分解为更小的组成部分,知觉的基本单位就是知觉本身,格式塔心理学的信条就是:整体不同于部分之和。格式塔心理学强调结构的整体作用和产生知觉的组成成分之间的联系。当我由测试转行到交互设计师时,我确认自己擅长辨别产品的优劣,和识别产品的待改善点,尽管很多时候这些待改善点还缺少数据和用户的论证。之前我还是典型的用户思维,对产品实际效果的判断非常依赖数据和用户反馈,直到我了解了格式塔原理,它改变了我对设计的思考方式,...

    2018-03-03
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • 产品原型和交互设计的区别

     产品经理根据需求来规划产品原型,但是产品原型往往比较粗糙,可能只包含了核心功能描述或者模块划分。我们之前问过很多朋友产品经理的原型和交互设计师的原型相比有何异同,得到的结果简单来说,前者更加笼统且…

    2015-02-03