材料设计与神秘肉导航问题-CSDN博客

by Teo Yu Siang

张玉祥

In March 2016, Google updated Material Design to add bottom navigation bars to its UI library. This new bar is positioned at the bottom of an app, and contains 3 to 5 icons that allow users to navigate between top-level views in an app.

2016年3月，Google 更新了 Material Design，以在其UI库中添加底部导航栏。这个新栏位于应用程序的底部，并包含3到5个图标，允许用户在应用程序的顶级视图之间导航。

Sound familiar? That’s because bottom navigation bars have been a part of iOS’s UI library for years (they’re called tab bars in iOS).

听起来有点熟？这是因为底部导航栏多年来一直是iOS UI库的一部分(在iOS中称为标签栏)。

Bottom navigation bars are a better alternative to the hamburger menu, so their addition into Material Design should be good news. But Google’s version of bottom navigation bars has a serious problem: mystery meat navigation.

底部导航栏是汉堡菜单的更好选择，因此将其添加到Material Design中应该是个好消息。但是Google的底部导航栏版本存在一个严重的问题： 神秘的肉食导航 。

Whether you’re an Android user, designer, or developer, this should trouble you.

无论您是Android用户，设计师还是开发人员，这都将困扰您。

Mystery meat navigation is a term coined in 1998 by Vincent Flanders of the famous website Web Pages That Suck. It refers to buttons or links that don’t explain to you what they do. Instead, you have to click on them to find out.

神秘肉类导航是1998年由著名网站Web Pages Suck的 Vincent Flanders创造的一个术语。它指的是没有向您解释其功能的按钮或链接。相反，您必须单击它们才能找到。

(The term “mystery meat” originates from the meat served in American public school cafeterias that were so processed that the type of animal they came from is no longer discernible.)

(“神秘肉”一词起源于美国公立学校食堂提供的肉，这种食肉经过加工以至于无法辨别它们来自的动物类型。)

Mystery meat navigation is the hallmark of designs that prioritize form over function. It’s bad UX design, because it emphasizes aesthetics at the cost of user experience. It adds cognitive load to navigational tasks, since users have to guess what the button does. And if your users need to guess, you’re doing it wrong.

神秘的肉食导航是将形式优先于功能的设计的标志。 这是糟糕的UX设计，因为它以用户体验为代价强调美感。由于用户不得不猜测按钮的作用，因此它增加了导航任务的认知负担。而且，如果您的用户需要猜测，那就错了。

You wouldn’t want to eat mystery meat—similarly, users wouldn’t want to click on mystery buttons.

您不想吃神秘的肉-同样，用户也不想单击神秘的按钮。

Material Design’s first major mystery meat navigation problem happened in 2014 with Android Lollipop.

Material Design的第一个主要神秘肉导航问题发生在2014年，当时是使用Android Lollipop。

Android Lollipop was introduced in the same conference that debuted Material Design, and sports a redesigned UI to match Google’s new design language.

在首次发布Material Design的会议上介绍了Android Lollipop，并采用了经过重新设计的UI以匹配Google的新设计语言。

One of the UI elements that got redesigned was the navigation bar, the persistent bar at the bottom of Android OS that provides navigation control for phones without hardware buttons for Back, Home and Menu.

重新设计的UI元素之一是导航栏，它是Android OS底部的固定栏，可为手机提供导航控制，而没有用于Back，Home和Menu的硬件按钮。

In Android Lollipop, the navigation bar was redesigned to this:

在Android Lollipop中，导航栏已重新设计为：

See the problem?

看到问题了吗？

While the previous design is less aesthetically appealing, it’s more or less straightforward. The Back and Home icons can be understood without the need for text labels. The 3rd icon is a bit of a mystery meat, but on the whole, the UX of the old navigation bar wasn’t too bad.

尽管先前的设计在美学上没有吸引力，但它或多或少简单明了。无需文本标签即可了解“返回”和“主页”图标。第三个图标有点神秘，但总的来说，旧导航栏的用户体验还不错。

The new bar, on the other hand, is extremely pretty. The equilateral triangle, circle, and square are symbols of geometric perfection. But it’s also extremely user-unfriendly. It’s abstract—and navigation controls should never be abstract. It’s full-blown mystery meat navigation.

另一方面，新的酒吧非常漂亮。等边三角形，圆形和正方形是几何完美的符号。但这也非常不友好。它是抽象的-导航控件绝不能是抽象的。这是成熟的神秘肉类导航。

The triangle icon might resemble a “Back” arrow, but what does a circle and a square mean in relation to navigation control?

三角形图标可能类似于“后退”箭头，但是圆形和正方形相对于导航控件是什么意思？

罢工2：浮动操作按钮 (Strike 2: Floating Action Buttons)

Floating action buttons are special buttons that appear above other UI elements in an app. Ideally, they’re used to promote the primary action of the app.

浮动动作按钮是出现在应用程序中其他UI元素上方的特殊按钮。理想情况下，它们用于促进应用程序的主要动作。

Floating action buttons also suffer from the mystery meat navigation problem. By design, the floating action button is a circle containing an icon. It’s a pure-icon button, with no room for text labels.

浮动动作按钮也遭受神秘的肉类导航问题。根据设计，浮动操作按钮是一个包含图标的圆圈。这是一个纯图标按钮，没有空间容纳文本标签。

The truth is that icons are incredibly hard to understand because they’re so open to interpretation. Our culture and past experiences inform how we interpret icons. Unfortunately, designers (especially, it seems, Material designers) have a hard time facing this truth.

事实是， 图标非常易于理解，因为它们易于解释。我们的文化和过去的经验告诉我们如何解释图标。不幸的是，设计师(尤其是材料设计师)似乎很难面对这个事实。

Need proof that icon-only buttons are a bad idea? Let’s play a guessing game.

是否需要证明仅图标按钮不是一个好主意？让我们玩一个猜谜游戏。

Below is a list of what—according to Material Design’s guidelines—are acceptable icons for floating action buttons. Can you guess what each button does?

以下是根据Material Design的指南列出的可接受的浮动操作按钮图标列表。您能猜出每个按钮的作用吗？

Ok, that’s a simple one to warm you up. It represents “Directions”.

好的，这很简单，可以给您加热。它代表“方向”。

What about this? If you’re an iOS or Mac user, you might say “Safari.” It actually represents “Explore.”

那这个呢？如果您是iOS或Mac用户，则可以说“ Safari”。它实际上代表“探索”。

Things are getting fun (or frustrating) now! Could this be “Open in contacts”? “Help, there’s someone following me”? Perhaps this is a button for your “Phone a friend” lifeline.

现在事情变得有趣(或令人沮丧)！这可以是“在联系人中打开”吗？ “帮助，有人跟着我”？也许这是您“给朋友打电话”生命线的按钮。

Hang on, this is the button for “Open in contacts.” Right? Or is this “Gossip about a friend” since the person is inside a speech bubble?

等等，这是“在联系人中打开”的按钮。对？还是因为这个人在讲话泡泡中，所以这是“关于朋友的八卦”？

Ready for the final round? Here’s the worst (and most used) icon:

准备好进行最后一轮了吗？这是最差(也是最常用)的图标：

You might think the “+” button is rather simple to understand—it’s obviously a button for the “Add” action. But add what?

您可能会认为“ +”按钮很容易理解-显然是“添加”操作的按钮。但是加什么呢？

Add what: that’s the problem right there. If a user needs to ask that question, your button is officially mystery meat. Sadly, developers and designers of Material Design apps seem to be in love with the “+” floating action button.

补充：这就是问题所在。如果用户需要问这个问题，那么您的按钮正式就是神秘的肉。可悲的是，Material Design应用程序的开发人员和设计师似乎都喜欢“ +”浮动操作按钮。

Precisely because the “+” button seems so easy to understand, it ends up being the most abused icon for floating action buttons. Consider how Google’s own Inbox app displays additional buttons when you tap the “+” floating button, which is not what a user would expect:

正是因为“ +”按钮看起来很容易理解，所以它最终成为浮动操作按钮最常使用的图标。考虑一下当您点击“ +”浮动按钮时Google自己的Inbox应用如何显示其他按钮，这不是用户期望的：

What makes things worse is how the same icons have different meanings in different apps. Google used the pencil icon to represent “Compose” in Inbox and Gmail, but used it to represent “Edit” in its photo app Snapseed.

更糟的是，相同的图标在不同应用中的含义不同。 Google使用铅笔图标在Inbox和Gmail中表示“撰写”，但在照片应用程序Snapseed中使用铅笔图标表示“编辑”。

The floating action button was intended to be a great way for users to access a primary action. Except it isn’t, because icon-only buttons tend to be mystery meat.

浮动操作按钮旨在成为用户访问主要操作的好方法。除此之外不是，因为仅图标按钮往往是神秘的肉。

材料设计和形式超越功能 (Material Design and Form over Function)

When Material Design was launched in 2014, it was to much fanfare. It’s bold, and rides on (and one-ups) the flat design trend. The pairing of vibrant colours and animations make it pretty to look at.

当Material Design在2014年推出时，就大张旗鼓。它非常大胆，并且顺应了平面设计的趋势。鲜艳的色彩和动画的搭配使它看起来很漂亮。

But perhaps it’s a little too pretty. Perhaps while working on Material Design, the designers got a little carried away.

但是也许有点太漂亮了。也许在进行材料设计时，设计师有些不为所动。

Time and again, Google’s guidelines for important buttons and bars seem to prioritise form over function. Geometric prettiness was chosen over recognisability in Android’s navigation bar. Aesthetic simplicity was championed in floating action buttons, turning them into riddles in the process. Finally, visual neatness was deemed more important than meaningful labels in bottom navigation bars.

Google一次又一次地针对重要按钮和条形图的指南似乎将形式优先于功能。在Android的导航栏中，选择的是几何装饰，而不是可识别性。漂浮式动作按钮倡导了美学的简单性，在此过程中将它们变成了谜语。最后，在底部导航栏中，视觉整洁被认为比有意义的标签更重要。

That’s not to say that mystery meat navigation is a Google-only problem. Sure, you can find mystery meat in iOS apps too. But they don’t usually appear in critical navigational controls and promoted buttons. They also aren’t spelt out specifically in design guidelines to be mystery meat.

这并不是说神秘的肉类导航只是Google的问题。当然，您也可以在iOS应用程序中找到神秘的肉。但是它们通常不会出现在关键的导航控件和升级的按钮中。在设计指南中也没有特别说明它们是神秘的肉。

If Google designers could devote time and effort into creating speed graphs for animations, perhaps they could spend a little time to make sure their designs aren’t mystery meat.

如果Google设计师可以花时间和精力来创建动画速度图，也许他们可以花一点时间来确保自己的设计不是神秘的肉。

After all, an animated mystery button is still less delightful than a static but clearly labelled button.

毕竟，带有动画效果的神秘按钮仍然不如静态但标记清晰的按钮令人愉悦。