扁平化设计与可访问性

神飞 发表于 17. Feb, 2013, 分类: Tips , 2 条评论 ?

标签：扁平化 & 拟物化 & 设计

译自：Flat Design and Accessibility

原文：扁平化设计与可访问性

请尊重版权，转载请注明来源，谢谢??

这几年互联网变化好多，我们在网上浏览的方式也一样。在本文中，我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。

扁平化元素

拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状，因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而，对视障用户能有多少用户呢？坚持这种设计方法对他们会有价值吗？好吧，和拟物化设计相对应的，扁平化设计，有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状，比如，正规/不正规的多边形，它们更容易识别。

在上图中，左边的，扁平化设计展示了方形/矩形元素和高对比色的按钮。而右侧的拟物化计算器，使用了低对比色和大量的立体和阴影元素。

扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。另一方面，拟物化设计通过给予按钮更大的重要性而使得它们很突出，而内容却因为低对比度而不太醒目了。

上面的例子展示了扁平化设计如何提升和给予内容更大的重要性，从而能证明对视障用户是有帮助的。

大字体和小图标

不只是在扁平化设计中，极简主义设计也一样，大字体元素是最重要的一种表现。字体能让用户聚焦在内容，从而成为设计流程中最重要的一部分。当前设计中的趋势包括高对比色的大字体、清晰的自定义字体和平衡的段落的使用——基本上就是，把传统印刷排版带到Web中来。这些原则增强了易读性和可读性，提高了易用性的另一个方面。毕竟，高对比色的自定义字体能提升可访问性是一个众所周知的事实。

这里的共用元素是使用大而清晰的高对比色字体增强可读性(比较像Sans-Serifs)

此外，清晰的大字体可用于基本元素中以创建Web和UI中强对比色的按钮，从而帮助用户轻易地识别指定元素的功能并将之与别的元素区分开来。说道元素，这些扁平化的元素在设计过程中变得真的很重要，因为它们有助于给于扁平化设计流程个性和强度，从而构建更好的所有按钮和界面元素的表现、可见性和清晰性。

基本形状、实色和简单的图标组成了这个优秀的iPhone皮肤的一部分，它展示了最好的扁平化UI元素。

实色与高对比色

到现在为止，我们讨论了应用于大字体和图标的高对比色。现在，让我们看下细节方面。在网页设计中使用高对比色不是一个新的理念。事实上，多年来，高对比色被用于为网页设计中特定的关键元素提供更好的视觉效果。

网上由很多出色的教程和工具来帮助你创建精确的色彩组合。比如，Color Scheme Designer向你展示单色、双色、三色、四色、以此类推的色盘，并让你更多了解某个特定颜色如何与别的颜色相互影响。

Color Scheme Designer, 一个很赞的工具，可以查看颜色混合时的表现，然后用其结果作为创建高对比色的扁平化设计的参考。

同时，高对比色也可以被用于颜色之外，比如形状、分派、高度、线性、纹理和字的粗细。事实上，玩转这些所有元素及其相应的对比度能提升你的设计的表现，并使你的设计让视弱的人更易用。

高对比色网站及其灰度实例

这里是一些高对比色网站及其灰度版本，有的做了负反转，展示出漂亮的设计是如何天然的兼容了可用性和易用性理念的。

bigtop.it. 使用了大的字体和元素，暖色和温和的颜色之间的软对比。他们定义的对比度恰到好处。

aaugh.it 极简主义带来的简易的优势和适度的对比度

cheesesurvivalkit.com 有个漂亮的灰、白、红三色，提供了强对比度并提升了可读性和元素识别度。

metaphiziks.com 很完美的提升了内容显示。

Symb.ly是一个使用了极简样式来让你专注于内容的高对比度网站。

Odopod.com展示了一个漂亮的使用了粉色、白色和高规格图片的温和的对比色。当转换到灰度版本，所有元素都完全可识别。

unfold.no 是一个使用了高雅、简单设计和清晰内容的网站。

作者: 神飞

爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter@qianduan。