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

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


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

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

标签式

标签式导航是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

相关推荐

  • 50个国外设计机构网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了50个国外设计机构网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • UNStudio:健康城市,基于未来的设计

    📌 编辑 |Cassi.W编者按:城市公共环境作为人们共同的“家”,需要群策群力共同营造。城市公共基础设施作为“城市家居”是人们日常生活舒适感、安全感的主要保证。第二届“衲田杯”可持续设计国际竞赛正在火热报名中,你的脑洞是否还够用?“新技术引领下的智慧城市家居”有很多可能性,需要大家去探索、去研究、去发现。本期我们将走近UNStudio事务所的智慧城市实践,为你的方案增添一点灵感!- UNStudio -Ben van Berkel本·...

    2018-03-17
  • 设计心得:浅析Chatbot聊天机器人界面交互设计

    最近在做智投app的机器人Neo的原型设计,是一个chatbot聊天机器人。整理了一下关于聊天机器人设计的一些心得。

    2017-04-28
  • 苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 别逗了,会用Axure就算懂交互了吗?

    举个简单的例子,一个人字写得很好看,但他一定能写好文章吗?一个作家字写得极丑,但人家书写的好啊!所以人家才能成作家。

    2017-06-04
  • 【设计思考】中西医结合,开出交互良方

    中医通过“望、闻、问、切”四诊合参的方法,探求病因、病性、病位,这就好比定性研究中通过访谈法、观察法、焦点小组、可用性测试、卡片分类、情绪版等方法进行的研究工作。 西医更多的是借助医疗仪器和实验室对疾病…

    2017-05-17
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 亚马逊语音交互设计规范(三)Alexa的回应

    作者:Amazon翻译:原形必录这篇是整个设计规范的重点,因为在设计语音交互时最主要的就是Alexa的回复内容,本篇给出了很多让对话更自然易懂的方法,希望对大家有帮助。往期回顾:《亚马逊语音交互设计规范(一)设计流程》《亚马逊语音交互设计规范(二)用户说的内容》本文讲的是Alexa如何表达能让人们更容易理解和更好的回应。Alexa能够以自然的对话方式来回应、通知,还能问问题。 在设计Alexa对用户说什么时,我们可以参考以下做法。本章目...

    2018-03-18
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21