扁平化——以簡約為核心的產(chǎn)品交互設(shè)計研究

許曉云　王一琳

摘要：如今的信息時代，計算機，手機等電子產(chǎn)品成為日常不可或缺的信息工具，而現(xiàn)代的信息產(chǎn)品不僅是一個孤立的事物，是較為完全貿(mào)易形式或者體系服務(wù)里的終端性產(chǎn)品，這個終端是否完備，不僅是決定此設(shè)計的自身，還涉及到了產(chǎn)品相關(guān)聯(lián)的服務(wù)帶給人們的完善體驗。

從電子產(chǎn)品交互模式自傳統(tǒng)的按鍵操作界面逐步轉(zhuǎn)變成更直觀顯示在屏幕的觸碰式電子交互界面。操作形式的轉(zhuǎn)變使得圖案的界面設(shè)計已經(jīng)成為人們在使用產(chǎn)品過程時更為直觀的視覺溝通方式。尤其在手機交互設(shè)計中，“扁平化”一詞似乎瞬間成為潮流，更是年輕用戶的掌上寵兒。

本文探索在越來越講求情感化設(shè)計的今天，摒棄擬物化為何還能成為交互設(shè)計的流行趨勢。

關(guān)鍵詞：交互設(shè)計 扁平化設(shè)計 體驗 傳達

中圖分類號：TB47

文獻標識碼：A

文章編號：1003-0069（2015）10-0080-02

一 扁平化設(shè)計的背景

在多學科的交叉研究越來越重視的大環(huán)境下，交互設(shè)計出現(xiàn)在產(chǎn)品設(shè)計的領(lǐng)域、視覺傳達專業(yè)、人機工程方面、認知心理學、社會和人類自然等科目交叉范疇，是一門新型的解決如何使用信息化產(chǎn)品的設(shè)計學科。

在國外，眾多交互設(shè)計的研究機構(gòu)和企業(yè)在人才布置上也表現(xiàn)了它多學科的特質(zhì)，麻省理工學院的媒體實驗小組成員就均由有著各種學科背景的英才構(gòu)成。為了探索利于不同學科背景的協(xié)同合作方式和手段，2008年，清華大學同樣初次啟動了信息藝術(shù)設(shè)計交叉研究生項目。

在多學科大環(huán)境下更有利于我們理解交互設(shè)計中的扁平化。即交互不僅是屏幕上的體驗，更是一種以產(chǎn)品為載體獲得整體的，主觀的感受。不僅僅是局限于手持終端或者冰冷的產(chǎn)品上。

二 扁平化設(shè)計的來源

它之所以稱之為扁平化，是此種設(shè)計方式行使的形態(tài)和特征所決定的。

它簡潔明確的定義，是二維空間內(nèi)的一種表達方式。如圖一：注重網(wǎng)絡(luò)及無襯線字體，層次分明，特征為大圖加小字體。在設(shè)計領(lǐng)域中，它的先驅(qū)極簡化設(shè)計已被接受。極簡化設(shè)計：拋開雜七雜八繁瑣的多余的東西，只剩下必要成分，早在網(wǎng)絡(luò)時代之前，已經(jīng)被廣泛應(yīng)用于建筑及視覺藝術(shù)領(lǐng)域?？梢哉f扁平風格是一種繼承和發(fā)展的重現(xiàn)。

扁平化設(shè)計的定義：僅僅采用二維元素，所有元素都不加修飾，陰影，斜線，突起，漸變等厚重的變化。這些都不會出現(xiàn)在扁平化風格的設(shè)計中。干脆，有力，極力避免雨花，陰影這樣的特效。摒棄現(xiàn)實主義，3D，擬物化元素，獨立，正角，直角，圓弧都非常重視。如圖二：iOS7不只是單單的去掉周邊的方框，將立體箭頭變成了抽象的易讀圖案，取代了條條框框使界面變得更簡潔干凈，給人“通透”感。

現(xiàn)代生活中，真正把扁平化設(shè)計應(yīng)用到極致的是當屬蘋果與微軟兩大巨頭。

三 扁平化設(shè)計的特點

顯而易見的扁平化設(shè)計能更加簡單地將所需要傳遞的信息通過更好的語言表達出來。

第一：使用效率高

屏幕上扁平化的設(shè)計不僅僅是將擬物化的圖標“拍扁”而已。傳遞同樣的信息，但相比其他風格更為簡單明了，解決了一個現(xiàn)代化社會都需求的客觀問題，即效率問題。扁平化設(shè)計元素里的色彩與版面格式都很適合使用于較小屏幕。理念在于摒棄與本質(zhì)無關(guān)的一切細小枝節(jié)，作為一種視覺反應(yīng)體系，可以在最短時間里發(fā)現(xiàn)使用者的搜索目標，其實用性在設(shè)計中即得到了表現(xiàn)。扁平化設(shè)計絕對趨向于矢量風格的圖形，在一定次序上削弱對像素精度的依賴。

這樣的“拍扁”在功能應(yīng)用上更能提高人們的效率。在信息更迭如此迅速的生活中，時間，效率皆為金錢，所以更適應(yīng)現(xiàn)代人接受信息碎片化的特點。

第二：制作成本低

首先，在設(shè)計制作時，圖層越多，分辨率越高，反映到電子屏幕上就是請求時間長，加載時間多。在配色的選擇，多中小的塊面色彩值略有不同就會給人很大的心理差異，微調(diào)細節(jié)是必不可少的。扁平化會降低表現(xiàn)形式反復調(diào)整過程。比如，如需在短時間內(nèi)更新改版網(wǎng)頁，只要給制作者提供色值，也便于下次更新使用。即節(jié)約了時間成本。

其次多種尺寸和分辨率的智能終端產(chǎn)品都能被扁平化設(shè)計很好地適應(yīng)。去除更多繁瑣和細節(jié)上的優(yōu)化處理，能更快速地適配在產(chǎn)品上，兼容性極高。

第三：高度適應(yīng)社會

現(xiàn)在，以使用，效率為主的界面，網(wǎng)頁要求其中的設(shè)計更為直觀。使用者反應(yīng)速度越快，效率越高。減少了使用者思考的時間，手指在鼠標，屏幕上停留時間更短。當在了然的圖標排列之下，浮現(xiàn)出豐富的可讀信息，這無疑會提高使用者的興奮度。

四 扁平化設(shè)計的原則

由于扁平化要保證高可用性條件下盡量地簡捷，確保應(yīng)用或者其網(wǎng)站的直觀性，易用性，和無需引導的方向。要求元素更簡單。更為突出的就在于排版重要性，確保產(chǎn)品在感官上和措辭上的統(tǒng)一性，用字的形體例舉：字體選取能夠用單一無襯線字體，經(jīng)過字體的比例大小再區(qū)別元素，極度美化過的形體和極簡設(shè)計守則相互沖突。排列版式版的結(jié)果在和輔助使用者更加理解設(shè)計，標示，按鍵等各方元素能更加注重增加易用與交互性。

第一：色彩。顏色的采用相對于扁平化設(shè)計來說極為重要，大部分網(wǎng)絡(luò)應(yīng)用色色調(diào)明亮鮮艷，平均要用到6到8種色彩。扁平化設(shè)計色彩減少，利于統(tǒng)一化，有利于契合整體頁面。

第二：極簡。上文提過扁平化設(shè)計師極簡的延伸，設(shè)計時應(yīng)該清除所有無關(guān)緊要的元素來盡量利用簡潔的色彩與文體。摒棄過多的陰影，浮現(xiàn)，紋路等因素。

第三：對比。通過大小，尺寸，顏色的對比體現(xiàn)圖標的重量感。

第四：排版。排版更清晰，合理。布局需要仔細推敲來彌補過于簡潔的圖形樣式。而過于繁瑣的圖形或多或少影響到整體的統(tǒng)一性。如圖三：優(yōu)秀的扁平化網(wǎng)頁設(shè)計摒棄圖案紋理背景，陰影文字。谷歌是第一個使用扁平化設(shè)計準備對重構(gòu)Web應(yīng)用程序的公司，現(xiàn)在越來越多的公司都在效仿。

五 扁平化風格流行的原因

第一：由于手機用戶大多在碎片式的間斷時間內(nèi)使用手機。因此手機界面應(yīng)盡量提供簡易，快捷的渠道來協(xié)助人們獲取信息，較少有關(guān)沒有縱向邏輯關(guān)系的信息。所以，扁平化設(shè)計在應(yīng)運而生之前誕生了。個人認為這是造成手機趨向扁平發(fā)展的主要原因。多層級式菜單，頁面切換系統(tǒng)進行領(lǐng)航，會增長使用者獲得信息的認知成本。它的信息組織模式與人們的認知特性相符，越來越普遍地運用于數(shù)字化產(chǎn)品界面設(shè)計中。

客觀性的界面向跳轉(zhuǎn)速率增加，盡陜盡可能又完整地呈獻給用戶。

第二：扁平化的界面設(shè)計無疑減小了言語信息溝通的距離。

第三：扁平化的界面設(shè)計在達成信息訪問透徹化的同時，相應(yīng)在程序上也增添了單頁，減輕了視覺傳遞的復雜水準。

提高了信息訪問效率，與認知的成本。

第四：避免信息迷航。扁平化手機的界面設(shè)計優(yōu)點還表現(xiàn)在給使用者提供了開放性，信息的透徹化訪問途徑，扁平化界面的訪問途徑，只要在頂級界面就可以向不同子模塊信息實行獨立操控。讓使用者的感知思維順著平面二維的延展，并不是沿著朝向深入層次流，用來保障使用者的連貫性。更完美地在有限的顯示空間給使用者展現(xiàn)最有效率的信息。

六 局限性

在越來越講求情感化設(shè)計的今天，摒棄擬物化為何還能成為交互設(shè)計的流行趨勢？

第一：對于鐘情于擬物化設(shè)計的用戶來講。美觀享受永遠是第一位的。

但是現(xiàn)在看來擬物化設(shè)計與九宮格設(shè)計好似皆是上個世界的產(chǎn)物。逼真的感官效果未必能讓人感到舒服，無論設(shè)計師還是公眾，希望看到的是無需太多思考就能認知的。提到扁平化就不得不說它的前輩.擬物化設(shè)計，與復合設(shè)計。即使用盡可能多的效果元素，給用戶帶來的觸覺感知，讓人有感覺很熟悉與親切。

第二：完全扁平化界面的設(shè)計上在表現(xiàn)力是有較大限制性。

盡管扁平化界面經(jīng)過舍棄多數(shù)裝飾性的因素，突出了核心信息讓使用者迅速發(fā)現(xiàn)他們所想得到的訊息?？蓸O度抽象化之后的簡練符號圖像不是人人皆可馬上明知理解的。相對于那些理解抽象符號圖像較為遲鈍的使用者來說，更是下降了其的用戶體驗，轉(zhuǎn)達的情感不夠豐滿，乃至有部分人評價此風格的交互設(shè)計有些過分冷冰。

第三：扁平化設(shè)計與情感化設(shè)計并不矛盾。

扁平化是另一種以用戶為中心，能帶來更流暢體驗的情感。個人認為，一切設(shè)計都應(yīng)考慮使用的產(chǎn)品和使用的環(huán)境。只要此種風格融入進了環(huán)境，通過產(chǎn)品體現(xiàn)出價值，即是合理。再加之適應(yīng)社會，與以往有所突破，那流行必是大勢所趨。如圖四：擬物化時代已經(jīng)有l(wèi)ogo的，再做扁平化會更簡單，因為在用戶中已經(jīng)有了辨識度。這在情感上很占優(yōu)勢。

七 扁平化設(shè)計在未來的趨勢

對設(shè)計革新而言，扁平化設(shè)計給我們符號的抽象化。大大體現(xiàn)了產(chǎn)品語義在生活中的應(yīng)用。簡捷，直白，準確傳遞信息需求的扁平化設(shè)計必將能與擬物化設(shè)計中探尋出一個均衡點，扁平化設(shè)計攜帶本身優(yōu)點與新勢力打破了以往常規(guī)，快速地有了自己的立足之地，在交互設(shè)計歷史上也將是濃墨重彩的一筆。

扁平化設(shè)計之前勢如破竹般的出現(xiàn)，并且迅速流行開來正是真正體現(xiàn)了本真的設(shè)計，人性化的設(shè)計。更合理，更簡潔，更直觀即會更符合現(xiàn)代社會的生活方式。將來更是一種設(shè)計趨勢，是設(shè)計美學中的流行方向。此種勢態(tài)并不是僅僅是因為消費者被日常的圖標種種產(chǎn)生審美上的厭倦疲勞而變化，而是為了順應(yīng)更高度的數(shù)字化社會，即是適應(yīng)數(shù)字時代，從而引領(lǐng)時代。