App导航方式的实用说明

      ‘”我哪里可以去,我可以去哪里“”这个是使用导航的主要目的。我们要做到知道每种导航的工作方式、优缺点和使用场景,才能在“方寸之间”找到最适合的导航方式,让目录结构和信息排版更加清晰。让我们先直观的了解七种最常见的导航方式。

       不同的导航之间,其实差别都不是特别大,翻来覆去就是可见性、操作性以及是否会挤占内容展示空间这几点。


标签导航


       轻松在各入口间频繁跳转且不会迷失方向,直接展现最重要入口的内容信息。一般都为5个,通常第一个为“主页”,最后一个为“我的”,用于进行用户相关的个性化的设置。例如淘宝、头条和智远一户通都是采用这种方式。

优势:

1、让用户快速了解app的核心功能,且切换页面方便,简单高效,用户不易“迷路”

2、所有入口都可以看见,容易寻找

劣势:

1、占据一定屏幕高度,浏览时会阻挡内容

2、可展示功能数量少,最多只有5个

相关APP:

舵式导航


      在标签导航的基础上中间加了一个导航操作项,这种舵盘很容易区分开旁边的导航模式,能够让用户知道中间这个标志是它主要的导航操作项。 

     点聚式它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。会搭载其他导航样式出现(如标签式)成为舵式导航,例如,墨迹天气,点击中间的舵式导航,会上划出标签导航,包括三种生产内容的主要功能:发布实景、反馈天气和身边此刻。

优点:

把类似生产内容的主功能按钮放在中间,标签更加突出醒目;

缺点:

占据高度空间略大,一般都是文字 或 图标的形式。

相关APP:

列表导航


       iOS和安卓的列表最小高度是不同的,安卓48dp,iOS的是44pt。

       列表导航是在我们这种二三级页面最常见的一种导航模式,或者说二三级功能里面最常见的。 层次展示清晰,可展示内容较长的标题。

优点:

由上至下的查看方式,符合传统的阅读习惯;

结构清晰,能够帮助用户快速的定位去到对应的页面。

缺点:

条目太多或分布不合理会导致用户查找困难;

不适合需要频繁切换任务的情况。

相关APP:

这个页面实际是一个组合导航的形式,上面有TAB导航、中间有宫格导航、下面有列表导航


宫格导航


       宫格导航是将主要入口全部聚合在页面,突出重点,让用户进入界面之后第一眼就能看到 直观展现各项内容。适合用于独立、无功能交叉、不频繁切换的部分,多用于二级菜单。上图APP的宫格导航主要为购买“重点”产品的功能。

优点:

分类清晰、入口独立、风格简约、方便抓住客户的眼球

缺点:

不能显示太多入口次级内容,它只能展示一级入口,只适合一些功能层级没有太多的APP

TAB导航


      作为一个二级导航,顶部标签导航应用于多种情境下,可以固定数量,展示有限的几个标签。也可以扩大一定的数量,变成向左滑动展现更多标签。甚至可以像很多新闻类那样,衍生出订阅功能。顶部标签导航也是一种非常常见的导航模式。拓展性是非常好的,可以随自己的心意增减标签。而且相比底部Tab来说,顶部Tab采用的是文字的形式,占据的空间是非常小的。但是要注意标签的个数,否则可见性越差,页面渗透率也会越低。

优点:

扩展性好:标签的个数没有上限,不过太多的话,越是后面的页面渗透率会越低;

占据空间小:相比于底部Tab,顶部Tab一般占据的空间更小(因为不需要考虑手指点击,所以可以把区域缩小,只选用图标或者文字即可),可以把更多的空间安排给内容展示。

手势操作非常方便。

缺点:

可见性略逊:这是空间占据的区域变小之后的后果。

相关APP(左滑动展现):

轮播导航


      浏览方式非常顺畅、有方向感,滑动为左右滑动,用户用起来不会困难。不适合展示过多页面,如果功能太多了,层级太多了,都不适用于轮播导航。只有应用信息足够扁平,可以尝试轮播导航,这种导航常见于查看图片,也经常与其他导航模式结合,作为banner广告呈现。

优点:

能够最大程度的保证应用的页面简洁性,操作也是最方便;

缺点:

承载入口的数量有限,不能够快速的定位对应的分页内容;

相关APP:

抽屉导航


      采用将导航主体隐藏在app侧边的方式,以一个按钮来呼出导航,在使用完成之后在使用相同的按钮隐藏起来;将并不是太常用或者切换不频繁的功能隐藏在主界面之后

优点:

(1)导航界面隐藏在主界面之后,有助于用户集中注意力,营造沉浸式体验

(2)可容纳多个条目,可扩展性强

缺点:

(1)用户不容易发现,使用户认知成本增加

(2)用户容易“迷路”

相关APP:

图1可以理解为文件夹,图2理解为文件夹下的文件清单

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

推荐阅读更多精彩内容

  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 45,961评论 7 117
  • 导航是用户获取自己想要的信息以及完成任务的重要途径,app导航设计直接影响着用户的操作体验,一个好的导航设计可以让...
    四姑娘山的稻城阅读 1,498评论 0 48
  • 纵观应用市场上的APP,导航设计的模式总是几种的组合使用。 导航设计的目的就是需要突出产品的核心,扁平化用户的任务...
    二O一七阅读 2,562评论 6 56
  • 最全的app导航设计总结,并且标注出来应用的场景! 各位客官在写PRD的时候请根据产品导航的侧重点,功能之间的切换...
    须弥是个佛系少女阅读 8,578评论 1 52
  • 操作系统学习笔记 我们老师推荐的教材: 计算机操作系统教程,张尧学,史美林,清华大学出版社计算机操作系统,汤子灜等...
    AndyDennisRob阅读 2,710评论 0 0