扁平化设计最佳实践

扁平化设计最佳实践

扁平化设计算是秉承了极简主义理念的至亲了 – 由于它将简洁的思想融入至全部元素的设计。然而，要达成简洁的扁平化设计依旧困难 – 即须要咱们以相同的设计理念为目的，并创造出一套连贯的视觉与功能体验。

让咱们来了解下，你可以经过扁平化设计为用户作些什么呢？

隐形设计

删除没必要要的样式

练习“隐形设计”最好的方式是作出不抢用户注意力的设计创意。由于若是用户每次都将注意力花费在你的设计上，势必会减小他们沉浸在产品中的体验。而你的目标则是要帮助用户快速、轻松、准确地了解相应的操做与信息。因此，你的设计应该从视觉元素中剥离出来，并能暴露出产品的基本功能。

Dropbox 网站的扁平化设计仅聚焦于内容

充满活力的配色

配色是影响扁平化设计的主要因素

配色是扁平化设计的核心 —— 它能够诠释你的网站页面以及 APP 视图的总体感受。

示例：Rovane Durso

小贴士：

• 这是一个不错的材料设计和扁平化 UI 配色指南。

当你选择扁平化配色方案时，扁平化 UI 配色网可以为你提供一个很棒的配色场所。

• 建议你使用柔和不饱和的色调。由于它们更倾向为你的页面增添艺术美感，而不会因为页面过亮，让读者出现视觉疲劳。

柔和的配色会带给你视觉上的愉悦，而且不会抢页面中主要信息的注意力。示例：thehypeagency

• 针对柔和的背景，明亮的色彩能够起到突显的做用。请注意，在如下示例中，咱们将展现如何使用色彩突显，营造出图像从页面弹出的效果。

在深色的背景中，明亮色彩的图片可以起到引人注目的效果。示例：triplagent

• 确保 UI 中色彩的可接受性是实施良好视觉设计的一个很是重要的方面。测一测你的调色板，确保你有足够的色彩对比。

注重字体排印

聚焦美学

字体能够告诉用户在页面中什么是最重要的，同时能让你的设计具有更好的体验。排版也应当尽可能简约，由于它能让页面更快地加载，易于用户阅读。极简主义则更是如此。

简单的字体传达出自信和明晰。示例：Cienne

小贴士：

• 能够考虑在拥有多变的简单无衬线字体系列中，以及主要字体排印的网站上使用扁平化设计。
• 字体的调性应与总体设计方案相匹配。而针对简单的设计，高度美化的字体可能看上去会有些奇怪。

动效

动效使扁平化设计更以用户为中心

动效可以良好的搭配扁平化的简洁视觉效果。当用户在你的网站或 APP 中进行交互时，他们可能会提出如下问题：

• 这里什么是最重要的？
• 我该如何了解接下来要作什么？
• 我该如何得知我已经完成了相应的任务？

像这样的问题，可能会提醒你是时候使用动效来加强用户体验了。而动效可以更好的感知用户体验并回答这些问题：

• 它可以吸引用户的注意力并告知用户，若是他/她完成了点击/手势后会发生什么。
• 它能够帮助你在界面中定位用户，并在视图间提供重点的引导。
• 它提供了视觉反馈。

你能够经过过渡、动画，乃至 3D 的纹理深度等多重形式来了解基于动效设计的相关元素。

动效使咱们可以更好的互动交流，同时让用户更易于理解。示例：Anish Chandran

插图

插图让扁平化设计的理念得以更广阔的延伸

随着扁平化设计风格逐步的分层，天然而然更多的插图形态可以融入其中。

图片比文字更具备说服力，并让体验更加的顺畅。

因为插图更易于让用户理解，合理的制做即可达到信息有效传递的效果。

Intercom 网站使用了信息化插图的形式进行展现，它会引导你聚焦到重要的信息上，而不会让你忽略它。

扁平化设计 2.0

交互体验应当更加直观，而且不须要任何额外的解释

当你设计的扁平化 UI 是互动元素时，你将会面临一个重要的问题。即用户须要知道页面中的哪些区域是纯静态内容，而哪些区域是可点击的。目前，设计师们已经开始意识到这个问题。所以，扁平化设计 2.0 的出现即是对扁平化设计的更成熟、均衡的解释。

扁平化设计 2.0 采起了极简主义最佳的方面，并可与拟物化设计共同工做。

扁平化设计 2.0 使用细微的阴影和边缘效应来暗示产品中的可交互性。在界面上，阴影和渐变效果告诉了用户哪些能够点击，而哪些则不能。因此，用户得以更好的理解。

用户更容易经过阴影效果来了解元素的层次结构。示例：Google

在如下的示例中，你能够看到，如何在 CTA 按钮的边缘巧妙地利用细阴影来增长按钮凸起的效果。

Sripe 主页上的主要与次要 CTA 按钮都是针对背景页而制做的。

因为扁平化设计的关键属性使网站变得实用，而且美观大方。它让咱们能更加贴近数字化设计的新模式，而其中的功能性与艺术感又能笙磬同音。

感谢你的阅读，若是以为文章不错，不妨点个赞。

注：

1. 本文版权归原做者全部，仅用于学习与交流。
2. 如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：Best Practices for Flat Design
做者：Nick Babich
译者：IT程序狮
译文地址：https://zhuanlan.zhihu.com/p/25070599