17/01/21

如何做好扁平化设计


扁平化设计可以看作是极简设计的远亲——所有的设计元素服从于简单的理念。然而,简单的扁平化设计并不容易——须牢记于心,所有事都应服从于同一个目标,即创造紧密结合的视觉和功能设计。

让我们看如何让扁平化设计能更好地服从于你的用户。

看不见的设计

移除不必要的设计

看不见的设计是更好的尝试——让用户不注意到你所设计的设计。因为每时每刻需要花费注意力的设计,会将用户从沉浸式的体验中带离。你的目标是帮助用户更快更便捷地理解特有的动效和消息。因此,你的设计应该将视觉元素尽可能剔除,以展现核心的功能。


Dropbox的扁平页面设计聚焦于内容

生动的颜色

色彩是扁平化设计效果的主要组成部分

色彩是扁平化设计最大的组成部分——它奠定了你的网站页面或应用界面的感觉。扁平化设计的色彩常常比其他那些应用和网站更明亮。


图像来源:Rovane Durso

建议:

  • Material Design和Flat UI Colors为选择色彩提供了一个很好的指导。

    在选择你的扁平化色彩组合时,可以从使用Flat UI Colors开始
  • 使用那些稍微低饱和度的颜色会更好,因为它们会给页面增添一种美感,还不会让你的用户因为页面太过明亮而刺伤眼睛。

    柔和的色彩让你的页面元素更加可人,并且不会喧宾夺主 图像来源: thehypeagency
  • 明亮的颜色可以用作背景之上的强调色。注意下面这个例子中明亮的颜色是如何让意象从页面里跃然而上的。

    暗色背景之上的明亮色彩的图片能给创造出一种引人注目的印象 图像来源: triplagent
  • 确信你的界面元素的颜色对于你的用户来说是所执行的视觉设计真正重要的组成部分。 测试你的色彩 ,以确定有足够的对比度。

注意排版

为专注的美感而设计

排版应该告诉用户,什么是页面上最重要的元素,如何使用设计。最好使用简单的排版,因为它便与阅读和加载,而不是仅仅为了极简设计的风格。


简洁的字体传递信任和明晰 图像来源: Cienne

建议:

  • 考虑在扁平化设计网站的排版上使用一种富于变化和具有多种字重的简洁的字体家族。这个字体家族带来一种干净、新鲜和现代的感觉。
  • 字体的风格要和整体设计的风格相匹配。高度装饰化的字体在一个简洁的设计上会显得很奇怪。

使用动效

动效让扁平化设计显得更加以用户为中心

扁平化的视觉和动效相配合,会有更好的效果。当用户使用你的应用或访问你的网站时,他们可能会有以下的疑问:

  • “这儿最重要的是什么?”
  • “我怎么知道接下来我该做什么?”
  • “我如何知道我已经完成了操作?”

这样的问题可能会揭示使用动效来增强体验的机会。动效使交互设计完善,并且是以下问题的答案:

  • 它抓住用户的注意力,暗示用户当完成点击/操作会发生什么。
  • 它在交互界面中为你的用户指示方向,告诉用户应该关注页面中的哪一个地方。
  • 它提供一个视觉反馈。

基于动效的设计可以看作一系列元素的组合,包括转换、动作甚至通过纹理模拟三维深度。


动效帮助我们更好地和界面交互,让用户更容易理解 图像来源: Anish Chandran

使用插画

插画是扁平化设计很好的扩展

随着扁平化设计风格越来越分层,它自然地就能和插画配合得很好。

图像相比文字传达能力更强,体验更快速

Properly-created 的插画将概念变成易于理解的视觉图像,能更好地传达清晰的信息。


* Intercom 使用传达信息的插画让用户聚焦于重要的信息而不是跳过它*

Flat 2.0 设计

好的交互设计不需要额外的解释就能符合用户的直觉

当你设计扁平化界面的时候最大的困难可能就是交互元素了。用户需要知道页面上哪些区域是静态的内容,哪些区域是可以点击的。最近,设计师越来越意识到这个问题的重要性。结果,一个更成熟、更平衡的扁平化设计出现了——Flat 2.0设计:

Flat 2.0设计吸取了极简主义和拟物设计的优点

Flat 2.0设计使用细微的阴影和边界效果对交互进行暗示。阴影和渐变提供了必要的线索,告诉用户界面上哪些地方可以点击,哪些地方不可以。结果,用户的理解能力提高了。


阴影让用户知道元素的层级:它们帮助用户在一些情形下区分两个不同的物件,明白物品的上下层级关系 图像来源:Google

在下面的例子中,你可以看到如何在CTA按钮的边上使用微妙的阴影来将它凸显出来。


Scripe主页上的第一和第二优先级的按钮都在背景中凸显出来

结论

扁平化设计具有让页面变得功能性和美观性俱存的重要特征。它给我们带来了更进一步的数字设计的新范例,让功能性和美观性变得如此协调。

P.S. 如果你想知道更多关于扁平化设计的信息,我建议可以阅读这篇文章:Flat Design. History, Benefits and Practice,大量精彩的插画,尽情享用吧!

原文信息: Best Practices for Flat Design by Nick Babich

相关文章

评论 (0)

还没有任何评论

发表评论 Leave a comment :