【編者按】本文譯者@C7210 網(wǎng)站和移動(dòng)產(chǎn)品身上的科技味道是與生俱來(lái)的，界面背后交織著各種代碼腳本、信息、鏈接等，這些復(fù)雜的數(shù)據(jù)與邏輯必須通過(guò)網(wǎng)頁(yè)或應(yīng)用的界面與用戶(hù)進(jìn)行互動(dòng)，而設(shè)計(jì)師們的職責(zé)之一，就是想辦法讓這些“接口”更容易訪問(wèn)和使用，讓用戶(hù)更親切。

有很多方法可以幫助設(shè)計(jì)師們“中和”掉產(chǎn)品身上的科技?xì)庀ⅲ�其中最�?jiǎn)單直白而卓有成效的就是打造更親切友好、更有人情味兒的設(shè)計(jì)方案。

這自然是關(guān)于“情感化設(shè)計(jì)”的話題，而本文則會(huì)重點(diǎn)討論其中的一個(gè)方面，即手繪、手寫(xiě)和草圖風(fēng)格對(duì)產(chǎn)品個(gè)性及整體體驗(yàn)所能起到的提升作用。

個(gè)性與真實(shí)

手繪與草圖風(fēng)格的視覺(jué)元素是展現(xiàn)產(chǎn)品個(gè)性、傳達(dá)真實(shí)效果的好方法。想象一下，當(dāng)收到親人或朋友寄來(lái)的信件或賀卡時(shí)，你希望里面的內(nèi)容是對(duì)方手寫(xiě)的還是打印出來(lái)的？手寫(xiě)的信息無(wú)論到什么時(shí)候都比機(jī)器產(chǎn)出的更加親切友好對(duì)叭？在網(wǎng)站和移動(dòng)產(chǎn)品當(dāng)中，這個(gè)道理同樣有它的適用之處。雖然不是紙質(zhì)，但我們?nèi)钥梢宰層脩?hù)界面當(dāng)中的內(nèi)容看上去像是來(lái)自于真人之手，給用戶(hù)帶來(lái)更多真實(shí)可信的感覺(jué)。接下來(lái)我們一起看幾個(gè)實(shí)際的產(chǎn)品范例。

形象與氣質(zhì)

首先是Balsamiq，他們的產(chǎn)品本身就是幫助設(shè)計(jì)師制作草圖風(fēng)格的原型的。

Balsamiq的功能非常強(qiáng)勁，不過(guò)它一直保持著非常“基礎(chǔ)”的外觀形象與氣質(zhì)，讓設(shè)計(jì)師們可以找到使用紙和筆的感覺(jué)。一方面，我們可以通過(guò)它來(lái)打造低保真手繪風(fēng)格的產(chǎn)出物，另外一方面，這個(gè)核心功能也使Balsamiq自身成為了一個(gè)具有獨(dú)特形象和氣質(zhì)的產(chǎn)品。

品牌識(shí)別

手繪風(fēng)格可以給圖像帶來(lái)獨(dú)特的性格特征。人類(lèi)特有的帶有瑕疵的筆跡可以形成一種非常微妙的、機(jī)器難以復(fù)制的視覺(jué)張力，讓瀏覽者不自覺(jué)的將注意力投入進(jìn)來(lái)進(jìn)行觀察；相比之下，計(jì)算機(jī)繪制出的那些精確而完美的圖形在如今反而成為了一種過(guò)于普通、難以吸引眼球的東西。

代碼編輯器Notepad++就有一個(gè)很乖巧很有特色的手繪風(fēng)格logo，里面的小變色龍象征著多種類(lèi)型的代碼，2乎乎的非�？蓯�(ài)，讓人忍不住多看上幾眼。另外，手繪風(fēng)格同時(shí)也象征著用戶(hù)通過(guò)這款產(chǎn)品做的事情的本質(zhì)——從無(wú)到有的創(chuàng)造。這樣一個(gè)logo會(huì)讓用戶(hù)牢牢的將Notepad++的品牌記在心里，而且很難與其它同類(lèi)產(chǎn)品混淆。

個(gè)性

手繪和手寫(xiě)風(fēng)格的元素可以讓產(chǎn)品承載起強(qiáng)烈的個(gè)性，在用戶(hù)與網(wǎng)站或移動(dòng)應(yīng)用之間建立起情感層面的關(guān)聯(lián)。通過(guò)手繪風(fēng)格表達(dá)出的內(nèi)容可以讓人感覺(jué)到其背后有真人存在；這里所說(shuō)的“真人”，即包括產(chǎn)出內(nèi)容的人，也包括用心打造內(nèi)容表現(xiàn)形式的設(shè)計(jì)師們。讓用戶(hù)在使用產(chǎn)品的過(guò)程中潛移默化的感受到真切的人和人之間的交流，這對(duì)于提升產(chǎn)品的可信度及體驗(yàn)滿(mǎn)意度是非常重要的。

MathBoard是一款幫助小孩兒練習(xí)算數(shù)的iPad應(yīng)用。它的界面所模擬的是經(jīng)典的黑板外觀，輸入及輸出的內(nèi)容都模仿了粉筆的效果。整個(gè)練習(xí)以解題為主要形式，小孩兒們?cè)谙氩怀鰜?lái)的時(shí)候還可以在左側(cè)的黑板上直接進(jìn)行書(shū)寫(xiě)演算。用戶(hù)在這款產(chǎn)品中所能感受到的是真實(shí)的學(xué)習(xí)氛圍，而不是冰冷枯燥的人機(jī)對(duì)話。

推薦閱讀：為產(chǎn)品賦予人格 – 情感化設(shè)計(jì)的組成要素及實(shí)踐案例

信息與內(nèi)容

產(chǎn)品當(dāng)中內(nèi)容的呈現(xiàn)方式將決定著用戶(hù)能否有效的獲取和理解信息。要在恰當(dāng)?shù)臅r(shí)候，以足夠搶眼的方式把用戶(hù)的目光吸引過(guò)來(lái)；信息必須簡(jiǎn)單明了，與相關(guān)功能具有明確的關(guān)聯(lián)，并且能夠有效引導(dǎo)用戶(hù)執(zhí)行接下來(lái)的操作。在實(shí)際當(dāng)中要做到這些其實(shí)不是件容易的事。下面我們來(lái)看幾個(gè)通過(guò)手繪和草圖效果來(lái)傳達(dá)信息、引導(dǎo)用戶(hù)的例子叭。

對(duì)功能進(jìn)行詮釋

作為設(shè)計(jì)師，我們對(duì)手繪草圖在這方面的作用早已不陌生了。我們經(jīng)常需要通過(guò)草圖或故事板向團(tuán)隊(duì)其他成員展示想法，介紹設(shè)計(jì)方案；其實(shí)這種方法在很多時(shí)候同樣可以用在實(shí)際產(chǎn)品當(dāng)中。例如你有一個(gè)在概念和功能方面相對(duì)較新或是較為復(fù)雜的產(chǎn)品，那么不妨在介紹當(dāng)中加入一些草圖形式的視覺(jué)元素，更直觀的向用戶(hù)描述一些原本非常抽象的概念。這種方式可以給用戶(hù)帶來(lái)一種更加“私人化”的感覺(jué)，好像服務(wù)提供商或是設(shè)計(jì)師正在當(dāng)面為他進(jìn)行介紹講解一樣。

TestFlight(提供移動(dòng)應(yīng)用測(cè)試服務(wù))在這方面做的很棒。你可以在他們的首頁(yè)當(dāng)中找到大量手繪草圖風(fēng)格的視覺(jué)元素，特別是在向開(kāi)發(fā)者介紹其服務(wù)特色的地方，草圖搭配簡(jiǎn)單文案的形式不僅能有效的吸引瀏覽者的注意力，而且非常直觀易懂。

可視化的展示流程

與之前的一點(diǎn)類(lèi)似，我們同樣可以使用手繪草圖向用戶(hù)展示產(chǎn)品的功能流程。實(shí)際上，要在產(chǎn)品或服務(wù)中提供完美的解決方案是很難的，如果能夠以更加坦誠(chéng)和友好的姿態(tài)展示出一些復(fù)雜方案所涉及到的流程，即使它們看上去并不流光溢彩，卻可以讓用戶(hù)感受到一份真實(shí)可信。

設(shè)計(jì)師兼前端開(kāi)發(fā)者Alex Faure在他的網(wǎng)站中通過(guò)手繪風(fēng)格的視覺(jué)元素搭配文案向訪問(wèn)者展示了網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)當(dāng)中的重要流程步驟，給人的感覺(jué)便是非常用心，值得信任，仿佛不僅是他本人精通于提供這項(xiàng)服務(wù)，而且他很樂(lè)于讓潛在用戶(hù)也一起參與到整件事的流程當(dāng)中進(jìn)行溝通互動(dòng)。

引導(dǎo)用戶(hù)

無(wú)論設(shè)計(jì)網(wǎng)站還是移動(dòng)應(yīng)用，設(shè)計(jì)師們都要時(shí)刻考慮到用戶(hù)當(dāng)前所處的操作環(huán)節(jié)，提供必要的引導(dǎo)以幫助他們順利完成目標(biāo)。(推薦閱讀：具有引導(dǎo)性的移動(dòng)應(yīng)用界面設(shè)計(jì)模式)

在這方面，手繪風(fēng)格的圖標(biāo)也是你可以考慮使用的設(shè)計(jì)元素。當(dāng)然，大家都知道圖標(biāo)在界面設(shè)計(jì)當(dāng)中的重要性，那么手繪風(fēng)格的有什么不同呢？和前文所述的道理類(lèi)似，我們通常所使用的那些圖標(biāo)固然更加漂亮，充滿(mǎn)細(xì)節(jié)，但越是精致的圖標(biāo)，越會(huì)給人一種“軟件制造”的感覺(jué)，而手繪風(fēng)格則顯得更加個(gè)人化，更具親和力，能給用戶(hù)帶來(lái)一種真人交流的感覺(jué)。多數(shù)人更加傾向于接受真人的指引與幫助，而不是機(jī)器。

iPhone應(yīng)用Stamped使用了非常漂亮而且含義準(zhǔn)確的手繪風(fēng)格圖標(biāo)來(lái)引導(dǎo)用戶(hù)。該應(yīng)用本身就是基于真實(shí)人類(lèi)之間的分享交流的，而手繪風(fēng)格的視覺(jué)元素則在“人情味”方面又錦上添了個(gè)花。

人物介紹

無(wú)論是新創(chuàng)企業(yè)，還是工作室、自由設(shè)計(jì)師，如今大家都越發(fā)看重團(tuán)隊(duì)或個(gè)人的介紹頁(yè)面。站在用戶(hù)的角度講，人們也更加希望了解某個(gè)網(wǎng)站產(chǎn)品或應(yīng)用服務(wù)背后的那些真實(shí)的人。一個(gè)簡(jiǎn)單的“聯(lián)系我們”已然不夠了，人們希望知道他們能聯(lián)系的到底是誰(shuí)。你所做的介紹越個(gè)人化，人們就會(huì)越發(fā)的信任你。

令人喜愛(ài)

能否做到讓人喜愛(ài)是很關(guān)鍵的。如果人們感覺(jué)到了你的傲慢無(wú)禮，那么即使你提供的個(gè)人信息再詳細(xì)也是毫無(wú)意義的，人們總是更樂(lè)于相信那些他們喜歡的人。在介紹信息當(dāng)中使用手繪元素，這可以讓個(gè)人或團(tuán)隊(duì)的形象更具親和力，看上去更生動(dòng)、更富創(chuàng)意、容易相處。

標(biāo)簽： 情感化設(shè)計(jì) 手繪產(chǎn)品 設(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)系。