如何运用扁平化设计创造极致的用户体验?

扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而,要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的,并创造出一套连贯的视觉与功能体验。让我们来了解下,你能够通过扁平化设计为用户做些什么呢?


扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而,要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的,并创造出一套连贯的视觉与功能体验。让我们来了解下,你能够通过扁平化设计为用户做些什么呢?

如何运用扁平化设计创造极致的用户体验?

隐形设计

删除不必要的样式

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

如何运用扁平化设计创造极致的用户体验?

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 按钮的边缘巧妙地利用细阴影来增加按钮凸起的效果。

如何运用扁平化设计创造极致的用户体验?

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

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

感谢你的阅读,如果觉得文章不错,不妨点个赞。

 

英文原文:Best Practices for Flat Design

作者:Nick Babich

译者:IT程序狮

本文由 @IT程序狮 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24484/

(0)
CatherineCatherine
上一篇 2017-05-08 19:57
下一篇 2017-05-08 21:58

相关推荐

  • 私家推荐!九月必收的优质设计资源干货大合集

    小白叨一叨:九月份设计圈的干货 合集来咯,包括前端开发、设计神器、设计素材 (字体、PSD等)、以及一大波实用的酷站推荐,全是精选干货 ,快来收吧!

    2017-06-04
  • 交互设计师眼中的需求分析

    本文内容包括以下几点:需求与产品;马斯洛需求理论;产品定位;需求的来源;需求的筛选;需求的优先级确定;需求的分类;处理需求。优先级排序:第一象限>第二象限>第三象限>第四象限

    2017-05-14
  • 符合用户认知的交互才是最自然的交互

    为什么有时候只用看一眼就知道这两个东西是什么,如何操作?其实这就是物品所具备的预设用途。物质心理学—研究人和物相互作用方式的心理。一件物品实际上能用来做何用途,或被认为能有什么用途。一个白色的东西加一个按钮在上面,并且一按就会有“奇迹”发生。

    2017-05-06
  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03
  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 【每天一小讲】便捷的用户体验才是命题简化之根本!(语音版)

    如何进行命题简化?来自盯盯学院00:0001:24命题简化是让产品或者服务的水平超出竞争对手一大截。根本是要让顾客用的特别方便,特别爽。命题简化瞄准的是优质市场,一般来说这个市场比较小。当然也有特例,比如苹果手机,既存在于高收益的优质市场,同时也创造出了一个全新的大规模市场。一个优秀的命题简化者根本不需要花多少钱做宣传,用户会主动向周围的人推荐,实现爆炸式增长。如何进行命题简化?产品设计几乎是命题简化的全部。目标就是让产品具有使用上的愉...

    2018-04-09
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 智能产品的交互设计,不做到这样可不行

    我们终将以自然的方式与机器交流。在2012年圣丹斯独立电影节上,影片《机器人与弗兰克》赢得特别奖,该片讲述机器人Robot照顾患有老年痴呆症弗兰克的故事。在2017年AI大热之年,人们能否像电影里的弗兰克那样,以人对人的方式与机器交流,这在人机交互学科里定义为“人机自然交互”。何为自然交互?简而言之就是以日常交流方式与计算机进行交互。何为日常交流方式?就是人们通过语音、肢体、手势、眼神、表情等形式进行交流互动。人机交互正迈上新台阶人机交...

    2018-02-07
  • 提升POS产品交互设计实践

    用户体验User Experience,简称UE/UX)ISO9241-210标准将其定义为 “人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。简单来说就是人使用产品的感觉。用户体验的重要性不言而喻。用户体验的好坏,可以直接决定一款产品的命运;好的用户体验,会带来更多的用户,为企业创造更多价值。交互设计(Interaction Design,简称IxD)交互设计作为用户体验的重要组成部分,是指在人与产品、服务、或系统之...

    2018-02-09
  • Axure RP属于产品经理快速原型设计工具(一:简述)

    一、介绍Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效...

    2018-03-10