《移动导航设计,你知道吗? .pdf》由会员分享,可在线阅读,更多相关《移动导航设计,你知道吗? .pdf(23页珍藏版)》请在文库网上搜索。
1、 移动导航设计,你知道吗 ? 平常我们去商场或者景点逛的时候,通常会看到整个景区或者整个商场的导游图,能让我们知道身处何地并且快速的找到目的地。投射到一个虚拟的产品上面,同样是一个 “商场 ”或 “景点 ”,为了让用户能够顺利的在产品中畅行,则必须为用户提供一个有效的导航系统,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。产品的导航系统,是产品的信息结构在用户界面上的展现方式。 介绍 APP导航设计的文章中至少会提到数十种导航方式,种类名称繁多,不是很容易理得清。那么问题来了,怎样才能更加更快速、系统地掌握各种导航设计方式呢 ?在本篇, 按照结构化思维对各种 APP导航设计进行分类
2、整理,最终形成三个大类:分层结构、扁平化结构以及内容或体验驱动型,提供另外一种认识APP导航设计方式的思路。 一、层次结构导航 从杜威十进制分类法到动物界的门纲目科属,庞大的信息通常都会被分类到类别,以及子类别、子子类别 中去,这就是层级结构。层级结构模型是人们最容易理解的分类结构模型,层级导航也是 APP中最常用的导航模型之一,本篇将列表式导航、宫格式导航 (跳板式导航 )、陈列馆式导航归为层级导航结构,它们有共性也有细微的不同: 1、列表式导航 列表式导航中的每一个列 表项 (注: iOS设计指南中成列表为表格视图 )都是进入子功能的入口,用户通过在每个页面选择一次进行导航,直至到达目标位
3、置,并且模块之间的切换必须返回至列表主页当中。列表相当于一个一行一列的表格,列表项中既可以填充文字图片,也可以填充按钮或者展开某一项。 iOS中设置是经典的利用列表导航的应用, QQ邮箱是为数不多用列表式设计做主导航的应用。 注: iOS设置 和 QQ邮箱 列表中可以填充更多的列表项,来扩展有限的屏幕空间上能够容纳的入口数量,可以用来展示信息记录 /联系人列表等某一类别下的列表项记录。 注: mono 中的小组列表 组织方式常见,容易理解,可直接对内容进行交互 ;直观且占用屏幕空间小 ;列表展示很适合用户自定义分类。 缺点:主功能只有在最顶层页面才会被显示出来,不像标签栏,每个页面都可以看见
4、;主功能 和分类以及内容之间的切换有些麻烦。必须要先回到顶层页面,然后再依次点入。 二、扁平结构导航 在扁平信息架构的应用中,用户可以从首页目录直接切换到另一个类目视图,因为所有的分类都可以从主屏直接访问。 iOS与 Android中分别提供标签栏以及选项卡作为支撑扁平导航的控件,越来越多的应用结合两者进行整体导航的设计。 1、标签式导航 标签式导航对应 iOS中的标签栏,是现在最常见的主导航模式。最大的好处就是扁平化整个应用的导航结构,所有主类别视图都可以在顶层视图进行切换,用户可以直接从一个类别的视图切换到另一个类别的 视图,利于用户在视图之间的频繁切换,而不需要像层级导航那样回到主页面重
5、新进入,直观清晰、易于用户理解。 注: iOS版网易云音乐和 Instagram都用标签栏做主导航 标签栏标签最好不多于 5个,当多余四个时,将剩下的功能全部置于 “更多 /我的 /个人 ”中。 注:网易严选 & 知乎 标签导航的变形:标签栏中加入功能按钮,一般是一个应用中最核心功能的功能入口或功能入口集 (点聚式 ),多为发布类按钮,例如: Instagram、 LOFTER、微博、 QQ空间等可以快速发布内容。 注: nice(快速发布功能入口 ) & 新浪微博 (子功能集入口 ) 2、固定选项卡 固定选项卡是安卓系统提供的三种顶级导航方式之一,与 iOS系统中的标签栏相似,同样的它能够扁平化整个信息结构,并且支持左右滑动切换到不同的视图。随着移动端交互设计的发展, Android与 iOS两大阵营的相互借鉴、完善,交互设计规范越趋于相似,你会看到大量安卓应用也采用标签栏作为主导航, iOS应用中采用顶部选项卡式导航作为次级导航。 注: Android版网易云音乐以及 iOS版 QQ音乐都用固定选项式导航做主导航 以下场景中可以使用固定选项卡:需要经常切换视图 /内容视图有限 (3-4个 )/让用户清楚地知道可供选择的视图。