基于用戶界面體驗(yàn)性的隱形設(shè)計(jì)研究

林潤(rùn)馥 劉永翔

摘要：通過(guò)觀察如今普及在我們?nèi)粘５纳钪杏脩艚缑娴氖褂?，剖析用戶界面設(shè)計(jì)的真正意義和核心。引出隱形的設(shè)計(jì)美學(xué)才是如今設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)的時(shí)候，應(yīng)該深刻認(rèn)識(shí)到的本質(zhì)。文章中歸納了關(guān)于隱形設(shè)計(jì)在界面設(shè)計(jì)中應(yīng)用的三個(gè)觀點(diǎn)。并以Dropbox的手機(jī)APP應(yīng)用更新為實(shí)例進(jìn)行了深入的解析。同時(shí)也舉例了生活中我們經(jīng)常使用并且能感受到得隱形設(shè)計(jì)美學(xué)。希望通過(guò)文章指出用戶界面設(shè)計(jì)的靈魂之處，摒棄一味進(jìn)行過(guò)度裝飾的浮夸風(fēng)氣。

關(guān)鍵詞：隱形設(shè)計(jì) 用戶界面 用戶體驗(yàn) 一致性

中圖分類號(hào)：TB472

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2015）12-0040-02

1 基于用戶體驗(yàn)的隱形設(shè)計(jì)

1.1 隱形設(shè)計(jì)的概述

每一個(gè)設(shè)計(jì)師的心里，都是希望給用戶創(chuàng)造出令他們眼前一亮的設(shè)計(jì)，都希望能讓自己的設(shè)計(jì)擁有一種超能力，俘虜用戶心靈的超能力。但這一路在設(shè)計(jì)的路上走著，從學(xué)校里對(duì)設(shè)計(jì)的學(xué)習(xí)，到工作中的運(yùn)用。越來(lái)越感受到，如果僅僅只是局限于形式美的設(shè)計(jì)實(shí)際并不足夠，設(shè)計(jì)也存在著它自己的內(nèi)在美。特別是在界面設(shè)計(jì)領(lǐng)域內(nèi)，設(shè)計(jì)師很容易會(huì)不小心走進(jìn)過(guò)度裝飾的誤區(qū)。設(shè)計(jì)的內(nèi)在美，也就是隱形的設(shè)計(jì)，才是設(shè)計(jì)師真正應(yīng)該給予用戶的體驗(yàn)。這篇文章，將會(huì)分析為什么隱形設(shè)計(jì)美學(xué)在用戶界面中如此重要。

現(xiàn)在我們處在一個(gè)被熒屏包圍的時(shí)代。從大物件到小產(chǎn)品，都帶著需要用戶去操作的屏幕。我們每天手里都會(huì)拿著各種電子設(shè)備，無(wú)論手機(jī)、電腦、平板以及穿戴式設(shè)備。甚至到電視、智能家電或者未來(lái)非常完善的智能家居體系。這所有都需要屏幕界面來(lái)操作。但如果往遠(yuǎn)一點(diǎn)看，未來(lái)我們會(huì)用到的產(chǎn)品應(yīng)該是不需要屏幕的。它能聽(tīng)懂我們的語(yǔ)言，預(yù)測(cè)我們的需求，感知我們的行為。我不能確定未來(lái)是否真的是一個(gè)不再有“屏幕”的時(shí)代，但這卻是讓我深深沉思的原因，在沒(méi)有屏幕的情況下，是否就不存在用戶界面設(shè)計(jì)？是否就不存在UI設(shè)計(jì)師。而我得出的結(jié)論，并不是這樣的。因?yàn)槲铱吹搅擞脩艚缑嬖O(shè)計(jì)的內(nèi)在，這種從本質(zhì)根源上的設(shè)計(jì)美學(xué)，是不會(huì)因?yàn)槠聊坏南Ф淮嬖?。人永遠(yuǎn)都會(huì)有一個(gè)操作界面系統(tǒng)，無(wú)論是現(xiàn)實(shí)的屏幕還是虛幻的。而當(dāng)前，在我們還未進(jìn)入未來(lái)那個(gè)時(shí)代的時(shí)候，應(yīng)該是做好設(shè)計(jì)的本分，想清楚到底界面設(shè)計(jì)的本質(zhì)是什么。

1.2 隱形設(shè)計(jì)在界面設(shè)計(jì)中的重要性

界面設(shè)計(jì)不應(yīng)該是強(qiáng)迫用戶去關(guān)注設(shè)計(jì)師的設(shè)計(jì)，而取代了產(chǎn)品的內(nèi)容。無(wú)論是關(guān)于網(wǎng)站、手機(jī)應(yīng)用或者其他移動(dòng)設(shè)備的界面設(shè)計(jì)，最終的目的都應(yīng)該是提高用戶的體驗(yàn)，而不是去妨礙用戶的操作而產(chǎn)生糟糕的體驗(yàn)。如果一個(gè)產(chǎn)品讓用戶可以不用費(fèi)時(shí)間腦力地去達(dá)到他們需求的時(shí)候，用戶才是最愉悅的。這便是隱形設(shè)計(jì)應(yīng)該在界面設(shè)計(jì)中發(fā)揮的重要性。當(dāng)設(shè)計(jì)師添加了自己以為非常了不起的設(shè)計(jì)，卻讓用戶非常費(fèi)解導(dǎo)致完成不了操作，最終產(chǎn)品的結(jié)果就只會(huì)是被刪除，用戶很陜找到別的同類產(chǎn)品取而代之。

試想—下，我們每天用身邊的電子產(chǎn)品，無(wú)論看一個(gè)網(wǎng)頁(yè)或者打開(kāi)一個(gè)APP，一定是為了完成某一項(xiàng)事情不是毫無(wú)目的的。我們打開(kāi)淘寶是為了買東西，打開(kāi)朋友圈是為了看朋友動(dòng)態(tài)，打開(kāi)音樂(lè)軟件為了找到好聽(tīng)的歌曲。是的，作為設(shè)計(jì)師，我們會(huì)去關(guān)注如今的設(shè)計(jì)趨勢(shì)，我們會(huì)去關(guān)注每年最搶眼的設(shè)計(jì)風(fēng)潮是什么。但是用戶真的在意這些嗎？千萬(wàn)不要因?yàn)槲覀兘巧煌钕萜渲校瑢?dǎo)致以偏概全了。事實(shí)上市面上確實(shí)有這樣一些應(yīng)用，操作的時(shí)候用戶需要打怪獸一樣，跨過(guò)一個(gè)一個(gè)“過(guò)度設(shè)計(jì)”的阻礙最終才能實(shí)現(xiàn)他們想要得到的。經(jīng)常會(huì)出現(xiàn)一些看上去像是解決問(wèn)題的設(shè)計(jì)，實(shí)際上在操作的時(shí)候卻給用戶造成了障礙。要避免這些問(wèn)題，在這篇文章中會(huì)總結(jié)出隱形設(shè)計(jì)在用戶界面中的三個(gè)重要觀點(diǎn)。

2 隱形設(shè)計(jì)的三個(gè)重要原則

2.1 隱形設(shè)計(jì)的核心是解決問(wèn)題

解決問(wèn)題是一切設(shè)計(jì)的重點(diǎn)。更是界面設(shè)計(jì)中我們倡導(dǎo)隱形設(shè)計(jì)的重中之重。在這里，我們不僅要解決問(wèn)題還要挖掘更深層的問(wèn)題并且解決它。舉幾個(gè)例子，就好像我們身體哪里不舒服，確實(shí)，吃點(diǎn)止痛的藥物能夠減少疼痛。但只是暫時(shí)性的，根本沒(méi)有就解決本質(zhì)的問(wèn)題。這個(gè)現(xiàn)象與我們?cè)谧鯱I設(shè)計(jì)其實(shí)是同個(gè)道理。想象—下當(dāng)我們?cè)诮拥皆O(shè)計(jì)任務(wù)，我們開(kāi)始做產(chǎn)品的界面設(shè)計(jì)。中間某個(gè)環(huán)節(jié)我們開(kāi)始覺(jué)得不大對(duì)勁，我們常常只是從表面下功夫解決問(wèn)題。其實(shí)深層的問(wèn)題根本沒(méi)有根治。這就像是在為“傷口”止血，卻不去將它治愈好。

2.2 隱形設(shè)計(jì)的本質(zhì)是時(shí)刻為用戶考慮

我們一直所說(shuō)的設(shè)計(jì)，并不是只是指那些給用戶視覺(jué)體驗(yàn)的設(shè)計(jì)。更多的還有承接上面說(shuō)所的解決問(wèn)題而進(jìn)行的問(wèn)題解決方案的設(shè)計(jì)。這里面就有一個(gè)很常見(jiàn)的問(wèn)題，那就是用戶在操作界面的時(shí)候無(wú)法避免地會(huì)發(fā)生錯(cuò)誤。所以當(dāng)設(shè)計(jì)師在進(jìn)行設(shè)計(jì)的時(shí)候，要時(shí)刻抱著一顆體諒寬容用戶錯(cuò)誤行為的心，保持以下三個(gè)原則。（1）細(xì)致的考慮用戶有可能會(huì)出現(xiàn)的每個(gè)錯(cuò)誤，并且盡自己最大的可能設(shè)計(jì)出當(dāng)錯(cuò)誤發(fā)生時(shí)的解決方案。（2）當(dāng)用戶面臨每個(gè)已發(fā)生錯(cuò)誤的路口，提供多條道路供用戶選擇。不會(huì)在操作中一旦遇到死胡同就無(wú)法進(jìn)行。（3）盡量少地因?yàn)椴僮麇e(cuò)誤而給用戶一個(gè)很大的錯(cuò)誤警示的應(yīng)用，估計(jì)沒(méi)有多少人會(huì)很喜歡。千萬(wàn)要記住，實(shí)現(xiàn)目標(biāo)、達(dá)到目標(biāo)才是用戶的最終目的。不要讓用戶因?yàn)樵谥型境霈F(xiàn)了錯(cuò)誤而中斷了操作，設(shè)計(jì)師的工作就是要絞盡腦汁地設(shè)計(jì)出各種讓用戶更加輕易實(shí)現(xiàn)目標(biāo)的解決方案。

2.3 隱形設(shè)計(jì)的基礎(chǔ)是設(shè)計(jì)的一致性

似乎一旦提到界面設(shè)計(jì)就一定會(huì)強(qiáng)調(diào)設(shè)計(jì)的一致性。可想而知一致性的重要性。但是，以大多數(shù)人的理解，設(shè)計(jì)的一致性更多只是體現(xiàn)在了分隔線、圖標(biāo)、顏色的一致。我們這里所說(shuō)的隱形設(shè)計(jì)中的一致性，要升華到不僅是這些視覺(jué)元素，更重要的是要去了解這款產(chǎn)品的寓意，每個(gè)操作的用意，每個(gè)元素的設(shè)計(jì)不僅要在視覺(jué)上達(dá)到一致性，還要從功能意義上實(shí)現(xiàn)統(tǒng)一。舉個(gè)例子，很多設(shè)計(jì)師在設(shè)計(jì)的時(shí)候，會(huì)借鑒其他優(yōu)秀APP的設(shè)計(jì)。這并不是一件壞事。但是就如所有的登陸口一般都在右上角，我們知道這肯定是有一定的好處。但是這里想提到的是，盡管普遍現(xiàn)象如此，我們依然還是要從自己設(shè)計(jì)的產(chǎn)品出發(fā)，設(shè)身處地地好好考慮，這個(gè)按鈕是不是適合放在這個(gè)位置，是不是放在別的位置會(huì)更有關(guān)聯(lián)更有意義。這才是真正的設(shè)計(jì)一致性。

3 隱形設(shè)計(jì)在界面設(shè)計(jì)中的體現(xiàn)

3.1 Dropbox改版設(shè)計(jì)中隱形設(shè)計(jì)的體現(xiàn)

談到隱形設(shè)計(jì)在界面中的應(yīng)用，腦海中馬上想到的就是非常熱門的文件分享軟件Dropbox。那是因?yàn)镈ropbox在今年迎來(lái)了它的一次改版設(shè)計(jì)，五年來(lái)的第一次界面設(shè)計(jì)改革，這對(duì)Dropbox來(lái)說(shuō)是非常意義重大的事情。而在這次重新設(shè)計(jì)中，Dropbox堅(jiān)持了它一貫的原則，便是淡化設(shè)計(jì)，讓設(shè)計(jì)在產(chǎn)品中隱形。其實(shí)了解Dropbox的用戶或者狂熱者都會(huì)知道，從2007年這個(gè)產(chǎn)品出現(xiàn)到如今，Dropbox一直保持著非常低調(diào)的設(shè)計(jì)風(fēng)格，用Alex的話說(shuō)就是“We aspire to be as invisible as possible?！蔽覀兿ＭM可能的弱化設(shè)計(jì)，讓設(shè)計(jì)僅像是給產(chǎn)品穿了一件有保障的隱形外套。Dropbox一向秉持著這個(gè)原則，是因?yàn)樵O(shè)計(jì)者覺(jué)得從產(chǎn)品的本質(zhì)出發(fā)，作為一款分享文件類的產(chǎn)品，不需要太過(guò)花俏的設(shè)計(jì)。但在這幾年的時(shí)間里，從扁平化設(shè)計(jì)到谷歌的Material Design，Dropbox似乎在當(dāng)中看到了機(jī)遇，希望產(chǎn)品在改版中能找到其中的平衡點(diǎn)。就像谷歌引領(lǐng)了Material Design，在減輕設(shè)計(jì)負(fù)擔(dān)的同時(shí)又提高了用戶的體驗(yàn)感。

在新版本中，有兩點(diǎn)可以看出團(tuán)隊(duì)用心地進(jìn)行了隱形的設(shè)計(jì)提高用戶體驗(yàn)感。（1）Castellarnau和他的團(tuán)隊(duì)對(duì)于菜單的改版中，只設(shè)置了四個(gè)時(shí)間軸，這四個(gè)用戶常用的按鈕分別為：文檔、照片、收藏夾和通知。這四個(gè)按鈕包含了用戶最常用的操作，盡管看上去很簡(jiǎn)單，但總結(jié)出來(lái)實(shí)際上并沒(méi)有那么輕而易舉。我們身邊的設(shè)計(jì)師經(jīng)常會(huì)希望說(shuō)打破常規(guī)，創(chuàng)造出新的事物。但這并不適用于所有的產(chǎn)品。最正確的方法應(yīng)該是清楚地認(rèn)識(shí)到什么對(duì)用戶最重要，什么才是用戶最想要得到的。（2）為了找出舊版本設(shè)計(jì)的問(wèn)題，找出到底應(yīng)該把什么功能去掉，什么功能應(yīng)該放在最首頁(yè)。設(shè)計(jì)團(tuán)隊(duì)采訪并且觀察了大量Dropbox使用者或者使用其他同類產(chǎn)品的用戶。居然發(fā)現(xiàn)最重要的一個(gè)功能，就是搜索文件的功能竟然藏在了應(yīng)用的設(shè)置菜單里面，需要點(diǎn)進(jìn)去二級(jí)菜單才可以找到這個(gè)按鈕。在Castellarnau看來(lái)，一個(gè)功能按鈕如果被放在了需要進(jìn)行兩次點(diǎn)擊才能找到的地方，那肯定是一個(gè)不那么重要或者用戶不怎么用的功能。所以新版本中，我們可以在首頁(yè)就看到了搜索的小圖標(biāo)，它放在頂部最顯眼的地方，而且一直會(huì)在那里。這樣一個(gè)小的改變，其實(shí)就是設(shè)計(jì)師在經(jīng)過(guò)一系列的調(diào)研和思考總結(jié)出來(lái)的，然后才是對(duì)形式美觀的設(shè)計(jì)。這是一系列一套動(dòng)作，缺一不可。因此你可以看出，這絕對(duì)是提升用戶體驗(yàn)而不是干擾用戶操作的，用戶可能根本就察覺(jué)不到，但這要比做出一個(gè)浮夸的頁(yè)面或者動(dòng)效，更加有說(shuō)服力多了。（圖1）

3.2 其他優(yōu)秀隱形設(shè)計(jì)案例

我們身邊經(jīng)常用的很多其他產(chǎn)品，優(yōu)秀的設(shè)計(jì)師們也都進(jìn)行了隱形設(shè)計(jì)，大大提升了用戶體驗(yàn)。比如Google驗(yàn)證，用戶點(diǎn)擊驗(yàn)證碼后系統(tǒng)會(huì)自動(dòng)對(duì)其進(jìn)行復(fù)制，非常方便后續(xù)的操作。這就是切身處地地感受到用戶在操作時(shí)候的需求，而進(jìn)行的微乎其乎的隱形設(shè)計(jì)。在非常有名的閱讀媒介網(wǎng)站Medium中，也可以看到這樣的細(xì)節(jié)設(shè)計(jì)，就比如在小引用中，選擇一段文字后，出現(xiàn)的上下文工具當(dāng)中，雙引號(hào)國(guó)標(biāo)只有一半是高亮的；而對(duì)大引用來(lái)說(shuō)，這里的高亮狀態(tài)是完整的。國(guó)內(nèi)很有名氣的圖片采集網(wǎng)站花瓣網(wǎng)，當(dāng)你采集的圖片是之前采集過(guò)的，系統(tǒng)會(huì)提示你之前已經(jīng)在某個(gè)畫(huà)板中采集過(guò)這張圖了。（圖2、圖3）

4 結(jié)語(yǔ)

優(yōu)秀的用戶界面設(shè)計(jì)是很微妙的，幾乎是隱形不可見(jiàn)的。不會(huì)有任何阻礙和想要塑造用戶行為的趨向?？偠灾?，用戶界面的主旨在于心存目的但始終堅(jiān)持簡(jiǎn)單的設(shè)計(jì)。萬(wàn)不可因?yàn)橄胍故驹O(shè)計(jì)技巧，過(guò)度進(jìn)行搶眼的設(shè)計(jì)或者盲目跟隨潮流。設(shè)計(jì)師要注重每個(gè)細(xì)節(jié)，讓它們保持高度的和諧。并且時(shí)刻統(tǒng)籌大局，讓它展現(xiàn)出產(chǎn)品想要傳達(dá)的概念。