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

相关推荐

  • 制定内容策略,让网站设计始终保持优秀 交互设计

    制定内容策略,让网站设计始终保持优秀

    先有鸡还是先有蛋?先有内容还是先有网站?这种问题的争吵从来都没有停过。如果你不想让你的网站华丽而空洞,那么你需要针对自家网站制定一个富有凝聚力的内容策略。内容策略的主要目标是使用文字和数据来创造明确的内容,以支撑起有意义的交互体验。我们需要在沟通的各个层面上都是专家,才能有效地做到这一点。

    2017-05-16
  • 微信热点

    【交互大讲堂】当交互设计遇到装置艺术

    之前我们讲到的交互设计都是偏重于传统交互,与艺术的互动性没有这么强,通过现在媒体和交互设计,交互装置的互动性也会越来越强。上图这个工作室是日本的一个叫Teamlab工作室,他们致力于新媒体的装置艺术的设计的第一个作品。当用户进入这个身边周围都是球的环境的时候,触碰那个球,球会发出不同的声音。小孩子对绘画都是十分感兴趣的,当孩子进入这个工作室,画上一副自己喜爱的画,用打印投影仪把这些画全部扫描,扫描之后,会形成3D影响投放到媒体上面,这就...

    2018-05-03
  • 【译文】“防止用户犯错:避免有意识的错误” 交互设计

    【译文】“防止用户犯错:避免有意识的错误”

    西南航空的手机网站对已经过去的日期使用了灰色的背景,使你明白在预订一个航班时这些日期是不可选择的。不幸的是,对下个月的日期也使用了相同的设计,这意味着不可选。Polarr是IOS系统里很受欢迎的照片编辑工具。右侧的编辑控件(温度,色调等)需要你点击那个方块,然后向左或向右滑动而改变参数。然而,这些控件并没有展示出用户应该如何与其互动,所以新手用户很可能需要试错几次才能明白应该如何正确的使用这些功能。另外的一个交互困难就是:由于控件在屏幕的最右侧,你可以很轻松的向左滑动而减少参数数值,但水平空间有限,当你想向右滑动增加参数数值就会存在困难。IOS 8中,为帮助视力不好的用户阅读体验,提供放大显示图标和文字的功能。但是改变变焦需重新启动手机,这是一个重功能,需要花费一些时间,所以IOS系统会在你使用这个功能前,预览变焦完成后的样子。这个体贴的预览功能可以帮你评估出你是否真的需要操作变焦。Hipmunk提供快速浏览恢复选择机票过程的所需信息,甚至是被打断。在预订过程中的第二步,它清楚地显示了旅行的日期,在机场的问题,最便宜的出发程已被选中,以及用户被要求再选择一个回程航班。即使注意力分散了一段时间后,用户可以简单地恢复这个过程,而不会不小心偏离原本对航班的计划和要求或尝试重复已经完成的步骤。苹果新出的图片软件运用了一个很传统的对话框确认用户是否真的想删除最近爬山旅途中的照片,并且通过highlight 24张照片表示删除范围。更好的是,确认删除操作的按钮清楚地标示是删除,而不是一般的确认。Gmail 提供对破坏行为很有帮助的撤销功能,如误删了92封邮件。这个功能被证明是非常有用的,Gmail现在支持在发送email中允许点击发送键30秒内中撤销。Tweeter的字符限制条件很有名气,他们在用户超过那个字符限制前就会提示用户剩余的字符数。当一个tweet过长是,他会显示出超过的字符,高亮出那些超出的字符,并且使发送键不可使用,以让用户明白他们需要如何修复错误。

    2017-05-30
  • 交互设计必杀技:如何做一名高效的“陪产婆” 从零开始学交互

    交互设计必杀技:如何做一名高效的“陪产婆”

    数十万互联网从业者的共同关注!作者:臭脸任。作者授权早读课发表,转载请联系作者。微信公众号:臭脸任的慢生活(ID:choulianren-renyi)欢迎投稿到早读课,投稿邮箱:mm@zaodula.com问题起源于臭脸君开始转战给i…

    2017-08-01
  • 从构图、字体、配色和装饰来分析:为何网易云和虾米APP的banner设计如此好看? 交互设计

    从构图、字体、配色和装饰来分析:为何网易云和虾米APP的banner设计如此好看?

    小白想进阶成为高手,学会发现高手作品的优点是关键。今天这篇从构图、字体、配色和装饰四大Banner 关键要素教你如何发掘高手作品中的优点。

    2017-05-11
  • 微信热点

    搜狗词典用户体验更给力 可原汁原味学英语

    日前,搜狗词典APP迎来重要升级,接入上百部与查询词相关的优质英美影视剧内容,并将“国际报道”内容板块升级为“双语报道”,进一步丰富了英语单词的学习语境,提升了用户的查词、记词体验,帮助用户原汁原味学英语。接入海量英美影视剧内容,新增“原声影视”内容板块及“视频单词卡片”功能,是搜狗词典APP此次升级中值得称道的一大亮点,这使得搜狗词典APP突破了原有的文字、图片、音频等内容形式,方便用户通过丰富的影视剧短片,用更具趣味的方式了解学习英...

    2018-03-12
  • 为了色盲用户的友好体验,你应该注意五点 交互设计

    为了色盲用户的友好体验,你应该注意五点

    世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

    2017-05-05
  • 交互设计师的60日计划之第三天 交互专题

    交互设计师的60日计划之第三天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19
  • 三招让你的APP假装“更快” 交互设计

    三招让你的APP假装“更快”

    天下武功,唯快不破。体验也是如此,往往app的反应越快越流畅,用户的体验就会越好。尽管移动设备的硬件、系统、网速等都不是你能所控制的,但仍有办法让你的app看起来加载得很快,一起来看看这些小技巧吧。

    2017-06-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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