微質(zhì)感：過(guò)時(shí)的UI圖標(biāo)設(shè)計(jì)手段？

一淘

圖形用戶界面（簡(jiǎn)稱GUI）的歷史一直都離不開(kāi)隱喻，而這種設(shè)計(jì)手段的優(yōu)劣已經(jīng)有越來(lái)越多的辯論。時(shí)至今日，這種設(shè)計(jì)方法是否已經(jīng)過(guò)時(shí)？我們是否有更好的方式？傳統(tǒng)與新風(fēng)格又將怎樣影響著我們呢？

隱喻作為一種主流的設(shè)計(jì)方式廣泛運(yùn)用在界面設(shè)計(jì)中，它的歷史可以追溯到GUI的創(chuàng)造，經(jīng)典的例子便是桌面、文件夾、垃圾桶……這些老生常談概念。因?yàn)樵从谡鎸?shí)生活，隱喻的天然優(yōu)勢(shì)便是利用熟悉感幫助用戶理解和上手，并帶來(lái)親切感。雖然常被簡(jiǎn)單地認(rèn)為是模擬現(xiàn)實(shí)世界中的物體外觀（即擬物），但隱喻其實(shí)是一個(gè)綜合的手段：包括視覺(jué)層面的擬物；行為的模擬（常利用動(dòng)畫效果加強(qiáng)）；以及對(duì)整體概念的利用。

擬物與行為隱喻

眾所周知，蘋果已經(jīng)將擬物設(shè)計(jì)演繹得爐火純青。先不說(shuō)Mac OS X上各種材質(zhì)和復(fù)雜光影的寫實(shí)圖標(biāo)，在iOS 6上滑竿的金屬圓形按鈕不僅模仿了金屬紋理，傾斜手機(jī)時(shí)還會(huì)像真的金屬一樣改變光澤的角度。蘋果的擬物已經(jīng)達(dá)到了對(duì)細(xì)節(jié)的精確追求，暫且不論這種極致求真的細(xì)節(jié)對(duì)體驗(yàn)的提升到底有多大意義，但它符合蘋果所追求的品牌視覺(jué)風(fēng)格。在一個(gè)追求真實(shí)的原則下，任何對(duì)真實(shí)細(xì)節(jié)的提升都是值得欽佩贊許的。

行為的隱喻同樣來(lái)自真實(shí)世界，但不像擬物那樣顯而易見(jiàn)，它伴隨著操作發(fā)生，自然而然。另外，有些網(wǎng)站的內(nèi)容在閱讀時(shí)，篇幅達(dá)到一定程度，滾動(dòng)條往下翻滾就會(huì)在旁邊出現(xiàn)剩余篇幅的氣泡提示。告知用戶余下的內(nèi)容還有多少字，預(yù)估還剩下多少閱讀時(shí)間等，這就非常符合生活習(xí)慣，與之類似的還有Kindle底部的閱讀提示。

相較于蘋果的Skeuomorphs（擬物形），Metro設(shè)計(jì)原則堅(jiān)持極簡(jiǎn)、內(nèi)容優(yōu)先，強(qiáng)調(diào)排版、動(dòng)態(tài)和真實(shí)的數(shù)字場(chǎng)景，與之產(chǎn)生的設(shè)計(jì)語(yǔ)言延伸到視覺(jué)風(fēng)格便是不再利用Skeuomorphs，取而代之的是高度抽象的視覺(jué)符號(hào)和一再?gòu)?qiáng)調(diào)的信息，這無(wú)疑是一個(gè)顯眼的革新（當(dāng)然Metro的革新遠(yuǎn)不止于表面）。

那么真實(shí)的數(shù)字場(chǎng)景是否與隱喻不再關(guān)聯(lián)呢？回想一下Windows 8的邊緣交互支持上下左右滑動(dòng)手勢(shì)，在真實(shí)世界中人們?cè)谝粋€(gè)工作臺(tái)上就可以完成多項(xiàng)工作，所需要的東西順手?jǐn)X來(lái)而并非只能在臥室看書或只能在書房寫信。由此可見(jiàn)，如果要完全脫離真實(shí)世界，構(gòu)建一個(gè)全新的世界觀并不現(xiàn)實(shí)。事實(shí)上，數(shù)字時(shí)代的隱喻更為深入和抽象，體現(xiàn)在行為、邏輯，甚至世界觀，所以才有真實(shí)這個(gè)前綴。當(dāng)然深入到一定程度把它們稱之為隱喻并非那么合適了，但的確曾是以隱喻為起點(diǎn)的。

微軟的Metro一再?gòu)?qiáng)調(diào)信息，它們才是用戶關(guān)注的內(nèi)容。因此界面中省去了一些控件代替以手勢(shì)響應(yīng)，而不能省略性地采用抽象符號(hào)。與之相反，傳統(tǒng)的系統(tǒng)和應(yīng)用常會(huì)有一個(gè)容器包裹在信息之外，鑲嵌其間的控件圖標(biāo)在視覺(jué)上做了不同程度的刻畫。于是在新舊觀念的沖擊下，信息之外的部分便開(kāi)始曖昧不清了。

回歸之前所提，關(guān)于內(nèi)容本身如何界定還是一個(gè)問(wèn)題。Metro認(rèn)為信息才是內(nèi)容，其沉浸式是沉浸在信息的海洋中。而在傳統(tǒng)的界面中我們可以認(rèn)為那些承載信息的容器環(huán)境也是內(nèi)容的一部分。因此，iOS的沉浸感強(qiáng)調(diào)的是整體氛圍的融合。

這樣看來(lái)，信息之外的內(nèi)容并非純裝飾。不過(guò)隨之帶來(lái)的問(wèn)題主要有兩個(gè)：效率與風(fēng)格。純信息的展示更為高效，幫助人們?cè)诜泵Φ纳詈秃Ａ康男畔⒅懈斓眠_(dá)成目的，是工具化的。而對(duì)于環(huán)境的渲染更適合調(diào)動(dòng)情緒或者傳達(dá)某種生活的態(tài)度，例如游戲界面。而在更多的實(shí)際運(yùn)用中，設(shè)計(jì)上常會(huì)有各種折衷。至于風(fēng)格，則屬于審美的范疇而并非道德。審美涉及到品位，因人而異，并且總是與時(shí)代和歷史相關(guān)。打個(gè)不恰當(dāng)?shù)谋确?，如果將GUI產(chǎn)生之前比作原始時(shí)代，那么擬物和Skeuomorphs更像是古典時(shí)期，也難怪有人說(shuō)Metro是交互設(shè)計(jì)的包豪斯運(yùn)動(dòng)。不過(guò)歷史總是螺旋前進(jìn)而非簡(jiǎn)單直線，就算“大勢(shì)已去”，也總會(huì)存在各種回潮。回想我們現(xiàn)在所處的語(yǔ)境，也許各取所長(zhǎng)會(huì)是比較好的選擇。

微質(zhì)感的應(yīng)用與權(quán)衡

提出微質(zhì)感的概念便是這種在效率和風(fēng)格之間的權(quán)衡。所謂的微質(zhì)感是區(qū)別于Skeuomorphs的超質(zhì)感和 Metro高度抽象化之間的中間層次。“微”可以理解為微弱微小，微乎其微。微本身是一種可選的程度而非定量。但這個(gè)程度并不寬廣，否則就失去了個(gè)性和品牌意義。

微意味著用盡可能少地添加達(dá)到目的，質(zhì)感具有隱喻的意味。也就是說(shuō)靈活運(yùn)用一點(diǎn)隱喻的手段解決問(wèn)題而不泛濫。這有點(diǎn)類似深澤直人說(shuō)的“這樣就好”。

超質(zhì)感的擬物圖像更像是一件藝術(shù)作品，它屬于圖像信息的范疇，卻不是十分適合當(dāng)作圖標(biāo)或控件。Pixelmator的功能圖標(biāo)做了相當(dāng)程度的精簡(jiǎn)，但還是保留并強(qiáng)化了來(lái)自真實(shí)世界的光影材質(zhì)，它們看上去閃亮簇新。谷歌Chrome商店中的系列應(yīng)用圖標(biāo)則非常收斂，利用必要的符號(hào)傳達(dá)含義，點(diǎn)到為止，唯一一處額外添加的那塊陰影，起到畫龍點(diǎn)睛的作用。

“去之則嫌少，添之又嫌多”的狀態(tài)在實(shí)際使用中也隨處可見(jiàn)，例如Chrome商店中的谷歌地圖，去除了地圖細(xì)節(jié)后，雖然地標(biāo)還是能夠清晰辨識(shí)，但這種減法使得地圖變得有些匪夷所思。因?yàn)閿U(kuò)散了它的指涉范圍，使其看上去像一個(gè)奇怪的方塊，還不如去掉更好。另外，去除投影并不影響其傳達(dá)含義，但是這樣的圖像比具備陰影的狀態(tài)缺少“張力”。從格式塔視知覺(jué)理論來(lái)看，無(wú)投影的圖標(biāo)雖然更符合一個(gè)好的完形（更加對(duì)稱），但卻不能引起“力的緊張”。因?yàn)榻咏晷螀s又有一些破壞的圖形暗示著好的形，從而能引發(fā)人們?nèi)ゼm正其不完美的形式而達(dá)到完美的狀態(tài)。這種緊張的過(guò)程意味著更多審美趣味，當(dāng)然也取決于受眾的審美層次。

由此可見(jiàn)，微質(zhì)感具備的這種克制性效率充滿了“節(jié)儉”的品德，因?yàn)榭酥埔髮?duì)細(xì)節(jié)反復(fù)斟酌。換言之，當(dāng)細(xì)節(jié)減少到個(gè)位數(shù)時(shí)，那么就有充分的時(shí)間思考得更全面。從宏觀上看，微質(zhì)感的精簡(jiǎn)也是一種勞動(dòng)力的解放，節(jié)約的時(shí)間和精力可以去創(chuàng)作信息本身。

微質(zhì)感的應(yīng)用需要遵循少量精煉的原則，在合適和重要的區(qū)域添加才能起到畫龍點(diǎn)睛的作用。Google Reader界面中的滾動(dòng)導(dǎo)航部分，會(huì)出現(xiàn)陰影的效果，上方的節(jié)點(diǎn)隱匿在訂閱按鈕之下。但是滾動(dòng)正文部分，滾動(dòng)內(nèi)容直接消失在工具欄之后并沒(méi)有出現(xiàn)陰影。細(xì)想這種“不統(tǒng)一”也自有其道理，因?yàn)橛嗛啺粹o與導(dǎo)航原本只是通過(guò)間距排列并且寬度不一，出現(xiàn)陰影能夠比較好地暗示虛擬空間的延伸。但是閱讀區(qū)域與頂部的工具欄通過(guò)線已經(jīng)做了明顯分割，而且工具欄和Logo結(jié)合貫穿上方，閱讀區(qū)域在滾動(dòng)過(guò)程中直接消失在工具欄下方也比較自然清楚。如果再添加陰影則顯得比較“重”，因?yàn)榻缑嬗袃蓚€(gè)明顯的層疊，并且這種感受會(huì)隨著自適應(yīng)屏幕的變寬而更明顯。

這種權(quán)衡需要從整體考慮。在極簡(jiǎn)的界面中，按鈕的微量光影、空間層疊產(chǎn)生的微弱陰影都會(huì)凸顯而發(fā)揮作用。如果整體環(huán)境并沒(méi)有那么輕量，那么相應(yīng)的控件則需要加重質(zhì)感才能匹配。層層疊加到一定程度后，也就不存在“微”了。

對(duì)比來(lái)說(shuō)，Google Analytics界面相比Google Reader用了更多的線，營(yíng)造了更厚的塊面感；因此，Google Analytics的導(dǎo)航用了更明顯的漸變，而在Google Reader上并不需要這樣的程度。分析原因，一部分是因?yàn)閮烧叩男畔?fù)雜程度不同，另一部分則是風(fēng)格問(wèn)題了。而本文微質(zhì)感提倡的“盡可能少”的原則，相較于Google Analytics則會(huì)偏向Google Reader的風(fēng)格。

所以說(shuō)，微質(zhì)感的權(quán)衡需要先考慮全局再雕琢細(xì)節(jié)。微質(zhì)感更適合簡(jiǎn)潔原則下的設(shè)計(jì)，更適合工具型的產(chǎn)品界面。

微質(zhì)感“華麗”背后的功能

關(guān)于功能，則可以利用微質(zhì)感區(qū)分不同的信息模塊、暗示某種操作、營(yíng)造虛擬空間、突出當(dāng)前重點(diǎn)等。

首先，要營(yíng)造信息模塊的歸屬感。避免通過(guò)直接排版進(jìn)行信息歸屬；要所有信息更像是處于一個(gè)整體，歸屬更清晰，操作響應(yīng)區(qū)域更廣。相較于圖像信息，數(shù)字信息的模塊只需要空間感的區(qū)隔便可以體現(xiàn)歸屬感。注重信息層次的對(duì)比并配合信息視覺(jué)化圖形更直觀地展示。

其次，要遵循自然的邏輯，比如時(shí)間、地點(diǎn)等。有些應(yīng)用適合24小時(shí)制（例如計(jì)時(shí)軟件），但有些應(yīng)用適合AM/PM小時(shí)制（例如記事軟件）。而對(duì)于微質(zhì)感擬物化設(shè)計(jì)來(lái)說(shuō)，遵循自然邏輯的優(yōu)勢(shì)在地域選擇上體現(xiàn)得更為明顯。地域的分類如果單單按照名稱劃分，除了直轄市、省會(huì)之外很難按照一個(gè)特定的邏輯劃分，在需要尋找特定的省份時(shí)就會(huì)很不方便，通過(guò)擬物化用更自然的邏輯（比如地圖形式）去展現(xiàn)各地域模塊就會(huì)一目了然。

最后是動(dòng)態(tài)過(guò)渡。隨著動(dòng)態(tài)的轉(zhuǎn)場(chǎng)過(guò)渡越來(lái)越多地運(yùn)用，常配合手勢(shì)使隱喻更為深入和自然，同時(shí)也傾向于將信息扁平化。衡量動(dòng)畫的標(biāo)準(zhǔn)之一是流暢和自然，不過(guò)動(dòng)畫的靈活程度和幅度也是需要把控的細(xì)節(jié)之一。漸隱漸現(xiàn)相對(duì)于變形和三維翻轉(zhuǎn)比較輕量；同樣是移動(dòng)，時(shí)間、速度、加速度、距離的不同組合造成的心理感受也會(huì)大不一樣?？梢岳斫獾氖?，在能夠彰顯品牌特征或者特色的功能細(xì)節(jié)上，動(dòng)畫可以用一些更為個(gè)性和突出的效果；而在一些常見(jiàn)的轉(zhuǎn)場(chǎng)過(guò)渡和頻繁的操作上，采用一些基礎(chǔ)和低調(diào)的動(dòng)畫更為合理。一個(gè)應(yīng)用上如果動(dòng)畫的數(shù)量、幅度和頻率不加以限制，則會(huì)受到類似靜態(tài)界面的視覺(jué)噪聲帶來(lái)的干擾。

提到質(zhì)感，我們腦海中總是出現(xiàn)那些金屬的光澤、反光的亞克力，還有LED光效等。這些數(shù)字產(chǎn)品的外觀和材質(zhì)可以帶來(lái)“高科技”感受，但是經(jīng)歷了幾十年的發(fā)展，風(fēng)格也會(huì)慢慢變化。如今，黑暗冰冷的金屬風(fēng)格已經(jīng)不再代表所有的高科技，人們更向往自然和真切的生活，越來(lái)越多的新鮮風(fēng)格不斷涌現(xiàn)。雖然往昔的主流功不可沒(méi)，但是當(dāng)我們需要?jiǎng)?chuàng)造特有的品牌形象去滿足不同人群時(shí)，不妨換種思路，從平面、印刷和繪畫等領(lǐng)域借鑒，去挖掘更多靈感。

這不僅僅體現(xiàn)在界面風(fēng)格和控組件上，對(duì)于推廣類的信息傳達(dá)也提供了不一樣的思路。例如，廣告營(yíng)銷的視覺(jué)傳達(dá)常常借助場(chǎng)景和氣氛的塑造。以“輕氛圍、重創(chuàng)意”來(lái)塑造整體的品牌形象可以與競(jìng)品很好的區(qū)分開(kāi)，在拋去了營(yíng)造場(chǎng)景的各種元素之后，直接利用單一素材的圖像特性去傳達(dá)品牌概念更獨(dú)特有力。

“微質(zhì)感”的概念其實(shí)并不能僅從字面意思理解，因?yàn)樗艘欢ǖ臍v史語(yǔ)境。希望通過(guò)“微質(zhì)感”的案例，可以深入思考去挖掘自身的品牌個(gè)性，引發(fā)更有價(jià)值的設(shè)計(jì)思維和產(chǎn)品體現(xiàn)。

（編輯：楊磊）