扁平化设计最佳实践

过节期间翻译的一篇文章。UI设计教程UI表面上看是用户与界面两个组成部分,但实际上还包括用户与界面之间的交互关系。在文中,我们将了解你能够通过扁平化设计为用户做些什么,并了解扁平化设计 2.0. 希望对大家有所帮助。

扁平化设计(Design)最佳实践
扁平化设计算是秉承了极简主义理念的至亲了 – 因为它将简洁的思想融入至所有元素的设计。然而,要达成简洁的扁平化设计依旧困难 – 即需要我们以相同的设计理念为目的,并创造出一套连贯的视觉与功能体验。
让我们来了解下,你能够通过扁平化设计(Design)为用户做些什么呢?
隐形设计
删除不必要的样式
练习“隐形设计”最好的方式是做出不抢用户注意力的设计创意(originality)。因为如果用户每次都将注意力花费在你的设计上,势必会减少他们沉浸在产品中的体验。而你的目标则是要帮助用户快速、轻松、准确地了解相应的操作(operate)与信息。所以,你的设计应该从视觉元素中剥离出来,并能暴露出产品的基本功能。
Dropbox 网站的扁平化设计(Design)仅聚焦于内容
充满活力的配色
配色是影响扁平化设计(Design)的主要因素(factor)
配色是扁平化设计的核心(core) —— 它可以诠释你的网站页面以及 APP 视图的整体感觉。
示例:Rovane Durso
小贴士:
◆这是一个不错的材料设计(Design)和扁平化 UI 配色指南。移动端UI设计不单单从事美术绘画,更需要对软件使用者、使用环境、使用方式进行定位,并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计,他们需要完成的,简单说来,正是一个不断为用户设计视觉效果使之满意的过程。
当你选择扁平化配色方案时,扁平化 UI 配色网能够为你提供一个很棒的配色场所。
◆?建议你使用柔和不饱和的色调。因为它们更倾向为你的页面增添艺术美感,而不会由于页面过亮,让读者出现视觉疲劳。
柔和的配色会带给你视觉上的愉悦,并且不会抢页面中主要信息的注意力。示例:thehypeagency
◆?针对柔和的背景(background),明亮的颜色可以起到突显的作用。请注意,在以下示例中,我们将展示如何使用(use)色彩突显,营造出图像从页面弹出的效果。
在深色的背景(background)中,明亮颜色的图片能够起到引人注目的效果。示例:triplagent
◆?确保 UI 中色彩的可接受性是实施良好视觉设计的一个非常重要的方面。测一测你的调色板,确保你有足够的色彩对比。
注重字体排印
聚焦美学
字体可以告诉用户在页面中什么是最重要的,同时能让你的设计(Design)具备更好的体验。移动端UI设计不单单从事美术绘画,更需要对软件使用者、使用环境、使用方式进行定位,并最终为软件用户服务。UI设计师进行的是集科学性与艺术性于一身的设计,他们需要完成的,简单说来,正是一个不断为用户设计视觉效果使之满意的过程。排版也应当尽量简约,因为它能让页面更快地加载,易于用户阅读。极简主义则更是如此。
简单的字体传达出自信和明晰。示例:Cienne
小贴士:
◆?可以考虑(consider)在拥有多变的简单无衬线字体系列中,以及主要字体排印的网站上使用扁平化设计。
◆?字体的调性应与整体设计(Design)方案(plan)相匹配。而针对简单的设计,高度美化的字体可能看上去会有些奇怪。
动效
动效使扁平化设计更以用户为中心
动效能够良好的搭配(collocation)扁平化的简洁视觉效果。当用户在你的网站或 APP 中进行交互时,他们可能会提出以下问题:
◆?这里什么是最重要的?
◆?我该如何了解接下来要做什么?
◆?我该如何得知我已经完成了相应的任务?
像这样的问题,可能会提醒你是时候使用动效来增强(enhancement)用户体验了。而动效能够更好的感知用户体验并回答这些问题:
◆?它能够吸引用户的注意(attention)力并告知用户,如果他/她完成了点击/手势后会发生什么。
◆?它可以帮助你在界面中定位用户,并在视图间提供重点的引导。
◆?它提供了视觉反馈(feedback)。
你可以通过过渡、动画,乃至 3D 的纹理深度等多重形式来了解基于动效设计的相关元素。
动效使我们能够更好的互动交流,同时让用户更易于理解。示例:Anish Chandran
插图
插图让扁平化设计的理念得以更广阔的延伸
随着扁平化设计(Design)风格(style)逐步的分层,自然而然更多的插图形态能够融入其中。
图片比文字更具有说服力,并让体验更加的顺畅。
由于插图更易于让用户理解,合理的制作便可达到信息有效传递(transmission)的效果。
Intercom?网站使用了信息化插图的形式进行展示,它会引导你聚焦到重要的信息上,而不会让你忽略它。
扁平化设计 2.0
交互体验应当更加直观,并且不需要任何额外(extra)的解释
当你设计(Design)的扁平化 UI 是互动元素时,你将会面临一个重要的问题。即用户需要知道页面中的哪些区域是纯静态内容,而哪些区域是可点击的。目前,设计师们已经开始意识到这个问题。因此,扁平化设计 2.0 的出现便是对扁平化设计的更成熟、均衡的解释。
扁平化设计(Design) 2.0 采取了极简主义最佳的方面,并可与拟物化设计共同工作(job)。
扁平化设计 2.0 使用细微的阴影和边缘效应来暗示产品(Product)中的可交互性。在界面上,阴影和渐变效果告诉了用户哪些可以点击,而哪些则不能。所以,用户得以更好的理解。
用户更容易通过阴影效果来了解元素的层次结构。示例:Google
在以下的示例中,你可以看到,如何在 CTA 按钮的边缘巧妙地利用细阴影来增加按钮凸起的效果。
Stripe 主页上的主要与次要 CTA 按钮都是针对背景页而制作的。
由于扁平化设计的关键属性使网站变得实用,并且美观大方。它让我们能更加贴近数字化设计的新模式,而其中的功能性与艺术感又能笙磬同音。
感谢你的阅读,如果觉得文章不错,不妨点个赞。
注:

1. 本文版权归原作者所有,仅用于学习与交流。

2. 如需转载译文,烦请按下方注明出处信息,谢谢!
英文原文:Best Practices for Flat Design
作者:Nick Babich
译者:IT程序狮
译文地址:https://zhuanlan.zhihu.com/p/25070599

0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录

 
QQ在线咨询