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

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

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

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

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

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

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 前 言 隨著信息化社會(huì)進(jìn)程的不斷加速攀升，人們?cè)絹碓蕉嗟倪\(yùn)用移動(dòng)設(shè)備來獲得各種信息，而力求“簡(jiǎn)化”的思維方法每時(shí)每刻都在影響著人們的生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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