最全的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都运用了不止一种导航设计,只要是能满足功能,满足设计重点的导航都是可以自由组合的!