GUI的歷史一直都離不開隱喻，而這種設計手段的優劣已經有越來越多的辯論。那么時至今日，這種設計方法是否已經過時？我們是否有更好的方式？ 傳統與新風格將怎樣影響著我們？ 這些疑惑不禁引發了筆者的思考，因此也就有了下文。

一、隱喻

隱喻作為一個主流的設計方式廣泛運用在界面設計中，它的歷史可以追溯到GUI的創造，經典的例子便是桌面、文件夾、垃圾桶… 這些老生常談概念。因為源于真實生活，隱喻的天然優勢便是利用熟悉感幫助用戶理解上手，并帶來親切感。雖然常被簡單認為是模擬現實世界中的物體外觀（即擬物），隱喻其實是一個綜合的手段：包括視覺層面的擬物；行為的模擬（常利用動畫效果加強）；以及對整體概念的利用。

（一）先說擬物。

眾所周知，蘋果已經將其演繹地爐火純青。先不說mac os x上各種材質和復雜光影的寫實圖標，曾在知乎上看到一個例子：在ios6上滑竿的金屬圓形按鈕不僅模仿了金屬紋理，傾斜手機時還會像真的金屬一樣改變光澤的角度（見圖1）。蘋果的擬物已經達到了對細節的精確追求，暫且不論這種極致求真的細節對體驗的提升到底有多大意義，但它符合蘋果所追求的品牌視覺風格。在一個追求真實的原則下，那么任何對真實細節的提升都是值得欽佩贊許的。Devil’s in the detail.

圖1：圖片來自iphone5截圖

（二）再說行為隱喻。

行為的隱喻同樣來自真實世界，但不像擬物那樣顯而易見，它伴隨著操作發生，自然而然。如下圖滾動條的例子（見圖2），當網站內容的篇幅達到一定的程度，在閱讀時往下翻滾時滾動條會旁邊會出現剩余篇幅的氣泡提示。對比于告知還剩下多少字，預估還剩下多少閱讀時間就非常符合生活習慣了。類似的還有kindle底部的閱讀提示。

圖2：來自iA（http://informationarchitects.net/about/）

相較與蘋果的Skeuomorphs（ 在這里將其譯作擬物／擬真，有興趣可自行移步wiki），Metro設計原則堅持極簡、內容優先，強調排版、動態和真實的數字場景，與之產生的設計語言延伸到視覺風格便是不再利用Skeuomorphs，取而代之的是高度抽象的視覺符號和一再強調的信息，這無疑是一個顯眼的革新（當然Metro的革新遠不止于表面）。那么真實的數字場景是否與隱喻不再關聯？回想一下win8的邊緣交互支持上下左右滑動手勢，在真實世界中人們在一個工作臺上就可以完成多項工作，所需要的東西順手頡來而并非只能在臥室看書或只能在書房寫信。由此可見如果要完全脫離真實世界去構建一個全新的世界觀并不現實，事實上，數字時代的隱喻更為深入和抽象了，體現在行為、邏輯，甚至世界觀，所以才有真實這個前綴。當然深入到一定程度把它們稱之為隱喻并非那么合適了，但的確曾是以隱喻為起點的。

二、信息之外

Metro一再強調信息，它們才是用戶關注的內容。因此界面中省去了一些控件代替以手勢響應，而不能省略的也采用抽象符號。與此相反，傳統的系統和應用常會有一個容器包裹在信息之外，鑲嵌其間的控件圖標在視覺上做了不同程度的刻畫。于是在新舊觀念的沖擊下，信息之外的部分便開始曖昧不清了。有人尖銳指出，這些信息以外的裝飾虛偽幼稚（詳見James Higgs的?）。聽到裝飾，不少人開始要冒汗了。經歷了現代主義的洗禮，如今裝飾一詞變得低三下四。但是阿道夫·路斯（Adolf Loos）的“裝飾即罪惡”也是有其上下文情境的，何況裝飾在視知覺審美體驗中的地位無法忽視。回歸之前所提，關于內容本身如何界定還是一個問題。 Metro認為信息才是內容，其沉浸式是沉浸在信息的海洋中。而在傳統的界面我們可以認為那些承載信息的容器環境也是內容的一部分；因此，ios的沉浸感強調的是整體氛圍的融合。這樣看來，信息之外的內容并非純裝飾。不過隨之帶來的問題主要有兩個：效率與風格。

至于風格（style）。則屬于審美的范疇而并非道德，審美涉及到品位，因人而異，并且總是與時代和歷史相關。打個不甚恰當的比方，如果將GUI產生之前比作原始時代，那么擬物和Skeuomorphs更像是古典時期，也難怪有人說metro是交互設計的包豪斯運動（http://www.ifanr.com/38596）。不過歷史總是螺旋前進而非簡單直線，就算“大勢已去”也總會存在各種回潮。回想我們現在所處的語境，也許各取所長會是比較好的選擇。

三、微質感

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

（一）克制

微意味著盡可能少的添加便達到目的，質感具有隱喻的意味。也就是說靈活得運用一點隱喻的手段解決問題，而不泛濫；有點類似深澤直人的“這樣就好”。對比圖3、圖4和圖5，（圖3）超質感的圖像更像一件藝術作品，它屬于圖像信息的范疇而不那么適合當作圖標或控件。（圖4）Pixelmator的功能圖標做了相當程度的精簡，但是還是保留并強化了來自真實世界的光影材質，它們看上去閃亮簇新。（圖5）谷歌chrome的系列應用圖標則非常收斂，利用必要的符號傳達含義，點到為止，唯一一處額外的添加的那塊陰影，起到畫龍點睛的作用。

圖3：圖片來自dribbble ? ? ? ? ? ? ? ? ? ?圖4：圖片來自pixelmator官網

圖5：圖片來自chrome網上應用商店

為了論證這種“去之則嫌少，添之又嫌多”的狀態，下圖以谷歌地圖圖標為例做了兩個有趣的對比（見圖6、圖7）。圖6的變化是去除了地圖細節，雖然地標還是能夠清晰辨識，但這種減法使得地圖變得有些匪夷所思。因為擴散了它的指涉范圍，使其看上去像一個奇怪的方塊，還不如去掉它更好些。圖7的變化是去除了投影，這并不影響其傳達含義，但是這樣的圖像比具備陰影的狀態缺少“張力”。從格式塔視知覺理論來看，無投影的圖標雖然更符合一個好的完形（更加對稱），但是卻不能引起“力的緊張”。因為接近完形卻又有一些破壞的圖形暗示著好的形，從而能引發人們去糾正其不完美的形式而達到完美的狀態。這種緊張的過程意味著更多的審美趣味，當然也取決于受眾的審美層次。

圖6：左邊為原設計；右邊去除了地圖細節

圖7：左邊為原設計；右邊去除了投影

由此可見，微質感具備的這種克制的效率，充滿了節儉的品德。因為克制要求對細節反復斟酌，換言之，當細節減少到個位數時，那么就有充分的時間思考地更全面。從宏觀上看，微質感的精簡也是一種勞動力的解放，節約的時間和精力可以去創作信息本身。

（二）權衡

微質感的應用需要遵循少量精煉的原則，在合適和重要的區域添加才能起到畫龍點睛的作用。Google reader的界面中（見圖10）滾動導航部分，會出現陰影的效果，上方的節點隱匿在訂閱按鈕之下。但是滾動正文部分，滾動內容直接消失在工具欄之后并沒有出現陰影。細想這種“不統一”也自有其道理，因為訂閱按鈕與導航原本只是通過間距排列并且寬度不一，出現陰影能夠比較好地暗示虛擬空間的延伸。但是閱讀區域與頂部的工具欄通過線已經做了明顯分割，而且工具欄和logo結合貫穿上方，閱讀區域在滾動過程中直接消失在工具欄下方也比較自然清楚。如果再添加陰影則顯得比較“重”，因為界面有兩個明顯的層疊，并且這種感受會隨著自適應屏幕的變寬而更明顯。

圖10：google reader界面截圖

這種權衡需要從整體考慮。在極簡的界面中，按鈕的微量光影、空間層疊而產生的微弱陰影都會凸顯而發揮作用；如果整體環境并沒有那么輕量，那么相應的控件則需要加重質感才能匹配。層層疊加到一定程度后，也就不存在“微”了。 google analytics界面（圖11）相比google reader用了更多的線，營造了更厚的塊面感； 因此，google analytics的導航用了更明顯的漸變而在google reader上并不需要這樣的程度。 分析原因，一部分是因為兩者的信息復雜度的不同，另一部分則是風格問題了。而本文微質感提倡的“盡可能少”的原則，相較于google analytics則會偏向google reader的風格。

所以說，微質感的權衡需要先考慮全局再雕琢細節。微質感更適合簡潔原則下的設計，更適合工具型的產品界面。

圖11： google analytics 界面截圖

（三）功能

關于功能，則可以利用微質感區分不同的信息模塊、暗示了某種操作、營造虛擬空間、突出當前重點等。 在我們的廣告產品界面中，非常適合體現利用微質感體現數據的優雅和效率的美學。在今年的改版中，我們已經告別了傳統的塊面線的生硬分割，大量降低了視覺噪聲，但在局部模塊和細節上還有不少優化空間。以下幾個實例是在線上基礎上的優化：

A、營造信息模塊的歸屬感

原先的創意信息模塊（見圖12）通過直接排版進行信息歸屬，刪除的響應區域似乎僅限于圖標的范圍（雖然可以將其擴大到整個圖像模塊，但視覺的歸屬感仍有歧義）。優化后的創意模塊（見圖13）更像一個整體，歸屬更清晰，操作響應區域更廣，并配合了鼠標懸停的效果。相較于圖像信息，數字信息的模塊只需要空間感的區隔便可以體現歸屬感（見圖14）。因此省略了分割元素，注重信息層次的對比并配合信息視覺化圖形更直觀地展示。

圖12：線上版本表單中的添加和刪除創意項

圖13： 優化后的創意信息模塊

圖14： 針對少量數據的表格設計的數據模塊區域

?B、遵循自然的邏輯

以下的兩個時段選擇都是以小時為一個單位，可支持拖動選擇。線上版本考慮到尺寸寬度的限制分成了上下午兩塊；優化后的方案將時間塊線性排布并在hover或選中的狀態下會伴隨動態的時間段提示。從整體衡量，優化的方案更符合自然的邏輯（時間線，時間是連貫的概念），并且方便拖動連選，在寬度上調整了間距控制在限制的范圍之內。

圖15： 鉆石展位線上版本投放時段選擇

圖16： 優化后的時段選擇設計

遵循自然的邏輯的優勢在地域選擇上體現得更為明顯。地域的一級模塊以省和直轄市為單位，線上版本將各省份平鋪并沒有按照特定的邏輯（見圖17）；在需要尋找特定的省份時就會沒有邏輯可循而很不方便，因此設想可以用更自然的邏輯去展現各地域模塊。

圖17： 線上版本地域選擇

圖18： 利用信息視覺化的地域選擇

?C、動態過渡

隨著動態的轉場過渡越來越多的運用，常配合手勢使隱喻更為深入和自然，同時也傾向于將信息扁平化。衡量動畫的標準之一是流暢和自然，不過動畫的靈活程度和幅度也是需要把控的細節之一。漸隱漸現相對于變形和3維翻轉比較輕量；同樣是移動，時間、速度、加速度、距離的不同組合造成的心理感受也會大不一樣。可以理解的是，在能夠彰顯品牌特征或者特色的功能細節上，動畫可以用一些更為個性和突出的效果；而在一些常見的轉場過渡和頻繁的操作上，則采用一些基礎和低調的動畫更為合理。一個應用上如果動畫的數量、幅度和頻率不加以限制，則會類似靜態界面的視覺噪聲而帶來干擾。

下面舉一個例子供大家做開放性的思考，在廣告產品的表格中（圖19），刪除項的操作可以結合動畫，那么怎樣的動態效果才是最為自然流暢的。如果從隱喻的角度出發，是否可以模擬紙面的效果：刪除一項是否可以用擦除？或者用目前流行的折疊的效果？或者說這些都過頭了，反而用最基礎的效果更自然？還是有其他更好的方式？有興趣的同學不妨可以思考下。

圖19：表格中的刪除

（四）換種思路

提到質感，我們腦海中總是出現那些金屬的光澤、光滑的塑料、反光的亞克力、還有led光效（如圖20）。因為這是數字產品的外觀和材質帶給人的“高科技”感受，但是經歷了幾十年的發展風格也會慢慢變化。如今黑暗冰冷的金屬風格已經不再代表所有的高科技，人們更向往自然和真切的生活，越來越多的新鮮風格不斷涌現（圖21）。在這里要指出的是風格本身不分好壞，往昔的主流功不可沒。不過當我們需要創造獨有的品牌形象去滿足不一樣的人群的時候，不妨換種思路從平面、印刷和繪畫等領域借鑒，去挖掘更多靈感。

圖20：The skin factory經典作品

這不僅僅體現在界面風格和控組件上，對于推廣類的信息傳達也有提供了不一樣的思路。例如，廣告營銷的視覺傳達常用借助場景和氣氛的塑造。在直通車平臺的新版設計中我們決定“輕氛圍、重創意”，以此來塑造整體的品牌形象并與競品區分。（圖22）展示了部分品牌服務的宣傳banner和相應的入口插圖，可以發現拋去了營造場景的各種元素之后，直接利用單一素材的圖像特性去傳達品牌概念更獨特有力。并運用實物與矢量圖形的組合；矢量切割的陰影；中等飽和度的色彩，使整體風格輕快優雅。

圖21：來自dribble，注重信息層次和圖形化的界面

圖22：直通車平臺系列產品品牌banner和插圖（部分）

?四、小結

縱觀全文，本文拋出的“微質感”概念也許不能僅從字面意思理解，它包含了一定的歷史語境。并且希望通過學習他人和深入思考去挖掘自身的品牌個性，其中一些優化設計的實例還有很多可推敲的余地。希望能夠拋磚引玉，引發更多探討。筆者也會再此基礎上繼續研究，期待更有價值的下文。

原文鏈接：http://ux.etao.com/posts/575