收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1459|回复: 0

[原创] AnyForWeb分享:如何用移动端导航的魅力来征服用户

[复制链接]
发表于 2014-12-11 09:48:14 | 显示全部楼层 |阅读模式
本帖最后由 constance7 于 2014-12-11 09:49 编辑

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

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

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

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

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

标签导航

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

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

抽屉导航

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

宫格导航

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

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

突出要素

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

保持前后一致

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

内外结构具有通用性

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

AnyForWeb总结

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

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

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

新浪微博:@AnyForWeb、@AnyForWeb UDC
交互标签导航1.png
交互抽屉导航2.1.png
交互抽屉导航2.2.png
交互宫格导航3.png
AnyForWebUDC-Wechat.jpg
AnyForWeb-wechat.jpg
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-18 04:26 , Processed in 0.078901 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表