BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

汉堡包菜单在大屏设备上的可用性问题

汉堡包菜单在大屏设备上的可用性问题

周五夜间,或是说周六凌晨。无论怎样,都不那么像更新博客的时间。累累的窝在床上用Pad写着字,还真是很少这样;对我来说Pad难得成为内容创作工具,尤其文字;最多是用Amplitube录些demo罢了。

雨停了,不然还好应景的听听November Rain来着。这歌,听了有20年没?

话说,因为本周末确是要忙碌,没时间做正经文章,但又不想空置一周无所迹痕,便挑来一篇连文章都算不上的,怎么说,案例思考,关于大屏手机时代下的导航模式改造。作者也只是根据自家产品的特定案例拿出这样一个点来叨咕三言两语;权且作为参考吧。

更新掉之后,我要睡下了,5个小时之后起来伺候喵,然后开始又一个忙碌的周末。下面进入译文。

iPhone 6及6 Plus代表着智能手机的新一轮进化,这也迫使我们重新思考自己产品在大屏设备上的可用性问题。

问题所在

我个人总觉得在单手操作手机在移动应用或网站内进行导航是很难受的一件事,特别是那些在左上角放置菜单入口的界面。从人体工学的角度讲,单手持机时,让拇指够到最远端的一角确实是最困难的操作之一了,相信很多人都有同感。

经由界面左上角的入口访问导航,也就是俗称的汉堡包菜单,在过去的几年里几乎成为了一种最具代表性的设计模式。在3.5寸和4寸屏为主的时代,这种模式给用户操作带来的挑战还不是很明显,但随着iPhone 6、6 Plus及三星 Note III等“庞然大物”开始主导市场,屏幕对角之间的距离明显不再是单手姿势时的拇指所能应付的了。对于惯于双手操作的用户来说,这没多大问题;但对于多数习惯单手持机的用户来说,应用设计师最好打破所谓的规则与模式,重新思考一下了。

最初的解决方案

最初的解决方案就是简单的将导航栏从顶部移至底部,这样汉堡包图标正好落在拇指热区当中。

01-redesign-mobile-navigation-ux-ui.png

这种方案可以确保用户快速触及图标,然后菜单从底部展开。但是经过认真思考之后,我们觉得这种方式看上去很蹩脚,而且有些无聊;此外,为了一个菜单入口的问题而将导航栏整体移至底部的做法,似乎是在用一个错误来解决另一个错误。

实际的解决方案

虽然放弃了最初的解决方案,但其中仍有可取之处,也就是将菜单入口置于拇指热区的这个思路。同时,我们还参考了Facebook放置聊天气泡的方式,最终得到了以下方案。在这种方案中,菜单入口仍在左下角,只是不再有一整条导航栏被放置在底部了。

02-redesign-mobile-navigation-ux-ui.png

此外,如上图所示,我们还将“传统”的汉堡包图标换成了自家的logo,以一种不那么唐突的方式增强了品牌识别性;图标的整体形式也比汉堡包的样式更有趣味和动感。

用户点击该图标后,一个定制化的模态导航菜单会从底部向上展开。

这种方案可以确保用户在单手操作时也能快速的访问导航;要关闭菜单也很简单,再次点击这个区域(已经变为关闭按钮)或菜单外的任何区域均可。

03-redesign-mobile-navigation-ux-ui.png

当然,只有时间能告诉我们这种模式是否真正可行。不过至少,对于目前我们想要解决的大屏设备上的特定可用性问题来说,这应该是在正确的方向上所迈出的一小步。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 设计布道师,设计师,独立开发者,译者,猫奴,音乐玩家。
评论 (3)
感谢博主。 14年的时候 我真的是懒怠了。 有博主的博客。真的是太好了。
沙发~好久没看前辈讲汉堡包了,正好最近正在思考大屏设备上的导航问题
恩又来一篇...