神殿级App开发导航栏架构设计必看攻略

一款小小的手机APP应用，却包罗万象，融合这复杂的信息内容或功能逻辑。要让用户在使用中获得的体验，迅速掌握应用的框架结构，其导航的设计是一个重要的环节。由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，优秀的APP开发导航设计会让用户轻松到达目的地而又不会干扰和困惑用户。下面我们先来看3种具有代表性的导航模式。

经典导航：tabbar

苹果大力推荐应用开发者优先采用这种方式，tabbar 基本就是导航的标准设计。Tabbar 的优点很明显，用户完成切换的成本很低，只需要一次点击操作，而放在屏幕底部对主体内容的视觉冲击可以说是最小的，这样用户就不会在浏览主体内容时受到过多的干扰。至于缺点也同样明显，那就是受制于屏幕宽度的限制，通常4到5个功能项的切换会比较合适，过多的话将会显著提高用户的切换成本。

优秀的挑战者：抽屉式导航

Tabbar 并不是好的，它并不适用于过多的切换项。抽屉式导航通过纵向排列切换项解决了这一问题。不过这也意味着它不能和主体内容同时出现在屏幕上。

在大部分的设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右滑动手指来完成。一个简单的滑动动画，就像拉出一个抽屉，抽屉式导航这个名称应该就是来源于此。突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。如果主要功能项组织在4 到5 项，tabbar 的设计方式会更好，否则，就应该优先考虑抽屉式导航了。

为频繁操作设计：滑动式的导航

导航并不一定只发生在功能项之间。例如新闻类应用需要在不同类别的新闻之间进行切换浏览，这种切换的频率要比功能项切换更高，切换项的数量也会比较多，像常见的新闻类别就有 7,8 种。网易新闻早期的 iOS 版本中采用了抽屉式导航的方式进行新闻类别的切换，由于高频率切换时需要过多的操作次数，因而缺乏操作的连续性。而滑动式导航的用户体验则便捷了很多，尤其在连续切换时其操作方式的连续性比较强，主体页面的过渡也更加平滑，会产生更加流畅的体验。当然也会有一些缺陷，比如一次滑动只能切换到相邻的类别，要想直接切换到对应类别可以点击上方的类别列表，不过由于类别过多，有时候可能需要滑动一下类别列表才能完成操作。不过总体而言，当需要在具有相似属性类别之间进行较频繁切换时，这种设计方式很值得参考。

如何走得更远?

手机APP应用的导航和现实世界中的路标地图的作用很类似。它是应用软件的虚拟框架，对用户具有指示标识以及识别的功能。如同路标，导航能在使用中，定位用户当前在哪儿，为用户突出当前视图重要的功能，在不同的视图和区域迅速地切换信息，记录使用的操作轨迹防止用户迷失等。那么在具体实践中导航如何设计才能让我们走得更远呢?

APP导航设计的步骤主要为以下三步：

1. APP框架整理：信息架构or任务分析

2. 框架层级判断： 扁 平vs 树状

3. 导航具体表现形式：控 件形式and摆放位置

Step1: APP框架整理： 信息架构or任务分析

App设计的最初阶段，需要先建立一个App蓝图，来确保在之后软件导航的设计过程中，设计人员能对功能产品所属层级以及需要兼顾的前后关系进行宏观的掌控。然后通过任务分析，能让设计师清晰地了解到当前APP将要实现的功能层级顺序以及信息在系统中传递的状态，使其在设计中能全局地把握住产品的结构以及用户当前所需要进行的操作。

Step2 ： 功能层级判断： 扁平 VS 树状

再分析了App的框架结构后，产品功能的逻辑层次也就基本确定。可以利用一些框架绘制软件将分析整理的框架记录下来，形成一张大的蓝图。在后期的导航设计中，许多功能的安排以及排布可以直接从图中所示的位置关系进行设计。

在导航的设计中，经常遇见的功能层级主要是两种：一种是扁平层级，即所属功能在框架蓝图中属于同一层级的并列关系，这种主要出现在信息架构较为扁平化，同级别任务功能较多的视图;另外一种则是树状层级，即信息架构较为层次化或者任务之间有从属关系，需要用户逐层深入的视图中，如iOS中的单进单出式层级导航。

Step3: 导航具体表现形式：控件形式and摆放位置

通过前面两个步骤的分析与设计，App的导航结构可以算是基本完成。但因为现在手机平台众多，用户使用习惯各不相同。所以在产品的具体设计中，为了给产品提供的用户体验，还需要把握平台特性，选择合适的控件形式，并且根据用户手持设备的操作系统，为用户设计导航最易操作的位置。

名称栏目：神殿级App开发导航栏架构设计必看攻略
标题链接：https://www.cdcxhl.com/news43/189843.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有App开发等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联