GUI的歷史一直都離不開(kāi)隱喻，而這種設(shè)計(jì)手段的優(yōu)劣已經(jīng)有越來(lái)越多的辯論。那么時(shí)至今日，這種設(shè)計(jì)方法是否已經(jīng)過(guò)時(shí)？我們是否有更好的方式？ 傳統(tǒng)與新風(fēng)格將怎樣影響著我們？ 這些疑惑不禁引發(fā)了筆者的思考，因此也就有了下文。

一、隱喻

隱喻作為一個(gè)主流的設(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)畫(huà)效果加強(qiáng)）；以及對(duì)整體概念的利用。

（一）先說(shuō)擬物。

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

圖1：圖片來(lái)自iphone5截圖

（二）再說(shuō)行為隱喻。

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

圖2：來(lái)自iA（http://informationarchitects.net/about/）

相較與蘋(píng)果的Skeuomorphs（ 在這里將其譯作擬物／擬真，有興趣可自行移步wiki），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)？回想一下win8的邊緣交互支持上下左右滑動(dòng)手勢(shì)，在真實(shí)世界中人們?cè)谝粋�(gè)工作臺(tái)上就可以完成多項(xiàng)工作，所需要的東西順手頡來(lái)而并非只能在臥室看書(shū)或只能在書(shū)房寫(xiě)信。由此可見(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é)上做了不同程度的刻畫(huà)。于是在新舊觀念的沖擊下，信息之外的部分便開(kāi)始曖昧不清了。有人尖銳指出，這些信息以外的裝飾虛偽幼稚（詳見(jiàn)James Higgs的 Apple's aesthetic dichotomy）。聽(tīng)到裝飾，不少人開(kāi)始要冒汗了。經(jīng)歷了現(xiàn)代主義的洗禮，如今裝飾一詞變得低三下四。但是阿道夫·路斯（Adolf Loos）的“裝飾即罪惡”也是有其上下文情境的，何況裝飾在視知覺(jué)審美體驗(yàn)中的地位無(wú)法忽視。回歸之前所提，關(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)格。

關(guān)于效率。純信息的展示更為高效，幫助人們?cè)诜泵Φ纳�活和海量的信息中更快得達(dá)成目的，是工具化的。而對(duì)于環(huán)境的渲染更適合調(diào)動(dòng)情緒或者傳達(dá)某種生活的態(tài)度，例如游戲界面。而在更多的實(shí)際運(yùn)用中，設(shè)計(jì)上常會(huì)有各種折衷。

至于風(fēng)格（style）。則屬于審美的范疇而并非道德，審美涉及到品位，因人而異，并且總是與時(shí)代和歷史相關(guān)。打個(gè)不甚恰當(dāng)?shù)谋确�，如果將GUI產(chǎn)生之前比作原始時(shí)代，那么擬物和Skeuomorphs更像是古典時(shí)期，也難怪有人說(shuō)metro是交互設(shè)計(jì)的包豪斯運(yùn)動(dòng)（http://www.ifanr.com/38596）。不過(guò)歷史總是螺旋前進(jìn)而非簡(jiǎn)單直線，就算“大勢(shì)已去”也總會(huì)存在各種回潮。回想我們現(xiàn)在所處的語(yǔ)境，也許各取所長(zhǎng)會(huì)是比較好的選擇。

三、微質(zhì)感

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

（一）克制

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

圖3：圖片來(lái)自dribbble                    圖4：圖片來(lái)自pixelmator官網(wǎng)

圖5：圖片來(lái)自chrome網(wǎng)上應(yīng)用商店 

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

圖6：左邊為原設(shè)計(jì)；右邊去除了地圖細(xì)節(jié)

圖7：左邊為原設(shè)計(jì)；右邊去除了投影

由此可見(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)作信息本身。

標(biāo)簽： 頁(yè)面設(shè)計(jì) 產(chǎn)品設(shè)計(jì) 頁(yè)面設(shè)計(jì)方式 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。