《扁平化設計風格下平面視覺元素的應用研究藝術設計專業(yè)》由會員分享，可在線閱讀，更多相關《扁平化設計風格下平面視覺元素的應用研究藝術設計專業(yè)（17頁珍藏版）》請在裝配圖網上搜索。
1、第二章 扁平化設計中的主要平面視覺元素分析扁平化設計風格下平面視覺元素的應用研究目 錄前言1第一章 扁平化設計概述31.1 扁平化設計的概念31.1.1界面設計中的扁平化設計31.1.2交互設計中的扁平化設計31.2 扁平化設計的起源與發(fā)展41.2.1扁平化設計的風格起源41.2.2扁平化設計的發(fā)展過程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.2利用色塊162.3 字體的運用162.4 版式的合理優(yōu)化192.4.1網格系統(tǒng)192.4.2大圖運用212.4.3半透明212.5 獨特風格和細節(jié)的呈現(xiàn)22第三章 扁平化風格在各平面設計領域中的應用243.1 各平面設計領域對扁平化風格的運用243.1.1Windows phone扁平化風格243.1.2蘋果移動端扁平化風格253.2 29第四章 扁平化設計風格運用的未來趨勢304.1 淡化聯(lián)系304.2簡化設計304.3緩解審美疲勞31結論43參考文獻44致 謝45摘 要隨著信息化社會進程速度的不斷加速攀升，數(shù)字化社會的到來，人們獲取信息的方式變得與眾不同，手機、電腦等信息終端和設備
3、在人們生活中扮演著越來越重要的角色，“移動界面”成為我們傳遞信息的主要來源之一。由此信息化科技的發(fā)展十分迅猛，于是不可避免的帶來了一系列的影響：移動終端設備的普及，人們越來越多的使用移動設備來獲得各種信息，人們越來月越多的喜歡簡約的設計風格和簡便的思維方式。對于平面設計領域，尤其是 UI(User Interface 用戶界設計)方面，扁平化簡約的界面風格自然就嶄露頭角。本文將從扁平化設計風格的概念、起源，發(fā)展過程等系統(tǒng)地分析手機 APP、網頁等對扁平化風格的運用，并逐一讓更多地人去了解接觸分析其中的扁平化設計并對扁平化設計風格做出較為精細的分析形成系統(tǒng)的個人見解。應道設計師從人性美的角度出發(fā)
4、做出人性化，簡約美具有時代意義的設計。關鍵詞：扁平化設計；設計師；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 im
5、portant 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 al
6、l 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
7、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 ofperson
8、al 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前 言隨著信息化社會進程的不斷加速攀升，人們越來越多的運用移動設備來獲得各種信息，而力求“簡化”的思維方法每時每刻都在影響著人們的生活的各個方面 ，也影響著設計師的設
9、計方向。對于平面設計領域，尤其是 UI(UserInterface 用戶界設計)方面，扁平化簡約的界面風格自然就嶄露頭角。這種“扁平化”的設計風格席卷了整個平面設計的風尚界，帶來了難以估量的新影響。扁平化設計顛覆性的簡約化設計風格，不僅符合了如今信息化時代的特點和人民的需求。其他設計的各個方面都開始向扁平化風格轉變，并發(fā)展至今。人們對美的認知，是隨著時間的推移而發(fā)生變化的，不同風格的出現(xiàn)從某種角度來說是有其出現(xiàn)理由的，如何利用好它使之變得更好才是真正需要解決的。設計人員持著“以人為本”的人性化理念，為消費者提供更為便于操作的界面。而且UI 是人們每天都需要接觸的，當你打開電腦或者翻閱手機映入眼
10、簾的就是界面，由此可見界面設計的好壞直接影響使用者的使用感受，好的界面設計能提供良好的用戶體驗，方便安全可靠的操作流程，更加直觀視覺語言目前比較流行的界面設計風格為扁平化設計，扁平化設計為界面設計提供了一種新的視覺體驗方式。汪大偉在現(xiàn)代主義風格的 UI 設計之興起中提到：“UI設計中擔當著整個人機交互視覺橋梁的界面設計也就是GUI設計也由于種種原因在其發(fā)展過程中一直延續(xù)著具象化、生活化、娛樂化的面貌而缺乏一種具有現(xiàn)代主義特征的簡潔、清晰、注重傳達功能的設計風格?！钡谝徽?扁平化設計概述1.1 扁平化設計的概述扁平化設計，是一種新新的設計風格。扁平化，表面的意思就是說進行信息進行壓縮后的設計，產
11、片界面“扁” “平”，說白就是拋棄繁瑣復雜的設計風格后返璞歸真，是極簡風格的回歸表現(xiàn)。讓設計對象感受到簡潔明了的視覺觀感，是信息凝練整合的結果表現(xiàn)更是產品設計功能簡化方便了很多。同意干練是扁平化設計突出的一大優(yōu)點。1.1.1界面設計中的扁平化設計對于扁平化設計的概念，很多的設計師都有自己的獨到的見解，并且在絕大部分實際是的心中認為扁平化有可以叫做二維層面的設計，這是在界面設計的領域的層級下的大部分設計師持有的觀念。 意思就是說在界面設計中，相對于“三維立體化設計”的完全不同的設計念想。它屬于平面二維設計，淡這個設計概念當中的最核心的地方在于，在設計的在過程中拋棄所有繁瑣復雜的裝飾紋理的視覺效果
12、，以及我們肉眼所能感覺到的，所有能表現(xiàn)3維立體視覺效果的元素方式表達等一概不采用，所有有關立體等元素的邊界都干干凈凈，與現(xiàn)代設計十分匹配，具有濃郁的時代意味十分濃郁。這種設計事設計師運用簡潔明了的色塊劃分，抽象、符號化的圖形表達，沒有任何進過加工修飾的字體，簡單來說就是將一切干擾信息弱化活著是排除，突出需要表達的重要內容與信息活著是功能化的需求。界面設計是傳遞使用者內心情感的一個媒介，是誰被自身對于和人類交流的一個方式方法，在悠閑地誰白上傳遞無限的信息傳設備與用戶之間產生的無數(shù)的公民，我想這才不失為一個真正令人稱道的好設計。扁平化設計的溝通能就是讓更多的人關注到一個設備自身完整體驗的功能性價值
13、，界面設計理當如此。1.1.2交互設計中的扁平化設計第二，很早出現(xiàn)在交互式設計中的是扁平化。不同于在扁平化設計在界面設計中的概念，交互設計中的扁平化設計，相比之下表現(xiàn)得與之前的有所不同，更加的立體化。說到交互設計中的的扁平化設計，我們先了解一下交互式設計的概念。交互式設計就是是設備與人進行交流的設計。交互設計的對象，是人和設備。首先，通過了解設計對象對所需要產品設計的需求，從用戶在與產品進行交互時的感受角度這點角度出發(fā)，并結合設計師對設計對象本身的心理、行為等特點的分析整理，設計出各種不同類型的交互式方式，來達到設計對象的設計目的，讓產品功能得到有效完整的被開發(fā)，產品設備體驗極佳，人與設備形成
14、“溝通”的橋梁。數(shù)字化的社會的帶來的不僅是快速的工作節(jié)奏還有很躲需要大眾進行篩選的信息。人們在面對各種新奇的信息來源“花了眼”于是人們選擇在接收信息和事物方面尋求一個速度。手機正式在這種情況下應運而生的。這是人與人之間交互的一種方式，出了之前說到的，設計者產生了一個大膽的想法就是入和才能讓交互的過程變的簡便，這是設計者需要先思考的問題，這個時候扁平化出現(xiàn)了。由此看來，交互設計中的扁平化設計，是去掉交互式設計中華而不實事物功能保留簡潔明了具有實用性的。最后，完善交互式設計中的用戶直接了當?shù)墓δ荏w驗，以上所說的這些則是通過平面設計的扁平化圖形表達來完成。1.2 扁平化設計的起源和發(fā)展1.2.1扁平
15、化設計風格的起源扁平化風格之所以被大眾知道也是因為他被廣泛應用于平面的網頁設計之中 ，整整開始源于微軟企業(yè)旗下推出的 Windows Phone，當中所采用的Metro 設計風格。真正考較氣起源的地點和任務，年代久遠已經是無法辨析了，于是我找到了下 面幾個風格與之相近。扁平化的風格起源大多與這些設計風格的傳承息息相關。 （一）、現(xiàn)代主義設計風格現(xiàn)代主義設計風格，由 20 世紀 20 年代前后的歐洲新建筑運動發(fā)展而來并延展開來。對于新建筑運動，不僅在技術上更是在精神上都有一定的借鑒，而在設計圖形形式方面，它主張反對在任何一個設計上的簡單幾何形狀，同時，提倡設計產品的主觀功能美。通過建筑革命運動為
16、契機，接建筑運動革命的影響力逐漸擴散到各個設計領域，其中包括環(huán)境藝術設計、家具設計、平面設計、工業(yè)產品設計等；影響較大的還是屬設計地域的劃分這塊，形成了以俄國為主導勢力的構成主義運動者、以及荷蘭帶領的“風格派”運動者。加上德國主張的的“工作同盟”伙伴及包豪斯設計學院學生為主的眾多設計革命運動。在這個運動期間，包豪斯設計學院成立了，現(xiàn)代主義就此誕生，不可避免的成為了整個運動的高潮?！吧偌词嵌唷钡母拍畹奶岢鼍褪窃谶@個時間。米斯·凡德洛認為不管是之前的極簡主義、還是如今的扁平化設計，“少即是多的設計想法 應該在每個設計師的心中是不可磨滅的更應該變成更為設計師去設計的一個根本標準。由“包豪斯
17、所奠基的以觀念和解決問題為中心的現(xiàn)代主義設計體系，主張功能化的設計原則、重視工業(yè)設計與設計對象之間的關系、沒有任何裝飾的極簡主義，這些與扁平化設計表述的是同一個意思?！保ǘ⑷鹗匡L格在 20 世紀 50 年代，瑞士風格慢慢形成并得到了發(fā)揚光大，它被稱為國際主義中簡約的平面設計風格。可以說瑞士風格是和現(xiàn)代主義設計風格一脈相承息息相關的，其風格的形成與發(fā)展是在包豪斯學院的影響之下的，所以其風格作品與包豪斯密不可分。瑞士風格主義的核心，就在于對無襯線字體的發(fā)展以及廣泛運用（圖 1-2 瑞士風格海報）。“通用體”（Univers）和“赫爾維提加體”（Helvetica）兩種字體正是在這一時期發(fā)展形成
18、的，逐漸發(fā)展并且成為瑞士風格的主角。瑞士風格提倡采用無襯線字體，和主張充 分利用網格結構。瑞士風格的設計，特點就是產品設計（圖 1-2瑞士風格海報）可以達到層次分明、清晰、明確的視覺傳達效果。比較如今的扁平化風格你會發(fā)現(xiàn)，它與瑞士風格是差不多的，兩者的理念各方面大致相同。同樣是簡潔明了的畫面，精煉的設計，熟練采用無襯線字體。如果真要說打折的不同之處，應該還是在為如何快速簡練的傳遞信息的方面，扁平化注重對圖標化圖形的概括以及應用，以達到產品“功能美”的設計效果。（三）、極簡主義設計極簡主義設計，是在瑞士的極簡主義設計運動產生的。極簡主義提倡通過去除掉多余的色彩等裝飾性元素，最簡化影響主要內容傳遞
19、的干擾元素，使重要的，主要的信息成為整個設計畫面的焦點。絕大多數(shù)極簡主義設計師的設計作品中，呈現(xiàn)出極簡主義的畫面表達的特點：元素少、線條簡潔明了、凝練的圖像幾何化。極簡主義對元素進行精簡概括，卻在設計作品中對設計目標的表現(xiàn)手法上不限制。畫面的陰影、漸變、投影這些只要能為為畫面增加層次感、替身設計深度的形式感之類的，極簡主義的平面設計中經常出現(xiàn)，很受一些設計師的青睞。1.2.2扁平化設計風格的發(fā)展過程扁平化并不是突然產生的產物，他基于人類變化的設計需求，忙碌的信息時代和快節(jié)奏的工作步伐導致的。扁平化設計將繁瑣的信息簡練帶你傳遞給閱讀者，讓信息更加有效地在大眾間廣為流傳，自然設計的目的就達到了，信
20、息的效率增加了，傳遞的對象自然而然就會喜歡扁平化的設計風格。以前比如無襯線字體，筆畫無任何裝飾，沒有了襯線的繁瑣裝飾；標志設計也經常性的采用這類簡約的設計風格，拋棄直觀的三維立體感。設計在主觀感受下顯得簡潔的同時，也增加了字體、標志的可識別性。但是，著了日風格我們不能把它叫做扁平化風格，而是叫相似的“近扁平化”。所以什么叫做真正的扁平化設計呢？筆者認為扁平化設計一定是設計行功能美突出物任何不必要裝飾的簡約化的設計。（1） Windows Phone 的 Metro 風格扁平化風格發(fā)展是從微軟推出的Window的 Metro但其實當時盛行的得是擬物化設計風格，這兩種風格大相徑庭所以兩排風格的擁護
21、者互相難免齊了爭執(zhí)，用戶之間也有了各自的意見。大眾主要的表達的觀點是，這樣一個，沒有任何裝飾看上去甚至有些單薄的設計為什么還能存活下來，甚至能與美麗繁華的擬物化經行抗爭。用戶當然是百死不得其解，但帶來的不小的影響是值得整個設計界思考的。Windows7系統(tǒng)中擁塞純度不是很高，圖標是標準的擬物化風格，加上整個圖標和文字占界面的面積不多。兩者之間的區(qū)別也是很大的，Metro 風格是顏色多用混搭在一起，圖標所想要表達的內容占據了大部分。同樣大小的界面，這樣的界面增加了設計界面的效率性和可讀性，同時界面色彩清晰不復雜。然而就是這樣的簡約的設計在當時卻并不為大眾所認可，反而收到了一批人的反對聲響。（二）
22、、Android 4.0 系統(tǒng)后來發(fā)展的扁平化風格部分認可，就是 Android 4.0 系統(tǒng)對扁平化風格的發(fā)揚，讓大眾摒棄了對扁平化風格之前的一度反對，到開始持觀望態(tài)度的良好轉變，并開始真正的對她的改變和大眾的轉變進行思考、分析。（三）、IOS 7 系統(tǒng) IOS 6 系統(tǒng)和蘋果公司推出的 IOS 7 系統(tǒng)不用的點在于，正式放棄了擬物化風格，開始采用扁平化風格，這使得打破了大眾對扁平化風格的最初印象，大眾包括之前反對的設計師開始嘗試接受扁平化，并試著開始在手機 APP、網頁設計中，大量得運用扁平化設計。在IOS7中設計師對于整個手機營業(yè)用的圖標等進項可第二次創(chuàng)造，簡化了按鈕等信息層級之間的裝飾
23、性內容。更在這個歌的基礎之上還不斷地更新再創(chuàng)造，使其功能美的特點尤為顯著。這樣一來實現(xiàn)了應用功能最大化的使得信息傳遞速率最快速。1.3 擬物化設計與扁平化設計的對比擬物化設計和扁平化設計都是被設計師廣泛應用的風格，以最近的趨勢來看，扁平化設計風格漸漸有取代擬物化設計風格的地位，這一趨勢無意識業(yè)界對于扁平化風格的廣泛認識，但是如果要真的區(qū)分區(qū)設計風格之間誰好誰壞扥問題。我們只能說，設計師面對的環(huán)境和情況不一樣，選擇的風格自然是不一樣的，所以不可以用好還去界定設計風格，只能說誰更適合這個風格。如果非要給他們一個相對大眾理解的范疇，我想很多設計師，用形式主義對應擬物設計和功能主義對應扁平化設計。1.
24、3.1擬物化設計特點擬物化是什么意思呢？在維基百科中， 將擬物化的定義等同于仿制品，指原有對象中某些必需的形式在新的設計中已不再必要，但新設計仍模仿舊有形式。換句話說，擬物化設計用界面設計中得語言表達就是如何去應用它，說白了也就是通過在對顯示生活中的物品等進行細致的觀察之后運用高仿的材質，設計與現(xiàn)實圖形極為相似的圖標。就算使用者在不會使用或不懂網絡應用的情況下，都可以通過看到圖標的樣子能夠大概猜出圖標所想表達的意思以及使用方法。設計的目標是為了表達出逼真的效果，讓所表達的物體更加 的精細化、層次化，還有在物體上對各種特效的運用。換句話說，擬物化設計讓繁復的數(shù)字世界，變得具象，簡單也更容易被大眾
25、所接受。IOS 系統(tǒng)的人機界面指南認為：“當你應用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作模仿，用戶就能快速領會如何使用它。”但是數(shù)字化世界的到來，擬物化設計實在是過于注重細節(jié)，不再能夠適用于快節(jié)奏生活的大眾，逼真但繁復的細節(jié)裝飾，阻礙了人們對于快速識別知識傳遞信息的需求。逼真的擬物缺少了觸感上的與用戶聯(lián)想在一起的共鳴，使用者感受不到物品的情感交流。1.3.2 扁平化設計特點扁平化設計最老嫗能解的特點是不采用3D 效果注重頁面的簡潔。扁平化設計為大眾所接受的，更多的應該是扁平化的設計理念，以及思維方式。作為設計師要關注的除了簡潔明了的視覺效果帶，良好的操作體驗，還有優(yōu)美的視覺效果但是這些
26、都是應用的“外”更多地關注到功能的本身。這就是為什么要突出功能讓界面繁從簡問題的原因。設計師從用戶思考的角度出發(fā)考慮了如何達到簡潔的方法，才設計出如今我所認識到的扁平化風格。扁平化設計特有的特點其設計理念來源芝加哥建筑學派的知名學者路易斯沙利文。在20世紀初期提出了這一口號“形式服從功能”。他的意思是， 只要裝飾部分與整體部分相互交融，那么它比看起來像貼上去的裝飾要美得多。正式這樣的設計口號對現(xiàn)代主義設計影響至深。如今的扁平化設計，功能性是第一要素，任何裝飾在這點上都變得畫蛇添足。但是，扁平化設計不可能不存在問題，其中相對突出的一個問題是，界面上的所有元素，手動設計成二維設計，這些二維的元素都
27、處于一層級中，更加沒有立體性。如果再想裝飾元素去掉維持功能性的表達，使用者在使用過程中難免對哥哥不見之間的是否可用產生懷疑換句話來說，就是使用者在在使用的過程中會考慮，這底功能性的按鈕，還是應用表達的信息。所以，做好扁平化設計并不是刻不容緩的。更不是單純的做簡單的減法，而是通過對設計界面各個色塊的合理運用、以及不同功能的區(qū)域文字信息等細微的調整，最終達到最大化的功能性和最簡化的觀賞性。第二章 扁平化設計風格運用的未來趨勢扁平化設計風格是極簡的延伸，推崇“簡單”、著重實用，在視覺的實用上，有奇特的規(guī)律。簡單但是不會簡陋，雖然是簡單的風格，但實用不一樣以往的風格，使扁平化設計在實際運用上十分驚奇，
28、傳遞出的信息也是極為豐富。2.1 設計元素的提煉現(xiàn)在手機的屏幕越來越大，但其實也就是一個相對來說很小的展示空間，對于現(xiàn)在信息化時代越來越大的信息量，如何設計好，滿足用戶的信息需求， 的的確確給現(xiàn)代設計師出了一道難題。以往經常被使用的擬物化設計，其中細節(jié)往往太過于細膩，界面的設計師們常常把自己的精力集中在如何把圖標做的更為真實，細化。經過許些時間， 讓許許多多用戶造成了視覺疲勞，越看越膩，細節(jié)越多的圖標，也使得用戶注意力集中在圖標上，去識別這個圖標的含義，造成一些用戶使用中感知不佳。扁平化設計對其提煉，使得圖標更為簡潔，從而解決了這一類問題。2.1.1 社會消費需求的轉變而對信息簡化的最好舉例就
29、是老子與畢加索的牛一開始的畫整體的牛造型，到之后只用了一根根線條，之間的過程一目了然。其中，畫家不僅僅將自己的作品進行了簡化，更主要的是他知道對這個事物的認知，知道應該保留或不保留什么，不需要什么。圖 2-1畢加索繪畫牛在扁平化設計之中，簡化也是一個不簡單的過程。不管是一個看似簡單的圖標，還是讓人眼睛一亮的界面；從開始到結束，極為需要的是對于事物更深的理解。形式服從功能，就是將傳遞出的信息更簡單易懂，讓用戶獲取的信息最大化。IPHONE的 IOS7 系統(tǒng)舉例，在圖標的設計，其中不是將原有的圖標按部就班過來，去掉一個陰影就放上去，然是經過重新設計，讓圖標從視覺和傳遞出的信息量，都更加扁平化。圖
30、2-2IOS 6 系統(tǒng)與 IOS 7一部分圖標設計對比2.1.2 去處裝飾一些奇特的視覺特效在擬物化設計中，的確不可或缺，它那些特效能將圖標賦予跟現(xiàn)實中物品更將近。而這些視覺上的感覺，特效，往往讓其設計師付出了許許多多的精力，忽視了其產品的實用性，反而會顯得更加多余。所以到了今天，扁平化的設計，最重要的地方就是去掉這些繡花枕頭，讓其更加實用，看起來更為簡單。在各種電子產品的界面中，有這許多各式各樣的圖標。無論手機還是電腦，每一個用戶的指令，都是通過點擊圖標實現(xiàn)的。讓圖標使用扁平化設計，可以讓其更簡約，去掉其中不需要的部分。去除漸變、陰影、紋理，只有簡單的分界線，可以更好地傳遞出用戶所需要的信息
31、，讓產品更簡單易懂，一目了然，從而也更節(jié)省了設計師的精力，讓其可以更注重產品的實用性。去除多于的裝飾畫效果，讓整個界面處于扁平的層級，使得界面簡單、整潔。用過合理化的布局之后和一些獨特的色彩運用，使得信息展示更加清晰。舉例：蘋果智能手機IOS6 與 IOS7 的計算器設計非常明顯的看到IOS 7的圖標更加的大，其中的內容也更加的清晰易懂，增加了產品的實用性。在 IOS7 的通訊錄設計上，去除了多余的邊框設計，使得信息展示的更加簡潔明了。圖 2-3蘋果IOS 6 與 IOS 7 計算器圖標等對比圖 2-4蘋果IOS 6 與 IOS 7 通訊錄圖標等對比2.2.3 圖形幾何形擬物化設計，讓實物與電子類產物關系更為緊密，讓用戶更快使用到最新最好的電子產品，使其了解使用的技巧。但是，如果用戶對于已經逐漸的熟悉，圖標、按鈕等所運用的圖形呈幾何化、符號化，就能讓更多的進階用戶，更加熟練的使用產品。如果進行扁平化之后，圖形就更加簡單明了，讓人一看就懂的圖標會更受到喜愛，而其展示出越來越多的信息量時，功能就越來越明顯。2.2 風格配色選擇去除了那些多余的特效，使得界面更為簡約，將所有的信息都展示在這一界面上， 配色是其中十分重要的的一步過程。通過色彩的色相、明度、純度（三項對比），使得其展示的界面圖標更加的鮮明，富有層次化，使得用戶一目了然，也不易于用戶產生視覺疲勞的感覺。
扁平化設計風格下平面視覺元素的應用研究藝術設計專業(yè)
