APP导航设计

一、导航概述

1、导航定义:采用功能定义法,其核心功能即指引(导航)

2、划分方法:导航的形状和位置

3、重要性:产品设计五层模型中的第四层框架层,与功能、信息架构有关,根本源于用户需求(即用户、需求、场景)

4、导航对象:功能和内容

5、基本方法:分类

6、导航类别:首页的主导航、首页及深层级的次导航


二、导航类型基本形态:一般多种导航组合出现

1、跳板式/陈列馆式/宫格式/网格式/矩阵式/WP磁贴式

1.1 优缺点及适用范围

      内容或功能数量较多时,进行快速引导,一目了然;每个宫格功能明确,不需要反复在相邻模块的深层次页面中进行切换。

1.2 应用举例

      fb早期曾以宫格式导航为主导航(fb还是用过抽屉式导航和tab式导航)。现在以宫格式为主导航的不多见(美图秀秀保留),一般以宫格式结合tab式导航。

1.2.1 首页

手机桌面:

微菜单:

千牛:

美图秀秀:

1.2.2 二三级页面

      这种类似卡片式导航了,不过不必局限于定义,就是格子(放的圆的都行)具有导航功能即可。如活动主题页、商品展示页——一般有列表和宫格两种展示方式。

京东商品展示页:

1.2.3 个人主页

蘑菇街:

2、选项卡式/标签式/Tab式/菜单式

      优缺点和适用范围:结构清晰,数量5个以内,适合频繁切换

1.1底部Tab

1.1.1 普通

手机桌面,图片如上

1.1.2 舵式:中间的tab异形,有强调作用。引申出来的包括非中间按钮异形的“舵式”

喜马拉雅

蘑菇街

简书

1.1.3 扩展式/超级菜单式:即可展开下一级导航

path

微博

猪八戒

1.2顶部Tab:也包括普通、舵式、扩展式/超级菜单式,经常和底部tab结合使用

虾米音乐

搜狐新闻

网易云音乐

快手

3、列表式

3.1普通(多在深层级页面,导向详情页,如个人主页)

饿了么个人主页

3.2分组:微信发现、iPhone设置

3.3增强,当前列表可操作或与其他控件组合

iPhone设置

微博搜索

4、侧边展开式/抽屉式:导航页分列表和宫格式,可组合使用

      优缺点及适用范围:大屏手机单手操作不便、不易发现减少参与度;不占空间;适合5个以上的入口/操作;适合放置辅助功能。

      一般启动APP时进行手势提示;另侧边右滑唤出的交互,与IOS撤退相近。

虾米音乐

5、悬浮icon式

      优缺点和适用范围:便捷入口,或为短期功能;用于吸引注意;页面内容较多;用户或可自定义出现/消失。

iPhone AssistiveTouch

京东我的街

6、暂将卡片式和全屏的滚动视图(或称页面轮盘式/平铺式)视为内容页,不作为导航。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 纵观应用市场上的APP,导航设计的模式总是几种的组合使用。 导航设计的目的就是需要突出产品的核心,扁平化用户的任务...
    二O一七阅读 7,528评论 6 56
  • 导航主要分为两大类,横向和纵向。横向的导航有:标签导航、舵式导航、tab导航、轮播导航;纵向的导航有:宫格导航、下...
    Brave_0091阅读 4,284评论 0 2
  • 最全的app导航设计总结,并且标注出来应用的场景! 各位客官在写PRD的时候请根据产品导航的侧重点,功能之间的切换...
    须弥是个佛系少女阅读 12,777评论 1 52
  • 下图是八种导航设计模式对比图: 一、列表式导航 列表式导航是最常见的主导航形式之一,是APP设计中不可少的一个导航...
    wanderer28阅读 4,935评论 2 7
  • App导航的设计对于突出产品核心功能,扁平化指导用户操作有着极为重要的作用。常见的导航设计类型有:标签式导航...
    silvia_ba69阅读 6,789评论 0 10

友情链接更多精彩内容