几何

在设计App交互时,为了使其有一个清晰的信息层级,让用户不迷失其中,一个合理的导航系统是很重要的。我将根据自己的理解,从移动端的应用级与内容级来分别阐述它们各自的几种导航方式,如果有不周全的地方还请见谅,并欢迎指正😊。

 

什么是导航

Singularity Design System的设计语言说:“广义上,任何告知用户他在哪里,他能去哪里以及如何到达那里的方式,都可以称之为导航”。按照这个定义,界面中所有可视的内容都属于导航了。但我们要讨论的不是这种广义的导航,我把App的导航分为两大类:应用级别和内容级别。

应用级即用户打开软件时首先能看到的部分-一级页面以及它们之间的切换。内容级为一级、次级等页面中所填充的内容。所以,我把导航定义为:

导航(navigation)在用户位于应用的较高层级时,告知其在哪、能去哪以及如何到达那里。

例如,在App首页告知用户可以通过底部标签栏切换到其他页面。以微信为例,「聊天」、「通讯录」、「发现」和「我的」四个标签就属于应用级导航,而通讯录里的字母索引导航则属于内容级导航。

微信标签栏

微信通讯录

 

再举个🌰,如果把使用APP当成在一个小岛旅行,那么在当地机场下了飞机后所能获取的信息-接下来可以去哪,和到达那里的交通方式-就是最高层级(应用级),而具体到酒店第几层楼、有哪些服务就是较低层级(内容级)。导航的物理原型是指路牌:

导航的原型-指路牌

 

导航的分类

在移动端一共有10几种导航模块:安卓的Material Design规范里有tab选项卡、底部导航、抽屉式导航,iOS有分段控件、标签栏,此外常见的还有搜索、运营入口(如Banner)、列表、卡片、下拉菜单、步骤条、分页器、字母索引导航等。

😷看到上面是不是有点蒙圈了,下面是苹果和安卓移动端的各个部位名称,供参考。名称不是最重要的,重要的是它们背后的应用原理。

iOS(左)与安卓(右)官方控件

 

这些模块里我筛选出了适合应用级的6个:

  • 顶部导航
  • 底部导航
  • 侧边导航
  • 列表
  • 卡片
  • 分页器

 

应用级的导航

顶部导航

顶部导航的代表是安卓的tab选项卡和苹果的分段控件。

网易云音乐

 

Tab选项卡通过左右滑动或点击tab来切换。需要注意的是如果tab选项卡(或分段控件)和底部导航共存,此时底部导航才是应用级导航,而tab选项卡(或分段控件)将降为内容级导航,在形式上它也应该弱于底部导航,否则用户会迷惑到底哪个是最高层级的页面导航。Tab选项卡的组成元素请见《UI模块-tab选项卡和分段控件》。

今日头条和QQ音乐都有底部导航(标签栏)和位于顶部的tab选项卡,标签栏的层级高于后者

 

虽然将一级页面的切换放在顶部的好处是让它更明显,且导航项数量不受限制,但不足是它容易抢占了Banner等内容的位置,手指操作也不够方便。所以目前主流做法是把一级导航放在底部。

网易云音乐安卓7.1.80(左)采用顶部导航,iOS 7.1.70(右)采用底部导航

 

底部导航

底部导航是最常见的一级导航,如iOS标签栏、安卓底部导航。标签的数量建议App为3-5个,小程序则为2-5个。

组成元素

  1. 容器*
  2. 标签项*

标*为必须元素

容器:位于底部的全宽矩形。

标签项:等分容器,它包括图标和文本。标签项需要和背后的容器有较高的对比度,以便阅读。右上角可以有红色小徽标,用来表示待解决的任务数量。

 

状态

标签项有选中和未选两种状态,需要明显区分,常用的区分方式有面状和线性图标对比、颜色对比、带文本和不带文本等几种方式的组合。

 

尺寸

建议图标的切图尺寸为24*24pt, 标签文字为10pt,以下是一些公司的规格,供参考:

备注:对应换算

750*1334的移动界面:1px=2pt

1242*2208的界面:1px=3pt

底部导航相对于顶部导航减少了一些对内容区的占用和视觉干扰,但它有一个缺点就是空间和标签数量有限,不能超过5个,延展性不好(顶部的tab选项卡可以延伸到屏幕外)。

在进入更深层次的页面时,底部导航栏分两种情况:

  • 1. 沉浸式,进入二级页后底栏消失,如在微信朋友圈就看不到标签栏。这是主流做法,它适合:1内容较多的App,往往次级页有自己的底部操作或导航栏,如淘宝;2更强调信息层的纵向探索的界面,如微信,试想在往下滑动朋友圈时,若底部标签栏一直存在,一定会阻碍体验。
  • 2. 扁平式,进入二级页后底栏一直在,如iOS应用商店。这种方式适合1内容结构较简单,次级页也不会出现新的底栏;2更强调信息的横向切换。总之不管横向纵向,都是以让用户更好地找到目标为目的的。

 

侧边导航

侧栏的代表是安卓的导航抽屉,这里只讨论用于切换页面的抽屉。它主要用在目标页多于5个、同时也不方便使用顶部导航的时候。它默认收纳成一个汉堡菜单,点击后抽屉从侧边展开,占屏幕的部分宽度,未占部分用半透明遮罩蒙住。它往往和操作类顶栏共存(注意不是导航类顶栏),其收起来的菜单图标作为顶栏的一部分,但它不能和其他的导航栏并存(如tab选项卡、标签栏等),否则会让人不知道哪个是顶级导航。

Booking.com

 

抽屉导航的组成元素:

  1. 容器*
  2. 头部
  3. 副标题
  4. 分隔线
  5. 列表项*
  6. 遮罩*

标*为必须元素

列表项:每一个列表项代表一个目标页面的入口,可以是图标+文本或纯文本形式。文本宜尽量简短且不能截断或为了长度而单独缩小字号。若有图标,把它放在文本前面,且图标形态要和对应的次级页的图标一致。

遮罩:此时的抽屉是模态抽屉(即遮罩背后的部分不可操作),以屏蔽菜单以外的内容区。

侧边导航的优点:默认状况下,它是占用屏幕面积最少的一种导航方式,让用户更好地沉浸于内容区。且能收纳下多于5个的操作,延伸性很好。但它的不足之处是因为隐蔽性太强从而导航不够直观,越往下排列的选项越不容易被注意。它每次都需要点开,增加了交互步长。

侧边导航适用于切换频率较低或目标页较多、对沉浸式体验有要求的场景。

 

列表

位于应用首页的列表导航比较少见,它的特点是:内容都包含在导航项目下,故而首页不需要直接展示内容。它会出现在两种场景中,第一,导航项比较多,如设置、工具类应用;第二,用户刚开始使用App,还未生成多少内容,平铺直叙的列表可以快速引导用户进行操作,如邮件App。

华为玩机技巧(左),电子邮件(右)

 

iOS录音(左),设置(右)

以上图的录音App为例,在点开某一条记录名称前,不可能直接开始播放录音,所以列表导航是最合适的。

 

卡片

卡片导航的特点是,图片或卡片是主角,它适合内容以卡片、图像等视觉表现形式呈现的应用如iOS钱包、美图秀秀:

iOS钱包(左),美图秀秀(右)

 

卡片的排列方式非常多,如果按照纵向、横向和z轴方向分,有以下几种布局:

  • 纵向:宫格、拼图、瀑布流
  • 横向:泳道栏
  • z轴:堆叠

详情请参考《UI设计组件-卡片,最强大的信息容器就是它!》。下图Safari浏览器就是z轴堆叠的代表:

Safari内的网页由一张张拟物化的卡片表现

 

分页器

分页器作为应用级导航也不多见,但它依然有特别的用武之地。一是用于内容较少时类似引导的操作,如钱包的初始页;二是每页内容一样,页的名称可以固定在内容区,不需用标签来表示,比如天气应用就用分页来展示不同城市的天气:

iOS钱包(左)、天气(右)

 

如何选择

据说百分之80的导航都是底部标签栏,所以只有在较为特殊的场景,我们才有必要考虑另外5种导航。经过分析,我总结出以下筛选方法:

首先,顶栏、底栏、侧栏和分页器这四者的共同点是它们是以内容为主、导航位于页面边缘。而列表和卡片是以页面入口为主,内容隐藏在入口里面。

在以内容为主的情况下,如果每一页的内容框架一致,只是参数值的差别,那么可以省略掉页名,以分页器的小圆点代替。

最后来看一级页面数量:2个用顶栏,3-5个用底栏,多于5个用顶栏或抽屉,其中抽屉适合沉浸式。

 

本文小结

  • 将移动端App中的导航分为2类:应用级和内容级;其中应用级的有6种方式:顶部导航、底部导航、侧边导航、列表、卡片、以及分页器。
  • 根据产品特点,分别从内容展示、内容形式、一级页数量、是否注重沉浸式体验四个角度来选择最合适的应用级导航。

这些就是移动端应用级导航的知识,下篇再见。👋🍉

 

参考文章:

1. Apple. Human Interface Guidelines iOS Navigation/ Segmented Control. 

2. Material Design Design Material Foundation Navigation/ Components Bottom Navigation.

3. Singularity Design System -Navigation 导航

4. 百度智能小程序体验指南

5. 姜正. 导航栏设计样式大全

6. 沐风. 掌握了这个导航控件,你可以设计80%的应用导航

7. 沐风. 5分钟学交互:手机交互组件归纳-导航篇

8. 支付宝小程序核心体验白皮书

 

原文地址:UI设计语言(公众号)

作者:a珠珠

转载请注明:学UI网 » UI模块-移动端应用级的6种导航选择方法

登录收藏
 
你可能喜欢的:
产品改进没方向?不妨从用户反馈找找灵感(一)产品改进没方向?不妨从用户反馈找找灵感(一)
设计沉思录 | 如何做好“有人情味的”生活服务型产品设计?设计沉思录 | 如何做好“有人情味的”生活服务型产品设计?
设计沉思录|“下沉市场”设计美学探索:58本地版首页改版设计沉思录|“下沉市场”设计美学探索:58本地版首页改版
顶部导航vs侧边导航,哪一种用户体验更好?顶部导航vs侧边导航,哪一种用户体验更好?
设计沉思录|如何做好B2B的Saas化产品?设计沉思录|如何做好B2B的Saas化产品?
研究了100多个App后,发现了顶部栏UI设计的模式和规则!研究了100多个App后,发现了顶部栏UI设计的模式和规则!
UI设计中一致性如何做?看这篇就够了UI设计中一致性如何做?看这篇就够了
想做好设计细节,有时候你的眼睛要比软件靠谱想做好设计细节,有时候你的眼睛要比软件靠谱
【产品体验设计】-产品认知篇【产品体验设计】-产品认知篇
界面设计中,你懂得如何更好的运用版式设计吗?界面设计中,你懂得如何更好的运用版式设计吗?