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

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


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

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

标签式

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

相关推荐

  • 设计案例|在做方案时,“更明显点”这句话怎么破

    在做方案的时候,时常会听到这样的话,“这个地方应该更明显一点”。今天,阁主将拿出自己设计的一个徽章注释来进行说明。

    2017-04-29
  • 在网页设计中如何引导用户的注意力

    每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。△ UX策略1 – 在页面标题部分添加视觉对比

    2017-05-24
  • 人工智能对交互设计的影响

    人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利...

    2018-03-28
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 用户体验设计中的功能动效

    作者:Amit Daliot 出处: http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/ 一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构,页面内容的层…

    2015-11-08
  • AB测试告诉你,你以为的设计不是你以为的设计。

    用户体验设计不是忽悠,也许5分钟口水攻势能让前台小妹觉得你的设计非常高大上,但是要让每一个用户对着屏幕上的UI欲罢不能以身相许还需要数据支撑。

    2016-08-29
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • 当产品进入碎片迭代,设计师可以做些什么?

    也许是刚毕业的你最该看的一篇干货。如果你已经习惯了等别人给需求,然后开Photoshop,再等别人说改哪里就改哪里,肯定谈不上工作成就感。想掌握设计的主动权,证明自己不仅是个画图的,建议把这篇文章提到的3个方法好好实践一番,绝对会有大收获(严肃脸)。

    2017-06-01
  • 用格式塔原理增强用户体验

    来源:简书用户 cherri二哈(授权发布)心理学和设计包与用户体验密不可分。每当我们的目标是解决需求的时候,我们的专业就需要有同理心。随着我继续深入研究心理学进入设计领域时,我偶然发现了格式塔原则。什么是格式塔原则?格式塔心理学是一种将人的思想和行为视为一个整体的思维学派。当试图理解我们周围的世界时,格式塔心理学建议我们不要只关注每一个小部分。相反,我们的头脑倾向于将对象视为更大整体的一部分,并将其视为更复杂的系统元素。这个心理学院在...

    2018-04-11
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01