由于用户的个性整体上更加生动和整体，B的具体细节的设计也考虑了用户的音调，这不是恒定的。仅从导航设计来看，最多有八种设计方法。它涵盖了互联网上出现的几乎所有类型的导航，允许用户更好地玩自己的应用程序。我们可以理解导航的类型并在更深层次上思考，哪种导航类型更适合哪种使用场景。

首先，让我们列出您使用的导航类型，如下所示：

接下来，让我们仔细看看每个导航及其原型实现。

首先，标签导航

标签导航也称为底部导航，这在应用程序的底部非常常见。常用的应用程序，如微信，微博和支付宝都使用这种形式的导航。标签导航形式的优点是显而易见的，标签导航位置是显而易见的，并且用户容易感知其存在。而标签导航，每个标签之间的切换频率非常高，标签之间的点击或滚动开关便于用户操作。一般用于非常重要的导航。

原型实现

在前一点写的，原型使用了所有小部件，这些小部件不是截获的B-stop应用程序的屏幕截图，可以在FontAwesome图标字体Axure组件库中找到。该组件库的图标可以任意修改样式和颜色，非常强大和方便。

我们从头开始绘制原型，首先要澄清整个APP架构的风格，底层四个导航是整个APP的最大分类，所以整体分为四个部分：家庭，类别，动态，新闻。在交互中，由于同时存在顶部导航，因此仅通过单击按钮来切换四个导航，并且没有左右滑动的实现。此选项卡导航在交互模式下没有任何困难，但您可以在没有原型证明的情况下绘制内容。

高保真原型不仅必须实现高保真度以实现特定的交互，而且还必须具有高保真度。因此，有很多关于风格的细节值得我们关注。例如，APP的外边框，我们应该选择330px * 584px;每个模块的布局和大小应遵循原始APP的布局，并且可以使用网格。线功能;每个图标和模块的着色问题，这是我经常用来与你分享的一个小技巧。 QQ或微信的屏幕截图，热键截图后，对于鼠标所在的像素点，截屏功能自带RGB彩色显示，我们可以通过这种方式获取图标或模块的颜色。这里只有RGB是十进制，Axure是十六进制，只需在线转换即可。我们刚才遵循这个原则，首先设置以下四页，如下所示：

四个页面之间相互跳转，我们可以通过动态面板实现，或者通过四个页面，这里我选择四个页面，原因是页面更改后更方便，在实战中，万一自己的情况下我自己计划的需求已经改变了（搞笑的表情）。如果您觉得页面跳跃的方式不舒服，您可以完成所有操作并将其转换为动态面板。我认为每个人都可以自己实现具体的实现方法，所以这里不再赘述。

二，顶部导航

顶部导航使用场景与底部导航非常相似。从风格的角度来看，顶部导航与底部导航一样明显，便于用户发现。从功能上讲，它们是对自己功能的一般分类，因此底部导航和顶部导航的状态非常重要。唯一的区别是两者之间的位置差异导致的其他微小差异。底部导航按钮，由于用户习惯的手持式手机，可以更容易触摸，因此交互式顶部导航不易指向相应的按键，更多的是左滑动右滑动开关。

原型实现

在第一步中，我们需要理清页面之间的关系。在底部导航主页中，有四个小部分：live，home，bangumi和columns。这四个部分也是顶部导航的四个内容。澄清关系后，让我们这样做。首先创建两个新的动态面板，一个用于顶部导航的文本，名为“滑动导航”，另一部分用于四个模块的内容，名为“内容”。两个面板中的每一个都设置有四种状态，并且放置顶部导航及其相应的内容。渲染的样式如下图所示（仅显示内容，没有特定的绘画）。

接下来，我们需要添加交互。首先，我们仍然梳理顶部导航的交互：1。单击特定按钮切换，2。向左和向右滑动切换。我们先实现第一次交互，点击按钮切换。该块的实现相对简单。将点击操作互动添加到每个顶部导航的标签中。例如，向实时标记添加交互案例。将两个面板的状态（滑动导航，内容）设置为实时。关键是在“滑动导航”动态面板的每个状态中，应相应地设置内部的每个按钮。

完成单击按钮的交互后，接下来我们进行左滑动右摇摆交互。您无需单击特定面板状态，即可向“内容”环境面板添加交互。当您向左拖动并“向右拖动”时，Axure会提供两种交互状态。我们先选择向左拖动，选择设置动态面板，然后勾选“内容”。和“滑动导航”两个小组。两个面板都选择下一个状态，并且不检查“ldquo;向后”，因为后向循环意味着下一个循环的最后一个状态将跳转到第一个状态，这与我们的正常交互不匹配。 。动画效果这里，由于内容面板是左右滑动样式，并且因为交互状态被拖动到左侧，所以动画应该向左滑动。 “滑动导航”动画互动，选择逐渐好。整个过程如下所示：

当向左拖动结束时，我们采取葫芦绘制并完成向右拖动。唯一的区别是两个面板的状态选择是选择“前一个”，并且由于它向右滑动，内容的动画应该选择“向右滑动”，另一个并拖动到离开同一时间。这样就完成了顶部导航的原型。

三，抽屉导航

抽屉导航的原型实现应该是最难的部分。在实战中，我们经常看到抽屉导航的类型。在常用的APP中，网易云音乐和QQ都有这样的抽屉导航，如下图所示：

在当前网络中使用抽屉导航也非常相似。抽屉导航中显示的内容主要是用户的个人中心和相关设置。这种设置的原因是个人设置原本是一个大的分类，但它的开放率。并且点击率不如其他内容模块的频率高，所以如果将它放在导航的底部，则会浪费资源。设置为抽屉导航，增添了美妙的互动，同时也增加了APP的可玩性，一举两得。

原型实现

我们首先观察抽屉导航的交互过程，向左滑动屏幕左侧或点击“栏”设置按钮弹出抽屉;抽屉的内容呈现，底部是一些入口，内容部分是收集的功能入口，APP皮肤等。这里要注意的是内容部分的功能输入，一个版本不完整，所以我们需要增加屏幕上下滑动的互动;退出抽屉有两种相互作用，点击其他区域或右滑动抽屉。

具体实现方法如下。为了实现左侧滑动屏幕左侧的弹出式抽屉，我们可以用热区或透明矩形覆盖它。这里我们选择一个透明的矩形。在屏幕左侧添加一个动态面板，命名为触发板，在动态面板中设置两个状态，一个状态名为“ld”; normal”，这是一个透明的无边框矩形，另一个名为“ldquo; focus”的状态里面的内容是弹出的抽屉。我们添加了一个互动案例“向右拖动到右边，右键滑动并拖动，设置动态面板“ldquo;触控板&quoquo;作为焦点，在设置中“ldquo;向左拖动结束”，动态面板“触摸板”正常，所有步骤如下所示。这实现了左滑动右滑动弹出/隐藏抽屉。

但是，这种效果远非APP的效果。我们发现，当抽屉弹出时，除了抽屉的外观外，还会有一个半透明的浮动层。当抽屉消失时，浮动层消失。现在我们添加这个浮动层。这里我们添加一个黑色的50％透明矩形，与APP相同的尺寸，在顺序触摸板下，在其他组件上方，初始状态被隐藏，名为“黑色背景”。当右侧幻灯片结束时，添加交互式事件< ;;显示黑色背景”。当状态是显示抽屉时，我们应该考虑细节。有两种可以隐藏抽屉的交互。一种是点击黑色背景，另一种是滑动左侧抽屉。因此我们添加黑色背景来切换动态面板。董事会的状态。首先拖动到右边结束，添加一个交互案例，显示“黑色背景”：执行是向右拖动，弹出抽屉并显示黑色背景。然后向左拖动结束，添加一个交互案例，隐藏“黑色背景”，即向左滑动，隐藏抽屉并隐藏黑色背景。现在完成左右滑动以显示/隐藏黑色背景。

但这还不够。显示抽屉状态时，单击黑色背景，您应该能够隐藏抽屉和黑色背景。在这里，我们需要首先判断状态，然后增加相互作用。当焦点是“触摸板”时，单击“&ndquo;黑色背景”以隐藏“黑色背景”。具体操作如下图所示。添加完成后，您可以实现左右滑动的所有交互，并单击黑色背景。

但是，以上仅实现了向左和向右滑动滑动滑块的事件。我们还应该认为单击条形按钮也可以触发显示和隐藏抽屉和黑色背景。我们需要考虑的一个细节是我们设置的触发板是透明矩形。虽然它不可见，但它仍然是一个组成部分。如果条形按钮始终位于顶部，则在触发抽屉后看起来会很奇怪。控制面板始终位于顶部，并且条形按钮无法触发抽屉。因此，当添加条形按钮时，应考虑上层和下层之间的切换。因此我们的想法是首先让条形按钮位于顶部，触发抽屉并将其放在底层，等待抽屉隐藏，然后将其放在顶层，完整的交互如下所示。

四或九个网格导航

九宫格是最简单直接的导航方法之一。它将所有特定的导航类别放在一个页面上。这种方法的优点和缺点是显而易见的。优点是您无需任何操作即可查看类别的所有详细信息。它可以填满屏幕，非常直观。但缺点仍然非常明显。我们突然看到这么多类别，很难一次找到我们想要的类，所以通常在一些重要的导航中呈现九方导航方法，而这些导航类别之间的链接并不大，而且它们不可能是通过系统关系链接在一起。简单直接是最简单，最粗鲁的，可能是最好的显示方法。通常，九方网格导航不仅仅显示文本或图标，它将是两者的组合，目的是使用户更容易找到他们想要找到的特定标签。

原型实现

在这个原型实现中没有什么特别需要注意的。唯一想到的是颜色的选择。我之前也说过这个技术，所以我在这里不再赘述。

V.浮动导航

顾名思义，这种形式的悬停导航已暂停在固定的地方。这种交互主要是为了突出功能特征。例如，APP通常会做出自己最突出的特点，而这个功能点就是功能系统不是很方便查找，所以它做了这种浮动导航交互，方便用户点击。

原型实现

在这里，为了更好地展示悬挂式，我修改了B站原型的设计。 B站的交互是：点击暂停的实时按钮，显示实时设置详情页面（左）;我改变了交互，主要是为了突出浮动导航，点击直播按钮，弹出两个直播门户（右下角）。

这种互动的想法是，当你点击实时按钮时，会弹出两个条目，并会出现一个半透明的背景;当您再次单击实时按钮或单击黑色背景时，将隐藏黑色背景和两个实时门户。

原型上的实现方法类似于抽屉导航。这是一个讨论。如果无法实现，您可以参考本文末尾给出的原型文档。

六，方向舵导航

方向舵的导航类型与悬架导航非常相似。方向舵导航主要出现在底部导航的中间。它通常以加号的形式显示。主要功能是突出显示主要功能并节省首页空间。在功能系统中重要或未发现的功能点被设置为方向舵导航，其易于用户发现，并且增加了APP交互的多样性，使得用户不会感到疲劳。

B站中的方向舵导航传统上不出现在底部导航的中间，而是出现在新闻页面的右上角。微信右上角的正位置和功能点非常相似，我们将得出结论，它是方向舵导航的形式。

原型实现

首先让我们谈谈交互过程：点击加号，弹出一个带有其他功能的矩形框;单击加号或单击另一个区域，矩形消失。

首先，我们添加一个带有一些功能点条目的矩形框，名为“矩形框”，并将此矩形设置为隐藏。然后设置“+”的交互案例，你可以切换到显示/隐藏“矩形框”。当你点击。同时，我们必须考虑在显示矩形框的情况下，点击其他位置，矩形框仍然会消失。在这里我们必须首先添加一个条件。显示矩形的状态时，单击其他区域，矩形消失。所有的互动如下所示。

七，旋转木马导航

旋转木马导航的具体设计原理和效果实现，我在《Axure高保真原型，实现APP端轮播样式》中写的已经非常详细，我们可以参考一下，这里不再赘述。

八，标签导航

选项卡导航和顶部导航非常相似，它们都出现在APP的顶部，APP的内容被分类并通过不同的类别显示。但是，在当前的标签导航中，还有很多技巧。随着APP的内容持续增加，第一级分类不足以让用户清楚地看到他们想要看到的内容。许多内容类型APP的内容信息需要是二级分类可以更好地显示自己的内容信息。这需要选项卡导航以获得更多功能。在顶部选项卡分类下，在每个选项卡单击后，它将显示第二级分类方法。选择二级分类选项卡后，可以更好地显示相应的内容。如目前大型基于内容的APP，携程，公众评论等。

九，资源共享

所有导航的Axure原型的整个app端，我在百度云网盘上共享，你可以用它作为参考。

链接:https://pan.baidu.com/s/1jHOAYGY

密码: 9qyn

文章很长，制作原型花了很长时间，写一篇文章花了很长时间。我只希望每个人都可以相互学习，共同进步。如果你仍然在这里阅读，你仍然没有点击退出。谢谢你的耐心等待

« 企业如何利用618？ 3分钟一起获得活动计划，成为大师 | Mituo企业代购源码网站系统代购源码网站模板试用功能正式发布公共测试 »