AnyForWeb分享：如何用移动端导航的魅力来征服用户

constance7

尽管如今移动端的屏幕正呈现出越变越大的趋势，但最优的位置仍然寸土寸金，如何利用好这些黄金区域，并且为“一头雾水”的用户指点迷津，这才是交互设计师的工作重心。

如果你是一名交互设计新手，这篇文章也许能让你很有收获。其实移动端导航的交互并没有看起来那么复杂，只要能理清其中的关系，对导航的类型及用户心理有基本的了解，这样的设计成果物会让客户更满意。

导航无论在网页还是移动端都起着不可替代的引导作用，用户一旦不能轻松的使用导航功能功能，就会马上对网站失去兴趣，跳转出去是必然的结果。因此，在开始交互设计之前做好充足的准备功课很有必要。

以下是AnyForWeb结合自身总结的经验分享，希望对刚刚加入交互设计行列的新人们有所帮助。

使用频率较高的移动导航类型

标签导航

标签导航是最为普遍的导航形式之一，一般位于屏幕的顶部或底部，便于用户在功能上不断的切换，因此比较适用于内容区分不够明确的导航名称，但因为屏幕大小受限，类目数量一般控制在5个以内。

而基于移动端的使用性质较强，顶部标签导航的用户体验不如放在底部的标签导航。顶部导航更利于阅读，底部导航更利于点击使用。

抽屉导航

抽屉导航属于隐藏式导航，从用户角度来说是比较好的导航体验，一个好的导航就应该“召之即来，挥之即去”。相较于标签导航，抽屉式导航设计几乎没有分类数量上的限制，用户可以通过点击汉堡图标来展开导航列表。

宫格导航

宫格导航在导航的类型中属于比较美观的一种导航方式，但对于新用户的引导意义很小，主要问题在于具体内容没有在导航中有很明确的体现，只是作为网站入口的形式出现。

移动端导航设计友情小贴士

突出要素

导航在移动应用的重要程度已经无可置疑，正因如此，用最精简清楚的表达方式来阐述内容是用户们最需要的效果。另外，在导航的使用中，用户对视觉设计的要求会有所降低，是否具有高操作性才是他们真正在意的问题。

保持前后一致

在移动导航的交互效果方面，设计师切记要保持前后一致。当用户已经习惯了一种操作方式后，不要让用户再次经历学习熟悉的过程。此外，在导航中加入一些箭头标识和色彩区别来作出引导，也不失为一种用户喜欢的行为。

内外结构具有通用性

导航可以分布在移动端的各个界面中，设计风格可以根据界面风格而稍作调整变化，但导航的基本结构应中始终保持一致。

AnyForWeb总结

所有的设计都不能“依葫芦画瓢”，移动应用的导航设计也不例外。导航交互类型没有最佳方案，各有利弊，设计师需要把握每个类型的优劣势，再根据项目实际选择变通最适合的导航方式。

AnyForWeb UDC前端将定期发布Web前端博客，涉及Web前端技术，前端趋势等相关，敬请期待！

AnyForWeb和AnyForWeb UDC的官方微博微信现已正式开通，欢迎大家关注！

新浪微博：@AnyForWeb、@AnyForWeb UDC