客户端产品汪必看:13个app导航设计

最全的app导航设计总结,并且标注出来应用的场景!

各位客官在写PRD的时候请根据产品导航的侧重点,功能之间的切换关系,功能的使用场景和频次,按需选择。

1.底部标签导航

标签导航位于页面底部 ,标签的分类最好在5个以内。

当产品的整个体验流中是以几个常用功能模块(小于5个)贯穿的,意味着用户需要在多个标签入口之间来回切换。为保证切换的效率,将贯穿产品整个体验的流的模块平铺在Tab Bar位置,保证了用户任务路径的扁平。

基本工具类app都会用到标签导航,如淘宝,支付宝,饿了吗,美团,大众点评,网易云音乐。


优点:清楚当前所在的入口位置;直接展现最重要入口的内容信息。

缺点:最多5个标签。占用一定的高度,一般是icon 加文字,如果用户是小屏幕手机,用户体验不是太好。

2.顶部标签导航,tab导航

顶部导航在ios app中一般用作二级导航,在andriod app中这种导航模式一般用作一级导航。

但自从谷歌推出”抽屉式导航“以后,顶部标签导航一般就用作二级导航,当内容分类较多的时候一般采用顶部标签导航设计模式。

app一般3~5个,如果多于5个就采用滚动模式



优点:可以固定数量,也可以不固定数量,像网易新闻客户端那样,可以左右滑动,衍生更多标签。

缺点:占用高度,容易分散注意力,不利于沉浸式体验。

3.底部和顶部双tab导航

标签式导航一般放在底部,如果产品分类内容和维度较多,则采用顶部和底部结合的导航形式,例如下图的今日头条和爱奇艺。

4. 驼式导航

底部标签导航中间加了一个“+”导航,像轮船上用来指挥的船驼。把生产内容的主功能按钮放在中间,常见于要用户生产UGC内容的内容型社区型app,比如微博,简书,西瓜视频,闲鱼。


优点:需要突出重要且频繁操作的入口。

缺点:同标签导航,最多5个,功能入口过多时,该模式显得笨重不实用。

5.抽屉导航

将菜单隐藏在当前页面内,点击入口即可像抽屉一样拉出菜单。

主页面展示用户场景使用最多的功能,将一些不常用的功能隐藏在当前页面,当需要用到的时候点击入口或者侧滑即可像抽屉一样展开。

多见于影音视听类app,如爱奇艺,腾讯视频,优酷视频,频道太多,将活跃度比较低的频道隐藏。

或者工具类频道比较多的app,比如打车软件滴滴,Uber,将使用场景比较少的自驾租车,二手车,敬老出租功能隐藏起来。

又比如设置、关于、会员等功能,使用场景少,快手和QQ是采用这种导航形式。


优点:节省页面展示空间;让用户注意力聚焦到当前页面;扩展性好;不用担心小屏手机用户体验问题。

缺点:不适合频繁切换的应用。次功能入口比较隐藏,用户不容易发现,同时次功能需要二次点击,增加用户使用成本。


4.宫格导航

宫格导航将主要入口全部聚合在页面,让用户整体了解app的服务,从而选择自己需要的那个服务。各个入口之间相互独立,没有太多的交集,无法跳转互通。


用于一级页:美颜工具美图秀秀,美颜相机,常用的布局是3*3, 2*3,2*2,2*1网格,美图秀秀用2*3的分格,分页突出优先级;


用在二级页:作为内容列表的一种图形化形式呈现,用户频繁切换的概率是比较低,如支付宝首页-更多,聚合展示了一系列工具入口。

用在内容列表的一种图形化表现:比如快手app的视频流

又称之为跳板(图标卡片式)、磁贴式,如携程首页呈现的是不规则的跳板式的导航,又成为陈列馆式导航。


优点:直接展现各项内容;方便浏览经常更新的内容。

缺点:无法入口间的跳转;不能直接展现入口内容;不能显示太多入口次级内容。


5.组合导航

当用户需要聚焦内容,同时又需要一些快捷入口能够接到某些页面时,就可以采用组合导航。电商app常用:淘宝,支付宝,美团外卖,大众点评,

优点:布局灵活,能适应架构的快速调整。

缺点:不规则容易有杂乱感。

6.列表导航

多适用于级别不多,标题内容较长的入口,列表导航通常用于二级页,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。比如微信发现页,脉脉的人脉办事,ios中的设置。

优点:层次展现清晰;可展现内容较长的标题;可展示标题的次级内容。

缺点:同级过多时,容易产生疲劳;排版灵活性不高;只能通过排列顺序、颜色来区分各入口重要程度。一屏承载不下,用户需要下拉才能操作,这个时候不如宫格导航的用户体验好。

另外列表项目可以通过间距、标题等进行分组,形成扩展列表。

7.轮播导航,旋转木马导航


优点:简洁,整体性强;线性的浏览方式有顺畅感、方向感。

缺点:不适合展示过多页面;不能快速定位到对应的分页内容。视觉容易疲劳。

应用场景:应用信息足够扁平,可以尝试轮播导航,比如天气app,其实一些app里的轮播banner图用到也是轮播导航。

8.点聚导航

主操作选项或导航合并成一个按钮,浮动在页面上。

当需要更多展示内容和功能,需要极端简化其入口,一般可以使用点聚式导航。点聚式导航将核心功能聚合到主界面展示,方便用户呼出使用,由于点聚式导航占用空间小,一般融入一些动态的效果,让导航更具有趣味性,一般视频拍摄、编辑类app会采用这种导航形式。


优点:灵活;展示方式有趣;页面更开阔。

缺点:隐藏了功能不能太多,不能展开后用户较难反应。

9.瀑布导航

瀑布式布局适用于图片为主的内容,下拉自动加载。


优点:浏览时产生流畅体验;排版布局多变;沉浸式体验。

缺点:不适合层级架构复杂的产品,容易发生空间位置迷失 ;容易产生疲劳感。

10. 陈列馆式导航

宫格导航的变式,通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示。

陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。比如格瓦拉电影。



优点:直观展现各项内容;方便浏览经常更新的内容

缺点:不适合展现顶层入口框架;容易形成界面内容过多,显得杂乱‘设计效果容易呆板


11.仪表式导航

仪表式导航提供了一种度量关键绩效指标(KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。

这种主要的导航模式对于数据分析,统计非常有用。提取关键项,但不过多使用。

用页面模仿隐喻的应用对象,常见于游戏,日记,书籍类app

12 超级菜单式导航,下拉式导航

在app设计中比较少见,在网站中比较常见,菜单分一级菜单,二级菜单。

导航的菜单以浮层的形式位于界面上层,通过点击导航菜单以外的区域使其收起,下拉式导航的面积一般较小,所以采用列表的形式展现菜单内容居多,这种导航形式一般用作筛选内容。比如下图的拍拍贷和美团。


13.隐喻式导航

用页面模仿隐喻的应用对象,常见于游戏,日记,书籍类app

最后附上2018年app排行榜,可以看看他们都用的是什么导航设计,其实大部分app都运用了不止一种导航设计,只要是能满足功能,满足设计重点的导航都是可以自由组合的!

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

推荐阅读更多精彩内容

  • 之前的几篇文章谈了谈APP设计中的启动页、引导页、注册【登录】和搜索,本篇文章谈谈导航部分。 同样,我们先来看看导...
    岳山丘阅读 3,988评论 4 87
  • 产品知识面考察 真题 例题分析 例题7.3 DAU代表 。 日用户点击量 月活跃用户数量 日活跃用户数量 网站...
    爱摄影的奥派阅读 12,257评论 4 46
  • 作为PM,信息架构和页面流的设计想必烂熟于心,当确定好产品战略层和范围层即为何种目标用户提供何种服务后,就要着手搭...
    Richard_L阅读 11,537评论 1 56
  • 觅一处静地, 酿一份闲心, 邀三两好友, 沏一杯茗茶。 听泉水叮咚, 闻百花馨香, 赏云卷云舒。 听鸟鹊啼唱。 庭...
    今生无悔清风徐阅读 1,088评论 11 49
  • 简书你好
    爱宝贝的妈妈阅读 15,714评论 0 1