几种常见导航设计分析
1个回答
展开全部
导航就像一本书的目录，当你看到书的目录时，知道这本书的框架分为几部分，每个框架的内容点是什么，这些内容点又是如何排布。导航对于整个APP来说是非常重要的，可以让读者在浏览内容时不易迷路。以下归纳几种比较常见的导航设计以及优缺点。
目前，移动端界面的一级导航设计主要有几种：1、底部布局的标签导航；2、顶部布局的标签导航；3、舵式导航；4抽屉式导航；5、宫格式导航；等等。二级导航设计常见的有：1、分段式导航；2、底部+顶部布局的标签导航；3、列表导航；4、图标式导航；5、下拉菜单式导航等。
本篇文章分为三个部分，第一部分为一级导航设计介绍、第二部分为二级导航介绍、第三部分总结。
1、底部布局的标签导航：
这是最为常见的导航模式，一般而言是一个icon+文字描述 ； 纯icon形式的底部标签导航也有，但使用起来容易误导。所以大部分产品的一级导航设计，都有一个文字说明。
总结这种导航的特点是：占用面积较大，用户能够轻松进行点击，一般不超过5个标签。是IOS端导航设计最为推荐的一种模式。
以纯icon跟icon+文字描述为例：medium、airbnb、网易云音乐
2、顶部布局导航
标签式的导航除了放在底部外，也可以放在顶部。而底部空余的空间可以 设计APP主要功能 。比如拿滴滴打车跟QQ音乐为例，滴滴打车的主要是为了让用户使用来打车，所以按照人的输入习惯，把底部的位置设计为输入框，便于用户立即输入地点。而QQ音乐的底部设计则可以让用户快捷切换、播放、暂停音乐。
总结这种导航设计的特点是：根据用户的场景使用以及APP自身特点情况设计。这种导航也大量地使用在Android系统中。
3、舵式导航
如果一个APP中有一个非常需要突出的功能，是该APP的核心功能或操作，一般会使用舵式导航。经常以颜色或者是大小的区别来展示这个核心。常见的有文字或照片发布类型的APP软件，比如、微博、Evernote等；也有包括产品本身功能不多，但有一个最需要突出的核心，以共享单车ofo为例。
总结这种导航的特点是：以颜色或大小的区别来展示核心，让人有点击的欲望。
4、抽屉式导航
抽屉式导航把一些功能整合在一个图标（汉堡菜单/三线icon）中，让界面变得更加简洁。这款导航也有一个比较突出的特点，使用这种导航意味着更多的点击。使用一个功能，首先要打开抽屉式导航，然后才能点击其他的功能，接着在其他的功能中再继续点击。2010年Facebook也使用这种抽屉式导航，但2013年换成了标签式导航。更多的点击意味着大大降低使用的频率次数。
总结这种导航的特点：核心是“藏”，突出核心功能，但同时意味着更多的点击。
以VPN master跟QQ作为例子。
昨天看到medium上有一段话很有意思，来形容这种汉堡式菜单： If you don't pay attention you can't see it, if you pay attention and you see it then you don't understand what's going on there.
知乎上也专门有讨论抽屉式导航的利弊。这种导航有它的优势，也有明显的劣势。
5、宫格式导航
很常见，把一个个功能罗列出来，像宫型一样在你的桌面上直接铺开，基本上占据整个屏幕或一半。这种导航主要针对一些功能非常多的软件。市面上比较典型的有：美团、去哪儿（但去哪儿的界面真心丑），不过这种设计在我们手机屏幕上已经得到了充分的展示。
市面上较主要的一级导航类型如上。接下来来说说二级导航的布局是怎么样的吧。
就像书的目录有一级目录跟二级目录，APP中也有一级导航跟二级导航，二级导航从属于一级导航，带领用户去到不同的层级内容。
一、选卡式导航
位于顶部，这种选卡式导航是在主导航中其中的某个图标里的二级导航。一般情况下，不会超过四个，相互之间也有一定的关联。
二、底部+顶部布局的标签导航
双tab导航出现的时候，顶部导航往往是二级导航。而顶部的内容偏多时，需要提示用户可滑动，如不提供完整的信息。意外发现Airbnb中的二级导航没有提示用户可以往右滑动。
三、列表导航
是十分常见的二级导航，清晰的条目可以实现用户在内容选项中的快速切换。不会展示过多的内容，一般为icon+文字+导向符号，右侧部分大量空白，符合人的视觉阅读习惯。这种导航也可以作为一级导航，例如QQ邮箱。点击其中一个条目之后会进入另一个界面中，内容的交互逻辑十分重要。
四、图标式导航
算是宫格式导航的一种，可以作为一级导航，也可以作为二级导航。每个图标之间相互独立，就如同我们手机桌面上的每一个APP一样，他们所拥有的信息完全独立，与相邻的APP没有任何关系。内容较多时，也会给用户带来一定的选择困难，一般而言会作为二级导航使用。最经典的就是bilibili跟支付宝。
五、下拉菜单式
下拉菜单不会跳转到其他界面，能够显示足够的条目，没有退出的选项。
三、总结
很多导航与导航之间可以相互搭配使用，没有最完美的导航，而设计导航的首要因素是要理解需求，从需求出发，以及配合相应的场景使用，做出最合适的设计模式。
在看Thoughts on Interaction Design 这本书的时候，作者说： Interaction Design is a language.
在看medium有关导航的文章时，有作者（Nick Babich）也说： Navigation is a conversation .
作为一门可沟通的语言，让target audiences听懂，尊重用户&尊重客户。在设计时也多思考personas，思考用户目标与用户体验目标，导航的设计是让他们知道如何实现这些目标与需求。如果产品设计让用户觉得人性化，那么他们应该会乐意去使用。
目前，移动端界面的一级导航设计主要有几种：1、底部布局的标签导航；2、顶部布局的标签导航；3、舵式导航；4抽屉式导航；5、宫格式导航；等等。二级导航设计常见的有：1、分段式导航；2、底部+顶部布局的标签导航；3、列表导航；4、图标式导航；5、下拉菜单式导航等。
本篇文章分为三个部分，第一部分为一级导航设计介绍、第二部分为二级导航介绍、第三部分总结。
1、底部布局的标签导航：
这是最为常见的导航模式，一般而言是一个icon+文字描述 ； 纯icon形式的底部标签导航也有，但使用起来容易误导。所以大部分产品的一级导航设计，都有一个文字说明。
总结这种导航的特点是：占用面积较大，用户能够轻松进行点击，一般不超过5个标签。是IOS端导航设计最为推荐的一种模式。
以纯icon跟icon+文字描述为例：medium、airbnb、网易云音乐
2、顶部布局导航
标签式的导航除了放在底部外，也可以放在顶部。而底部空余的空间可以 设计APP主要功能 。比如拿滴滴打车跟QQ音乐为例，滴滴打车的主要是为了让用户使用来打车，所以按照人的输入习惯，把底部的位置设计为输入框，便于用户立即输入地点。而QQ音乐的底部设计则可以让用户快捷切换、播放、暂停音乐。
总结这种导航设计的特点是：根据用户的场景使用以及APP自身特点情况设计。这种导航也大量地使用在Android系统中。
3、舵式导航
如果一个APP中有一个非常需要突出的功能，是该APP的核心功能或操作，一般会使用舵式导航。经常以颜色或者是大小的区别来展示这个核心。常见的有文字或照片发布类型的APP软件，比如、微博、Evernote等；也有包括产品本身功能不多，但有一个最需要突出的核心，以共享单车ofo为例。
总结这种导航的特点是：以颜色或大小的区别来展示核心，让人有点击的欲望。
4、抽屉式导航
抽屉式导航把一些功能整合在一个图标（汉堡菜单/三线icon）中，让界面变得更加简洁。这款导航也有一个比较突出的特点，使用这种导航意味着更多的点击。使用一个功能，首先要打开抽屉式导航，然后才能点击其他的功能，接着在其他的功能中再继续点击。2010年Facebook也使用这种抽屉式导航，但2013年换成了标签式导航。更多的点击意味着大大降低使用的频率次数。
总结这种导航的特点：核心是“藏”，突出核心功能，但同时意味着更多的点击。
以VPN master跟QQ作为例子。
昨天看到medium上有一段话很有意思，来形容这种汉堡式菜单： If you don't pay attention you can't see it, if you pay attention and you see it then you don't understand what's going on there.
知乎上也专门有讨论抽屉式导航的利弊。这种导航有它的优势，也有明显的劣势。
5、宫格式导航
很常见，把一个个功能罗列出来，像宫型一样在你的桌面上直接铺开，基本上占据整个屏幕或一半。这种导航主要针对一些功能非常多的软件。市面上比较典型的有：美团、去哪儿（但去哪儿的界面真心丑），不过这种设计在我们手机屏幕上已经得到了充分的展示。
市面上较主要的一级导航类型如上。接下来来说说二级导航的布局是怎么样的吧。
就像书的目录有一级目录跟二级目录，APP中也有一级导航跟二级导航，二级导航从属于一级导航，带领用户去到不同的层级内容。
一、选卡式导航
位于顶部，这种选卡式导航是在主导航中其中的某个图标里的二级导航。一般情况下，不会超过四个，相互之间也有一定的关联。
二、底部+顶部布局的标签导航
双tab导航出现的时候，顶部导航往往是二级导航。而顶部的内容偏多时，需要提示用户可滑动，如不提供完整的信息。意外发现Airbnb中的二级导航没有提示用户可以往右滑动。
三、列表导航
是十分常见的二级导航，清晰的条目可以实现用户在内容选项中的快速切换。不会展示过多的内容，一般为icon+文字+导向符号，右侧部分大量空白，符合人的视觉阅读习惯。这种导航也可以作为一级导航，例如QQ邮箱。点击其中一个条目之后会进入另一个界面中，内容的交互逻辑十分重要。
四、图标式导航
算是宫格式导航的一种，可以作为一级导航，也可以作为二级导航。每个图标之间相互独立，就如同我们手机桌面上的每一个APP一样，他们所拥有的信息完全独立，与相邻的APP没有任何关系。内容较多时，也会给用户带来一定的选择困难，一般而言会作为二级导航使用。最经典的就是bilibili跟支付宝。
五、下拉菜单式
下拉菜单不会跳转到其他界面，能够显示足够的条目，没有退出的选项。
三、总结
很多导航与导航之间可以相互搭配使用，没有最完美的导航，而设计导航的首要因素是要理解需求，从需求出发，以及配合相应的场景使用，做出最合适的设计模式。
在看Thoughts on Interaction Design 这本书的时候，作者说： Interaction Design is a language.
在看medium有关导航的文章时，有作者（Nick Babich）也说： Navigation is a conversation .
作为一门可沟通的语言，让target audiences听懂，尊重用户&尊重客户。在设计时也多思考personas，思考用户目标与用户体验目标，导航的设计是让他们知道如何实现这些目标与需求。如果产品设计让用户觉得人性化，那么他们应该会乐意去使用。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
