首页 > 网页教程 > 设计分享 > APP导航设计:不要在移动端菜单设计犯这些错误

APP导航设计:不要在移动端菜单设计犯这些错误

时间:2015-05-01    来源:13tech

导航菜单设计 移动网站设计 移动网站导航

当我们想要让移动网站的用户导航更加直观时,会遇到这样的挑战:内容太多,空间太小。

移动电商平台设计中的最新趋势是使用“汉堡包图标”来展示分类菜单,这或许能增强主页的扩展性,实现主页和菜单之间的跳转。

导航菜单设计 移动网站设计 移动网站导航

可切换的菜单键是一种很好的把导航合并到每个页面中去的方式。考虑到移动端搜索需求的增长,并且43%的手机上的邮箱是打开的(数据来源Litmus),因此维护那些直接进入到你的网站内页和不熟悉你的移动网站的用户是至关重要的。 这种汉堡包菜单是一个好点子——且约定俗成的,但问题是如何将它应用到你的设计中去。

要做的事:告诉用户从哪里开始

Buckle可以识别到首次访问的访客并将他们的注意力吸引到菜单键上。即使访客不知道汉堡包菜单的作用,他们知道这是一个很好的起点,并且很快会发现它是用来控制分类导航的。

导航菜单设计 移动网站设计 移动网站导航

不能做的事:分不清“汉堡包”菜单和网站logo

尽管移动端正在日益普及,互联网用户已经习惯桌面网页的分布方式,认为左上角是logo的位置,把“汉堡包菜单”放到logo的左侧是一个很大的禁忌。

首次访问的用户,如何得知“DISCOUNT DANCE SUPPLY”是导航,而不是品牌logo。

导航菜单设计 移动网站设计 移动网站导航

Forever 21 logo右侧的导航是很容易理解的,但是左侧的汉堡包菜单看起来不像是可点击的元素。

导航菜单设计 移动网站设计 移动网站导航

Ditto Spanx,看看这个网站,你该明白了。

导航菜单设计 移动网站设计 移动网站导航

不能做的事:太多留白

我赌你一杯双倍大份的焦糖玛奇朵,眼球追踪研究将显示用户的大部分注意力的都在图片的部分,而不是浮动神秘的汉堡包菜单。把菜单图标远远的放在右侧和把它放在logo左侧一样危险。

导航菜单设计 移动网站设计 移动网站导航

需要做的事:将分类图标和其他导航元素组织好

Softchoice的汉堡包菜单作为导航菜单的一部分,用户很容易就识别出它是可操作的。

导航菜单设计 移动网站设计 移动网站导航

另外,Lowe’s 把汉堡包菜单和搜索放在一起。

导航菜单设计 移动网站设计 移动网站导航

当你决定图标的顺序时,请牢记桌面网页中一些约定俗成的惯例。eBags的汉堡包菜单在右上侧,这个位置是传统的放置登录和购物车的位置。 把汉堡包菜单放到账户和购物车的左侧,或者把它和搜索放在一起, eBags或许会更好。

导航菜单设计 移动网站设计 移动网站导航

Green Mountain 把汉堡包菜单和搜索放在一起,但是把它放在搜索的左侧可能会更直观,毕竟,垂直类的菜单约定俗成的出现在左侧,而“搜索”按键则出现在搜索框的右侧。

导航菜单设计 移动网站设计 移动网站导航

需要做的事:标注图标

设计师——我听到你在哭泣,但是标注图标可以更好的阐明这些图标是做什么的。例如,CVS汉堡包菜单上增加了“菜单”两个字。

导航菜单设计 移动网站设计 移动网站导航

如果你觉得这太拥挤了,你可以直接把“菜单”两个字设计在按键上,直到汉堡包菜单成为约定俗成的菜单图标。

导航菜单设计 移动网站设计 移动网站导航

注意:Harry and David的搜索图标可能会和PayPal的logo混淆,因为PayPal的logo看起来类似一个搜索框。

Ross Simons菜单按键上的加号大喊着“展开我”。这种放在搜索框左侧的方式要比和购物袋图标放在一起,或者是放在搜索框右侧更加有效。

导航菜单设计 移动网站设计 移动网站导航

但是Ross Simons 的购物袋图标是和logo混在一起的,而且混的有点过了。事实上,如果没有适当的设计,任何导航图标都可能被忽视。

一如既往,用户测试和A/B测或者多变量测试可以告诉你,你的设计是否有效。测试导航应该是移动优化策略中的首要任务之一,使空间使用的有效性与移动网站架构清晰相互均衡。

来源:getelastic

相关推荐
移动应用导航设计如何用魅力来征服用户?
20个创意极佳设计独特的网站导航条赏析
分享20款圆滑细腻的网页导航菜单设计案例
最新创意网页导航设计趋势和案例大搜罗
如何创建出色的web导航设计?
25种漂亮而又具创意的酷站导航菜单赏析
19个简洁风格创意的网页侧边栏菜单设计欣赏
网站导航设计指南:如何做有吸引力的网站?
APP浏览体验设计的思考:如何理解用户的眼?
20个创意漂亮的手机应用程序登陆页面设计欣赏
iOS7用户界面设计的10个准则分享
交互设计上常见的界面切换动画如何优化
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
对症下药!如何设计受欢迎的应用引导页?
搞定APP着陆页优化的超实用原则(附工具)
APP界面设计:移动缺省页如何设计才会内容“丰富友好”?
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识
扁平化设计与Material Design区别在哪里?
APP界面设计教程:让人眼前一亮的渐变设计手法
交互设计基础!四个移动界面常见的动效类型
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
APP设计零基础教程:5步让你设计出漂亮的APP界面
15个值得学习的APP交互体验设计细节
手机APP设计规范:图标和按钮视觉设计规范
APP界面设计之页面布局的22条基本原则
APP设计!教你怎样才能把APP引导页设计的高大上
经典案例分析:10个戳中痛点的APP更新欢迎页文案
2015最流行的APP设计是啥?比如 Facebook那样的
前方高能!别让这10个设计误区毁了你的APP
20个精致漂亮的视频播放器界面设计欣赏及点评

分类导航

教程推荐

热门特效

热门教程