因为用户的气质从群体上来说往往是鲜明的，哔哩哔哩在细致思考用户的调性，但并不稳定。单从导航的角度来看，就有八种场景之多。几乎涵盖了互联网上呈现的所有导航实例，让用户更好的玩女性APP。当我们了解导航种类时，我们可以进一步考虑哪种导航模式更适合哪种使用场景。
最后列举已经使用过的导航品种，如下图所示:
接下来，让我们详细看看每个导航和它的真实面貌。
1.标签导航
导航，也叫底部导航，在APP的底部，那种导航很常见。怀疑、微专、支付宝等常用app都接受那种导航情况。标签导航情境的优势非常明显，标签导航的地位不言而喻，简单来说就是让用户意识到它的存在。另外标签导航，每个标签之间切换的频率很低，标签之间面对面的点击大概是旋转切换，方便用户 *** 控。用于一般和非常重要的导航。
这种类型的真实外观
正面和背面，该模型获得的哔哩哔哩APP所有截图均未被截断，均可在FontAwesome图标字体Axure组件库中找到。组件库图标可以随意修改样式和颜色，非常强大和方便。
重新开始绘本类型，首先要了解所有app的风格和结构方法。底部的四个导航是所有app中最大的类别，所以群组分为四个部门:首页、类别、动态、新闻。在交互中，因为导航同时在顶部，所以四个导航只是通过点击按钮的过程进行切换，展现你滑动的真实。标签导航有交互方便的方法，但是可以随意绘制，不需要确认这种类型。
实实在在的模型不仅需要真实细致的交互，还需要实实在在的设计。所以现在的风格中有很多细节值得我们关注，比如APP的中间框架。我们最好选择330px*584px每个图标的各个模块的规划必须符合本APP的规划，可以使用网格线功能；有一个我经常用的小技巧，分享给大家关于各个图标战斗模块的挖色结果。QQ截图，热键截图后，关于鼠标位置的像素平面，截图功能自带RGB彩色显示，我们可以通过process方法得到图标模块的颜色。只是那里的RGB是十进制的，Axure是十六进制的。网上换算一下就行了。根据刚才的规则，我们先解包以下四个页面，如下图所示:
四个页面之间的相互跳转可以通过流程的静态内页来实现，也可以通过流程的四个页面来实现，这里我选了四个页面。这是因为以后换页面更方便了，而且是真打，万一我的方案需求变了(滑稽脸)。如果你觉得提前跳转页面的方法，感觉不舒服，什么都可以做好，最初导致的是静态的内板。我想每个人自己都可以做到，这里就不赘述了。
2.顶部导航
顶部导航场景类似于底部导航。从风格上看，顶部导航和底部导航一样不言而喻，便于用户发明。从功能上来说，是从集团对自有功能的一个笼统分类，所以底导航和顶导航的位置都很重要。唯一的区别在于两者的其他细微差别。底部的导航按钮，因为用户脚握机的习惯，可以更简单的触摸，所以可以交互的进行顶部导航。因为脚趾上没有简单的面对面响应按钮，所以左侧滑动开关更容易接受。
这种类型的真实外观
第一步，我们需要整理页面中的关系，分为四个小部门:live、home、bangumi、底部导航的home中的专栏。那四个部门就是顶导航的四个内容。扯进去之后，先说真相。最后，首先新建两个静态内板，一个用于顶部导航，命名为“滑动导航”，另一个用于四个模块的内容部门，命名为“内容”。两个内板分别设置四种状态，并排列顶部导航及其对应的内容。显示的样式如下图所示(内容部门仅表示有详图)。
接下来要做的是删除交互。最后，我们来梳理一下顶部导航的交互方式:1。触摸面部的详细按钮可以切换，2。向左滑和向左滑真的可以切换。先展示第一次交互，面对面按按钮切换。该块的实际比例很简单，点击时的交互被添加到每个顶部导航选项卡。例如，如果您将一个交互案例添加到live选项卡，则将两个内部面板(滑动导航和内容)的形式都设置为live。这里需要注意的一个方面是，你正在“滑动导航”到静态内部面板中的每个表单，其中的每个按钮都必须停止响应。
做完了面对面的按钮交互，我们来向左滑动，向左滑动。不需要面对详细的内面板形式，只需要在“内容”静态内面板中加入交互即可。Axure提供了两种交互形式:“左右拖动完成时”和“左右拖动完成时”。首先，我们选择一个并设置向后和向左拖动后的静态内面板，并分别检查“内容”和“滑动导航”两个内面板。两个内板都选择下一种形态，实际上并不勾选“回轮回”。这样一来，回轮回的意义就是next的第一个形态会跳到第一个形态，也就是说我们一般的交互是没有标志的。结果，因为内容内面板是你的滑动样式，而且因为交互形式是左后拖动，所以动画应该是左后滑动的。“滑动导航”是交互式的，一步一步选择很容易。社区的流程如下图所示:
当左后拖动完成时，我们画一个瓢，当左后拖动完成时。唯一不同的是，两个内板的形状选择要选择“上一个”，而且因为是在后左滑动之后，所以要选择“后左滑动”作为内容的动画结果，后左拖动之后和其他的一样。这样，顶层导航的原型就完成了。
3.抽屉导航
导航抽屉的原始类型应该是其中最简单的一种。在现实战斗中，我们经常会看到抽屉导航的例子。常用的app，网易云音乐，QQ都有这样的抽屉导航，如下图:
目前互联网中抽屉导航的使用都是一样的。抽屉导航里面的内容主要是用户的个人中心和相关设置。那种设置的结果是，个人设置曾经是作为一个大分类存在的，但是它的打开率和面对面命中率实际上没有其他内容模块的高。所以如果安排在底层导航，会有一些资金的浪费。设置抽屉导航，剪一个漂亮的交互，剪APP的可玩性，一举两得。
这种类型的真实外观
首先，我们观察抽屉导航的交互流程，在屏幕左侧向左滑动或点击“栏”设置按钮d出抽屉；抽屉的内容出现了，最下面是一些设置的入口，内容部是收藏、APP皮肤等功能的导入，那边需要注意的是内容部的功能导入，第一版没完没了，所以我们需要删减滑屏的交互；退出抽屉时也有两种交互方式，即撞击其他区域或向左滑动抽屉。
下面是详细的展示方式。为了在左侧滑动屏幕的左侧显示d出抽屉，我们可以使用热区笼盖或亮矩形来代替，这里我们选择亮矩形方法。在屏幕的左侧，一个名为touch-uppanel的静态内部面板被删除。静态内面板有两个形状，一个叫“通用”，一个叫“核心”，里面的内容就是d出来的抽屉。我们添加一个交互案例“当向后和向左拖动完成时”。向左拖动后，我们设置静态内面板“触摸板”为核心。我们正在设置“当向后和向左拖动完成时”。静态内面板“触摸板”正常，一切的步调如下图所示。这实际上显示了左侧幻灯片和左侧幻灯片d出/隐藏抽屉。
但是，那种结果战APP的结果就大不一样了。我们发明d出式抽屉的时候，除了抽屉的呈现之外，还会有一个半透明的浮动层。当抽屉消失时，浮动层也会消失。现在我们要减少那个浮动层。在那里，我们减去一个50%亮黑色的矩形。APP大小尺寸都一样。它位于第二个触摸板的下方和其他组件的上方。初形藏，名曰“黑风景”。左边幻灯片看完，减少交互混乱“秀黑风景”。当表格显示抽屉时，我们应该阅读一个细节。有两种交互可以让抽屉藏起来。一个是打黑景，一个是向左滑动抽屉，这样就可以减少上面打黑景的形式，切换静态的内面板“触摸板”。先把尾巴拖回左边，再加一个互动案例展示“黑色风景”:真实的是把尾巴拖回左边，d出抽屉，展示黑色风景。然后左右拖动后，添加一个交互案例，隐藏“黑色风景”，真正的意思是左右滑动，隐藏抽屉，隐藏黑色风景。现在，左侧幻灯片和左侧幻灯片显示/隐藏黑色风景已经完成。
但是，当我们在那里借不到足够的钱时，抽屉形状正在显现，我们应该可以通过打黑景来隐藏抽屉和黑景。在那里，我们需要先判断形式，然后删除交互。当触摸板为核心时，我们可以点击“黑景”和隐藏“黑景”，如下图详细 *** 纵。添加完成后，我们就真的可以展示所有的滑左和滑左打黑风景的交互了。
不过以上只是展示了左滑和左滑抽屉的混乱。我们应该读到，击中脸的酒吧按钮可以触摸抽屉以及黑色风景的出现和隐藏。在那里我们需要思考的一个细节是，我们设置的touch-up板是一个明亮的长方形，虽然看不见，但它仍然是一个组件。如果barsbutton一直在最顶层，摸抽屉后会很奇怪。如果触摸板保持在顶层，将无法通过进度条按钮触摸抽屉。因此，在删除条形按钮时，有必要考虑高低级别之间的切换。但是在我们的观念中，让barsbutton先在最上面，碰到抽屉后放在最下面，抽屉隐藏后再放在最上面。第一个好的交互如下图所示。
4.九宫格导航
九宫格是最简单的导航方式，在一个页面中显示所有详细的导航类别。它的缺点不言而喻，但它的优点在于，无需任何 *** 控就能一窥所有的品类细节，而且能占据一个不大不小的屏幕，非常不雅。但是，缺陷还是相当明显的。我们瞥见如此多的类别，很容易在短时间内找到我们想要的那一个。所以所有的九宫格导航实践都是在一些大导航中出现的，那些导航类别之间的联系其实太大了，无法用系统关系联系在一起。传播歌曲是最简单粗暴的方式，也可以是最好的表现方式。总的来说，九宫格导航并不是一个纯粹的图标展示。城市是一种分隔两者的展示方式。目标是让用户更容易找到他们正在寻找的详细标签。
这种类型的真实外观
那种模式真的有特别要注意的地方。我唯一考虑的是颜色的选择。我之前也讲过我的技巧，这里就不赘述了。
5.悬浮导航
导航是一种情境的表达，意思是不断地悬浮一个已经牢牢就位的地方。那种交互方式主要集中在突出和隐藏功能的特性上，比如APP通常会把自己最可见的功能面变成最隐藏的眼睛，在功能系统中找到那个功能面却不可用，非常方便。所以是一种悬浮导航的交互，方便用户打脸。
这种类型的真实外观
为了更好地展示那里的悬浮式风格，我修正了哔哩哔哩原风格的假设。哔哩哔哩的交互是:在面部点击暂停的Qubo按钮，显示Qubo设置详情页面(左下)；我改了交互，主要是为了凸-隐浮动导航，打脸按钮d出两种曲调的入口(左下)。
交互现实的思想是，如果你在脸上按下按钮，就会d出两个入口，呈现出一片半明半暗的景色；当你再次点击曲波按钮时，你很可能会点击黑色风景并隐藏黑色风景和两个曲波入口。
现实在这种类型上的方法类似于抽屉导航，你只能表达你的想法。如果现实没有了，可以访问文末给出的这种类型的文档。
6.方向舵导航
舵的导航例子和悬浮导航极其相似。方向舵导航将在底部显示导航中心。通常，它会显示一个负号。次要功能在于能够隐藏次要功能，能够在尾页节流空。将功能系统中可能不太好找的功能面设置为方向舵导航，便于用户发明，减少APP交互的多样性，用户使用起来不会腻。
事实上，哔哩哔哩的方向舵导航并不是呈现在底部导航的中心，而是在新闻页面的左上角。战争左上角减号的位置和作用极其相似，我们长期处于方向舵导航的局面。
这种类型的真实外观
最后先说交互过程:打脸减号，d出一个矩形框，里面导入其他功能；再打减号或者面对面打其他区域，矩形框消失。
最后我们先添加一个矩形框，命名为“矩形框”，并将矩形框设置为隐藏。然后设置“+”交互案例，点击时可以切换显示/隐藏“矩形框”。同时，我们不得不认为，矩形框在面对其他位置时仍然会消失。最后要加一个前提。在矩形框形状出现的情况下，打到其他区域矩形框消失，所有交互如下图所示。
7、旋转木马导航
轮播导航的详细思路和结果是真实的。我写在《在Axure下保留真实版本，在APP端展现真实的轮播风格》里，写得很具体。大家可以参考一下，这里就不赘述了。
8.标签导航
Tab战顶部的导航极其相似，都呈现在APP的顶部，APP所拥有的内容通过流程差异的分类停止分类显示。然而，在今天的标签导航中，有很多技巧，因为APP的内容在不断增加，一级分类不足以让用户清楚地看到他们阅读的内容。很多基于内容的app对内容都有疑虑，所以需要有两级分类，才能更好的展现自己对内容的疑虑。这就需要更多的标签导航功能。在顶级页签分类下，每个页签被点出来后，会显示两级分类方式。选择两级标签页后，回复内容会更好的显示，现在有很棒的基于内容的APP、携程、大众评分等显示。
9.资本分享
所有APP和导航的Axure模型都是我在百度云网盘上分享的，大家可以用来进一步学习和参考。
链接:https://pan.baidu.com/s/1jHoaygy
瘦码:9qyn
文章很少，做这个模型和写文章花的时间很少。只希望大家互相学习，互相配合。如果在那里读，还是有当面攻击，退出。谢谢大家的耐心~
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）