该文归纳了APP种常用的四类导航系统栏及特征,期望给我们增添些启迪。

导航栏(导航栏设计)-第1张

1 二级导航系统/主导航系统

1.1 条码式导航系统

条码式导航系统又叫Tab式导航系统,是现阶段终端端消费市场上最广为的导航系统结构设计。条码导航系统通常来说分成顶部,顶端,顶、底混和选用这四种商业模式。

1.1.1 顶部导航系统

选用文本西塞罗正股形式展现出。通常有3~5个条码,适宜在有关的四类重要信息尾端频密的转换选用。这类重要信息错误率较低、选用者选用频密,彼此间互相分立,透过条码式导航系统的鼓励,选用者能快速的同时实现网页间的转换且不能感到恐惧,单纯而高效率。它的优点是会挤占很大度的内部空间,假如选用者是小萤幕智能手机,则听觉新体验不好。

右图应用领域分别为QQFacebook

导航栏(导航栏设计)-第2张

1.1.2顶端导航系统

当文本进行分类较为多,选用者对相同文本的关上率相距并非非常大,须要加速转换/移出的这时候,时常会选用顶端导航系统程序语言,多见于辅助工具类APP中,如Wave Analytics滴滴打车

导航栏(导航栏设计)-第3张

1.1.3 顶端、顶部双Tab导航系统

条码式导航系统除了设在顶端和顶部,另外有些文本较为多的产品会选用顶端、顶部混和选用条码式导航系统,如简书网易云阅读

导航栏(导航栏设计)-第4张

1.2 抽屉式导航系统

抽屉导航系统指的是一些功能菜单按钮隐藏在当前网页后,点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航系统结构设计较为适宜于那么不须要频密转换的次要功能,例如对设置、关于、会员、皮肤设置等功能的隐藏。右图分别是Wave AnalyticsGadgets NewsMy RollsPerisfind

导航栏(导航栏设计)-第5张导航栏(导航栏设计)-第6张

抽屉式导航系统的优点在于节省网页展示内部空间,使主网页更加简洁美观,让选用者将更多的注意力聚焦到当前网页。

优点在于次功能入口较为隐蔽,选用者不容易发现;选用次功能须要二次点击,增加选用者选用成本。

1.3 桌面式导航系统

桌面式导航系统类似于操作系统或启动控制面板,其特色是主页由多个按钮组成。均衡布局时,按钮通常来说大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。点击按钮时,跳转至其他内部子系统/子模块。

如图,StridesFinance选用了基于圆形按钮的均衡布局:

导航栏(导航栏设计)-第7张

360日语五十音图则选用了基于圆角矩形按钮的均衡布局:

导航栏(导航栏设计)-第8张

注:当圆角矩形弧度越来越小,甚至消失不见成为正方形的这时候,往往用方形格子隔开各个按钮,使得听觉效果最好,这种商业模式见于下一节的宫格式导航系统中。

市面上还存在着一些极少数应用领域,它们内部生态繁杂,提供(自己的或者来自第三方服务)眼花缭乱、不胜枚举的服务项目,有些服务项目单独拎出来,做成一款应用领域,都能匹敌一家小型互联网公司,甚至是中型互联网公司,但是出于业务整合、平台搭建、体系构建、服务扁平化,它们会被塞到一个壳子里,形成超级服务平台类APP,比如阿里系的支付宝千牛工作台

导航栏(导航栏设计)-第9张

支付宝首页的服务项目,能在全部网页中进行个性化配置;千牛工作台首页的三方服务,能在设置网页中进行个性化配置。两个APP都支持选用者根据自己实际需求和选用频度,优化服务项目的显示顺序,进行入口优化。

导航栏(导航栏设计)-第10张

这种超级服务平台类APP,现阶段我仅在阿里系的产品中看到过,其特征是:

  • 高频/超高频选用,选用者粘性极高,应用领域处于消费市场垄断地位,几乎无可替代产品(生态庞大增添的优势);
  • 应用领域服务种类多且扁平化(使得并列式的桌面布局商业模式成为必选项);
  • 能当做企业终端后台来选用(支付宝的服务包括衣食住行,可认为是企业个人),我称之为行走的ERP;
  • 商业氛围浓厚。

最佳实践:菜单无主次之分,每个菜单所占内部空间大小一致。菜单有主次之分,主要的占内部空间较大,其余的占内部空间较小。在选用桌面式导航系统布局时,要充分考虑到给客户提供个性化和定制化功能。

1.4 宫格式导航系统

宫格导航系统是将主要入口全部聚合在主网页中(因其布局较为像传统PC桌面上的图标排列,又被称为桌面式导航系统),每个宫格互相分立,它们的重要信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航系统被广为应用领域于各平台系统的中心网页。这样的组织形式无法让选用者在第一时间看到文本,选择压力较大,因此现在选用这种导航系统的APP已经越来越少,往往用在二级页作为文本列表的一种图形化形式呈现,或是作为一系列辅助工具入口的聚合。右图应用领域分别是钉钉epocrates

导航栏(导航栏设计)-第11张

作为二级导航系统的宫格式导航系统:

导航栏(导航栏设计)-第12张

1.5 舵式导航系统

在有些情况下,单纯的顶部tab式导航系统难以满足更多的操作功能,这个这时候我们就须要一些扩展形式来满足需求 ,新浪微博、lofter、闲鱼顶部选用的就是舵式导航系统,舵式导航系统(之前看到别人这么叫所以我也就这么称呼吧)跟条码式导航系统相比,区别在于舵式导航系统把类似生产文本的主功能按钮放在尾端,条码更加突出醒目,同时该主功能条码做了功能扩展,也因此给结构设计增加了一些个性化的亮点。如新浪微博育学园

导航栏(导航栏设计)-第13张

1.6 隐喻式导航系统

这种商业模式的特征是用一个网页来体现整个应用领域程序。常用于游戏app,如Air Supremacy2020:My country

导航栏(导航栏设计)-第14张

此外,在进行分类物品(如各类笔记、书籍、酒品)应用领域,和其他单一功能应用领域中也能时常看到隐喻式Tab。如DAKA石墨文档拼图酱Moment:

导航栏(导航栏设计)-第15张导航栏(导航栏设计)-第16张

最佳实践:选用隐喻式要慎重,一个执行起来不明确的隐喻,反而会起到反作用。

2 二级导航系统

二级导航系统用于在网页及模块中进行导航系统,因此这种应用领域通常来说来讲至少有3层重要信息结构,最常用的就是国内绝大多数APP都有的我的功能菜单。

2.1 列表式导航系统

列表式导航系统作为重要信息组织框架,是我们在产品结构设计中必不可少的一个重要信息承载商业模式。列表导航系统与宫格导航系统类似,常用于二级网页,不能默认展示任何实质文本,所以通常来说app不能在首页选用它。这种导航系统结构清晰,易于选用者理解,能够帮助选用者加速的定位去到对应的网页。右图应用领域分别是QQStrides

导航栏(导航栏设计)-第17张

列表菜单导航系统的每个列表均指向相应的功能/文本选项,它有许多衍生形态,包括个性化菜单列表、分组菜单列表和增强型菜单列表。增强型菜单列表是指在单纯列表的基础上,带有额外的搜索、浏览及过滤功能。

右图应用领域分别是:QQ有道云笔记RetricaStrides:

导航栏(导航栏设计)-第18张导航栏(导航栏设计)-第19张

最佳实践:列表菜单导航系统适宜长标题或者有副标题说明,选用类表菜单导航系统应该提供一个从子网页返回类表网页的形式,通常来说在标题栏添加一个带有菜单字样的按钮作为返回按钮。

2.2 选项卡式

顶部选项卡现在几乎成了IOS和Android两大系统(黑莓和webOS也较为广为,但因为已经并非主流系统,因此暂不讨论)阵营中,绝大多数应用领域的标配。如FacebookTwitterQQ新浪微博

导航栏(导航栏设计)-第20张导航栏(导航栏设计)-第21张

也有非常多的应用领域,将Tab条码设置再了导航系统栏下,即顶端导航系统,有点类似于传统网站导航系统,如360云盘扇贝单词、豆瓣Facebook等。

导航栏(导航栏设计)-第22张导航栏(导航栏设计)-第23张

最佳实践:选用选项卡导航系统要注意听觉上对已选择和未选择的选项进行有效区分。

2.3 图库式

图库式界面被分割成用于导航系统的各个文本区块。文本区通常来说载有单独的该文、标题、照片、产品和其他能够放置在文本区、网格或幻灯片里展示的文本。如TED、BBC NEWS、Bilibili、搜狐视频等。

导航栏(导航栏设计)-第24张导航栏(导航栏设计)-第25张

有这时候假如文本区是以分组形式布局,分组的文本应结构设计得容易被选用者浏览到,如选用侧Tab形式(也称抽屉式导航系统)去管理分组文本,让选用者能够在Tab中转换,查看相同分组,右图应用领域分别是My Rolls和Perisfind:

导航栏(导航栏设计)-第6张

最佳实践:图库式界面的程序语言适用于选用者想要浏览的、时常更新的文本。

2.4 网页旋转式

网页旋转常用商业模式是选用左右滑动手势在网页间加速转换,选用者滑动时将显示下一个网页。网页指示器(IOS系统下面的小点)显示一共有多少页可供转换。右图应用领域分别是tapasConnectID

导航栏(导航栏设计)-第27张导航栏(导航栏设计)-第28张

网页旋转导航系统商业模式有很大的局限性,当网页超过8个时,要考虑选用列表导航系统。

最佳实践:

  1. 网页旋转导航系统适用于网页数量较少的情况;
  2. 选用指示器反应网页数量和当前网页;
  3. 左右滑动手势是最常用的旋转导航系统手势。

2.5 图片旋转式

图片旋转式的常用形态,是类似于2D旋转木马形式,图片能左右滑动,且沿任意方向一直滑动可重新回到初始图片处。右图分别来自应用领域TEDBBC NEWSIMOB

导航栏(导航栏设计)-第29张导航栏(导航栏设计)-第30张

3 其他类型

3.1 仪表盘式

仪表盘汇总展示了一些关键指标。进入每一种度量形式后,都能了解更多额外重要信息。这种主导航系统商业模式常用于金融应用领域程序、分析辅助工具、销售和营销应用领域程序,如友盟统计

导航栏(导航栏设计)-第31张

最佳实践:仪表盘只须要载入被研究确认过的关键数据即可,不须要过多文本。

待续…

作者:check hou,知乎专栏:cheka的产品笔记

本文由 @check hou 原创发布于人人都是产品经理。未经许可,禁止转载。