網(wǎng)站建設手繪元素提升產(chǎn)品親和力發(fā)布者：本站     時(shí)間：2022-03-30 11:03:48

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

有很多方法可以幫助設計師們“中和”掉產(chǎn)品身上的科技氣息，其中最簡(jiǎn)單直白而卓有成效的就是打造更親切友好、更有人情味兒的設計方案。這自然是關(guān)于“情感化設計”的話(huà)題，而本文則會(huì )重點(diǎn)討論其中的一個(gè)方面，即手繪、手寫(xiě)和草圖風(fēng)格對產(chǎn)品個(gè)性及整體體驗所能起到的提升作用。


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

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

形象與氣質(zhì)

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

手繪元素提升產(chǎn)品親和力

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

品牌識別

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

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

個(gè)性

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

手繪元素提升產(chǎn)品親和力

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

信息與內容

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

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

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

手繪元素提升產(chǎn)品親和力

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

可視化的展示流程

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

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

引導用戶(hù)

無(wú)論設計網(wǎng)站還是移動(dòng)應用，設計師們都要時(shí)刻考慮到用戶(hù)當前所處的操作環(huán)節，提供必要的引導以幫助他們順利完成目標。

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

手繪元素提升產(chǎn)品親和力

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

人物介紹

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

令人喜愛(ài)

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

手繪元素提升產(chǎn)品親和力

The Knock Knock Factory在這方面做的不錯。上圖是關(guān)于他們“無(wú)所畏懼的leader”Keith的個(gè)人介紹，其中粉筆畫(huà)一樣的手繪圖形很簡(jiǎn)約而全面的展示了此人的能力特質(zhì)。這種視覺(jué)表現形式，包括詼諧的文案在內，都向訪(fǎng)問(wèn)者展示了一幅非常清晰的畫(huà)面，讓他們了解到在這里要和怎樣的人打交道，同時(shí)感受到一種積極的態(tài)度。這種更加個(gè)人化的情感連接可以讓訪(fǎng)問(wèn)者覺(jué)得自己在這里是被歡迎的。

可信

在互聯(lián)網(wǎng)世界當中，要掩蓋自己的真實(shí)身份、躲藏在網(wǎng)站的某個(gè)角落里是很容易的。正因為這樣，向訪(fǎng)問(wèn)者或客戶(hù)坦誠的展示自己才能贏(yíng)得更多的信任。人們只有信任你，才會(huì )按照你所做出的引導去產(chǎn)生實(shí)際行動(dòng)，例如使用你們的服務(wù)或是購買(mǎi)產(chǎn)品。手繪風(fēng)格的內容元素肯定不是最容易設計和產(chǎn)出的，它所需要的是包括設計師在內的所有團隊成員的創(chuàng )意與激情；但也正是這些創(chuàng )意與激情可以更加直白有效的將“誠摯”與“可信”的感覺(jué)帶給潛在客戶(hù)。
手繪元素提升產(chǎn)品親和力

Polecat在團隊介紹當中花了不少心思，他們?yōu)槊總€(gè)成員都制作了手繪插畫(huà)風(fēng)格的頭像，雖然看上去略顯粗糙，但表現出了他們誠摯的用心。

真實(shí)

真實(shí)是“信任”當中至關(guān)重要的元素，你不能讓訪(fǎng)問(wèn)者產(chǎn)生“這里是否有真實(shí)團隊存在”的顧慮。網(wǎng)站產(chǎn)品帶給用戶(hù)的不安全感是與生俱來(lái)的，只是程度問(wèn)題。用戶(hù)知道自己很可能永遠不會(huì )接觸到產(chǎn)品背后的真人，所以你可以試著(zhù)在一些細節的地方展示“真人思考的印跡”，例如字體。任何網(wǎng)站都可以使用大家習以為常的Web字體，而你可以在合適的地方嘗試一些手寫(xiě)風(fēng)格的字體，制造一點(diǎn)點(diǎn)差異，讓人感到更平實(shí)親切。

手繪元素提升產(chǎn)品親和力

Grove的家伙們在創(chuàng )意、趣味和真實(shí)之間找到了比較完美的平衡點(diǎn)。他們將團隊成員的照片處理成寶麗來(lái)的外觀(guān)，同時(shí)用手寫(xiě)體標注了每個(gè)人的名字，看上去就像是一個(gè)訪(fǎng)客溜達進(jìn)他們的工作區給每個(gè)人(包括狗狗)拍了一張照片一樣，很有代入感。

講故事

“講故事”是一種非常傳統而且個(gè)人化的信息溝通方式，可以在情感上給我們帶來(lái)安全舒適的感覺(jué)。通過(guò)手繪草圖給用戶(hù)講講產(chǎn)品的故事，這可以讓他們暫時(shí)忘掉產(chǎn)品自身的科技屬性，從而更容易產(chǎn)生親和感。

娛樂(lè )化

娛樂(lè )化的方式可以非常容易的讓人們產(chǎn)生參與感。通過(guò)手繪草圖或漫畫(huà)的形式陳述產(chǎn)品特色或相關(guān)的概念，讓人們在輕松愉悅的狀態(tài)下自主的開(kāi)始了解你的產(chǎn)品。
手繪元素提升產(chǎn)品親和力
Axure在他們的首頁(yè)給訪(fǎng)問(wèn)者們帶來(lái)了UX Man的故事，手繪風(fēng)格非常吸引眼球。無(wú)疑，為了打造這樣有趣精彩的頁(yè)面，他們的團隊一定花了很多功夫。

解釋說(shuō)明

手繪風(fēng)格相比于普通的視覺(jué)元素來(lái)說(shuō)可以更加直接的觸及到用戶(hù)的情感層面，使他們愿意更主動(dòng)的發(fā)現并吸收信息。

手繪元素提升產(chǎn)品親和力
SignNow在首頁(yè)介紹中使用了手繪插畫(huà)來(lái)說(shuō)明這款應用可以滿(mǎn)足用戶(hù)的哪些需求、幫他們解決怎樣的問(wèn)題?？吹竭@樣的圖畫(huà)，潛在客戶(hù)們幾乎可以立刻聯(lián)想到自己在實(shí)際當中遇到的麻煩。一旦產(chǎn)生了需求上的共鳴，他們就會(huì )跟隨著(zhù)你的介紹和引導，主動(dòng)投入到對產(chǎn)品的深入了解當中。

激發(fā)興趣

人性化、個(gè)性化的視覺(jué)元素可以激發(fā)訪(fǎng)問(wèn)者的興趣，而被喚起興致的用戶(hù)是最樂(lè )于接受相關(guān)信息的。

手繪元素提升產(chǎn)品親和力

旅行類(lèi)應用ToristEye通過(guò)手繪故事的方式有效的激發(fā)了潛在用戶(hù)的興趣。他們將自己的產(chǎn)品放在一個(gè)冒險故事當中，一步一步的引領(lǐng)用戶(hù)在故事?tīng)I造的需求情境中了解這款應用。即使去掉說(shuō)明文案，這套故事圖片仍然可以展示出產(chǎn)品的大致功能以及背后體現出的自由之旅精神。

吸引目光

手繪元素之所以能夠吸引目光，主要原因是人們更樂(lè )于在環(huán)境中發(fā)現不同，具體的說(shuō)也就是在Web或移動(dòng)產(chǎn)品的界面中發(fā)現“人類(lèi)元素”。我們早已習慣了各種中規中矩的直線(xiàn)和對稱(chēng)的布局，這種情況下，手繪和手寫(xiě)風(fēng)格的元素可以在很短的時(shí)間內讓用戶(hù)將注意力集中過(guò)來(lái)。

邀請

我們可以運用這一原理與用戶(hù)進(jìn)行溝通，例如邀請引導他們執行某些特定的操作，常見(jiàn)的包括注冊、下載、分享等等。相比于冰冷而機械化的引導文案，人們更樂(lè )于對這種看上去非常個(gè)人化的信息做出回應。

手繪元素提升產(chǎn)品親和力

Weezbe就是這樣做的。相關(guān)的介紹文案使用了手寫(xiě)風(fēng)格，一個(gè)大大的箭頭指向著(zhù)綠色操作按鈕。此外他們還畫(huà)了一個(gè)笑臉，隨意而粗糙卻讓人覺(jué)得輕松愉悅。

提示

利用手繪元素所產(chǎn)生的吸引力，及其能夠激發(fā)人們好奇心的能力，向用戶(hù)介紹界面的操作方法，這也是一種很常見(jiàn)的方式。

手繪元素提升產(chǎn)品親和力

ZURB在介紹他們的jQuery幻燈片插件時(shí)所使用的這種提示方法也是我們能在越來(lái)越多的產(chǎn)品當中見(jiàn)到的。

切莫濫用

手繪手寫(xiě)風(fēng)格并不是在所有的地方都適用。確保不要濫用，畢竟我們使用手繪手寫(xiě)風(fēng)格的目的就是利用它們所產(chǎn)生的視覺(jué)和心理上的差異性，利用它們的稀缺所帶來(lái)的“個(gè)人化”、“真實(shí)化”的感受；如果產(chǎn)品當中到處都是這樣的元素，那顯然會(huì )失去意義?？纯聪旅娴睦?，這完全是毫無(wú)意義、充滿(mǎn)視覺(jué)噪音的運用方式，不僅嚇人，而且即使用戶(hù)希望進(jìn)行操作，也很容易被干擾而點(diǎn)擊到錯誤的位置。