扁平化设计风格下平面视觉元素的应用研究艺术设计专业

第二章 扁平化设计中的主要平面视觉元素分析扁平化设计风格下平面视觉元素的应用研究目 录前言1第一章 扁平化设计概述31.1 扁平化设计的概念31.1.1界面设计中的扁平化设计31.1.2交互设计中的扁平化设计31.2 扁平化设计的起源与发展41.2.1扁平化设计的风格起源41.2.2扁平化设计的发展过程61.3 拟物化设计与扁平化设计的对比71.3.1拟物化设计特点81.3.2扁平化设计特点8第二章 扁平化设计中的主要平面视觉元素分析102.1 设计元素的提炼102.1.1提炼主要内容102.1.2去除特效装饰112.1.3图形几何、符号化122.2 风格配色的选择132.2.1用色选择132.2.2利用色块162.3 字体的运用162.4 版式的合理优化192.4.1网格系统192.4.2大图运用212.4.3半透明212.5 独特风格和细节的呈现22第三章 扁平化风格在各平面设计领域中的应用243.1 各平面设计领域对扁平化风格的运用243.1.1Windows phone扁平化风格243.1.2苹果移动端扁平化风格253.2 29第四章 扁平化设计风格运用的未来趋势304.1 淡化联系304.2简化设计304.3缓解审美疲劳31结论43参考文献44致 谢45摘 要随着信息化社会进程速度的不断加速攀升，数字化社会的到来，人们获取信息的方式变得与众不同，手机、电脑等信息终端和设备在人们生活中扮演着越来越重要的角色，“移动界面”成为我们传递信息的主要来源之一。由此信息化科技的发展十分迅猛，于是不可避免的带来了一系列的影响：移动终端设备的普及，人们越来越多的使用移动设备来获得各种信息，人们越来月越多的喜欢简约的设计风格和简便的思维方式。对于平面设计领域，尤其是 UI(User Interface 用户界设计)方面，扁平化简约的界面风格自然就崭露头角。本文将从扁平化设计风格的概念、起源，发展过程等系统地分析手机 APP、网页等对扁平化风格的运用，并逐一让更多地人去了解接触分析其中的扁平化设计并对扁平化设计风格做出较为精细的分析形成系统的个人见解。应道设计师从人性美的角度出发做出人性化，简约美具有时代意义的设计。关键词：扁平化设计；设计师；UI；移动设备；简约美；设计AbstractAs the speed of information society process accelerating, the arrival of the digital society, the way people access to information becomes different, the information such as mobile phone, computer terminals and equipment plays a more and more important role in people's life, "mobile interface" as we are one of the main sources of information. The information technology development is very rapid, so inevitably bring about a series of impact: the popularity of mobile devices, more and more people use mobile devices to obtain all kinds of information, to come on more and more people like contracted design style and simple and convenient way of thinking. In the field of graphic design, especially the UI(User Interface User Interface design), the flat and simple Interface style comes out naturally.This article from the flat design concept, origin, development process of systematically analyzing the phone APP and web pages on the use of flat style, and one by one, to let more people to understand contact analysis of the flattening of flat design style design and make a more detailed analysis of formation system ofpersonal opinions. The designers from the point of view of human beauty to make humanization, simple beauty has the time significance design.Keywords：Flat design; Designers; The UI. Mobile devices; Contracted beauty; design前 言随着信息化社会进程的不断加速攀升，人们越来越多的运用移动设备来获得各种信息，而力求“简化”的思维方法每时每刻都在影响着人们的生活的各个方面 ，也影响着设计师的设计方向。对于平面设计领域，尤其是 UI(UserInterface 用户界设计)方面，扁平化简约的界面风格自然就崭露头角。这种“扁平化”的设计风格席卷了整个平面设计的风尚界，带来了难以估量的新影响。扁平化设计颠覆性的简约化设计风格，不仅符合了如今信息化时代的特点和人民的需求。其他设计的各个方面都开始向扁平化风格转变，并发展至今。人们对美的认知，是随着时间的推移而发生变化的，不同风格的出现从某种角度来说是有其出现理由的，如何利用好它使之变得更好才是真正需要解决的。设计人员持着“以人为本”的人性化理念，为消费者提供更为便于操作的界面。而且UI 是人们每天都需要接触的，当你打开电脑或者翻阅手机映入眼帘的就是界面，由此可见界面设计的好坏直接影响使用者的使用感受，好的界面设计能提供良好的用户体验，方便安全可靠的操作流程，更加直观视觉语言目前比较流行的界面设计风格为扁平化设计，扁平化设计为界面设计提供了一种新的视觉体验方式。汪大伟在现代主义风格的 UI 设计之兴起中提到：“UI设计中担当着整个人机交互视觉桥梁的界面设计也就是GUI设计也由于种种原因在其发展过程中一直延续着具象化、生活化、娱乐化的面貌而缺乏一种具有现代主义特征的简洁、清晰、注重传达功能的设计风格。”第一章 扁平化设计概述1.1 扁平化设计的概述扁平化设计，是一种新新的设计风格。扁平化，表面的意思就是说进行信息进行压缩后的设计，产片界面“扁” “平”，说白就是抛弃繁琐复杂的设计风格后返璞归真，是极简风格的回归表现。让设计对象感受到简洁明了的视觉观感，是信息凝练整合的结果表现更是产品设计功能简化方便了很多。同意干练是扁平化设计突出的一大优点。1.1.1界面设计中的扁平化设计对于扁平化设计的概念，很多的设计师都有自己的独到的见解，并且在绝大部分实际是的心中认为扁平化有可以叫做二维层面的设计，这是在界面设计的领域的层级下的大部分设计师持有的观念。 意思就是说在界面设计中，相对于“三维立体化设计”的完全不同的设计念想。它属于平面二维设计，淡这个设计概念当中的最核心的地方在于，在设计的在过程中抛弃所有繁琐复杂的装饰纹理的视觉效果，以及我们肉眼所能感觉到的，所有能表现3维立体视觉效果的元素方式表达等一概不采用，所有有关立体等元素的边界都干干净净，与现代设计十分匹配，具有浓郁的时代意味十分浓郁。这种设计事设计师运用简洁明了的色块划分，抽象、符号化的图形表达，没有任何进过加工修饰的字体，简单来说就是将一切干扰信息弱化活着是排除，突出需要表达的重要内容与信息活着是功能化的需求。界面设计是传递使用者内心情感的一个媒介，是谁被自身对于和人类交流的一个方式方法，在悠闲地谁白上传递无限的信息传设备与用户之间产生的无数的公民，我想这才不失为一个真正令人称道的好设计。扁平化设计的沟通能就是让更多的人关注到一个设备自身完整体验的功能性价值，界面设计理当如此。1.1.2交互设计中的扁平化设计第二，很早出现在交互式设计中的是扁平化。不同于在扁平化设计在界面设计中的概念，交互设计中的扁平化设计，相比之下表现得与之前的有所不同，更加的立体化。说到交互设计中的的扁平化设计，我们先了解一下交互式设计的概念。交互式设计就是是设备与人进行交流的设计。交互设计的对象，是人和设备。首先，通过了解设计对象对所需要产品设计的需求，从用户在与产品进行交互时的感受角度这点角度出发，并结合设计师对设计对象本身的心理、行为等特点的分析整理，设计出各种不同类型的交互式方式，来达到设计对象的设计目的，让产品功能得到有效完整的被开发，产品设备体验极佳，人与设备形成“沟通”的桥梁。数字化的社会的带来的不仅是快速的工作节奏还有很躲需要大众进行筛选的信息。人们在面对各种新奇的信息来源“花了眼”于是人们选择在接收信息和事物方面寻求一个速度。手机正式在这种情况下应运而生的。这是人与人之间交互的一种方式，出了之前说到的，设计者产生了一个大胆的想法就是入和才能让交互的过程变的简便，这是设计者需要先思考的问题，这个时候扁平化出现了。由此看来，交互设计中的扁平化设计，是去掉交互式设计中华而不实事物功能保留简洁明了具有实用性的。最后，完善交互式设计中的用户直接了当的功能体验，以上所说的这些则是通过平面设计的扁平化图形表达来完成。1.2 扁平化设计的起源和发展1.2.1扁平化设计风格的起源扁平化风格之所以被大众知道也是因为他被广泛应用于平面的网页设计之中 ，整整开始源于微软企业旗下推出的 Windows Phone，当中所采用的Metro 设计风格。真正考较气起源的地点和任务，年代久远已经是无法辨析了，于是我找到了下 面几个风格与之相近。扁平化的风格起源大多与这些设计风格的传承息息相关。 （一）、现代主义设计风格现代主义设计风格，由 20 世纪 20 年代前后的欧洲新建筑运动发展而来并延展开来。对于新建筑运动，不仅在技术上更是在精神上都有一定的借鉴，而在设计图形形式方面，它主张反对在任何一个设计上的简单几何形状，同时，提倡设计产品的主观功能美。通过建筑革命运动为契机，接建筑运动革命的影响力逐渐扩散到各个设计领域，其中包括环境艺术设计、家具设计、平面设计、工业产品设计等；影响较大的还是属设计地域的划分这块，形成了以俄国为主导势力的构成主义运动者、以及荷兰带领的“风格派”运动者。加上德国主张的的“工作同盟”伙伴及包豪斯设计学院学生为主的众多设计革命运动。在这个运动期间，包豪斯设计学院成立了，现代主义就此诞生，不可避免的成为了整个运动的高潮。“少即是多”的概念的提出就是在这个时间。米斯·凡德洛认为不管是之前的极简主义、还是如今的扁平化设计，“少即是多的设计想法 应该在每个设计师的心中是不可磨灭的更应该变成更为设计师去设计的一个根本标准。由“包豪斯所奠基的以观念和解决问题为中心的现代主义设计体系，主张功能化的设计原则、重视工业设计与设计对象之间的关系、没有任何装饰的极简主义，这些与扁平化设计表述的是同一个意思。”（二）、瑞士风格在 20 世纪 50 年代，瑞士风格慢慢形成并得到了发扬光大，它被称为国际主义中简约的平面设计风格。可以说瑞士风格是和现代主义设计风格一脉相承息息相关的，其风格的形成与发展是在包豪斯学院的影响之下的，所以其风格作品与包豪斯密不可分。瑞士风格主义的核心，就在于对无衬线字体的发展以及广泛运用（图 1-2 瑞士风格海报）。“通用体”（Univers）和“赫尔维提加体”（Helvetica）两种字体正是在这一时期发展形成的，逐渐发展并且成为瑞士风格的主角。瑞士风格提倡采用无衬线字体，和主张充 分利用网格结构。瑞士风格的设计，特点就是产品设计（图 1-2瑞士风格海报）可以达到层次分明、清晰、明确的视觉传达效果。比较如今的扁平化风格你会发现，它与瑞士风格是差不多的，两者的理念各方面大致相同。同样是简洁明了的画面，精炼的设计，熟练采用无衬线字体。如果真要说打折的不同之处，应该还是在为如何快速简练的传递信息的方面，扁平化注重对图标化图形的概括以及应用，以达到产品“功能美”的设计效果。（三）、极简主义设计极简主义设计，是在瑞士的极简主义设计运动产生的。极简主义提倡通过去除掉多余的色彩等装饰性元素，最简化影响主要内容传递的干扰元素，使重要的，主要的信息成为整个设计画面的焦点。绝大多数极简主义设计师的设计作品中，呈现出极简主义的画面表达的特点：元素少、线条简洁明了、凝练的图像几何化。极简主义对元素进行精简概括，却在设计作品中对设计目标的表现手法上不限制。画面的阴影、渐变、投影这些只要能为为画面增加层次感、替身设计深度的形式感之类的，极简主义的平面设计中经常出现，很受一些设计师的青睐。1.2.2扁平化设计风格的发展过程扁平化并不是突然产生的产物，他基于人类变化的设计需求，忙碌的信息时代和快节奏的工作步伐导致的。扁平化设计将繁琐的信息简练带你传递给阅读者，让信息更加有效地在大众间广为流传，自然设计的目的就达到了，信息的效率增加了，传递的对象自然而然就会喜欢扁平化的设计风格。以前比如无衬线字体，笔画无任何装饰，没有了衬线的繁琐装饰；标志设计也经常性的采用这类简约的设计风格，抛弃直观的三维立体感。设计在主观感受下显得简洁的同时，也增加了字体、标志的可识别性。但是，着了日风格我们不能把它叫做扁平化风格，而是叫相似的“近扁平化”。所以什么叫做真正的扁平化设计呢？笔者认为扁平化设计一定是设计行功能美突出物任何不必要装饰的简约化的设计。（1） Windows Phone 的 Metro 风格扁平化风格发展是从微软推出的Window的 Metro但其实当时盛行的得是拟物化设计风格，这两种风格大相径庭所以两排风格的拥护者互相难免齐了争执，用户之间也有了各自的意见。大众主要的表达的观点是，这样一个，没有任何装饰看上去甚至有些单薄的设计为什么还能存活下来，甚至能与美丽繁华的拟物化经行抗争。用户当然是百死不得其解，但带来的不小的影响是值得整个设计界思考的。Windows7系统中拥塞纯度不是很高，图标是标准的拟物化风格，加上整个图标和文字占界面的面积不多。两者之间的区别也是很大的，Metro 风格是颜色多用混搭在一起，图标所想要表达的内容占据了大部分。同样大小的界面，这样的界面增加了设计界面的效率性和可读性，同时界面色彩清晰不复杂。然而就是这样的简约的设计在当时却并不为大众所认可，反而收到了一批人的反对声响。（二）、Android 4.0 系统后来发展的扁平化风格部分认可，就是 Android 4.0 系统对扁平化风格的发扬，让大众摒弃了对扁平化风格之前的一度反对，到开始持观望态度的良好转变，并开始真正的对她的改变和大众的转变进行思考、分析。（三）、IOS 7 系统 IOS 6 系统和苹果公司推出的 IOS 7 系统不用的点在于，正式放弃了拟物化风格，开始采用扁平化风格，这使得打破了大众对扁平化风格的最初印象，大众包括之前反对的设计师开始尝试接受扁平化，并试着开始在手机 APP、网页设计中，大量得运用扁平化设计。在IOS7中设计师对于整个手机营业用的图标等进项可第二次创造，简化了按钮等信息层级之间的装饰性内容。更在这个歌的基础之上还不断地更新再创造，使其功能美的特点尤为显著。这样一来实现了应用功能最大化的使得信息传递速率最快速。1.3 拟物化设计与扁平化设计的对比拟物化设计和扁平化设计都是被设计师广泛应用的风格，以最近的趋势来看，扁平化设计风格渐渐有取代拟物化设计风格的地位，这一趋势无意识业界对于扁平化风格的广泛认识，但是如果要真的区分区设计风格之间谁好谁坏扥问题。我们只能说，设计师面对的环境和情况不一样，选择的风格自然是不一样的，所以不可以用好还去界定设计风格，只能说谁更适合这个风格。如果非要给他们一个相对大众理解的范畴，我想很多设计师，用形式主义对应拟物设计和功能主义对应扁平化设计。1.3.1拟物化设计特点拟物化是什么意思呢？在维基百科中， 将拟物化的定义等同于仿制品，指原有对象中某些必需的形式在新的设计中已不再必要，但新设计仍模仿旧有形式。换句话说，拟物化设计用界面设计中得语言表达就是如何去应用它，说白了也就是通过在对显示生活中的物品等进行细致的观察之后运用高仿的材质，设计与现实图形极为相似的图标。就算使用者在不会使用或不懂网络应用的情况下，都可以通过看到图标的样子能够大概猜出图标所想表达的意思以及使用方法。设计的目标是为了表达出逼真的效果，让所表达的物体更加 的精细化、层次化，还有在物体上对各种特效的运用。换句话说，拟物化设计让繁复的数字世界，变得具象，简单也更容易被大众所接受。IOS 系统的人机界面指南认为：“当你应用中的可视化对象和操作按照现实世界中的对象与操作模仿，用户就能快速领会如何使用它。”但是数字化世界的到来，拟物化设计实在是过于注重细节，不再能够适用于快节奏生活的大众，逼真但繁复的细节装饰，阻碍了人们对于快速识别知识传递信息的需求。逼真的拟物缺少了触感上的与用户联想在一起的共鸣，使用者感受不到物品的情感交流。1.3.2 扁平化设计特点扁平化设计最老妪能解的特点是不采用3D 效果注重页面的简洁。扁平化设计为大众所接受的，更多的应该是扁平化的设计理念，以及思维方式。作为设计师要关注的除了简洁明了的视觉效果带，良好的操作体验，还有优美的视觉效果但是这些都是应用的“外”更多地关注到功能的本身。这就是为什么要突出功能让界面繁从简问题的原因。设计师从用户思考的角度出发考虑了如何达到简洁的方法，才设计出如今我所认识到的扁平化风格。扁平化设计特有的特点其设计理念来源芝加哥建筑学派的知名学者路易斯沙利文。在20世纪初期提出了这一口号“形式服从功能”。他的意思是， 只要装饰部分与整体部分相互交融，那么它比看起来像贴上去的装饰要美得多。正式这样的设计口号对现代主义设计影响至深。如今的扁平化设计，功能性是第一要素，任何装饰在这点上都变得画蛇添足。但是，扁平化设计不可能不存在问题，其中相对突出的一个问题是，界面上的所有元素，手动设计成二维设计，这些二维的元素都处于一层级中，更加没有立体性。如果再想装饰元素去掉维持功能性的表达，使用者在使用过程中难免对哥哥不见之间的是否可用产生怀疑换句话来说，就是使用者在在使用的过程中会考虑，这底功能性的按钮，还是应用表达的信息。所以，做好扁平化设计并不是刻不容缓的。更不是单纯的做简单的减法，而是通过对设计界面各个色块的合理运用、以及不同功能的区域文字信息等细微的调整，最终达到最大化的功能性和最简化的观赏性。第二章 扁平化设计风格运用的未来趋势扁平化设计风格是极简的延伸，推崇“简单”、着重实用，在视觉的实用上，有奇特的规律。简单但是不会简陋，虽然是简单的风格，但实用不一样以往的风格，使扁平化设计在实际运用上十分惊奇，传递出的信息也是极为丰富。2.1 设计元素的提炼现在手机的屏幕越来越大，但其实也就是一个相对来说很小的展示空间，对于现在信息化时代越来越大的信息量，如何设计好，满足用户的信息需求， 的的确确给现代设计师出了一道难题。以往经常被使用的拟物化设计，其中细节往往太过于细腻，界面的设计师们常常把自己的精力集中在如何把图标做的更为真实，细化。经过许些时间， 让许许多多用户造成了视觉疲劳，越看越腻，细节越多的图标，也使得用户注意力集中在图标上，去识别这个图标的含义，造成一些用户使用中感知不佳。扁平化设计对其提炼，使得图标更为简洁，从而解决了这一类问题。2.1.1 社会消费需求的转变而对信息简化的最好举例就是老子与毕加索的牛一开始的画整体的牛造型，到之后只用了一根根线条，之间的过程一目了然。其中，画家不仅仅将自己的作品进行了简化，更主要的是他知道对这个事物的认知，知道应该保留或不保留什么，不需要什么。图 2-1毕加索绘画牛在扁平化设计之中，简化也是一个不简单的过程。不管是一个看似简单的图标，还是让人眼睛一亮的界面；从开始到结束，极为需要的是对于事物更深的理解。形式服从功能，就是将传递出的信息更简单易懂，让用户获取的信息最大化。IPHONE的 IOS7 系统举例，在图标的设计，其中不是将原有的图标按部就班过来，去掉一个阴影就放上去，然是经过重新设计，让图标从视觉和传递出的信息量，都更加扁平化。图 2-2IOS 6 系统与 IOS 7一部分图标设计对比2.1.2 去处装饰一些奇特的视觉特效在拟物化设计中，的确不可或缺，它那些特效能将图标赋予跟现实中物品更将近。而这些视觉上的感觉，特效，往往让其设计师付出了许许多多的精力，忽视了其产品的实用性，反而会显得更加多余。所以到了今天，扁平化的设计，最重要的地方就是去掉这些绣花枕头，让其更加实用，看起来更为简单。在各种电子产品的界面中，有这许多各式各样的图标。无论手机还是电脑，每一个用户的指令，都是通过点击图标实现的。让图标使用扁平化设计，可以让其更简约，去掉其中不需要的部分。去除渐变、阴影、纹理，只有简单的分界线，可以更好地传递出用户所需要的信息，让产品更简单易懂，一目了然，从而也更节省了设计师的精力，让其可以更注重产品的实用性。去除多于的装饰画效果，让整个界面处于扁平的层级，使得界面简单、整洁。用过合理化的布局之后和一些独特的色彩运用，使得信息展示更加清晰。举例：苹果智能手机IOS6 与 IOS7 的计算器设计非常明显的看到IOS 7的图标更加的大，其中的内容也更加的清晰易懂，增加了产品的实用性。在 IOS7 的通讯录设计上，去除了多余的边框设计，使得信息展示的更加简洁明了。图 2-3苹果IOS 6 与 IOS 7 计算器图标等对比图 2-4苹果IOS 6 与 IOS 7 通讯录图标等对比2.2.3 图形几何形拟物化设计，让实物与电子类产物关系更为紧密，让用户更快使用到最新最好的电子产品，使其了解使用的技巧。但是，如果用户对于已经逐渐的熟悉，图标、按钮等所运用的图形呈几何化、符号化，就能让更多的进阶用户，更加熟练的使用产品。如果进行扁平化之后，图形就更加简单明了，让人一看就懂的图标会更受到喜爱，而其展示出越来越多的信息量时，功能就越来越明显。2.2 风格配色选择去除了那些多余的特效，使得界面更为简约，将所有的信息都展示在这一界面上， 配色是其中十分重要的的一步过程。通过色彩的色相、明度、纯度（三项对比），使得其展示的界面图标更加的鲜明，富有层次化，使得用户一目了然，也不易于用户产生视觉疲劳的感觉。