界面微質(zhì)感探究

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

創(chuàng)新互聯(lián)建站長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鶴山企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計，鶴山網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一、隱喻

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

（一）先說擬物。

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

圖1：圖片來自iphone5截圖

（二）再說行為隱喻。

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

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

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

二、信息之外

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

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

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

三、微質(zhì)感

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

（一）克制

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

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

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

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

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

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

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

本文名稱：界面微質(zhì)感探究
文章路徑：http://muchs.cn/article10/cghsgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、微信小程序、搜索引擎優(yōu)化、面包屑導(dǎo)航、虛擬主機、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)