扁平化設(shè)計風(fēng)格下平面視覺元素的應(yīng)用研究藝術(shù)設(shè)計專業(yè)

《扁平化設(shè)計風(fēng)格下平面視覺元素的應(yīng)用研究藝術(shù)設(shè)計專業(yè)》由會員分享，可在線閱讀，更多相關(guān)《扁平化設(shè)計風(fēng)格下平面視覺元素的應(yīng)用研究藝術(shù)設(shè)計專業(yè)（17頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第二章 扁平化設(shè)計中的主要平面視覺元素分析 扁平化設(shè)計風(fēng)格下平面視覺元素的應(yīng)用研究 目 錄 前言 1 第一章 扁平化設(shè)計概述 3 1.1 扁平化設(shè)計的概念 3 1.1.1界面設(shè)計中的扁平化設(shè)計 3 1.1.2交互設(shè)計中的扁平化設(shè)計 3 1.2 扁平化設(shè)計的起源與發(fā)展 4 1.2.1扁平化設(shè)計的風(fēng)格起源 4 1.2.2扁平化設(shè)計的發(fā)展過程 6 1.3 擬物化設(shè)計與扁平化設(shè)計的對比 7 1.3.1擬物化設(shè)計特點 8 1.3.2扁平化設(shè)計特點 8 第二章 扁平化設(shè)計中的主要平面視覺元素分析 10 2.1 設(shè)計元素的提煉 10 2.1.1提煉主要內(nèi)容 10 2.

2、1.2去除特效裝飾 11 2.1.3圖形幾何、符號化 12 2.2 風(fēng)格配色的選擇 13 2.2.1用色選擇 13 2.2.2利用色塊 16 2.3 字體的運用 16 2.4 版式的合理優(yōu)化 19 2.4.1網(wǎng)格系統(tǒng) 19 2.4.2大圖運用 21 2.4.3半透明 21 2.5 獨特風(fēng)格和細(xì)節(jié)的呈現(xiàn) 22 第三章 扁平化風(fēng)格在各平面設(shè)計領(lǐng)域中的應(yīng)用 24 3.1 各平面設(shè)計領(lǐng)域?qū)Ρ馄交L(fēng)格的運用 24 3.1.1Windows phone扁平化風(fēng)格 24 3.1.2蘋果移動端扁平化風(fēng)格 25 3.2 29 第四章 扁平化設(shè)計風(fēng)格運用的未來趨勢 30 4.1

3、 淡化聯(lián)系 30 4.2簡化設(shè)計 30 4.3緩解審美疲勞 31 結(jié)論 43 參考文獻(xiàn) 44 致 謝 45 摘 要 隨著信息化社會進(jìn)程速度的不斷加速攀升，數(shù)字化社會的到來，人們獲取信息的方式變得與眾不同，手機(jī)、電腦等信息終端和設(shè)備在人們生活中扮演著越來越重要的角色，“移動界面”成為我們傳遞信息的主要來源之一。由此信息化科技的發(fā)展十分迅猛，于是不可避免的帶來了一系列的影響：移動終端設(shè)備的普及，人們越來越多的使用移動設(shè)備來獲得

4、各種信息，人們越來月越多的喜歡簡約的設(shè)計風(fēng)格和簡便的思維方式。對于平面設(shè)計領(lǐng)域，尤其是 UI(User Interface 用戶界設(shè)計)方面，扁平化簡約的界面風(fēng)格自然就嶄露頭角。本文將從扁平化設(shè)計風(fēng)格的概念、起源，發(fā)展過程等系統(tǒng)地分析手機(jī) APP、網(wǎng)頁等對扁平化風(fēng)格的運用，并逐一讓更多地人去了解接觸分析其中的扁平化設(shè)計并對扁平化設(shè)計風(fēng)格做出較為精細(xì)的分析形成系統(tǒng)的個人見解。應(yīng)道設(shè)計師從人性美的角度出發(fā)做出人性化，簡約美具有時代意義的設(shè)計。 關(guān)鍵詞：扁平化設(shè)計；設(shè)計師；UI；移動設(shè)備；簡約美；設(shè)計

5、 Abstract As 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, &

6、quot;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 m

7、ore 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, developmen

8、t 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 th

9、e 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 前 言 隨著信息化社會進(jìn)程的不斷加速攀升，人們越來越多的運用移動設(shè)備來獲得各種信息，而力求“簡化”的思維方法每時每刻都在影響著人們的生

10、活的各個方面 ，也影響著設(shè)計師的設(shè)計方向。對于平面設(shè)計領(lǐng)域，尤其是 UI(UserInterface 用戶界設(shè)計)方面，扁平化簡約的界面風(fēng)格自然就嶄露頭角。 這種“扁平化”的設(shè)計風(fēng)格席卷了整個平面設(shè)計的風(fēng)尚界，帶來了難以估量的新影響。扁平化設(shè)計顛覆性的簡約化設(shè)計風(fēng)格，不僅符合了如今信息化時代的特點和人民的需求。其他設(shè)計的各個方面都開始向扁平化風(fēng)格轉(zhuǎn)變，并發(fā)展至今。人們對美的認(rèn)知，是隨著時間的推移而發(fā)生變化的，不同風(fēng)格的出現(xiàn)從某種角度來說是有其出現(xiàn)理由的，如何利用好它使之變得更好才是真正需要解決的。 設(shè)計人員持著“以人為本”的人性化理念，為消費者提供更為便于操作的界面。而且UI 是人們每天都

11、需要接觸的，當(dāng)你打開電腦或者翻閱手機(jī)映入眼簾的就是界面，由此可見界面設(shè)計的好壞直接影響使用者的使用感受，好的界面設(shè)計能提供良好的用戶體驗，方便安全可靠的操作流程，更加直觀視覺語言目前比較流行的界面設(shè)計風(fēng)格為扁平化設(shè)計，扁平化設(shè)計為界面設(shè)計提供了一種新的視覺體驗方式。汪大偉在《現(xiàn)代主義風(fēng)格的 UI 設(shè)計之興起》中提到：“UI設(shè)計中擔(dān)當(dāng)著整個人機(jī)交互視覺橋梁的界面設(shè)計也就是GUI設(shè)計也由于種種原因在其發(fā)展過程中一直延續(xù)著具象化、生活化、娛樂化的面貌而缺乏一種具有現(xiàn)代主義特征的簡潔、清晰、注重傳達(dá)功能的設(shè)計風(fēng)格?！? 第一章 扁平化設(shè)計概述 1.

12、1 扁平化設(shè)計的概述 扁平化設(shè)計，是一種新新的設(shè)計風(fēng)格。扁平化，表面的意思就是說進(jìn)行信息進(jìn)行壓縮后的設(shè)計，產(chǎn)片界面“扁” “平”，說白就是拋棄繁瑣復(fù)雜的設(shè)計風(fēng)格后返璞歸真，是極簡風(fēng)格的回歸表現(xiàn)。讓設(shè)計對象感受到簡潔明了的視覺觀感，是信息凝練整合的結(jié)果表現(xiàn)更是產(chǎn)品設(shè)計功能簡化方便了很多。同意干練是扁平化設(shè)計突出的一大優(yōu)點。 1.1.1界面設(shè)計中的扁平化設(shè)計 對于扁平化設(shè)計的概念，很多的設(shè)計師都有自己的獨到的見解，并且在絕大部分實際是的心中認(rèn)為扁平化有可以叫做二維層面的設(shè)計，這是在界面設(shè)計的領(lǐng)域的層級下的大部分設(shè)計師持有的觀念。 意思就是說在界面設(shè)計中，相對于“三維立體化設(shè)計”的

13、完全不同的設(shè)計念想。它屬于平面二維設(shè)計，淡這個設(shè)計概念當(dāng)中的最核心的地方在于，在設(shè)計的在過程中拋棄所有繁瑣復(fù)雜的裝飾紋理的視覺效果，以及我們?nèi)庋鬯芨杏X到的，所有能表現(xiàn)3維立體視覺效果的元素方式表達(dá)等一概不采用，所有有關(guān)立體等元素的邊界都干干凈凈，與現(xiàn)代設(shè)計十分匹配，具有濃郁的時代意味十分濃郁。這種設(shè)計事設(shè)計師運用簡潔明了的色塊劃分，抽象、符號化的圖形表達(dá)，沒有任何進(jìn)過加工修飾的字體，簡單來說就是將一切干擾信息弱化活著是排除，突出需要表達(dá)的重要內(nèi)容與信息活著是功能化的需求。 界面設(shè)計是傳遞使用者內(nèi)心情感的一個媒介，是誰被自身對于和人類交流的一個方式方法，在悠閑地誰白上傳遞無限的信息傳設(shè)備與用

14、戶之間產(chǎn)生的無數(shù)的公民，我想這才不失為一個真正令人稱道的好設(shè)計。扁平化設(shè)計的溝通能就是讓更多的人關(guān)注到一個設(shè)備自身完整體驗的功能性價值，界面設(shè)計理當(dāng)如此。 1.1.2交互設(shè)計中的扁平化設(shè)計 第二，很早出現(xiàn)在交互式設(shè)計中的是扁平化。不同于在扁平化設(shè)計在界面設(shè)計中的概念，交互設(shè)計中的扁平化設(shè)計，相比之下表現(xiàn)得與之前的有所不同，更加的立體化。 說到交互設(shè)計中的的扁平化設(shè)計，我們先了解一下交互式設(shè)計的概念。交互式設(shè)計就是是設(shè)備與人進(jìn)行交流的設(shè)計。交互設(shè)計的對象，是人和設(shè)備。首先，通過了解設(shè)計對象對所需要產(chǎn)品設(shè)計的需求，從用戶在與產(chǎn)品進(jìn)行交互時的感受角度這點角度出發(fā)，并結(jié)合設(shè)計師對設(shè)計對象

15、本身的心理、行為等特點的分析整理，設(shè)計出各種不同類型的交互式方式，來達(dá)到設(shè)計對象的設(shè)計目的，讓產(chǎn)品功能得到有效完整的被開發(fā)，產(chǎn)品設(shè)備體驗極佳，人與設(shè)備形成“溝通”的橋梁。 數(shù)字化的社會的帶來的不僅是快速的工作節(jié)奏還有很躲需要大眾進(jìn)行篩選的信息。人們在面對各種新奇的信息來源“花了眼”于是人們選擇在接收信息和事物方面尋求一個速度。手機(jī)正式在這種情況下應(yīng)運而生的。這是人與人之間交互的一種方式，出了之前說到的，設(shè)計者產(chǎn)生了一個大膽的想法就是入和才能讓交互的過程變的簡便，這是設(shè)計者需要先思考的問題，這個時候扁平化出現(xiàn)了。由此看來，交互設(shè)計中的扁平化設(shè)計，是去掉交互式設(shè)計中華而不實事物功能保留簡潔明了具

16、有實用性的。最后，完善交互式設(shè)計中的用戶直接了當(dāng)?shù)墓δ荏w驗，以上所說的這些則是通過平面設(shè)計的扁平化圖形表達(dá)來完成。 1.2 扁平化設(shè)計的起源和發(fā)展 1.2.1扁平化設(shè)計風(fēng)格的起源 扁平化風(fēng)格之所以被大眾知道也是因為他被廣泛應(yīng)用于平面的網(wǎng)頁設(shè)計之中 ，整整開始源于微軟企業(yè)旗下推出的 Windows Phone，當(dāng)中所采用的Metro 設(shè)計風(fēng)格。真正考較氣起源的地點和任務(wù)，年代久遠(yuǎn)已經(jīng)是無法辨析了，于是我找到了下 面幾個風(fēng)格與之相近。扁平化的風(fēng)格起源大多與這些設(shè)計風(fēng)格的傳承息息相關(guān)。

17、 （一）、現(xiàn)代主義設(shè)計風(fēng)格 現(xiàn)代主義設(shè)計風(fēng)格，由 20 世紀(jì) 20 年代前后的歐洲新建筑運動發(fā)展而來并延展開來。對于新建筑運動，不僅在技術(shù)上更是在精神上都有一定的借鑒，而在設(shè)計圖形形式方面，它主張反對在任何一個設(shè)計上的簡單幾何形狀，同時，提倡設(shè)計產(chǎn)品的主觀功能美。通過建筑革命運動為契機(jī)，接建筑運動革命的影響力逐漸擴(kuò)散到各個設(shè)計領(lǐng)域，其中包括環(huán)境藝術(shù)設(shè)計、 家具設(shè)計、平面設(shè)計、工業(yè)產(chǎn)品設(shè)計等；影響較大的還是屬設(shè)計地域的劃分這塊，形成了以俄國為主導(dǎo)勢力的構(gòu)成主義運動者、以及

18、荷蘭帶領(lǐng)的“風(fēng)格派”運動者。 加上德國主張的的“工作同盟”伙伴及包豪斯設(shè)計學(xué)院學(xué)生為主的眾多設(shè)計革命運動。在這個運動期間，包豪斯設(shè)計學(xué)院成立了，現(xiàn)代主義就此誕生，不可避免的成為了整個運動的高潮。 “少即是多”的概念的提出就是在這個時間。米斯·凡德洛認(rèn)為不管是之前的極簡主義、還是如今的扁平化設(shè)計，“少即是多的設(shè)計想法 應(yīng)該在每個設(shè)計師的心中是不可磨滅的更應(yīng)該變成更為設(shè)計師去設(shè)計的一個根本標(biāo)準(zhǔn)。由“包豪斯所奠基的以觀念和解決問題為中心的現(xiàn)代主義設(shè)計體系，主張功能化的設(shè)計原則、重視工業(yè)設(shè)計與設(shè)計對象之間的關(guān)系、沒有任何裝飾的極簡主義，這些與扁平化設(shè)計表述的是同一個意思?！?

19、 （二）、瑞士風(fēng)格 在 20 世紀(jì) 50 年代，瑞士風(fēng)格慢慢形成并得到了發(fā)揚(yáng)光大，它被稱為國際主義中簡約的平面設(shè)計風(fēng)格?？梢哉f瑞士風(fēng)格是和現(xiàn)代主義設(shè)計風(fēng)格一脈相承息息相關(guān)的，其風(fēng)格的形成與發(fā)展是在包豪斯學(xué)院的影響之下的，所以其風(fēng)格作品與包豪斯密不可分。 瑞士風(fēng)格主義的核心，就在于對無襯線字體的發(fā)展以及廣泛運用（圖 1-2 瑞士風(fēng)格海報）?！巴ㄓ皿w”（Univers）和“赫爾維提加體”（Helvetica）兩種字體正是在這一時期發(fā)展形成的，逐漸發(fā)展并且成為瑞士風(fēng)格的主角。瑞士風(fēng)格提倡采用無襯線字體，和主張充 分利用網(wǎng)格結(jié)構(gòu)。瑞士風(fēng)格的設(shè)計，特點就是產(chǎn)品設(shè)計（圖 1-2 瑞士風(fēng)格海報）可以

20、達(dá)到層次分明、清晰、明確的視覺傳達(dá)效果。 比較如今的扁平化風(fēng)格你會發(fā)現(xiàn)，它與瑞士風(fēng)格是差不多的，兩者的理念各方面大致相同。同樣是簡潔明了的畫面，精煉的設(shè)計，熟練采用無襯線字體。如果真要說打折的不同之處，應(yīng)該還是在為如何快速簡練的傳遞信息的方面，扁平化注重對圖標(biāo)化圖形的概括以及應(yīng)用，以達(dá)到產(chǎn)品“功能美”的設(shè)計效果。 （三）、極簡主義設(shè)計 極簡主義設(shè)計，是在瑞士的極簡主義設(shè)計運動產(chǎn)生的。極簡主義提倡通過去除掉多余的色彩等裝飾性元素，最簡化影響主要內(nèi)容傳遞的干擾元素，使重要的，主要的信息成為整個設(shè)計畫面的焦點。絕大多數(shù)極簡主義設(shè)計師的設(shè)計作品中，呈現(xiàn)出極簡主義的畫面表達(dá)的特點：元素少、

21、線條簡潔明了、凝練的圖像幾何化。 極簡主義對元素進(jìn)行精簡概括，卻在設(shè)計作品中對設(shè)計目標(biāo)的表現(xiàn)手法上不限制。畫面的陰影、漸變、投影這些只要能為為畫面增加層次感、替身設(shè)計深度的形式感之類的，極簡主義的平面設(shè)計中經(jīng)常出現(xiàn)，很受一些設(shè)計師的青睞。 1.2.2扁平化設(shè)計風(fēng)格的發(fā)展過程 扁平化并不是突然產(chǎn)生的產(chǎn)物，他基于人類變化的設(shè)計需求，忙碌的信息時代和快節(jié)奏的工作步伐導(dǎo)致的。扁平化設(shè)計將繁瑣的信息簡練帶你傳遞給閱讀者，讓信息更加有效地在大眾間廣為流傳，自然設(shè)計的目的就達(dá)到了，信息的效率增加了，傳遞的對象自然而然就會喜歡扁平化的設(shè)計風(fēng)格。以前比如無襯線字體，筆畫無任何裝飾，沒有了襯線的繁瑣

22、裝飾；標(biāo)志設(shè)計也經(jīng)常性的采用這類簡約的設(shè)計風(fēng)格，拋棄直觀的三維立體感。設(shè)計在主觀感受下顯得簡潔的同時，也增加了字體、標(biāo)志的可識別性。但是，著了日風(fēng)格我們不能把它叫做扁平化風(fēng)格，而是叫相似的“近扁平化”。所以什么叫做真正的扁平化設(shè)計呢？筆者認(rèn)為扁平化設(shè)計一定是設(shè)計行功能美突出物任何不必要裝飾的簡約化的設(shè)計。 （1） Windows Phone 的 Metro 風(fēng)格 扁平化風(fēng)格發(fā)展是從微軟推出的Window的 Metro但其實當(dāng)時盛行的得是擬物化設(shè)計風(fēng)格，這兩種風(fēng)格大相徑庭所以兩排風(fēng)格的擁護(hù)者互相難免齊了爭執(zhí)，用戶之間也有了各自的意見。大眾主要的表達(dá)的觀點是，這樣一個，沒有任何裝飾看上

23、去甚至有些單薄的設(shè)計為什么還能存活下來，甚至能與美麗繁華的擬物化經(jīng)行抗?fàn)?。用戶?dāng)然是百死不得其解，但帶來的不小的影響是值得整個設(shè)計界思考的。Windows7系統(tǒng)中擁塞純度不是很高，圖標(biāo)是標(biāo)準(zhǔn)的擬物化風(fēng)格，加上整個圖標(biāo)和文字占界面的面積不多。兩者之間的區(qū)別也是很大的，Metro 風(fēng)格是顏色多用混搭在一起，圖標(biāo)所想要表達(dá)的內(nèi)容占據(jù)了大部分。同樣大小的界面，這樣的界面增加了設(shè)計界面的效率性和可讀性，同時界面色彩清晰不復(fù)雜。然而就是這樣的簡約的設(shè)計在當(dāng)時卻并不為大眾所認(rèn)可，反而收到了一批人的反對聲響。 （二）、Android 4.0 系統(tǒng) 后來發(fā)展的扁平化風(fēng)格部分認(rèn)可，就是 Android

24、 4.0 系統(tǒng)對扁平化風(fēng)格的發(fā)揚(yáng)，讓大眾摒棄了對扁平化風(fēng)格之前的一度反對，到開始持觀望態(tài)度的良好轉(zhuǎn)變，并開始真正的對她的改變和大眾的轉(zhuǎn)變進(jìn)行思考、分析。 （三）、IOS 7 系統(tǒng) IOS 6 系統(tǒng)和蘋果公司推出的 IOS 7 系統(tǒng)不用的點在于，正式放棄了擬物化風(fēng)格，開始采用扁平化風(fēng)格，這使得打破了大眾對扁平化風(fēng)格的最初印象，大眾包括之前反對的設(shè)計師開始嘗試接受扁平化，并試著開始在手機(jī) APP、網(wǎng)頁設(shè)計中，大量得運用扁平化設(shè)計。在IOS7中 設(shè)計師對于整個手機(jī)營業(yè)用的圖標(biāo)等進(jìn)項可第二次創(chuàng)造，簡化了按鈕等信息層級之間的裝飾性內(nèi)容。更在這個歌的基礎(chǔ)之上還不斷地更新再創(chuàng)造，使其功能美的特

25、點尤為顯著。這樣一來實現(xiàn)了應(yīng)用功能最大化的使得信息傳遞速率最快速。 1.3 擬物化設(shè)計與扁平化設(shè)計的對比 擬物化設(shè)計和扁平化設(shè)計都是被設(shè)計師廣泛應(yīng)用的風(fēng)格，以最近的趨勢來看，扁平化設(shè)計風(fēng)格漸漸有取代擬物化設(shè)計風(fēng)格的地位，這一趨勢無意識業(yè)界對于扁平化風(fēng)格的廣泛認(rèn)識，但是如果要真的區(qū)分區(qū)設(shè)計風(fēng)格之間誰好誰壞扥問題。我們只能說，設(shè)計師面對的環(huán)境和情況不一樣，選擇的風(fēng)格自然是不一樣的，所以不可以用好還去界定設(shè)計風(fēng)格，只能說誰更適合這個風(fēng)格。如果非要給他們一個相對大眾理解的范疇，我想很多設(shè)計師，用形式主義對應(yīng)擬物設(shè)計和功能主義對應(yīng)扁平化設(shè)計。 1.3.1擬物化設(shè)計特點 擬物化是什

26、么意思呢？在維基百科中， 將擬物化的定義等同于仿制品，指原有對象中某些必需的形式在新的設(shè)計中已不再必要，但新設(shè)計仍模仿舊有形式。換句話說，擬物化設(shè)計用界面設(shè)計中得語言表達(dá)就是如何去應(yīng)用它，說白了也就是通過在對顯示生活中的物品等進(jìn)行細(xì)致的觀察之后運用高仿的材質(zhì)，設(shè)計與現(xiàn)實圖形極為相似的圖標(biāo)。就算使用者在不會使用或不懂網(wǎng)絡(luò)應(yīng)用的情況下，都可以通過看到圖標(biāo)的樣子能夠大概猜出圖標(biāo)所想表達(dá)的意思以及使用方法。設(shè)計的目標(biāo)是為了表達(dá)出逼真的效果，讓所表達(dá)的物體更加 的精細(xì)化、層次化，還有在物體上對各種特效的運用。換句話說，擬物化設(shè)計讓繁復(fù)的數(shù)字世界，變得具象，簡單也更容易被大眾所接受。IOS 系統(tǒng)的人機(jī)界面

27、指南認(rèn)為：“當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實世界中的對象與操作模仿，用戶就能快速領(lǐng)會如何使用它?！? 但是數(shù)字化世界的到來，擬物化設(shè)計實在是過于注重細(xì)節(jié)，不再能夠適用于快節(jié)奏生活的大眾，逼真但繁復(fù)的細(xì)節(jié)裝飾，阻礙了人們對于快速識別知識傳遞信息的需求。逼真的擬物缺少了觸感上的與用戶聯(lián)想在一起的共鳴，使用者感受不到物品的情感交流。 1.3.2 扁平化設(shè)計特點 扁平化設(shè)計最老嫗?zāi)芙獾奶攸c是不采用3D 效果注重頁面的簡潔。扁平化設(shè)計為大眾所接受的，更多的應(yīng)該是扁平化的設(shè)計理念，以及思維方式。作為設(shè)計師要關(guān)注的除了簡潔明了的視覺效果帶，良好的操作體驗，還有優(yōu)美的視覺效果但是這些都是應(yīng)用的

28、“外”更多地關(guān)注到功能的本身。這就是為什么要突出功能讓界面繁從簡問題的原因。設(shè)計師從用戶思考的角度出發(fā)考慮了如何達(dá)到簡潔的方法，才設(shè)計出如今我所認(rèn)識到的扁平化風(fēng)格。 扁平化設(shè)計特有的特點其設(shè)計理念來源芝加哥建筑學(xué)派的知名學(xué)者路易斯?沙利文。在20世紀(jì)初期提出了這一口號“形式服從功能”。他的意思是， 只要裝飾部分與整體部分相互交融，那么它比看起來像貼上去的裝飾要美得多。正式這樣的設(shè)計口號對現(xiàn)代主義設(shè)計影響至深。如今的扁平化設(shè)計，功能性是第一要素，任何裝飾在這點上都變得畫蛇添足。 但是，扁平化設(shè)計不可能不存在問題，其中相對突出的一個問題是，界面上的所有元素，手動設(shè)計成二維設(shè)計，這些二維的元素都

29、處于一層級中，更加沒有立體性。如果再想裝飾元素去掉維持功能性的表達(dá)，使用者在使用過程中難免對哥哥不見之間的是否可用產(chǎn)生懷疑換句話來說，就是使用者在在使用的過程中會考慮，這底功能性的按鈕，還是應(yīng)用表達(dá)的信息。所以，做好扁平化設(shè)計并不是刻不容緩的。更不是單純的做簡單的減法，而是通過對設(shè)計界面各個色塊的合理運用、以及不同功能的區(qū)域文字信息等細(xì)微的調(diào)整，最終達(dá)到最大化的功能性和最簡化的觀賞性。 第二章 扁平化設(shè)計風(fēng)格運用的未來趨勢 扁平化設(shè)計風(fēng)格是極簡的延伸，推崇“簡單”、著重實用，在視覺的實用上，有奇特的規(guī)律。簡單但是不會簡陋，雖然是簡單的風(fēng)格，但實用不一樣以往的風(fēng)格，使扁平化設(shè)計在實際

30、運用上十分驚奇，傳遞出的信息也是極 為豐富。 2.1 設(shè)計元素的提煉 現(xiàn)在手機(jī)的屏幕越來越大，但其實也就是一個相對來說很小的展示空間，對于現(xiàn)在信息化時代越來越大的信息量，如何設(shè)計好，滿足用戶的信息需求， 的的確確給現(xiàn)代設(shè)計師出了一道難題。 以往經(jīng)常被使用的擬物化設(shè)計，其中細(xì)節(jié)往往太過于細(xì)膩，界面的設(shè)計師們常常把自己的精力集中在如何把圖標(biāo)做的更為真實，細(xì)化。經(jīng)過許些時間， 讓許許多多用戶造成了視覺疲勞，越看越膩，細(xì)節(jié)越多的圖標(biāo)，也使得用戶注意力集中在圖標(biāo)上，去識別這個圖標(biāo)的含義，造成一些用戶使用中感知不佳。扁平化設(shè)計對其提煉，使得圖標(biāo)更為簡潔，從而解決了這一類問題。 2.1

31、.1 社會消費需求的轉(zhuǎn)變 而對信息簡化的最好舉例就是老子與畢加索的《?！芬婚_始的畫整體的牛造型，到之后只用了一根根線條，之間的過程一目了然。其中，畫家不僅僅將自己的作品進(jìn)行了簡化，更主要的是他知道對這個事物的認(rèn)知，知道應(yīng)該保留或不保留什么，不需要什么。 圖 2-1畢加索繪畫《?！? 在扁平化設(shè)計之中，簡化也是一個不簡單的過程。不管是一個看似簡單的圖標(biāo)，還是讓人眼睛一亮的界面；從開始到結(jié)束，極為需要的是對于事物更深的理解。形式服從功能，就是將傳遞出的信息更簡單易懂，讓用戶獲取的信息最大化。 IPHONE的 IOS7 系統(tǒng)舉例，在圖標(biāo)

32、的設(shè)計，其中不是將原有的圖標(biāo)按部就班過來，去掉一個陰影就放上去，然是經(jīng)過重新設(shè)計，讓圖標(biāo)從視覺和傳遞出的信息量，都更加扁平化。 圖 2-2 IOS 6 系統(tǒng)與 IOS 7一部分圖標(biāo)設(shè)計對比 2.1.2 去處裝飾 一些奇特的視覺特效在擬物化設(shè)計中，的確不可或缺，它那些特效能將圖標(biāo)賦予跟現(xiàn)實中物品更將近。而這些視覺上的感覺，特效，往往讓其設(shè)計師付出了許許多多的精力，忽視了其產(chǎn)品的實用性，反而會顯得更加多余。所以到了今天，扁平化的設(shè)計，最重要的地方就是去掉這些繡花枕頭，讓其更加實用，看起來更為簡單。 在各種電子產(chǎn)品的界面中，有這許多各式各樣的圖標(biāo)。無論手機(jī)還是電腦，每一個用戶的指

33、令，都是通過點擊圖標(biāo)實現(xiàn)的。讓圖標(biāo)使用扁平化設(shè)計，可以讓其更簡約，去掉其中不需要的部分。去除漸變、陰影、紋理，只有簡單的分界線，可以更好地傳遞出用戶所需要的信息，讓產(chǎn)品更簡單易懂，一目了然，從而也更節(jié)省了設(shè)計師的精力，讓其可以更注重產(chǎn)品的實用性。 去除多于的裝飾畫效果，讓整個界面處于扁平的層級，使得界面簡單、整潔。用過合理化的布局之后和一些獨特的色彩運用，使得信息展示更加清晰。舉例：蘋果智能手機(jī) IOS6 與 IOS7 的計算器設(shè)計非常明顯的看到IOS 7的圖標(biāo)更加的大，其中的內(nèi)容也更加的清晰易懂，增加了產(chǎn)品的實用性。在 IOS7 的通訊錄設(shè)計上，去除了多余的邊框設(shè)計，使得信息展示的更加簡

34、潔明了。 圖 2-3 蘋果IOS 6 與 IOS 7 計算器圖標(biāo)等對比 圖 2-4 蘋果IOS 6 與 IOS 7 通訊錄圖標(biāo)等對比 2.2.3 圖形幾何形 擬物化設(shè)計，讓實物與電子類產(chǎn)物關(guān)系更為緊密，讓用戶更快使用到最新最好的電子產(chǎn)品，使其了解使用的技巧。但是，如果用戶對于已經(jīng)逐漸的熟悉， 圖標(biāo)、按鈕等所運用的圖形呈幾何化、符號化，就能讓更多的進(jìn)階用戶，更加熟練的使用產(chǎn)品。如果進(jìn)行扁平化之后，圖形就更加簡單明了，讓人一看就懂的圖標(biāo)會更受到喜愛，而其展示出越來越多的信息量時，功能就越來越明顯。 2.2 風(fēng)格配色選擇 去除了那些多余的特效，使得界面更為簡約，將所有的信息都展示在這一界面上， 配色是其中十分重要的的一步過程。通過色彩的色相、明度、純度（三項對比），使得其展示的界面圖標(biāo)更加的鮮明，富有層次化，使得用戶一目了然，也不易于用戶產(chǎn)生視覺疲勞的感覺。