导航栏的设计要点有哪些

APP设计模式：浅析导航栏设计

本文总结了APP常见的几个导航栏和功能，希望能给大家一些启示。

1一级导航/主导航1.1标识式导航

Logo导航，也叫Tab导航，是现阶段手机销售市场上比较常见的导航设计方案。导航一般分为三种方式:底部、顶部、上下混合应用。

底部导航

选择文本加图标底部呈现的方式。一般有3~5个标志，适合在几个相关信息内容中间频繁转换应用。这类信息内容优先级高，用户使用频率高，相互独立，相互分发。根据logo导航的正确引导，用户可以在页面中间快速完成转换而不会轻易找不到路，简单高效。它的缺点是会占用室内空房间的一定长宽比。如果用户是小屏手机，视觉效果不好。

以下数字分别用于手机微信和脸书:

顶部导航

当内容类别较多，且不同内容的打开率不是很大，且必须快速转换/调整时，往往会选择顶部导航策略模式，这在java工具类APP中较为常见，如WaveAnalytics、滴滴顺诚:

1.1.3顶部和底部双标签导航

除了上下内置的logo导航，一些内容较多的产品会使用上下混合的logo导航，比如百度百家、网易云阅读:

1.2零件柜导航

抽屉柜的导航是指一些动作菜单按钮隐藏在当前页面的后面，通过点击频道或侧向滑动可以像抽屉柜一样拉出菜单。这种导航设计方案比较适合那些不需要经常改变的主次功能，比如隐藏设置、关联、vip会员、皮肤设置等功能。以下数字是WaveAnalytics、GadgetsNews、MyRolls和Perisfind:

零件柜导航的优势在于节省了页面显示设计，让主页面更加简洁优雅，让用户将大量注意力集中在当前页面。

依靠隐藏的二级动作通道，缺陷不易被用户发现；二级应用必须点击两次，会增加用户的应用成本。

1.3平台式导航

平台导航类似于电脑 *** 作系统或启动 *** 作面板，其特点是主页由几个按钮组成。布局合理时，按键一般大小相同，以3*3、2*3、2*2、1*2的方式排列在桌面上。当按下一个键时，它将自动跳转到其他内部系统/子控制模块。

如图，大踏步和财务根据环键余额选择合理布局:

而360和日本50音图则根据圆形按钮的平衡合理布局:

注意:当圆角的倾斜度越来越小，甚至看不到圆角变成方形的时候，通常最好用方形方块来分隔各个键，以促进视觉冲击。这种方法在下一节“宫殿文件格式导航”中很常见。

目前市场上有一些少见的应用。他们内部的绿色生态是复杂的，他们呈现出无数的服务(来自自身或者来自第三方的服务)。有些服务是独立进行的，做成一个应用，可以媲美一个中小互联网公司，甚至一个中小互联网公司。但由于业务流程的整合、平台的搭建、管理体系的搭建、服务项目的扁平化设计，会把它们塞进一个“壳”里

支付宝首页的服务可以在“全部”页面中人性化；牛倩工作台首页的三方服务项目可以在“设置”页面进行人性化设置。两款app都适合用户根据自己的具体需求和应用频率，提高新服务项目的展示信息顺序，进行渠道推广。

这种“非常全面的服务平台”APP，现阶段我只在阿里集团的产品中看到过，其特点是:

高频率/超高频率应用，用户黏性极高，运用处在销售市场垄断性影响力，基本上无可取代商品（绿色生态巨大产生的优点）；业务系统类型多且扁平化设计（促使并列式的桌面布局方式变成必选择项）；能够作为公司挪动后台管理来应用（支付宝钱包的服务项目包含吃穿住行，可觉得是公司本人），我称作“走动的ERP”；商业服务气氛深厚。

最佳做法:菜单没有顺序，每个菜单的室内空大小都一样。菜单是有顺序的。重点的占一个大房间空，其他的占一个小房间空。在应用平台导航的合理布局时，要兼顾人性化和为客户定制化。

1.4宫文件格式导航

网格导航是将主页面中的所有关键频道集合起来(由于其合理布局更像是传统PC桌面的logo排序，所以也称为“平台导航”)。每个网格都是独立分布的，它们的信息内容互不交叉，不可能自动跳转和通信。由于这些特点，宫文件格式导航被广泛应用于各种服务平台系统软件的管理中心页面。那种机构的方法无法让用户第一时间看到内容，所以选择内容的压力很大。所以现在选择这种导航的app已经越来越低了，一般都是用在二级页面上作为显示内容列表的图形界面，或者作为一系列特殊工具通道的汇聚。下图分别使用了钉孔和环氧盒:

Palace文件格式导航作为二级导航:

1.5舵式导航

在某些情况下，简单的底部标签导航无法考虑大量的实用功能。这时候我们就要拓展一些方式来满足需求。微博、lofter、淘宝底部用的是方向舵导航。与logo导航相比，区别在于方向舵导航把制造内容相似的主要功能键放在中间，logo更显眼。另外，主要功能logo是干的。微博汝河语书院:

1.6暗喻式导航

这种方法的特点是用一个页面反映所有的应用软件。常见于游戏软件，如《制空权》、《2020:吾国》。

此外，在分类对象(如各种笔记本、书籍、酒类)等功能单一的应用中，也经常可以看到隐喻性的Tab。比如DAKA，石墨文档，拼图贴和Moment:

最佳实践:谨慎使用隐喻。一个在实践中不成立的比喻会有反作用力。

2二级导航

二级导航是用来导航页面和控制模块的，所以这类应用一般至少有三层结构化分析，最常见的就是国内大部分app都有的“我的”动作菜单。

2.1列表式导航

列表导航作为一种信息组织结构，是我们产品设计中安装信息内容不可或缺的方式。列表导航类似宫格导航，常见于二级页面。默认显示所有必不可少的内容并不容易，一般app在首页应用也不容易。这种导航结构清晰，易于用户理解，能够帮助用户快速准确地定位匹配页面。下面的图分别是手机微信和大踏步用的:

菜单导航的每个列表都偏向于相对的动作/内容选项，它有很多衍生的形状，包括人性化菜单列表、排序菜单列表和增强菜单列表。增强菜单列表指的是简单列表，它包含搜索、访问和过滤的附加功能。

分别使用以下图:QQ、有道云笔记、Retrica、大踏步:

最佳实践:列表菜单导航适用于长主题或副标题，这表明类表菜单导航的应用程序应该显示一种从子页面返回类表页面的方法。通常，包含菜单单词的按钮作为返回按钮被添加到菜单栏。

2.2菜单栏式

现在，底部菜单栏基本已经成为IOS和Android两大系统软件(黑莓和webOS也很常见，但暂时还不是流行的系统软件)大部分使用的标准配置。如脸书、推特、微信、微博:

也有很多应用。选项卡logo设置在导航栏下方，即顶部导航，有点类似于传统的网址导航，如360云盘、扇贝词、Douban.com、脸书等。

最佳实践:在应用菜单栏导航时，要注意合理区分选中和未选中选项的视觉效果。

2.3图片库式

图片库页面被剪切到每个内容区块链中用于导航。内容区一般承载独立的文章、标题、照片、商品等可以在内容区、网格图或ppt中展示的内容。如TED、BBC新闻、哔哩哔哩、搜狐视频下载等。

有时，如果通过排序合理地安排了内容区域，那么排序后的内容应该设计成便于用户访问。比如应用端Tab方式(也叫零件柜导航)来管理排序后的内容，让用户可以在Tab中转换，查询不等同于排序。以下数字分别是我的劳斯莱斯和Perisfind:

最佳实践:图片库页面的策略模式适合用户想要访问并经常升级的内容。

2.4页面转盘式

常见的页面旋转方式是通过上下拖动快速切换页面，用户拖动时会显示下一页信息。页面指示器(IOS系统软件下较小的那个)显示可以转换多少页信息。下图分别使用tapas和ConnectID:

页面旋转导航的方式有一些限制。当页面超过八页时，应该考虑列表导航。

最佳实践:

页面转动导航适用页面总数较少的状况；应用指示仪反映页面总数和当今页面；上下拖动手式是最普遍的转动导航手式。2.5照片转盘式

照片转盘的大致形状类似于3D碰碰车。照片可以上下拖动，沿任意方向拖动都可以再次返回原始照片。以下数字分别来自TED、BBC新闻和IMOB:

3其他类型3.1车内仪表盘式

车内仪表板显示一些重要的指标值。输入每种测量方法后，可以掌握很多附加信息。这种主导航模式常见于金融行业应用软件、分析工具、营销推广应用软件，如友盟统计:

最佳做法:车内仪表盘只需加载科研确定的重要数据信息，无需太多内容。

待续...

创作人:查侯，知乎专栏:契卡的商品笔记

文章作者为@查侯，未经批准严禁拦截。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/779251.html