界面設(shè)計(jì)中扁平化風(fēng)格與擬物化風(fēng)格探討

崔悅 劉寶成

【摘要】：伴隨著信息化時(shí)代高速發(fā)展，智能化設(shè)備發(fā)展的愈發(fā)成熟，界面設(shè)計(jì)的層級(jí)關(guān)系、便捷的交互、視覺(jué)風(fēng)格設(shè)計(jì)成為了設(shè)計(jì)師的首要課題。與此同時(shí)，基于用戶(hù)體驗(yàn)為主導(dǎo)的移動(dòng)終端界面設(shè)計(jì)經(jīng)歷了從擬物化風(fēng)格向扁平化風(fēng)格轉(zhuǎn)變的過(guò)程。本文著重研究在界面設(shè)計(jì)中擬物化風(fēng)格和扁平化風(fēng)格的設(shè)計(jì)特點(diǎn)，各自的優(yōu)勢(shì)及劣勢(shì)。本文還將通過(guò)對(duì)用戶(hù)體驗(yàn)進(jìn)行分析，從交互設(shè)計(jì)、視覺(jué)元素等方面總結(jié)出界面設(shè)計(jì)從擬物化到扁平化發(fā)展的原因。

【關(guān)鍵詞】：界面設(shè)計(jì)；扁平化風(fēng)格；擬物化風(fēng)格

一、擬物化設(shè)計(jì)

1.1 什么是擬物化

維基百科上對(duì)擬物化設(shè)計(jì)的定義：借用已有的實(shí)體，即使新設(shè)計(jì)中并不需要原來(lái)的功能，但使得新設(shè)計(jì)滿足一定的親和度需要。ibook是ios擬物化設(shè)計(jì)時(shí)代交互界面的典型代表。從界面逼真的視覺(jué)效果到細(xì)膩的感官手勢(shì)，連翻書(shū)的“唰唰”的聲音都模擬得惟妙惟肖，體驗(yàn)的過(guò)程更具趣味性和親和力。不得不說(shuō)ios系統(tǒng)開(kāi)創(chuàng)了擬物化設(shè)計(jì)形式，并將其發(fā)展到了極致。由此得出擬物化設(shè)計(jì)在界面上強(qiáng)調(diào)模擬實(shí)物的材質(zhì)、質(zhì)感、細(xì)節(jié)、明暗等，在交互上做到了模擬現(xiàn)實(shí)中的操作形式。這種設(shè)計(jì)學(xué)習(xí)成本低，帶有豐富的感性化色彩的交互設(shè)計(jì)，即使是老年人也能根據(jù)實(shí)際生活經(jīng)驗(yàn)較快的學(xué)會(huì)操作。正如《i OS Human Interface Guidelines》里提到：“當(dāng)你應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作仿造，用戶(hù)就能快速領(lǐng)會(huì)如何使用”。誠(chéng)然，擬物化引領(lǐng)了設(shè)計(jì)趨勢(shì)，但其本身存在一定的約束，所以發(fā)展前景并不樂(lè)觀。

1.2 擬物化設(shè)計(jì)的優(yōu)勢(shì)及問(wèn)題分析

擬物化設(shè)計(jì)通過(guò)模擬現(xiàn)實(shí)場(chǎng)景，實(shí)物質(zhì)感，以及日常行為等，使產(chǎn)品表現(xiàn)形式更豐富有趣，操作也更加符合用戶(hù)習(xí)慣。現(xiàn)階段其優(yōu)勢(shì)有 3 點(diǎn)：（1）有效降低用戶(hù)學(xué)習(xí)成本以及理解難度。正如前文所提到的《i OS Human Interface Guidelines》所述，讓使用者能直接把生活經(jīng)驗(yàn)搬到對(duì)應(yīng)的操作上，很快聯(lián)想出下一步應(yīng)該怎么辦。（2）更具美感和親切感。比起微軟公司推出的 Metro 風(fēng)格的界面，擬物化設(shè)計(jì)的內(nèi)容更豐富。Metro UI 作為高度平面化、符號(hào)化、抽象畫(huà)的語(yǔ)言，在隱喻功能性方面有著一定的缺陷，視覺(jué)方面也顯得比較科技缺乏親和力，容易造成審美的疲勞。（3）更具效率和準(zhǔn)確性。鑒于移動(dòng)設(shè)備“產(chǎn)品眾多，信息大量”的自身特性，用戶(hù)需要快速分辨出有效的信息。在界面設(shè)計(jì)中，擬物化設(shè)計(jì)因極具親切感和生活線索，較容易讓人下意識(shí)的識(shí)別出來(lái)。

但凡事必有兩面性，擬物化設(shè)計(jì)也具有需要設(shè)計(jì)者思考的問(wèn)題。一方面，擬物化設(shè)計(jì)是模擬真實(shí)，甚至是沿襲人的習(xí)慣。起因于人的習(xí)慣難以改變，但這種習(xí)慣也不是一塵不變的。簡(jiǎn)而言之，好的習(xí)慣可以保留，而其他的則可逐步轉(zhuǎn)變，問(wèn)題在于如何鑒別該沿用哪些作為擬物化設(shè)計(jì)的內(nèi)容，哪些又該舍棄。另一方面，引用擬物化設(shè)計(jì)，并非濫用。過(guò)度的使用，比如過(guò)度采用真實(shí)皮質(zhì)紋理、音樂(lè)播放器處處采用收音機(jī)旋鈕作為按鍵等，反而會(huì)引起用戶(hù)操作的無(wú)所適從。除此以外，擬物化設(shè)計(jì)在視覺(jué)設(shè)計(jì)上所花費(fèi)的時(shí)間和精力會(huì)相對(duì)來(lái)說(shuō)較較高。

二、扁平化設(shè)計(jì)風(fēng)格——界面設(shè)計(jì)中的極簡(jiǎn)主義

如今隨著科技的發(fā)展，智能手機(jī)、觸屏對(duì)于大眾已不再陌生。在人人都有電腦，人人有手機(jī)的時(shí)代，數(shù)碼產(chǎn)品的普及已經(jīng)使得一切不再新鮮，人們更傾向于數(shù)碼產(chǎn)品是否可以快速地幫助他們達(dá)到目的，是否高效。與之同時(shí)，也已經(jīng)不需要通過(guò)擬物化去降低學(xué)習(xí)成本了，擬物化風(fēng)格在主宰界面設(shè)計(jì)多年之后，大眾也逐漸對(duì)其從最初的震撼吸引變?yōu)榱?xí)以為常，甚至審美疲勞。風(fēng)格潮流的輪回至此，促使扁平化設(shè)計(jì)風(fēng)格如此再次受到人們歡迎。

2.1 扁平化設(shè)計(jì)的特點(diǎn)

1.拒絕特效。扁平化設(shè)計(jì)以二維形態(tài)示人，放棄一切裝飾效果。和擬物化設(shè)計(jì)強(qiáng)調(diào)的質(zhì)感光影不同，扁平化設(shè)計(jì)摒棄一切諸如浮雕、投影、高光等特效，僅以鮮明的色塊和突出的文字信息呈現(xiàn)。

2.簡(jiǎn)潔的視覺(jué)形態(tài)。扁平化設(shè)計(jì)通常盡量使用最簡(jiǎn)單的幾何形，如圓形或長(zhǎng)方形的形態(tài)特征，使圖形簡(jiǎn)潔突出，方便點(diǎn)擊。

3.強(qiáng)調(diào)色彩鮮明。扁平化設(shè)計(jì)常常用色鮮明，傾向于有更多色彩的搭配，同一界面的配色可能到6-8種顏色。

4.重視排版。排版不僅僅是關(guān)于視覺(jué)美學(xué)，更是一門(mén)信息組織的學(xué)問(wèn)。了解用戶(hù)的需求，在合適的地方以適當(dāng)?shù)淖煮w字號(hào)呈現(xiàn)，展現(xiàn)清晰的視覺(jué)層次，幫助用戶(hù)更有效的達(dá)到預(yù)期目的，會(huì)有助于提高用戶(hù)體驗(yàn)。

5.做減法。包豪斯時(shí)期米斯凡德羅所提出了“少即是多”的設(shè)計(jì)原則，扁平化設(shè)計(jì)可以說(shuō)是在界面設(shè)計(jì)中充分地詮釋了這一理念，即強(qiáng)調(diào)對(duì)于一切視覺(jué)元素做減法，避免不必要的元素出現(xiàn)在頁(yè)面中。

2.2 扁平化設(shè)計(jì)的局限性

扁平化只是界面設(shè)計(jì)中的一種形式，像其他視覺(jué)風(fēng)格一樣，也有自己的不足之處。

扁平化設(shè)計(jì)的局限性體現(xiàn)在：縮減的設(shè)計(jì)語(yǔ)言增加了界面設(shè)計(jì)的難度，如果處理不當(dāng)，便會(huì)顯得單調(diào)乏味，傳達(dá)的情感不豐富，過(guò)于冰冷。極簡(jiǎn)的扁平化設(shè)計(jì)風(fēng)格，對(duì)消費(fèi)群體的知識(shí)水平和審美能力提出了更高要求，不僅增加了學(xué)習(xí)的成本，還無(wú)形中拋棄了一些特殊的用戶(hù)媒體，比如對(duì)于兒童，擬物化的界面 設(shè)計(jì)更能吸引兒童群體的注意力，并且方便記憶。扁平化設(shè)計(jì)是一種糅合視覺(jué)與理念的設(shè)計(jì)風(fēng)格，不能從字面意義上理解這種風(fēng)格。如果一味的盲目跟風(fēng)，兼容性、可發(fā)揮性的地方必有局限。

三、界面設(shè)計(jì)中擬物化向扁平化演變的原因

扁平化設(shè)計(jì)風(fēng)格的理念是對(duì)界面的視覺(jué)設(shè)計(jì)和功能進(jìn)行一種抽象化表達(dá)，其不再只關(guān)注視覺(jué)上的實(shí)物再現(xiàn)，更重視功能重構(gòu)與用戶(hù)體驗(yàn)設(shè)計(jì)，這一理念并非橫空出世。包豪斯所奠基的以觀念和以解決問(wèn)題為中心的的現(xiàn)代主義設(shè)計(jì)體系，提倡功能化的設(shè)計(jì)原則、重視工業(yè)設(shè)計(jì)與人的關(guān)系，這些正與扁平化設(shè)計(jì)的理念不謀而合。扁平化設(shè)計(jì)的出現(xiàn)和流行正是反映了繁久必簡(jiǎn)這一藝術(shù)發(fā)展規(guī)律。而擬物化設(shè)計(jì)并非是完全被扁平化設(shè)計(jì)所取代，扁平化設(shè)計(jì)也沒(méi)有摒棄一切裝飾效果，漸變、高光在扁平化界面中依舊可以看到。所謂“擬物化的衰落”，歸根結(jié)底，是設(shè)計(jì)師在跟隨這種時(shí)代趨勢(shì)的前提下，理性的回歸到產(chǎn)品初衷和用戶(hù)體驗(yàn)中去，重新審視界面元素與整體視圖效果，消除冗余的元素，省略繁復(fù)的特效，使其功能可見(jiàn)性被最大化。

總體而言，移動(dòng)端界面設(shè)計(jì)從擬人化到扁平化風(fēng)格的轉(zhuǎn)變，是離不開(kāi)以下幾個(gè)因素的：1.扁平化設(shè)計(jì)通過(guò)“扁平化”的信息結(jié)構(gòu)和圖形化的視覺(jué)語(yǔ)言等優(yōu)勢(shì)，使移動(dòng)端界面設(shè)計(jì)更具有實(shí)用價(jià)值和使用價(jià)值；2.擬物化風(fēng)格過(guò)分的“華而不實(shí)”，導(dǎo)致了信息傳達(dá)效率的降低，容易對(duì)用戶(hù)產(chǎn)生視覺(jué)負(fù)擔(dān)；3.產(chǎn)品界面是人與信息交流的媒介載體，扁平化的界面設(shè)計(jì)正式建立在用戶(hù)認(rèn)知心理的基礎(chǔ)上，為用戶(hù)提供與用戶(hù)心理模型相吻合的界面系統(tǒng)，減少用戶(hù)的認(rèn)知負(fù)擔(dān)。界面設(shè)計(jì)是一個(gè)不斷迭代更新發(fā)展的過(guò)程，因?yàn)橛脩?hù)體驗(yàn)也是不斷變換的，用戶(hù)在操作體驗(yàn)、視覺(jué)感受等方面會(huì)有越來(lái)越高的要求。這種擬物化設(shè)計(jì)的興衰存在于漫長(zhǎng)的界面設(shè)計(jì)歷史演變過(guò)程中，通過(guò)對(duì)這一興衰的研究可以一窺今后的界面設(shè)計(jì)發(fā)展軌跡。

結(jié)語(yǔ)：

擬物化設(shè)計(jì)或者是扁平化設(shè)計(jì)并非對(duì)立存在，而是在不同的情況下做出的不同設(shè)計(jì)風(fēng)格的選擇。并且兩者相互促進(jìn)相互發(fā)展，共存才是真正為用戶(hù)打來(lái)良好的體驗(yàn)的關(guān)鍵。過(guò)多裝飾性的擬物化設(shè)計(jì)或許已經(jīng)沒(méi)落，但是人們對(duì)于情感化的需求卻是永恒的，在扁平化視覺(jué)風(fēng)格下的深層次擬物化設(shè)計(jì)才是滿足用戶(hù)需求是關(guān)鍵所在。

參考文獻(xiàn)：

[1]中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心.全國(guó)互聯(lián)網(wǎng)發(fā)展統(tǒng)計(jì)報(bào)告[R].北京：中國(guó)互聯(lián)網(wǎng)信息中心.

[2]付婕，趙江洪，譚浩.基于潛意識(shí)和行為習(xí)慣的交互設(shè)計(jì)啟示性[J].包裝工程，2013，34（2）：52.