总结：平面设计经常遭受可用性问题的困扰，并且由于丢失了指示符而导致点击不确定性。要避免这些消极的一面影响需要通过持续并清晰地将可点击和不可点击元素差异化。

平面设计自从2012年左右开始流行以来，已经影响了整个网络的视觉设计口味。现在到处都是平面设计——苹果、亚马逊、微软，甚至ibm都是平面设计。这已经不再是一个简单的网页设计趋势。

特别是当平面设计与战略极简主义结合时，可以成为一个强有力的美学工具。它可以传达一种奢侈或时尚的感觉，在某些情况下，它还可以吸引青年使用者。这种轻量级用户界面，可以更容易地支持各种设备的大小。

然而，平面设计有一个主要的缺陷：它经常导致点击不确定性并降低用户效率。当设计人员将用户界面平面化时，他们通常会删除大量平时指示用户点击何处的指示符。但是平板电脑并不一定会失败——利用以下的策略来确保你的用户不会成为错误平板电脑设计的受害者。

您是否完全适合平面设计？

在你追随平面设计的潮流之前，考虑一下这种风格是否最适合你的组织目标。有几个因素会影响你的潜在成功率：

内容少和简单的信息架构：超平面设计往往更适合非常小的网站（1-10页）。

交互性低和特性不复杂的：复杂的应用程序或带有不同寻常的交互模式的接口，如果它们完全压缩用户界面，就会错过引导用户的机会。

回访率较高的：用户回访率经常都较高的网址，加入平面设计的元素会更成功。在这种情况下，用户最终更有可能学会交互式路径，而不是严重依赖指示符。

技术性专家用户：如果您的用户都是高级用户（例如，设计师或开发人员，或拥有使用其他平面设计的丰富经验），他们将比广大消费者更有能力理解平面设计。

即使您的组织的特性符合以上条件，我们也通常建议在大多数情况下不要使用完全扁平化框架。在某些情况下，完全平面的设计不会有太大的坏处，比如设计师的投资组合或者非常简单的营销网站。这类型的网站不仅可以受益于平面设计中酷酷的元素，同时又不会失去太多可用性——因为首先这些平面设计在网站中并没有起很大“用途”。

这个网站的唯一目的是推销一个生产中的应用。像这种非常简单的网页可以通过采用平面设计而受益（虽然不是完全的平面设计，这得益于截图背后的阴影）。

大多数数字产品比单一页面的推销网站复杂得多。因为对于这些界面，我们建议使用半光或平面2.0美学版本代替，这是一种看起来很像平面设计的风格演变，但其融合了微妙的阴影，亮点，和层次，以创造一些深度的用户界面。

最后要注意的一点是：平面设计看起来简单并不意味着它们更容易设计。把平面设计拉到任何的角度，从超平面到平面2.0，都需要有才华的视觉设计师。

避免点击不确定性的策略

如果你很确定某一个平面设计很适合你的产品，请仔细考虑如何传达每个交互元素（链接，按钮，表单域，滑块等）的可点击性。

当用户不确定某一样东西是否可点击或者敲下鼠标时，他们会通过在元素表面移动鼠标来试探。在这张来自视野追踪的屏幕截图中，用户是根据光标的微妙变化和菜单选项的背景颜色来决定她可以点击哪里。（红点表示固定。）悬停触发该元素的视觉设计变更，或光标形状的变化（例如，为手）表明可点击元素的的线索。不幸的是，这种可点击信号弱，需要相互影响作用实现；因此，他们有效地降低目标被发现的可能性。

切勿对静态文本和链接文本使用相同的视觉处理，不要对主动按钮和静态标题使用相同的颜色，用你的视觉设计作为你网站上客户是否可以点击的线索，一致性至关重要。

按照我们建议，给文本、按钮、图像、图形、标签和图标添加点击信号：

•    确保你的按钮大致看起来像物理按钮。

•    避免隐隐约约的一点按钮-薄矩形轮廓的文本。

•    确保小图标在点击时会放大。

•    在链接中使用标准的、可识别的图标。除了少数例外，这些图标应该与标签文本配对。

•    如果你的标签没有阴影，那就好了，只要确保你遵循了我们关于标签设计的其他建议。

尽可能使用传统的布局和标准的UI模式。一个标准的布局，用户会很快地理解每个元素的目的-哪怕没有常见的强力的信号。通过把网站的每一部分突出化和易理解化，将标准布局干净的视觉设计和充足的留白结合起来益处更大。

Teavana.com：这张情节视觉跟踪的研究凝视图表明用户的访问Teavana.com前几秒。（红点表示固定。）因为Teavana使用了一个具有相对传统的电子商务布局特点的简单的视觉设计，尽管它的视觉美感非常单调，但用户没有问题。图中顶部导航栏的空白和预期位置可以帮助用户快速识别其目的。

注意对比：确保你的文字和内容清晰易读。浅灰色叠加在深灰色是一种流行的平面设计方法，但它很少奏效。另外，在文本下方使用背景图像时要小心。

sabemasson.com：以我们经验看来，主要行动按钮出现在首页已经非常微妙了（并且这个按钮措辞不当），但与这个大背景的图片相对比，就看不见了。这种设计可以很容易地通过重度着色来改进，比如UI中已经使用的浅蓝色的较深的变体。

加上一定深度。平面设计并不是一定要完全充斥着平面设计元素。添加一些微妙的3D阴影或分层效果来区分元素之间的关系。

谷歌的Material Design，自2014以来，就一直在尝试这个概念，非常令人钦佩。Material Design的最好的一点在于，它定义了一个经过仔细考虑的具有具体规则、行为和视觉特性的框架。然而，材料设计并不总是正确地执行，由于阴影和层次通常被用以提升美感，而不是实现用户的心理模型和建造信号的原因。你不是非要从Material Design中受益，你可以创造属于你自己的具有semi3d属性的设计语言。

LiquidText：这个IOS系统中平面化注释的应用程序,互动元素和顶部工具栏下方使用了微妙的阴影下，从而将那些UI元素从文本分开。

有疑问时，把它勾出来。当用户可以合理地假定某件食物是链接的情况下时，通常这个事物就是一个链接。例如，如果链接有一些描述性文本、标题和缩略图像一起呈现，那么所有这些相关元素都应该链接到相同的页面。

nrdc.org：在我们优先考虑的概述中，用户必须悬停在缩略图上以显示文本和链接。在这种情况下，就将所有相关元素创造成链接。

结论：

平面设计在使用正确的情况下，是一个非常流行并且强大的设计美学。记住，单击不确定性不仅仅是试图完成任务的用户所面临的一个问题，也意味着他们可能会错过那些有助于实现业务目标的重要行动。永远不要牺牲可用性来满足特定的设计美学，并始终与用户一起测试，以确保他们理解您的用户界面。

复查此检查表上的任何平面UI以检查其可用性：

•    点击线索始终遍及网站。

•    链接元素显著，有适当的对比，能被察觉。

•    连接元素位于用户心理所期望的位置。

•    没有让人转移注意力的目标物，看起来可以点击实际却不能点击的错误目标。

•    所有与同一个内容相关的元素（图标、图像、文字）链接指向同一个页面。

原文作者：KATE MEYER

原文链接：https://www.nngroup.com/articles/flat-design-best-practices/