IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

案例分析:聊聊扁平化设计的六点优势

Catherine • 2017-05-10 03:48 • 交互设计

著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

文章目录[隐藏]

  • 扁平化设计
  • 扁平化设计的起源
  • 扁平化设计的优势
  • 设计实战:扁平化设计的应用
    • UX线框图
    • UI界面设计
    • UI交互概念设计
    • UI导航元素
    • UI插画
    • 主题插画
    • 插画印刷品
    • 品牌设计
  • 结语

著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

案例分析:聊聊扁平化设计的六点优势

扁平化设计

现如今的扁平化设计并不是单纯的一种风格,而是涵盖了诸多常见风格、具备多种不同目标或任务的一个设计集合体。目前扁平化设计被广泛应用于数字设计领域,并且常常通简约或者极简的视觉表达方式结合起来运用,由于移动端设计风格的演变历程的原因,扁平化设计常常被视作为拟物化设计的对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,目前正“入侵”着越来越多的平面设计领域。

今天的扁平化设计已经成了网页和UI设计中的主流设计方向,甚至可以说是我们日常生活中不可或缺的部分,并且开始影响我们生活中的日常决策,并且具备解决各种问题的潜力。

案例分析:聊聊扁平化设计的六点优势

Toonie Alarm

扁平化设计的起源

扁平化设计的发展历程当然是有迹可循的,它的根源通常被追溯到名为“瑞士风格”的一种装饰设计风格上。20世纪初的瑞士现代主义运动催生了这种设计风格,随着二战结束,这种设计风格开始在欧洲流传开来,赢得了更多的拥簇。这次设计风格的革命是由苏黎世艺术与工艺学院的Josef Müller-Brockmann 和 巴塞尔设计学院的 Armin Hofmann 所领导的。

在Design is History 中,瑞典风格是这样被描述的:“……这种风格强调简约,可读性和客观性。这两所设计院校为这种风格贡献了许多东西,包括非衬线字体,栅格和不对称式的布局。这种设计风格还强调使用排版和摄影来作为主要的视觉传播手段,所以,瑞士风格下最有影响力的作品通常都是以海报的形式呈现出来的,他们认为这是最有效的沟通手段。”

案例分析:聊聊扁平化设计的六点优势

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

案例分析:聊聊扁平化设计的六点优势

Joseph Müller-Brockmann, Zürich Town Hall Poster, 1955

案例分析:聊聊扁平化设计的六点优势

Armin Hoffman, 1959 poster for the ballet Giselle

这些海报已经清晰的展现出,这种风格的粉丝是有多么热爱简约的设计,线条方正、高可读性的字体,以及多样的几何图形和层次分明的视觉结构。瑞士风格,包括后来的包豪斯,随后迅速在世界范围内得到了越来越广泛的欢迎,并且在21世纪初获得了新生。这就是今天所说的扁平化设计。

虽然这种风格最初呈现的方式大多是海报、邮票、明信片、书籍装祯设计,但是它的出现,确实大大扩展了数字设计领域的视野,特别是在UI设计的领域。

扁平化和极简主义设计让网页和移动端应用拥有了可用性更强的设计解决方案,这样的设计更加卓有成效。扁平化设计和之前所流行的细节丰富的拟物化设计不同,它对交互和功能的支持更加优秀,让设计拥有了更多的可能性。

最初走出扁平化设计这一步的是微软,在08年的时候,微软便开始从瑞士风格、现代主义和包豪斯中汲取灵感,随后在2010年推出了Windows Phone 7,它就是典型的扁平化设计。这个版本的操作系统中采用了大量的简单的形状,清晰的排版,明亮而对比明显的色彩,复杂的细节和纹理都被移除了。三年之后所发布的iOS 7 中友好而直观的UI设计和微软虽然不尽相同,但是在设计理念上两个系统互为印证,成为了扁平化设计在数字设计领域应用的明证。

虽然此后的Material Design中阴影的运用,一定程度上偏离了扁平化设计的思想,但是总体上,它依然是扁平化设计思想的继承者和发展者。

案例分析:聊聊扁平化设计的六点优势

GIF for the Weather App

扁平化设计最基本、最突出的特征包括:

  1. 简单的元素和形状
  2. 极简风
  3. 强功能性
  4. 大胆而易读的排版
  5. 清晰而严谨的视觉层次
  6. 关注细节
  7. 明亮的色彩和对比度明显的视觉感知
  8. 避免使用纹理、渐变和复杂的样式
  9. 采用栅格、几何特征以及视觉平衡的原则

案例分析:聊聊扁平化设计的六点优势

Restaurant Menu animation

扁平化设计的优势

扁平化设计的优势有很多,这也是它在数字设计领域流行的主要原因。现如今,扁平化设计也开始逐步影响现代排版印刷设计了。那么扁平化设计的优势在那里呢?

  1. 可读性和易读性
  2. 通过形状、色彩和字体来呈现清晰的视觉层次
  3. 有效的支持web和移动端的导航设计
  4. 自适应性,适合响应式设计
  5. 在各种屏幕上都具备良好的可读性
  6. 对于开发更加友好,降低在设备上的负载

除了上面所说的一切,扁平化设计还为创意设计提供了广阔的空间。

案例分析:聊聊扁平化设计的六点优势

设计实战:扁平化设计的应用

扁平化设计的多样性和灵活性使得它在设计领域占据的比重越来越高。

接下来,我们通过Tubik Studio 的设计师的设计作品来梳理一下它的功用:

UX线框图

即使是在最初的线框图绘制阶段,扁平化设计的设计规原则和逻辑转换同样是适用的。线框图设计本是UI和UX设计的最初也是最关键的部分之一,它将APP和网页的基本执行方案框架呈现在团队和客户面前,它本身就具备一定的视觉化设计的特征。线框图快速有效地将核心和基本的元素整合到一个简约直观的框架中来。

案例分析:聊聊扁平化设计的六点优势

UI界面设计

现在的UI界面设计中大量充斥这扁平化设计,你可以在其中看到各式各样的扁平化设计元素的运用。

UI交互概念设计

扁平化在UI设计中的应用范畴非常广,尤其是在移动端的UI设计上。

案例分析:聊聊扁平化设计的六点优势

Pull To Refresh

案例分析:聊聊扁平化设计的六点优势

Portrait vs Landscape interaction

案例分析:聊聊扁平化设计的六点优势

GIF for Pull Down

案例分析:聊聊扁平化设计的六点优势

Tab bar interactions

UI导航元素

扁平化设计的另外一个重要应用就是图标和导航元素的使用。简约和视觉化的特征让它们在UI设计中更加灵活,在小尺寸下具有良好的可读性,设计师可以使用鲜艳的色彩创造不同的视觉效果。

案例分析:聊聊扁平化设计的六点优势

The set of flat icons

案例分析:聊聊扁平化设计的六点优势

Flat icons applied in Veggie App

案例分析:聊聊扁平化设计的六点优势

Flat icons and tabs design for Blog App

案例分析:聊聊扁平化设计的六点优势

Flat icons applied in Saily App

案例分析:聊聊扁平化设计的六点优势

Flat UI design elements for PassFold

UI插画

越来越多的UI开始采用扁平化的风格的插画,它们具有明显的可定制性和针对性,有明确的业务目标和视角,可以更为高效地解决用户的痛点。

案例分析:聊聊扁平化设计的六点优势

Cafe Coupon App

案例分析:聊聊扁平化设计的六点优势

Weather App

案例分析:聊聊扁平化设计的六点优势

Moneywise App

案例分析:聊聊扁平化设计的六点优势

Illustration for SwiftyBeaver

案例分析:聊聊扁平化设计的六点优势

Timeline App

案例分析:聊聊扁平化设计的六点优势

Healthy Stickers

主题插画

这些主题性非常强的扁平化插画满足了用户在美学上的需求,同时具有点题的功能。

案例分析:聊聊扁平化设计的六点优势

Free Colorful Wallpapers

案例分析:聊聊扁平化设计的六点优势

Free Space Wallpapers

案例分析:聊聊扁平化设计的六点优势

Star Wars Rogue One

案例分析:聊聊扁平化设计的六点优势

Underwater Explorer

案例分析:聊聊扁平化设计的六点优势

Halloween Haunted Castle

案例分析:聊聊扁平化设计的六点优势

Rio 2016

案例分析:聊聊扁平化设计的六点优势

Californication Bus

案例分析:聊聊扁平化设计的六点优势

San Francisco Painted Ladies

插画印刷品

现代扁平化设计已经开始入侵平面设计领域,在日常的插画印刷品中也有很多采用这一风格。

案例分析:聊聊扁平化设计的六点优势

Tales of the Jazz Age Book Cover

案例分析:聊聊扁平化设计的六点优势

Pikachu Poster

案例分析:聊聊扁平化设计的六点优势

Muscles Magazine

案例分析:聊聊扁平化设计的六点优势

Suicide Squad Poster

案例分析:聊聊扁平化设计的六点优势

Spring Girl greeting card

品牌设计

扁平化的设计所提供的时尚外观不仅具备灵活的特性,而且更容易得到数字化的支持,应用在不同的渠道,因此许多品牌也采取了扁平化设计。

案例分析:聊聊扁平化设计的六点优势

Logo mascot for Saily App

案例分析:聊聊扁平化设计的六点优势

Logo lettermark for PassFold

案例分析:聊聊扁平化设计的六点优势

Logo design for Andre

案例分析:聊聊扁平化设计的六点优势

Logo for Design4Users

案例分析:聊聊扁平化设计的六点优势

Logo lettering and mascot for Toonie Alarm

结语

所有的这些案例证明了扁平化设计的优势,但是如同现代主义设计和包豪斯一样,扁平化设计有它本身的缺陷和无法克服的问题,不要过度迷信。然而,扁平化设计开启了新的视角,尤其是在以用户为中心的UX设计中,它确实有着独特的优势。

 

原文作者:Tubik Studio

原文地址:uxplanet

翻译:@陈子木

译文地址:http://www.uisdc.com/flat-design-history-benefits

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

ElementioslogoMaterial designPSUIUI设计UXWEB交互产品经理图标字体导航设计扁平化设计极简主义案例分析沟通灵感用户界面设计移动端线框图视觉设计设计师设计思想译文
赞 (0)
CatherineCatherine
0
生成海报
梦想成为“全栈设计师”的你,可能需要这份视觉设计知识体系规划书
上一篇 2017-05-10 02:56
浅谈动效设计,帮你掌握视觉都需要的动效知识
下一篇 2017-05-10 04:54

相关推荐

  • IxD案例

    【交互设计】【装置艺术】传统昆曲与数字视觉的结合

    ▼数字与戏曲在数字时代大势所趋的背景下,传统戏曲也进行了一些试探性的尝试。交互性能和身临其境成为了戏曲的一种新的模式。演员通过光影达到像素化的效果,圆滑光影与演员的冲突,减少真实与虚拟的隔阂。打造沉浸式的戏曲艺术。▼沉浸与交互数字技术润滑了装置与观众的联系,发挥更大的互动作用。利用空间互动装置设计,以评估演出、空间和观众之间的联系,从而为观众提供一种身临其境的体验。▼古典与未来昆曲是一种东方古典戏剧艺术形式。数字技术的使用可以带来一种新...

    2018-04-17
  • 实例分析:从搜索结果看地图搜索的交互设计 交互设计

    实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • 3步帮你搞定PRD文档 交互设计

    3步帮你搞定PRD文档

    很多新同学问道写PRD文档时不知如何下手,在这小编整理了一下如何搞定PRD文档的思路,还望对大家有帮助,这样也就值了。 一、理解什么是PRD? PRD:Product Requirement Document,产品需求文档,可以看出它是用来…

    2015-06-05
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例 IxD案例

    【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • 微信热点

    对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21
  • UI动画VS微交互貌似都是一个东西? 交互设计

    UI动画VS微交互貌似都是一个东西?

    出处:https://medium.com/@tubikstudio/ui-animation-microinteraction-for-macroresult-668cd9e71101#.lhcggh7he 原标题:UI Animation. Microinteraction for Macroresult 原作者:Tubik Studio   原谅阿西…

    2016-04-07
  • 微信热点

    用户体验设计过程方法论的演变

    “用户体验设计”这一概念,是由唐纳德·诺曼(Donald A. Norman)创造出来的。我之所以会发明这个术语,是因为我认为人机界面和可用性太窄了。我想涵盖人们体验系统的所有方面,包括工业设计图形,界面,物理交互和手册。从那个时候开始,这个术语开始广泛传播,以至于它失去了意义。——唐纳德·诺曼但到了 2016 年,唐纳德·诺曼开始对这一术语的滥用大肆批判,他在这段简短的YouTube视频中谈到了这一点。这些天,他说他是一个人民设计师(...

    2018-04-06
  • 交互设计

    Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 微信热点

    实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 心得分享:正确对待所面临的一切

    前面一直在和大家分享我在自学的过程当中所学到的知识,其实每次在写文章之前,我都会自己提前做好准备工作,然后再整理出来一个完好的结果呈献给大家,但是自从结束实习到回到学校的这段时间,产出率几乎为零,今…

    交互设计 2015-08-24
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress