说到界面设计中的平面设计，主流感受是积极的，似乎很少有人提出任何问题。扁平风格体现了这个简约时代的潮流美学，但它真的能为用户体验带来价值吗？盲目追求平整度会对可用性产生负面影响吗？

视觉风格可能会对可用性产生意想不到的影响。这是我长期以来的态度。先前有争议的无框架界面也是由此衍生出来的。前段时间，我看到了一个关于尼尔森诺曼集团的相对可信的实验研究，结果证明了我的观点。

　Kate Meyer 的眼动实验

该实验将真实代购源码网站的页面转换为增强版（非展平版）和轻量版（展平版）。相对于轻量级版本，增强的页面用户使用更强大，更深的视觉样式来强调交互式元素（按钮，连接，选项卡和滑块）。

例如，以下两个页面是酒店代购源码网站的增强版本和轻量级版本：

△增强版

△轻量级版

包括上面的例子，实验共选择了九个相对较好的代购源码网站（不是特别突出或特别糟糕的设计），涉及六个行业：电子商务（书籍，太阳镜和珠宝销售），非营利性代购源码网站，酒店，旅游（汽车租赁和航班查询），技术和金融。

每个代购源码网站都有一个合适的实验任务，以便用户在执行任务时可以观察用户的行为。例如，酒店代购源码网站的任务描述如下：

您将看到一个酒店代购源码网站。如果您想预订房间，请告知我们您决定点击的位置。

所有代购源码网站上的图片和任务信息都太多，所以不在这里。有兴趣的人可以去这里。

共有71名普通网络用户参与了实验，并要求他们每个人提供所有9个代购源码网站（随机选择两个版本中的一个）完成相应的任务。

实验非常快。用户首先读取任务，然后扫描他们看到的页面，并查看他们想要单击的目标。他们说“我找到了”，一组实验在这里结束。

记录用户找到目标所需的时间和在该过程中记录的目标（后者使用眼动仪）。

　实验结果

统计发现了两个关键点：

使用轻量级版本的用户比使用增强版本花费的时间多22％。

使用轻量级版本的用户比增强版本具有多25％的线焦点（原始单词是Fixation，这意味着当用户看到页面上的兴趣点时，就会产生凝视）。

这两个关键点意味着轻量/平面设计允许用户花更多时间在页面上查找目标并查看更多元素来查找目标。

这是一个非常明确的实验目标。参与者不会觉得页面看起来很好并且停止了。因此，花费更多时间和观察更多事物并不代表“身临其境的体验”，而是在流程之后寻求更多的努力和不确定性。

　扁平化的问题在哪?

　　一.弱化了信息结构

在扁平化出现之前，我们有各种方法来描述信息之间的层次关系。在扁平化之后，这些手段被视为“过度装饰”。简单地追求极简主义并平等对待所有元素，这反过来又为用户带来了更大的理解负担。

下面的汽车租赁代购源码网站的视觉热点地图可以让你感觉到明显的区别。视线的增强版本明显少于轻量级版本，这意味着用户在最终找到任务目标之前会在页面的轻量级版本上查看很多地方。

△左是增强版，右边是轻量版

它们之间有什么区别？与下图中的两个页面相比，您会发现增强版与轻量版相比的主要功能是：

界面之间的层次用阴影强调：表格卡，背景图像和右边列表之间的关系;表格卡顶部的标签状态。

强调渐变界面的重要元素：导航，按钮和文本框。

您会发现展平会使页面看起来更清晰，但却更难理解。

△是增强版，底部是轻量版

　二.省略了点击暗示

从历史上看，下拉框/突出显示颜色几乎是文本链接的必备条件。后来，随着文本链接的使用变得越来越普遍和广泛，许多界面开始放弃特殊样式，使得文本链接看起来与普通文本的差别越来越小。

在平坦度上升之后，这种趋势已经加剧，有时甚至在特殊样式中也省略了关键文本链接。如果它是百科全书代购源码网站中的名词链接，那么轻松地做它可以真正提高可读性。但是，如果它在读取信息之外，则对文本链接的功能更为关键，在删除特殊样式后，可能会使用户认为不可能。

以下珠宝销售代购源码网站视线的最大区别在于底部两条视线的对比。

△左是增强版，右边是轻量版

下图是视线焦点差别很大的区域的界面比较。

△左是增强版，右边是轻量版

此界面的任务是查找有关珍珠的信息，也就是说，用户的任务目标是上面段落底部的文本链接。

问题即将来临。从视线图的轻量级版本中，您可以看到用户长时间阅读“珍珠”的标题，以及花在真实任务目标上的时间，底部的文本链接。时间不长。

平面样式使整个页面的视觉风格更加均匀和谐，但如果您不小心提示，可能会省略。用户可能需要观察更多次，并且使用鼠标悬停效果来确定标题的位置以及点击区域的位置。

　扁平化就一定不好吗?

上述实验的结果是大多数增强版本比轻量版本更有用，除了以下页面（左侧的增强版本和右侧的轻量级版本）。两个接口之间的主要区别仅在于文本链接的颜色和下划线。

但毕竟这个实验是有限的。我认为扁平化并不一定是坏事。

扁平化的定义

作为一种视觉设计理念，平面设计非常模糊和明智，没有范围或限制。这个想法的想法通常是识别一些漂亮的图片，没有阴影，水平和额外的装饰。每个人都感觉很好看，并且对平整度有很好的印象。

甚至无法准确解释的对象显然不可能被完全拒绝。所以我不想说扁平化不好，但对于这个模糊的方向，我们必须抓住重要性，避免压倒性的压倒性。

△来源Jakub Antalí k

　　一.半扁平风格

任何事都太糟糕了。许多优秀的设计虽然通常是扁平的，但并不是纯粹的平面。我将首先称它们为“半平面”（参考：平面设计:它的起源，它的问题，以及为什么平面2.0对用户更好）。

这不是一种新的风格，比如很久以前你必须看到的以下图标。

尽管大厂品牌的设计在趋势中趋于平缓，但大多数并不是市场上常见的扁平款式。

例如，iOS经历了突然的风格变化，没有非纯平面风格的磨砂玻璃和大阴影。

另一个例子是Google的材料设计关键功能是使用真实世界的阴影材料分层。

Apple和Google的设计师清楚地知道时尚趋势是什么样的，但在可用性和时尚趋势之间，他们不仅仅是跟风或者闭门造车。

　二.可用性的关键仍是交互

理想情况下，交互式样式确定界面是否良好，视觉样式决定界面是否良好。但现实世界非常复杂，在许多情况下，视觉风格对交互式风格有影响。

展平只是一种视觉趋势，对界面可用性的最大影响应该是交互式解决方案。然而，一些设计将被过度扁平化，盲目地学习一些非常理想化的扁平化范例，这将对可用性产生影响。

但总的来说，对可用性的最直接影响是交互设计。因此要确保页面的设计不要过度扁平化，首先要在交互式设计阶段打下基础，然后在视觉设计阶段掌握测量。

　总结

扁平化作为样式没有问题，但任何样式用法都是一个问题。面对如此模糊的设计理念，设计师应该仔细观察，分别冷静地对待视觉效果和可用性。

« Axure案例分析：Ant Manor Star Ball Auto Sparring | 完成301重定向到discuz系统代购源码网站，完成全站点域名的完美替换操作 »