数组的方法.flat_Flat 2.0及其解决平面设计可用性问题的方法

自1950年代开发国际印刷风格以来，就一直存在平面设计 。 自从Microsoft推出新的以几何和版式为重点的Metro设计语言以来，它在最近已经广受欢迎，首先是在2010年的新Windows Phone中，然后是2012年的Windows 8中。

平面设计的特点是缺乏三维效果和光泽的视觉元素 ，以实现清洁，简约和清晰 。 它违反了以前的主要设计风格，即拟态 ，这种形式利用闪亮的按钮和插图模仿真实的3D对象。

平面设计的主要目的是简化网站，提高对内容的关注度，提供更直观的交互以及提供更快，更实用的用户体验。 使用其简单的类似盒状元素和基于网格的布局进行响应式设计也很容易。

平面设计的可用性问题

平面设计为我们提供了巨大的帮助和强大的工具包，可以为用户提供快速，整洁的网站，但它可能会导致某些可用性问题，尤其是在过度使用时。

没有可点击性的视觉指示符

如果我们使用三维效果，自然会给我们的设计带来深度错觉。 这可以帮助用户快速找到交互式元素 ，这些元素可以单击（如按钮和图标），也可以填充（如表单字段）。 平面设计的主要问题之一是，它使用户难以识别可点击元素 。

在扁平时代之前，Web设计师通常通过使用诸如渐变，纹理，凸起的边缘或阴影之类的视觉解决方案来表示可单击性，以使按钮和其他可单击对象看起来像可以被按下。

平面设计缺少这些视觉指示符，必须使用更小的工​​具集来解决同一任务： 颜色，形状，接近度和上下文元素 。

为什么这是一个问题？ 让我们尝试一个实验。

请看下面的屏幕截图。 尝试根据此屏幕截图猜测哪些元素是可单击的。 那些不是您首先想到的。 我们可以在网上找到许多其他类似的可用性问题。

由于没有Z轴，降低了可发现性

现实生活中的人们发现物体并在三个维度上移动：x轴，y轴和z轴。 当他们遇到没有3D效果的简约设计的平面网站时，他们会获得与以往不同的体验，这是他们最熟悉的体验。

这意味着他们需要花费更多的精力来发现对象之间的关系 ，并了解站点的视觉层次结构 。 例如，我们需要在Microsoft开发人员网络的主页上花费更多的时间，以可视化方式解码信息以及网站上不同元素的用途。

UX设计的经验法则是始终尝试最小化用户的认知负担 ，以最大程度地提高可用性。 正如我们在很多情况下看到的那样，这在平面设计中并不总是会发生。

信息密度低

UX专家Nielsen-Norman Group也批评平面设计冒着信息密度低的风险。

在对Windows 8可用性的批评中 ，他们使用Windows Store应用程序的示例以及《洛杉矶时报》的网站来展示信息密度低的问题（初始屏幕上的故事很少，标题没有摘要，几乎无法识别的分组等） 。）可能从可用性的角度引起。

从另一方面来看，更少的信息也可以看作是消除干扰，使用户仅专注于重要的事情，但是如果简约主义被过分使用，则很容易牺牲网站的主要目标，即将信息转换为观看者。

Flat 2.0的兴起

随着越来越多的设计师认识到平面设计在可用性方面的缺陷，出现了一个新的，更成熟的版本，称为“ Flat 2.0”或“ Almost Flat”设计。 从拟态到扁平化的变化是巨大的，而扁平化设计的演变却难以捉摸。

新样式仍然是扁平的，但是它以微妙的阴影，高光和 图层的形式为设计增加了三个维度 。 Flat 2.0（如果使用得当的话）可以通过带点真实感（拟态化）并增加一些深度和细节来解决上述可用性问题，同时保留诸如简化网站，清晰性和缩短页面加载时间之类的极简主义的优势。

材料设计

Google称为Material Design的新设计语言可能是Flat 2.0风格中最著名的示例。 Google于2014年发布了Android L的Material Design。虽然Material Design保留了平面设计的主要特征，但它使用物理学中的某些隐喻来帮助用户快速找到现实世界与数字世界之间的类比。

Material Design使用z轴，为设计提供了细微的深度 ，并通过使用阴影和动画 将它们分开来巧妙地利用了图层。 Google对它的工作方式有一个很酷的描述 ，值得阅读以了解其主要原理和规则。

结论

优秀的设计师始终致力于改善用户体验，因此Web设计行业正在不断变化。 平面设计已Swift取代了拟态，从而导致基于网格的，简约的布局和简单化的元素最近淹没了Web（这引起了一些关于Web设计变得枯燥甚至死亡的讨论，但这离事实还很遥远） 。

Flat 2.0给出了平面设计的感知问题的答案 。 这是功能，美观性和可用性之间的明智折衷。 当然，我们不需要在所有地方都使用Material UI工具包 ，但是了解其背后的原理可以为我们提供如何根据用户体验设计的最新发现发展自己的风格的扎实背景。

翻译自: https://www.hongkiat.com/blog/flat-20/