APP导航系统

关于导航

导航系统的设计尺度是信息与用户。之前的文章提到过一个概念,应用平台本身是一个信息节点。平台的价值在于通过汇聚目标信息吸引用户群,通过向单一用户分发有效信息满足用户诉求。即信息由外部汇聚到平台,由平台分发到单一个体。信息的汇聚其实是一个将信息以便于目标群体辨识、使用的形式重新组织的过程;信息的分发是一个为信息规划出一条便于用户快速获取目标信息路径的过程。将信息结构化与标签化是实现信息汇聚与分发的有效手段。结构化(信息由汇聚到分发过程中,信息在纵向上的分类管理)与标签化(信息由汇聚到分发过程中,信息在横向上的分类管理)是对信息从纵向与横向角度进行的分类管理。以淘宝为例,用户要买一件森马的男式T恤衫,他可能会点击:主体市场(男装)---内搭(短袖T)---森马---单一商品,这便是纵向;主体市场这一级不但包括男装,还有家具、家电、办公等各种品类这便是横向。实际上信息在开始组织时所遵循的一些规则便是导航系统的源头,只不过这些规则更加强调的是信息之间相互配合以实现针对目标用户的特定功能,这里更加强调的是从交互层面、视觉层面进行强化,以便于指导用户按照设计者的意图对内容块进行浏览使用。

导航的作用在于在纵向上指导用户抵达内容块,也即信息在纵向上的汇聚分发。大部分APP各功能块之间并不是独立的,而是相互补充相互配合,因而导航在承担信息在纵向汇聚、分发这一功能的同时,还承担用户在横向、纵向各信息块之间跳转的作用。

关于页面

从本质上来说,所有的应用都是由多个单页面组成的,所有的应用都只有两类页面,内容页和聚合页,内容页是具体的信息,是网站的根本,也是用户真正需要的,而其他页面实际上都是对内容页的聚合,按照一定的规则(导航的内在逻辑)把内容页中的可以体现内容页主旨的部分链接聚合到一个页面上,按照一定的规则进行布局,产生了内容页以外的其他页面。如果以这种观点看待应用,可以将应用页面简单的分为:首页(也是聚合页)、聚合页与内容页。

从导航的角度来看,聚合页实际上就是标签管理页,聚合页将某一类功能相近或者相互之间需要密切配合的标签进行聚合,以实现特定的目的或功能。当然,所有标签构建的页面必须满足一些基本的原则:

原则一

用户到达目标内容,路径最小化。

原则二

用户在相关内容间跳转,路径最小化。我们需要注意的是用户在抵达目标内容过程中,是否需要添加相关内容的跳转链接?在哪里添加?也即做好标签页面之间在纵向与横向之间的跳转。

原则三

这一原则实质是上述两条原则的前提:标签与路径的体系化。设计师在追求路径最小化的同时,应该明白单纯的路径最小化并不是关键,关键在于让用户通过标签与路径形成的系统架构,可以对内容页最终呈现的内容有一个准确的预期,标签页中的所有标签内容之间需要有一个逻辑关系,这种逻辑关系应该力求达到1 + 1 > 2,而非简单的罗列。


一般APP导航结构图

关于标签形式

标签形式一般为:纯文字、纯文字+图片、纯文字+图片+描述三种形式。我们知道标签的作用在于对内容的概括以及链接(这里的链接既是指对目标内容的链接也是对相关内容的跳转),因而,评价一个标签形式好坏的标准就在于其对于内容的概括性以及对于相关内容的跳转。

标签设计一定要体现出内容的层次性,如果说导航系统是对应用内容的引导,那么内容标签就是对该标签下内容的引导,用户应该通过标签内容就可以判断是否要继续点击。

标签链接的是页面以内容阅读为主

案例一:豆瓣首页标签


豆瓣APP首页标签

标签形式:文字+图片+描述

由左侧图片可知,虽然标签中采用了一张用色很浓重的图片,读者视线可能会被短暂吸引,但是主标题依然会将视线牢牢地抓住。实际上,大部分标签并没有如此浓重配色的图片,此时用户视线首先将被标题吸引。用户视线按照:标题--->图片--->描述--->小标题的顺序很容易快速获取内容概要。

案例二:好奇心日报


好奇心日报APP首页标签

标签形式:文字+图片

由左侧图可知图片是视觉主体,相较于前者用户获知内容的详细程度较低。

案例三 简书


简书APP首页标签

标签形式:文字+图片

简书的标签排版想要突出的东西太多,标题想突出,作者想突出,专栏还想突出。实际上,虽然主标题采用了加黑大字号粗体,但是作者与主题连接的色彩完全可以在视觉吸引力上与之抗衡,这就造成视觉不断在三者之间跳转,不能说有大问题,但就是不舒服。

案例四淘宝


淘宝APP商品展示

标签形式:图片+文字

很明显,对于消费类物品,相较于文字,图片更容易帮助用户获取目标信息。此时,文字的作用仅仅是辅以必要的简介,以及说明价格。实际上,以图片为主的标签,其链接内容多半以娱乐消遣或者图片类展示为主。

案例一与案例二差别在哪里?首先,图片的大小决定了案例一以文字阅读为主,好奇心日报以图片阅读为主。一个标签采用图片为主还是文字为主并没有对错,关键看其所链接内容是什么。对于设计类作品,商品,图片,展示类网站就没有错,但问题在于在于两者链接的内容都是以文字阅读为主,那么后者采用图片为主就有问题,更为关键的是后者选的图片并不能准确表达文章内容。当然,还需要考虑两个应用的定位,好奇心日报定位于“我们希望成为中文世界最好的媒体之一”,当我们从媒体(报纸杂志)这个角度去理解的时候,或许好奇心日报是希望通过大图片的形式来体现应用的媒体属性。因此,到这里就无法去判断到底好奇心日报以图片为主的行为是对还是错了,实际上设计本就没有对错,设计本身就是根据目标进行多方面利弊权衡之后的最优解。

通过这两个例子的比较,我们还可以发现的一点是,帮助用户判断内容页是否值得阅读的两何种手段。第一种,就是豆瓣式的尽可能的展示内容,标题、图片、关于内容的一小段描述;第二种,就是好奇心日报式的,通过展示赞、喜欢、收藏、阅读数量等内容帮助用户进行判断。在我看来,注意是在我看来(观点错了概不不负责),前者适合于深度阅读内容,让用户自己通过内容进行判断。而后者适合于浅阅读内容,娱乐型内容,这些内容一般“赞”、“喜欢”、“收藏”等越多,说明内容越符合大众口味,免去了用户需要自己判断的麻烦。

标签链接的页面以实现某种功能为主

案例一


微信消息框

该标签链接的页面为对话框,我们看该标签显示的信息,对话群的名称,最新留言及未读留言数量,发表时间,消息提醒,群成员头像,群某些功能设置。


陌陌聊天室

该标签链接的是聊天室,就是一个实时聊天的对话框。标签显示的信息,在线人数,聊天室名称,聊天室所属地域,群头像。

同样是聊天窗口的标签,为什么两者显示差别如此大。原因在于,前者用户本身就属于这个聊天群,内容对于群成员不具有私密性,标签呈现信息目的是让用户知道当前聊天状况,以决定是否查看。后者属于临时聊天,内容具有私密性质,呈现的信息目的是让浏览者了解该临时聊天群的大体状况,以决定是否加入。因而,标签形式及其内容的设置应该根据标签链接的内容页面的诉求、内容特点而定。

标签链接的页面以次级标签罗列为主

案例一


猫眼电影

案例二


今日头条

案例三


今日头条

该类标签以文字或者文字+icon为主,由于文字内容是对于次级标签的概括,因而设计重点在于如何处理标签的放置形式,采用的交互方式,重要标签与非重要标签的处理等等。


常见APP导航模式


实际上,在进行导航设计时需要对各个层级的标签从重要程度以及标签数量两个层面进行必要的评估。为什么要评估标签的重要程度?我们知道,任何事情都有一个轻重缓急,为什么要设计,设计的本质就是通过一定的方法手段将事物的本质呈现出来。为什么要做一个应用,为的是将有效信息重要的信息提取出来。同样的,将信息标签化,并根据用户需求提取出一个轻重缓急也是为了向目标用户呈现信息的本质。实际上标签的重要程度与数量应该结合考虑,譬如标签重要程度等同且数量较多,如果属于一级或者二级导航需要采用那种导航形式?譬如标签重要程度有差异,且数量不少,那么是否考虑隐藏一部分标签?采用哪一种形式?是否考虑增加标签层级?这些都需要结合标签数量以及标签重要程度进行这考量。

列表式

列表式顾名思义,内容是按照水平、垂直方向以列表的形式进行罗列,因而列表式对人的视觉往往呈现为由左到右、由上至下的直线。因而,一般较为重要的标签、内容会放置于左侧或上侧。列表式并没有一个准确的定义,实际上大部分内容按照横向与纵向的罗列均可视为一种列表形式。在这里仅按照位置、使用的交互方式、标签数量、标签内容形式的不同将横向列表简单地分为:标签式、选项卡式、卡片式三类进行讲解,关于纵向列表仅介绍纵向列表特征最为突出的一种。

横向列表式一------标签式

横向列表放置于屏幕下方一般被用于一级导航页面,标签3——5个,所使用的交互方式只有点击,标签采用的形式一般为:文字+ icon。虽然这种形式被iOS系统广泛使用,可以方便用户快速在不同内容块之间跳转,但是不可避免的具有消耗屏幕有限空间的缺陷。Android操作系统将该导航标签置于屏幕顶侧,交互方式也由置于下侧的仅可点击增加为点击与滑动(不绝对)。很明显,滑动的交互方式更加便于用户快速在内容之间的转换。当然,将标签式置于上侧,还要配合抽屉式将个人中心等不成用的内容块进行收纳,因而相同的应用安卓版的标签会相对iOS版而言少1---2个,抽屉式下面详述。

关于标签式---变形1,实际上中间的按键通常被称为行为召唤按钮,顾名思义使用这种形式的应用一般会有一个或多个频繁操作行为在用户行为中居于突出地位,但是这样的应用并不多见。


从左到右依次为(标签式、标签式---变形1、标签式(安卓))

横向列表式二------选项卡式

横向列表置于顶侧,交互方式采用点击与滑动,标签至少两个,标签采用的形式为:纯文字。由于选项卡式多被用户二级导航,因而根据不同的应用其标签的数量并没有严格的限制。为了满足多标签状况下的使用,引入了滑动交互方式。当然,iOS系统给予设计师的一点启发是,选项卡式标签能否滑动应该通过具体的形式反馈给用户,譬如iOS系统,描边按钮不可滑动,按钮下边有滑动块的可以滑动。但是需要注意的是,是否在点击方式的基础上添加滑动方式要根据具体设计内容而定,实际上并没有一个明确的标准,需要设计师根据具体的内容之间的逻辑关系而定。当然,iOS操作系统给予设计师的一个提示是,设计师有必要通过必要的设计手段使用户可以快速辨别按键是否可以滑动。


选项卡式常见形式

横向列表式三------卡片式

横向列表用于屏幕中间区域,承载的一般是内容页的相关连接及信息,换句话说点击该列表中的内容项将展示的是具体的内容页。由于该横向列表承担的任务是向用户展示具体的内容页内容,且列表项中的内容项以卡片形式呈现,因而其面积远远大于标签式与选项卡式,因而其表现形式一般为图片+文字+描述(非必须)。其交互方式一般为点击与左右滑动。


卡片式常见形式

竖向列表

竖向列表采用的交互方式一般为点击与上下滑动,当然不同的应用由于对列表内容操作需求的不同,还会引入其它的交互方式譬如:长按或者左右滑动以调出相应的操作。注意,竖向列表的特点在于排列紧凑,配合屏幕的竖向结构以及竖向滑动交互,使得其在展示大量内容的同时方便用户快速浏览。正是因为这些特点,竖向列表被广泛应用。竖向列表由于可以灵活的调节列表之间的距离,因而竖向列表的表现形式可以灵活处理。常见的表现形式有:纯文字、文字+描述、图片+文字+描述等形式。竖向列表内容一般属于同一层级,常被用于承载内容页的相关连接及信息,即点击该列表中的内容项将展示的是具体的内容页。当然,并不仅局限于此。


竖向列表常见形式

宫格式

宫格式顾名思义,由于其排版形式与传统的九宫格相似而得名。具体表现形式在使用的过程中,依照实际的需求而定。宫格式布局适用于内容模块种类较多,模块之间内容重要程度相同的内容排布。宫格式布局利于用户在模块之间快速跳转。宫格式布局具体使用情况一般分为两种:


宫格式常见形式

第一种情况

该情况是从平台角度出发,典型案例是支付宝。我们知道,支付宝面对的是海量用户,因而用户群对于资金使用、管理类型多种多样,但是具体到单一用户可能仅仅需要几种功能。此时,宫格模式就是最好的布局方式,因为宫格式可以在有限的屏幕中放置较多的功能模块,最大程度的满足用户群的需求,而配合长按滑动交互模式,单一用户可以将自己经常使用的功能模块集中于屏幕操作热区,快速实现在不同功能模块之间跳转。可以说,宫格式很好地解决了,平台汇聚内容时面向的是群体而分发内容时面向的是个体这一矛盾。


支付宝APP

第二种情况

该情况是从单一用户角度出发,典型案例是美图秀秀。用户对于每一个功能模块都有需求,但是各功能模块之间没有必然的联系,此时宫格式布局可以方便用户在各功能模块之间的跳转。但是很明显,如果内容块之间有着紧密的联系,这种在多个页面之间跳转的方式容易影响用户的沉浸感,每一次的跳转就是一次打断,因为用户使用美图秀秀本身即是一件娱乐属性的行为,对于沉浸式要求并不高,因而并没有太大的问题,但是对于百词斩而言,因为单词背诵本身就是比较枯燥的行为,需要用户集中注意力,用户在一个页面刚刚建立起的沉浸行为就可能因为页面的跳转而被打断,当然举这个例子仅仅是为了从更加细致的角度理解宫格式布局,实际产生的负面影响其实并不会太大。


左:美图秀秀  右:百词斩

弹出式导航

顾名思义,需要用户触发才会显示于屏幕的特定位置。实际上正确理解弹出式导航在各层级的使用,依然需要从内容的汇聚与分发角度去分析,当内容汇聚时,面向的用户是群体那么必然不同的用户群体其行为诉求点是不同的,而这些用户群面对的是同一个用户界面,那么必然要以核心用户群的行为为主,但是又不能忽略非核心用户群的行为,此时需要将部分用户行为按键进行隐藏。当内容分发时,需要通过一定的内容与功能组合对特定人群进行引导,而非必要内容标签、按键会对用户造成干扰甚至使得引导的准确性降低(当然,不必要的隐藏也会造成同样的问题)。譬如好奇心日报,将文章分类标签隐藏过深,那么对于某一些对特定内容有需求的用户来说会造成干扰,这种干扰甚至会使得用户放弃使用平台。


弹出式导航常见形式

弹出式导航的使用一般分为两种情况:

第一种情况

对于非重要功能、选项的隐藏。非重要功能的判断其实是从内容汇聚角度,或者说平台角度出发进行的,设计师应该谨慎判断。移动端内容与PC端最大的区别在于,移动端面向的是碎片化的使用场景,无论是内容分布还是操作设置都应该聚焦化以帮助用户快速做出决策。因而,向用户提供集中的几项功能、内容,将非重要功能进行隐藏将更加有利于主要用户群的使用体验。

第二种情况

对于非重要操作的隐藏。一个操作行为重要与否的判断是从单一用户角度出发进行的,设计师需要根据用户需求进行谨慎分析。当然,这里的非重要是相对的,需要根据具体情况而定。譬如微信,


微信首页弹出框

微信此处将多项功能进行收纳并非这些功能不重要,恰恰相反正是因为这些功能很重要,使用频次较高才会被收纳至微信首页右上角,以方便用户调出。

抽屉式

首先需要明确的一点是,抽屉式导航实际上也属于弹出式导航,只不过抽屉式导航对于收纳内容的考量应该从平台层面来考量。抽屉式导航一般会与横向列表三所示标签式导航相配合,将重要的标签置于标签式导航,将非重要或很少操作的内容收纳至抽屉式导航中。抽屉式导航由于将大部分不重要的内容隐藏,避免了无关内容的干扰,使得用户可以获得沉浸式的使用体验。但是,设计师一旦决定使用抽屉式导航,应该明确的一点是,抽屉式导航不但会减弱用户使用其所收纳内容的频度,还会降低用户在相关内容之间的跳转。因而,频繁操作的内容不可以放置于抽屉式导航中;相互间有某种关联或需要相互配合的内容不可以放置于抽屉式导航中。


抽屉式导航常见形式

注意:以上内容仅具参考价值,不具指导实践价值,另外本文在写作过程中对相关文章进行了参考。

参考文章:

1 几种常见移动导航模式详析 - 简书

有效地简化导航-Part 2:导航系统 - 简书

资深PM倾情分享丨我用3×3矩阵,来概括移动App导航 - 简书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,479评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 作者:蒲阳凡妈 每个人对故乡的怀念都不尽相同,有人怀念的是一座老宅,一棵大树,一张熟悉的面孔。我对故乡的怀念是一条...
    蒲阳凡妈阅读 866评论 16 15
  • 不想一夜返贫,请把下面的内容读完。 即便你有房有车有存款坐拥一切富可敌国,你也要读读。 因为很有可能,你将失去一切...
    狗熊的熊阅读 378评论 2 2
  • 我亲爱的麋鹿先生: 请允许我这样称呼你。但不要问我为什么,希望你从这一刻就开始习惯,我就是这样一个,有一点点奇怪的...
    有山初白阅读 277评论 0 0