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

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


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

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

隐形设计

删除不必要的样式

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

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

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

相关推荐

  • iOS 11 正式版即将到来,这里有 30 个值得关注的变化

    作者:周韶宏   随着新 iPhone 的发布,iOS 11 正式版会在 9 月 19 日推送。 新的操作系统在今年 6 月的开发者大会上面向开发者发布,当时它更像是一个用于展示的、并不完整的简单版。 之后 3 个月,iOS 11 陆续放…

    交互专题 2017-09-13
  • 尼尔森交互原则,讲的到底是什么?

    这几天,脑海里面一直回绕着一个声音,尼尔森,尼尔森交互,尼尔森交互十大原则。blues老师的讲解至今让我记忆犹新,如果真的让我选择一款产品进行尼尔森交互分析,我想应该就是简书了。

    2017-06-01
  • 交互设计师的60日计划第十四天

    精神状态不好,效率略低。 20150812 门槛越高,交互设计师越难被替代 to b的产品相对to c的产品来说,门槛会高很多。做to b产品的交互设计师要了解许多复杂的背景知识,了解完全不熟悉的用户群体,才能开始着手做设…

    交互专题 2015-08-20
  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 设计师应该了解的“用户记忆理论”

    记忆是人类储存信息的“硬盘”,它可以收集信息,处理信息,并且可以对外界的刺激做出反应。人类可以在需要的时候可以去“硬盘”中调取信息。但是这个“硬盘”有着一些瑕疵,因为它会受到人类机体和情感因素所影响。了解记忆的运行机制,会帮助设计师创建出人性化的界面,节省工作量,提升产品的易用性。

    2017-04-30
  • 帅气的YouTube改版交互设计,获Adobe大奖

    美国设计师Ziarekenya Smith为Youtube制作的概念交互设计,获得2014年Adobe设计大奖。项目视频↓↓↓Ziarekenya Smith一人承担了设计、动画、音效所有内容.新Logo,一个简洁的取景器,更强调用户UGC特色新的登录页面新…

    2017-08-02
  • web端和移动端产品设计的区别

    移动设备发展非常迅速,移动端产品越来越多。今天小编来扒一扒web端与移动端产品设计有哪些不同。 场景不同,需求不同 首先,两者对应的需求场景不同,这会相应地导致功能点的优先级变动,进而影响到界面控件和信息…

    交互设计 2015-06-15
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30
  • 常见的App应用界面交互框架

    掌握常见的APP应用界面交互框架,了解他们各自的优缺点,使用时才能游刃有余。你还在等什么呢?赶快去学习吧。标签式、跳板式、列表式和旋转木马等在等着你。 1>标签式 优点: 1、当前位置入口清晰   2、轻松在…

    2014-11-19