全国免费咨询热线:400-611-9921
 
不要在移动端菜单设计中犯这些错误

2015-03-27

1610

当我们想要让移动网站的用户导航更加直观时,会遇到这样的挑战:内容太多,空间太小。移动电商平台设计中的最新趋势是使用“汉堡包图标”来展示分类菜单,这或许能增强主页的扩展性,实现主页和菜单之间的跳转。可切...
不要在移动端菜单设计中犯这些错误,互联网的一些事

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

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

不要在移动端菜单设计中犯这些错误,互联网的一些事

  可切换的菜单键是一种很好的把导航合并到每个页面中去的方式。考虑到移动端搜索需求的增长,并且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测或者多变量测试可以告诉你,你的设计是否有效。测试导航应该是移动优化策略中的首要任务之一,使空间使用的有效性与移动网站架构清晰相互均衡。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:纵天,广州品牌网站建设公司,广州网站制作公司,广州网站建设,广州网站设计,网站建设,手机网站开发,品牌设计,用户体验
热门标签
广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭