扁平化设计可用性检查清单

摘要：扁平化设计经常会遇到可用性问题，使可点击元素和不可点击元素始终保持明显的区别，就避免负面影响。

关键词：扁平化设计，可用性，交互设计，视觉设计

扁平化设计从2012年开始流行，已经影响了整个网络世界视觉设计的品味。扁平化设计无处不在-Apple，Amazon，Microsoft甚至IBM都采用了扁平化设计。

扁平化设计与极简主义结合使用，成为强大的美学工具。它可以传达豪华或新潮的感觉，吸引年轻用户。它是轻量级的UI，可以更轻松地支持各种智能设备。

扁平化设计有一个主要缺陷：会导致点击不确定性并降低用户效率。利用以下策略可以避免扁平化设计的负面影响。

扁平化设计适合你吗？

在采用扁平化设计之前，请考虑这种风格是否适合公司的目标。以下几个因素可能会产生影响：

• 内容少，信息结构简单：扁平化设计在小型网站（1-10页）上可以更好地工作。
• 交互性低且没有复杂功能：复杂应用程序或界面，如果完全使用扁平化设计，将会错过指导用户的机会。
• 忠诚用户比例高：用户频繁访问的站点将在扁平化设计方面取得更大的成功。在这些情况下，用户更有可能学习交互式路径，而不是依赖指示符号。
• 技术专家型目标用户：如果用户都是高级用户（例如，设计师或开发人员），则与广泛的用户群体相比，他们将更有能力理解扁平化设计。

在大多数情况下，我们也建议不要完全使用扁平化设计。

focuslist.co：该站点推销生产力工具。像这样简单的网站可以从扁平化设计中受益（由于截图后面的阴影，这种设计并非完全扁平化）。

大多数数字产品比单页营销站点要复杂得多。对于这些界面，我们建议改用半扁平或扁平2.0美学效果：看起来很像扁平化设计，但结合了微妙的阴影，高光和图层，可以在界面中创建一些深度效果。

扁平化设计看起来简单，并不一定意味着它们更容易设计。任何视觉设计，都需要有才华的视觉设计师。

避免点击不确定性

如果决定采用扁平化设计，请仔细考虑如何传达每个交互式元素（链接，按钮，表单域，滑块等）的可点击性。

kentuckyderby.com：当用户不确定某个元素是否可点击时，他们会通过鼠标悬停在元素上进行检查。不幸的是，这种可点击性指示符很弱并且需要交互操作。

切勿对静态文本和链接文本使用相同的视觉处理。

操作按钮和静态标题不要使用相同的颜色。使用视觉设计来引导用户了解网站上可点击的元素，一致性至关重要。

提高交互元素的可点击性：

• 确保按钮隐约看起来像物理按钮。
• 避免使用空心按钮-带有矩形轮廓的文本。
• 确保较小的项目在单击时会放大。
• 在链接中使用可识别的标准图标。除少数例外，这些图标应该与标签文本配对。
• 如果标签没有阴影，那很好，只需确保遵循我们针对标签设计的其余建议即可。

尽可能使用传统布局和标准UI模式。使用标准布局，即使没有传统和强有力的指示符，用户也可以轻松理解每个元素的目的。将标准布局与干净的视觉设计和充足的空白空间相结合，可以使站点的每个部分更加突出和易于理解，从而提供更大的帮助。

teavana.com：Teavana使用简单的视觉设计和相对传统的电子商务布局，因此尽管视觉设计扁平化，但用户在导航时没有遇到问题。顶部导航栏的空白和预期位置都可以帮助用户快速识别其用途。

注意对比。

确保文字和元素清晰易读。浅灰色加深灰色是用于扁平化设计的一种流行方法，但效果不佳。另外，背景图片上加文本时要小心。

sabemasson.com：主页上的操作按钮OUR EXPERTISE非常微妙，在这张照片上却”消失”了。通过增强颜色对比可以改进此设计。

重新加深。

扁平化不意味着完全扁平化。添加一些微妙的3D阴影或分层效果，以阐明元素之间的关系。

Google Material Design在这一概念上表现出色。

LiquidText：适用于iOS的注释应用程序在交互元素和顶部工具栏使用微妙的阴影将UI元素与文本分开。

添加链接。

用户可能认为某些元素是链接的情况下，应该加上链接。如果链接有一起显示的描述性文本，标题和缩略图，则所有这些相关元素都应该添加链接。

nrdc.org：用户必须将鼠标悬停在缩略图上才能显示文本和链接。但实际上只有小箭头图标有链接。这种情况下，请为所有相关元素添加链接。

结论

正确使用扁平化设计是一种流行且强大的设计美学。请记住，点击不确定性不仅是用户的问题，还意味着他们容易错过某些重要操作。切勿牺牲可用性以适应特定的设计美学，并始终进行用户测试以确保他们了解产品UI。

扁平化设计可用性检查清单

• 可点击性元素视觉设计在整个网站上都是一致的。
• 链接元素很明显，具有适当的颜色对比，并且引人注目。
• 链接元素位于用户期望的位置。
• 没有看起来可点击但不是的错误元素。
• 与同一内容（图标，图像，文本）相关联的所有元素都被链接并指向同一页面。
• 只要在点击和生成的操作之间存在响应时间差，就要提供反馈。