編輯導(dǎo)語(yǔ)：人們常說故事來源于生活，其實(shí)很多設(shè)計(jì)上的小巧思，在生活中也找得到相映照的痕跡。比如常見的開關(guān)按鈕、分裝即食的袋裝食品等等。本篇文章里，作者便總結(jié)了她從生活中看到的一些UX設(shè)計(jì)技巧，一起來看一下吧。

關(guān)鍵詞：生活、體驗(yàn)。

自從進(jìn)入U(xiǎn)X領(lǐng)域，我對(duì)體驗(yàn)這事兒，總是特別在意，不斷練習(xí)，持續(xù)加深自己在體驗(yàn)方面的敏感度。

有時(shí)候我的小伙伴會(huì)和我說：是不是職業(yè)病，見好的要夸下，見不好的要說下。

好了，最近收集了一些在體驗(yàn)上的驚喜，和你們分享分享，或許你們看了以后，會(huì)有自己的見解。

也歡迎給知果留言，我們一起成長(zhǎng)~

一、有名字的包子

上周末，我在家里點(diǎn)外賣，點(diǎn)了紅豆包、青菜包 、豆腐包，點(diǎn)完我就開心地等著外賣小哥送來。

送來之后我打開時(shí)，真的被驚喜到了。老板娘應(yīng)該是想到我們可能會(huì)拿錯(cuò)成對(duì)方的，導(dǎo)致誤吃了他人的包子。她在袋子上寫上了包子的名字。

溫馨真的無處不在，妥妥地下次再點(diǎn)她家的包子。

可視化標(biāo)簽

在B端產(chǎn)品中，面對(duì)一些被不同人創(chuàng)建的空間、文檔、數(shù)據(jù)等，我們經(jīng)常會(huì)使用「我創(chuàng)建的」、「我參與的」等標(biāo)簽來幫助用戶區(qū)分信息所屬。

通過這些標(biāo)簽，極大提升了用戶通過不同維度篩選信息的效率。如果沒有這些標(biāo)簽，用戶需要點(diǎn)擊進(jìn)去看信息詳細(xì)才能判斷這份數(shù)據(jù)是自己創(chuàng)建的，還是他人創(chuàng)建的。這與包子貼名字的思路不謀而合。

二、帶名字的按鈕

前些日子，我在一個(gè)公園散步，無意中發(fā)現(xiàn)一趟暫緩運(yùn)營(yíng)的小火車（現(xiàn)在被塑料袋封著），我就過去看了看。

發(fā)現(xiàn)小火車前方的按鈕每個(gè)都是被標(biāo)注名字的，可見設(shè)計(jì)者考慮到了駕駛員在開火車時(shí)，可能會(huì)按錯(cuò)。有顏色的按鈕并不能直觀說明它們對(duì)應(yīng)的操作，但加上名字就很清晰了。

直觀提示

這讓我想起我們之前在做的一個(gè)「敬請(qǐng)期待」模塊。

由于這個(gè)模塊在整個(gè)產(chǎn)品中占有重要的位置，產(chǎn)品經(jīng)理想告訴用戶，我們產(chǎn)品有這個(gè)模塊，只是還在快馬加鞭研發(fā)中，馬上就會(huì)上線的。那么這里就需要我們?cè)O(shè)計(jì)一種模式，讓用戶知道產(chǎn)品具備這個(gè)能力，只是用戶需要再等等。

于是我們?cè)O(shè)計(jì)了這個(gè)模塊，表現(xiàn)形式是將這個(gè)模塊置灰處理，并寫上「敬請(qǐng)期待」字樣。

三、攔路的石頭

路過這座橋時(shí)，我發(fā)現(xiàn)有一塊石頭橫在中間，后來知道停車場(chǎng)目前只開放一個(gè)進(jìn)出口。

設(shè)計(jì)者用了這塊具有強(qiáng)制性的石頭，避免了很多車主誤入，這是提前防錯(cuò)的好方法。

防錯(cuò)設(shè)計(jì)

「攔路石頭」的案例其實(shí)使用到了尼爾森十大設(shè)計(jì)原則中的防錯(cuò)原則，這個(gè)原則不論是在B端還是C端都妥妥的有用。我們可以使用強(qiáng)提示、弱提示等任何提示手段來幫助用戶規(guī)避操作上可能發(fā)生的錯(cuò)誤。例如當(dāng)用戶要?jiǎng)h除一份文檔時(shí)，系統(tǒng)會(huì)通過強(qiáng)提示告訴用戶風(fēng)險(xiǎn)，避免其誤刪。

再如，用戶在操作某一步之前，必須具備某一個(gè)條件，那么系統(tǒng)界面需要給出相應(yīng)常駐提示。

四、彩色地圖

通常公園地圖只會(huì)畫本身，這個(gè)地圖將自身的部分變?yōu)椴噬溆喹h(huán)境灰色處理，不僅讓游客知道我現(xiàn)在在哪里，更知道我與大環(huán)境的關(guān)系。

給足信息

看到這幅地圖的時(shí)候，其實(shí)我想了蠻多的。最主要的一點(diǎn)是：全局信息是寶貴的財(cái)富，獲全局者獲判斷力。也就是，當(dāng)你的信息越全的時(shí)候，越容易做出準(zhǔn)確的判斷。

但往往這也是我們?nèi)松泻苌萃氖虑?。你想看到全局，偏偏客觀情況不允許。例如你接到一個(gè)需求，你想弄清楚用戶到底怎么想的，產(chǎn)品經(jīng)理告訴你，需求就是如此，你做就是了。例如你想問同事，為什么老板說做這些，原因是什么？同事基本會(huì)告訴你，你做就好了，不要問那么多。

這幅地圖，在我們還沒有問它與大環(huán)境什么關(guān)系的時(shí)候，它自己主動(dòng)告訴我們了。很親切，體驗(yàn)很好。

在B端產(chǎn)品中，我們可以使用把更全局的信息給到用戶的方法，來讓用戶更喜歡我們的產(chǎn)品。例如我們之前做過一個(gè)很復(fù)雜的表單，我們首先在“表單錄入步驟、順序，表單控件選擇，表單默認(rèn)項(xiàng)設(shè)置，表單排版”等上面下功夫。最后，為了讓用戶更明白他們?yōu)槭裁匆顚戇@份表單，我們做了表單說明小貼士給到用戶，這增加了用戶錄入表單的意愿。

我們回憶下，現(xiàn)在的APP想獲取你的定位信息之前，是不是會(huì)先告訴你它們?yōu)槭裁匆@取這些信息，對(duì)我們的好處是什么。所以，當(dāng)用戶對(duì)你的產(chǎn)品越了解的時(shí)候，越容易做出選擇，配合度的意愿也會(huì)更高。

五、帶提醒功能的藥

這個(gè)藥可真的可愛到我了，據(jù)說這個(gè)藥片和這個(gè)藥瓶經(jīng)常捆綁吃，為了不讓患者忘記吃其中任何一個(gè)，就在藥片上做了粘貼膠布，貼在瓶上，就妥妥不會(huì)忘了。

記憶遷移

用戶每天要去處理的事情是很多的，他們不可能都記在腦海中，因此他們會(huì)采用記在便簽紙上、日歷上、小本子上的方式來提醒自己不要忘了某事。

因此，產(chǎn)品如果可以提前幫助用戶標(biāo)記這些事情，或者處理掉，那么將會(huì)給用戶帶去方便。

例如現(xiàn)在很多APP有自動(dòng)續(xù)費(fèi)功能，雖然很多用戶抱怨這個(gè)功能不好用，會(huì)亂扣費(fèi)。但是他確實(shí)有為剛需的用戶解決掉了一部分問題，即到期自動(dòng)扣費(fèi)，這個(gè)事情用戶再也不用記在腦子里了，icloud就是個(gè)典型的例子。

還有，現(xiàn)在很多軟件的消息推送功能，日程提醒功能，告警信息的聲音提示功能，其實(shí)都是采用了此方法。將用戶要記憶的事情，遷移到系統(tǒng)中來，借助外力一起幫助用戶完成，而不是依靠用戶自己。

六、微信置頂折疊

我的置頂現(xiàn)在很多，導(dǎo)致非置頂消息來的時(shí)候，要下滑很久才能看到。微信推出置頂聊天折疊功能后，就能自如切換模式，一個(gè)消息也不錯(cuò)過。

功能有效性

在數(shù)據(jù)量少的時(shí)候，我們直接靠找就可以；當(dāng)數(shù)據(jù)量大的時(shí)候，我們用搜索就可以；當(dāng)用戶量大且維度廣的時(shí)候，我們需要搜索與分類；當(dāng)單一維度分類不足以解決用戶個(gè)性化需求時(shí)，我們需要加入多維度篩選功能；當(dāng)以上都不足以解決問題的時(shí)候，我們需要更多的交互來簡(jiǎn)化用戶的數(shù)據(jù)檢索、定位。

生活也好，產(chǎn)品也罷，隨著時(shí)間的流失，數(shù)據(jù)會(huì)越來越多，功能會(huì)越來越復(fù)雜。我們看看自己的好友是不是變多了，群是不是變多了，置頂群置不置頂沒差別了。我們需要向微信學(xué)習(xí)，如何將對(duì)用戶有價(jià)值的功能給到用戶，提升用戶使用產(chǎn)品的幸福感。

七、有名字的開關(guān)

說來奇怪，公司的“燈、門”開關(guān)全是在一起的，開門的時(shí)候開燈了，開燈的時(shí)候開門了，誰用誰錯(cuò)。

好在綜管小伙伴給他們?nèi)×嗣?，我們就再也不?huì)弄錯(cuò)了。

視覺分類

如果我們?cè)诋a(chǎn)品設(shè)計(jì)中，不能從視覺層面將功能、數(shù)據(jù)等區(qū)分開，那用戶就會(huì)用一次，錯(cuò)一次。

我們看下面的樹控件，大家覺得左邊設(shè)計(jì)得好，還是右邊設(shè)計(jì)得好？答案不言而喻，右邊設(shè)計(jì)得好。原因在于，設(shè)計(jì)者考慮到了樹節(jié)點(diǎn)的不同屬性，通過在節(jié)點(diǎn)前加圖標(biāo)的方式幫助用戶一眼區(qū)分哪個(gè)節(jié)點(diǎn)是什么。

八、有編號(hào)的遙控系統(tǒng)

這個(gè)例子和上個(gè)類似，我們樓層中央空調(diào)遙控器也是密集地放一起，根本不知道哪個(gè)遙控器控制哪臺(tái)空調(diào)。

一開始的時(shí)候，我們需要逐一去按面板才知道是不是自己要的空調(diào)被打開了。經(jīng)過我們反饋后，技術(shù)人員給它們貼上了與空調(diào)對(duì)應(yīng)的標(biāo)簽序號(hào)，我們就再也不會(huì)弄錯(cuò)了。

操作即反饋

這可以說是一個(gè)「操作即反饋」的例子。人們都喜歡確定性的東西，而不是調(diào)整來調(diào)整去才發(fā)現(xiàn)自己想要的結(jié)果是這個(gè)或者那個(gè)觸發(fā)的，人們希望的是，我一次操作就可以精準(zhǔn)。

我們建立了一套B端企業(yè)級(jí)圖標(biāo)庫(kù)，庫(kù)內(nèi)圖標(biāo)多到300+，原來我們是根據(jù)通用類、logo類、產(chǎn)品類、圖形化類去分組的，但是經(jīng)過一段時(shí)間試用后，我們發(fā)現(xiàn)，大部分設(shè)計(jì)師們更喜歡通過面型和線型去找圖標(biāo)。原因在于，用戶只要確定是需要面型還是線型圖標(biāo)，那么點(diǎn)擊一次，一定能找到所需的圖標(biāo)，而無需像以往一樣，需要在多個(gè)分組內(nèi)來回查找。

畢竟，一些人覺得是通用的圖標(biāo)，在另一些人看來其就是個(gè)性化的。

九、一人一間小房子

每次我們?nèi)ゴ蠊拮永锩嬉ǚ涿?，總?huì)弄得罐子口甜膩膩，而且每次量也不準(zhǔn)。

袋裝蜂蜜就省心多了，特別對(duì)于身材控制有要求的小伙伴，每天一支、擠出就扔，很方便。

提前預(yù)設(shè)

現(xiàn)在健康、減肥、自律等話題很火，那商家們就在想，怎么讓自己的產(chǎn)品能建立健康生活的態(tài)度呢？

每日分量的小包裝產(chǎn)品由此誕生了，一日份堅(jiān)果、一日份泡騰片、一日份巧克力、一日份飲品等，其實(shí)都是在打造健康生活的態(tài)度。通過商家提前的規(guī)劃和拆解，用戶只需購(gòu)買后直接食用就可以，無需自己再計(jì)算分量，或者有一天沒一天的食用了。

我把這種提前幫助用戶規(guī)劃好的方式成為「提前預(yù)設(shè)」。「提前預(yù)設(shè)」在我們做產(chǎn)品時(shí)，也可以套用。例如在設(shè)計(jì)文章發(fā)布系統(tǒng)時(shí)，我們可以加入預(yù)發(fā)布功能，讓用戶選擇發(fā)布的時(shí)間點(diǎn)，那么文章會(huì)在設(shè)置好的時(shí)間點(diǎn)發(fā)布掉。再例如，任務(wù)調(diào)度中，我們可以將規(guī)則性的活動(dòng)進(jìn)行有序提前預(yù)設(shè)好，當(dāng)A觸發(fā)-A完成-B觸發(fā)-B完成-C觸發(fā)-C完成-流程結(jié)束。

十、有流程圖的親子車

很多共享車沒有使用流程說明，導(dǎo)致不熟悉共享單車的用戶不會(huì)用。這輛親子共享單車不僅給出了二維碼，還給出了可視化流程圖，任誰用都順順利利的，而且很放心。

可視化流程

雖然大家都知道可視化流程的優(yōu)勢(shì)明顯大于文本描述，但設(shè)計(jì)可視化流程的成本也大于本文直接描述。因此，我們可以根據(jù)實(shí)際需要，來選擇以哪種方式呈現(xiàn)。后面我會(huì)專門給大家講下，如何編織出好的文本呈現(xiàn)。

這些天有個(gè)小伙們問我要怎么引導(dǎo)用戶去開啟復(fù)雜的流程，而且期望用戶能自己學(xué)習(xí)。我昨天就把這個(gè)方法推薦給她了，我想她應(yīng)該在應(yīng)用的過程中。

十一、所見即所得的餅干

最近買了一盒餅干，這盒餅干有個(gè)小細(xì)節(jié)很不錯(cuò)，外部插圖對(duì)應(yīng)的就是內(nèi)部實(shí)體本身，取物者見啥，拿啥，就是啥。

以前我見過插圖管插圖，物體規(guī)物體的設(shè)計(jì)方式，沒有一一對(duì)應(yīng)，這對(duì)取物者來說就很不友好了。

所見即所得

「所見即所得」的道理大家都懂，很多人都聽得耳朵出老繭了。可事實(shí)上，很多設(shè)計(jì)者在面對(duì)巨多設(shè)計(jì)需求的時(shí)候，還是會(huì)容易忽略這個(gè)問題。

這是一個(gè)導(dǎo)航，如果你進(jìn)入了這個(gè)空間，你能知道自己在哪里嗎？（上圖）這樣改過后，大家可以知道自己在哪里了嗎？（下圖）在B端，用戶需要掌控感，非常迫切需要知道自己在哪里，可以做什么。

十二、寫在最后

今天我們分享了11個(gè)生活小思考：

1. 有名字的包子——可視化標(biāo)簽
2. 帶名字的按鈕 ——直觀提示
3. 攔路的石頭 ——防錯(cuò)設(shè)計(jì)
4. 彩色地圖 ——給足信息
5. 帶提醒功能的藥 ——記憶遷移
6. 微信置頂折疊 ——功能有效性
7. 有名字的開關(guān) ——視覺分類
8. 有編號(hào)的遙控系統(tǒng) ——操作即反饋
9. 一人一間小房子 ——提前預(yù)設(shè)
10. 有流程圖的親子車 ——可視化流程
11. 所見即所得的餅干 ——所見即所得

有人說：“生活怎么樣，不用過分苛求。重要的是自己的內(nèi)心氛圍，或者是做著哪些事兒。只要用心感受生活，就會(huì)成為越來越好的自己，也會(huì)發(fā)現(xiàn)更多的趣事兒?！?/strong>