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

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

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

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

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

标签导航

enter image description here

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

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

抽屉导航

enter image description here

enter image description here

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

宫格导航

enter image description here

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

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

突出要素

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

保持前后一致

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

内外结构具有通用性

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

AnyForWeb总结

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

本文最初由AnyForWeb UDC前端发布,如需查看详情,请点击《AnyForWeb分享:如何用移动端导航的魅力来征服用户》

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

新浪微博:@AnyForWeb、@AnyForWeb UDC 微信关注请扫: enter image description here enter image description here AnyForWeb AnyForWeb UDC