产品和设计都应该知道的MENU设计

来源:
Perfect Menu for Mobile Apps
The Hamburger Icon. To Kill or Not to Kill?

Menu for Mobile Apps

在所有的应用程序和网站里,用户依赖菜单找到内容和使用功能。

菜单非常重要,你几乎可以在每一个网站或应用程序中遇到它们,但并不是所有的菜单都是有效的,我们常常面临各种菜单问题:有些菜单很混乱,有些菜单很难操作,有些菜单干脆很难找到。

使菜单可见

尽量避免使用汉堡图标

hamburger_menu

这个三行按钮是个魔鬼。并不是说图标本身,而是隐藏图标背后的导航。

眼不见,心不烦,隐藏小屏幕导航是一种显而易见的解决方案—你不必担心有限的屏幕,仅需要把你的整个导航放到一个可滚动的抽屉里,默认是隐藏的。

但汉堡按钮效率较低,因为你要点击两次……

Drawer example

汉堡菜单其实是小屏幕手机刚兴起的一个的解决方案,当时的设计师们并没有深入去了解手机应用的设计,仅仅为了做出一个和桌面网页显示差不多的小屏幕网站。
结果这个可怕的不明意义汉堡标签不断被设计师滥用。甚至有的网站在空间足够放正常菜单时还是用汉堡菜单……

Google Material 的web网站就是一个反例,它分明有足够的空间使用正常的导航

互动理论,A/B测试,以及一些世界顶级的应用程序的演变表明,公开菜单选项可以增加用户的使用和用户满意度。

这就是为什么许多应用程序正从汉堡菜单朝着相关导航选项始终保持可见转移。

标签栏:而不是藏在抽屉里的导航选项

YouTube通过一个tap bar提供主要的核心功能,允许快速切换功能。


重新设计的YouTube Android App

这是一个聪明的方法使标签栏在不使用时消失。如果人们为了获取新的内容滚动屏幕时,标签栏隐藏,而当人们下拉屏幕试图回到顶部时,标签栏出现。

Hidden Tab Bar

最后但并非最不重要,许多设计师误把切换选项放到下拉菜单中。这导致同样的问题——用户只看到所选选项,而其他选项是隐藏的。


低能见度(下拉菜单)和高可见性(开关按钮)。图片来源:uxmovement

iOS切换按钮:

iOS切换按钮

导读:很多应用程序仍然使用汉堡,因为它是一个用来塞大量的链接到一个应用程序里去的简单方法,但它是错误的方向,因为如果你的导航是复杂的,隐藏它不会让你的应用更友好。

当前活动位置

在一个网站和APP中,无法显示当前位置可能是最常见的错误。
“我在哪儿?“是一个成功导航需要回答用户的根本问题之一。

用户依赖菜单视觉线索来回答这个关键问题。但有时他们所看到的并不是他们期望看的。

Icons

有一些普遍的图标,用户知道它们大多代表什么,如搜索、电子邮件、打印等。不幸的是“万能”图标是罕见的。APP设计师经常把功能隐藏在图标后面,实际上这是非常难识别的。

最好在图标的下面加上准确的文字,或者在用户第一次使用APP时给出适当引导。

Bloom.fm以前的Android版本。对于用户来很难知道当前位置

Colors

当前状态可以直接在标签栏使用对比色,请妥善选择标签状态。

按钮颜色应指导用户如何行动。图片来源:uxmovement

颜色选择的很好的例子:

当标签栏被选中颜色填充

导读:正确选择图标和颜色可以帮助用户理解当前位置。如果你使用图标,要做它们的可用性测试。

协调菜单与用户任务

你应该只使用可以理解的链接标签,找出用户正在寻找什么,并且使用那些目标用户熟悉的分类标签。
菜单不是让你讲内部行话的地方,所以请坚持清晰的术语描述你的内容和功能。

用户喜欢可以快速上手的应用,你可以减少用户理解菜单的时间。


Twitter menu for iOS

导读:菜单元素应该易于理解。用户应该能够理解当他们点击某个菜单究竟会发生什么。

易于操作

太小或太接近的元素是用户感到沮丧的巨大原因之一。所以使得菜单链接足够大,可以很容易的打开或点击。

一个麻省理工学院Touch实验室研究发现,大多数成年人的食指平均宽度为1.6 - 2厘米。转换成像素大概是45-57px。

食指的平均宽度像素,图片来源:uxmovement。

触摸目标的宽是45-57像素,正好让用户的手指紧贴在目标内,当他们准确地击中目标,为他们提供精确的的视觉反馈。

结论

几乎每一个站点和应用程序都应该把帮助用户定位予以高度的重视,其背后的目标应该是创建一个能够与用户的心理模型自然对应的交互系统。

简单的用户通道,清晰的画面,和宽容的设计有助于给用户营造无缝体验的错觉。你的交互系统的目标应该是,通过清晰的视觉传达为用户解决问题。

你的产品对用户来说越容易使用,他们就越有可能使用它。

看完这篇文章,大家可以再结合上一篇有关底部导航设计的文章去看自己平时用的应用,比如最美应用和一些阅读APP对MENU的处理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,139评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 玩微博,分两类人,一类人是段子高手,每天不停的刷微薄,即便是真实的记录生活,你都觉得有趣。难道人家的生活就真的那么...
    文艺女青年专治各种不服阅读 1,346评论 1 13
  • HTTP初识 HTTP协议是超文本传输协议(Hyper Text Transfer Protocol)的缩写,是用...
    THQ的简书阅读 800评论 0 1
  • 这周完成的 本周已经完成对学生端活动的模块的整体功能和流程,以及对该模块的测试工作,同是也对教师端的任务模块有了基...
    Kevinxuelei阅读 147评论 0 0