UI設(shè)計(jì)中的插畫與情感化設(shè)計(jì)

來(lái)源：: Yeung
時(shí)間：: 2017-05-18 19:29:29
閱讀：: 4574

新增了簡(jiǎn)單源文件方便大家練習(xí)，還有全部手打，也檢查了好幾遍依然有錯(cuò)別字，還望見(jiàn)諒

前言

說(shuō)到情感化設(shè)計(jì)相信大家或多或少都有些了解了。

那么我們?cè)撛趺磳⑺\(yùn)用到UI設(shè)計(jì)中來(lái)呢？

要了解上面的問(wèn)題首先我們得清楚什么是情感？

《心理學(xué)大辭典》中認(rèn)為：“情感是人對(duì)客觀事物是否滿足自己的需要而產(chǎn)生的態(tài)度體驗(yàn)”。情感在人類的日常生活中扮演著極其重要的角色，它能幫助評(píng)價(jià)處境的好壞，安全或危險(xiǎn)。

那么什么是情感化設(shè)計(jì)呢？

唐納德.諾曼在《設(shè)計(jì)心理學(xué)3-情感化設(shè)計(jì)》中將他分為三個(gè)層次，

以及其區(qū)產(chǎn)品之間的關(guān)聯(lián)

本能層次是先于意識(shí)與思維的，它是外觀要素和第一印象形成的基礎(chǔ)，

更多強(qiáng)調(diào)的是產(chǎn)品給人的初步印象，著重與產(chǎn)品的外觀、觸感

行為層次與產(chǎn)品的使用及體驗(yàn)相關(guān)，包括：功能、性能及可用性。

反思層次則是意識(shí)和更高級(jí)的感覺(jué)、情緒及知覺(jué)；也只有這個(gè)層次才能體驗(yàn)思想和情感的完全交融。在更低的本能層次和行為層次，僅僅包含感情，沒(méi)有詮釋或意識(shí)。詮釋、理解和推理來(lái)自反思層次。而在這三個(gè)層次里，反思層次最容易隨著文化、經(jīng)驗(yàn)、教育和個(gè)體差異的不同而變化，并且超越了其他層次。因此對(duì)于同一件事有的人喜歡有的人卻討厭。

本次文章重點(diǎn)介紹的其實(shí)是情感化設(shè)計(jì)中的一小部分——插畫設(shè)計(jì)在

情感化設(shè)計(jì)中的作用，但是為了便與理解，這里還是簡(jiǎn)單的解釋一下這三個(gè)行為層次，

以及在app產(chǎn)品中的對(duì)應(yīng)關(guān)系

本能設(shè)計(jì)和第一反應(yīng)有關(guān)

其最好的情況是，當(dāng)人們第一眼看到設(shè)計(jì)，就禁不住叫道“我想要”。你是否有因?yàn)榭吹揭豢铌P(guān)于app截圖的結(jié)束，就立馬跑去appstore下載？你是否因?yàn)橐豢頰pp的視覺(jué)設(shè)計(jì)非常美觀，即使不用也沒(méi)有卸載呢。就是這個(gè)道理啦

唐納德說(shuō)：具備視覺(jué)和平面藝術(shù)家以及工藝工程師的技能，才能進(jìn)行有效的本能層次設(shè)計(jì)。（這里指的是工業(yè)產(chǎn)品設(shè)計(jì)）

那么作為ui設(shè)計(jì)師呢？

當(dāng)然也需要視覺(jué)和平面藝術(shù)家的技能，不過(guò)說(shuō)的通俗一點(diǎn)即：icon繪制、界面排版、插畫繪制、顏色搭配、動(dòng)效等等...

行為設(shè)計(jì)和使用有關(guān)

這時(shí)候外觀就不那么重要了，唯一重要的是功能的實(shí)現(xiàn)。如果這個(gè)功能不吸引人，那么誰(shuí)會(huì)在意他多棒呢？

這是那些注重使用性的實(shí)踐主義者所保持的設(shè)計(jì)觀點(diǎn)。

優(yōu)秀的行為設(shè)計(jì)有四個(gè)要素：功能、易理解性、易用性和感受。也就是說(shuō)了除了產(chǎn)品的功能痛點(diǎn)之外，其界面展示、交互方式、用戶體驗(yàn)也是十分重要的。

良好的行為層次設(shè)計(jì)的第一步，就是了解顧客如何使用產(chǎn)品。

而產(chǎn)品設(shè)計(jì)的真正挑戰(zhàn)在于“最終了解用戶那些未被滿足和未明述的需求”

不過(guò)小黃車的開鎖和還車體驗(yàn)實(shí)在是有點(diǎn)糟糕~

反思層次設(shè)計(jì)涵蓋諸多領(lǐng)域，他與信息、文化以及

產(chǎn)品的含義和用途息息相關(guān)

你有時(shí)候會(huì)不會(huì)因?yàn)樽约旱南埠枚x擇某一款app？或者因?yàn)槟承┦虑樾遁d不再使用某款app？這些都是屬于反思型的決定。唐納德說(shuō)：產(chǎn)品不僅是所有功能的集合，他們真正的價(jià)值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會(huì)地位。

反思層次的活動(dòng)常常決定著一個(gè)人對(duì)某件產(chǎn)品的整體印象。當(dāng)你在該層次上回想這件產(chǎn)品，思及它的所有魅力和使用經(jīng)歷時(shí)，許多因素將一起作用；同時(shí)，它在某一方面的缺陷可能被另一面的有點(diǎn)所掩蓋。在整體評(píng)價(jià)中，一個(gè)小缺點(diǎn)可能被忽略（或放大），完全打破它原本應(yīng)占的比重。

目前app store 上有大量的相近或者功能類似的app，那么我們最終選擇使用的是同類型中的哪種產(chǎn)品，反思層次氣到了決定的作用，他包含并超越了前兩個(gè)層次。

隨著不停的迭（hu）代（chao），支付寶和微信也可以說(shuō)是越來(lái)越像，最主要量大功能則是支付與社交；但是并不是他們給了我們什么功能，我們就會(huì)去用。我們會(huì)去權(quán)衡利弊，哪個(gè)安全性高？哪個(gè)適宜理財(cái)？哪個(gè)方便社交？哪個(gè)方便朋友間aa聚餐或者轉(zhuǎn)賬等等。

知乎與百度知道，表面上看同為問(wèn)答社區(qū)，在百度巨頭的壓力之下，為什么現(xiàn)在知乎能夠做的這么火？真如前面所說(shuō)：“產(chǎn)品不僅是所有功能的集合，他們真正的價(jià)值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會(huì)地位。”自從接觸了知乎，我們發(fā)現(xiàn)原來(lái)世界上有這么多我們不知道的事情、原來(lái)這部電影還能這么解讀、我終于知道老婆為什么那么愛(ài)生氣了等等等；同時(shí)也給了一些大v答主們被崇拜被夸張的虛榮心（人都會(huì)有虛榮心，此處非貶義）。當(dāng)然并不是說(shuō)“百度問(wèn)答”就完全不好，當(dāng)我單純的只想知道某個(gè)問(wèn)題的答案時(shí)，我可能會(huì)選擇百度知道；可是當(dāng)我還想知道一些延伸的內(nèi)容時(shí)，“知乎”無(wú)疑時(shí)更好的選擇。這就是反思層次對(duì)我們的影響。

音樂(lè)市場(chǎng)的競(jìng)爭(zhēng)也是十分激烈，我們可以看到無(wú)論是外觀還是功能其實(shí)大家都差不多，但是他們的用戶量和用戶群卻又不同。例如：我喜歡的歌曲版權(quán)歸屬、整個(gè)平臺(tái)的用戶氛圍、平臺(tái)的逼格屬性等等；用戶通過(guò)選擇自己喜歡的產(chǎn)品建立自我形象，甚至用某一個(gè)產(chǎn)品的用戶還是鄙視用其他產(chǎn)品的用戶，這些都是反思層次所做的決定。

這邊我們可以看到三個(gè)登錄頁(yè)在本能層次都很漂亮，可是行為層次上，圖1則考慮的比較少，圖二圖三都加入了第三方登錄及注冊(cè)等功能，體驗(yàn)更好；而圖三更是加入了“skip”以及一張高清的背景圖片，而這正是在反思層次所做的決定，考慮到用戶是否可以先瀏覽產(chǎn)品再?zèng)Q定是否注冊(cè)，已經(jīng)一張優(yōu)美的背景圖和slogan相結(jié)合給用戶描述一個(gè)簡(jiǎn)單美麗的小場(chǎng)景，引起情感共鳴。

好了說(shuō)了這么多我們正式進(jìn)入主題，插畫設(shè)計(jì)在情感化設(shè)計(jì)中的運(yùn)用；

以下將會(huì)通過(guò)不同的場(chǎng)景來(lái)分析其意義及制作思路。

01 引導(dǎo)頁(yè)

圖片來(lái)自老東家同事（馬師傅）

現(xiàn)在幾乎大部分app的啟動(dòng)頁(yè)都會(huì)采取插畫的形式，將產(chǎn)品的內(nèi)容、功能、或者是升級(jí)的亮點(diǎn)表現(xiàn)出來(lái)。人們對(duì)于接受陌生事物過(guò)程中會(huì)產(chǎn)生緊張與不安，引導(dǎo)頁(yè)的作用就是短時(shí)間內(nèi)讓用戶對(duì)這款產(chǎn)品有一個(gè)大概的了解，緩解用戶的焦慮與不安，讓用戶更快的進(jìn)入使用環(huán)境。而且人們都是視覺(jué)動(dòng)物，好看的插畫更會(huì)獲得用戶本能的好感。所以我們?cè)谥谱饕龑?dǎo)頁(yè)時(shí)應(yīng)該緊扣產(chǎn)品功能的痛點(diǎn)，表達(dá)時(shí)需要易于理解、符合產(chǎn)品調(diào)性且風(fēng)格統(tǒng)一，可以通過(guò)一個(gè)個(gè)小場(chǎng)景、小故事、或者元素等方向來(lái)繪制插畫。

02啟動(dòng)頁(yè)

一款成熟的產(chǎn)品，肯定少不了百變啟動(dòng)頁(yè)啦。每當(dāng)節(jié)假日或者一些特殊的活動(dòng)時(shí)，都可以欣賞到各大廠賞心悅目的啟動(dòng)頁(yè)。既是對(duì)外宣傳，也是在用戶心中建立品牌形象，拉近與用戶的距離。啟動(dòng)頁(yè)只有短短的幾秒鐘，所以需要畫面能足夠的吸引眼球以及獲得用戶情感上的共鳴。這時(shí)插畫則是一個(gè)絕佳的選擇了，豐富的色彩、精致有趣的插畫比真實(shí)的場(chǎng)景多了一層想象的空間，勾起用戶的某段回憶或者感受，且更加親切易于接受。繪制此類插畫時(shí)需要考慮活動(dòng)或節(jié)日面向的人群、產(chǎn)品調(diào)性、并且需要緊扣主題元素，讓人能夠在短暫的世界內(nèi)理解其傳單的含義。

03空態(tài)頁(yè)面

當(dāng)用戶剛剛使用app不久時(shí)，肯定會(huì)遇到很多還未涉及的功能?？墒强湛盏捻?yè)面對(duì)于用戶來(lái)說(shuō)過(guò)于冷漠及不友好，這時(shí)候則需要去引導(dǎo)用戶或者說(shuō)明狀況。而用戶對(duì)于圖片的接受程度明顯高于文字，通過(guò)簡(jiǎn)單的插畫直接表達(dá)此頁(yè)面目前的狀態(tài)，或者用戶去使用某項(xiàng)功能，讓用戶易于接受和理解。此類插畫應(yīng)該簡(jiǎn)單易懂，與頁(yè)面內(nèi)容和文案相對(duì)應(yīng)，并且不能和app整體風(fēng)格出入太大。話說(shuō)這次站酷的改版似乎也有一些這類型設(shè)計(jì)~

04出錯(cuò)頁(yè)面

即使我們以產(chǎn)品體驗(yàn)毫無(wú)bug，但是實(shí)際的使用中依然會(huì)遇到一些無(wú)法預(yù)測(cè)的情況打斷用戶，例如斷網(wǎng)、404等。這時(shí)候插畫就體現(xiàn)了其特有的作用了，減少用戶的挫敗感，擬人化我們的app，使其更具有人情味。此處使用的插圖與“空態(tài)”的要求一樣，簡(jiǎn)單易懂為首要前提，同時(shí)提高其可觀賞性和趣味性。如果產(chǎn)品有吉祥物，那圍繞著吉祥物來(lái)設(shè)計(jì)，既能減少用戶負(fù)面情緒，也能不斷的增強(qiáng)品牌在用戶心中的形象。

05結(jié)果通知

用戶在使用app完成自己“任務(wù)”時(shí)會(huì)得到不同的反饋，成功、失敗、或者驚喜等。此時(shí)插畫可以很好的傳達(dá)出這些信息，通過(guò)對(duì)于氛圍場(chǎng)景的繪制讓用戶即使不看文字也能知道大致的意思，同時(shí)精致的插畫可以讓用戶有更好的帶入感，不像單純的文字提示那么枯燥乏味。此類插畫與界面的設(shè)計(jì)需要符合整體所要傳達(dá)的氛圍及信息，不管是成功、失敗或者是獲的優(yōu)惠等；加強(qiáng)用戶的參與感，使產(chǎn)品與用戶的對(duì)話更加有人情味。

06升級(jí)提醒設(shè)計(jì)

為了能夠盡快讓用戶體驗(yàn)新功能、以及不斷優(yōu)化用戶體驗(yàn)，我們會(huì)經(jīng)常更新迭代我們的產(chǎn)品?？墒窍胍脩艄怨月?tīng)話去升級(jí)也并不是那么容易，一般來(lái)說(shuō)用戶看到一個(gè)滿是文字的彈窗，根本就沒(méi)有耐心去看就關(guān)閉了。而一副出彩的小插畫卻可能瞬間吸引用戶的眼球，進(jìn)而瀏覽其簡(jiǎn)略的文字信息，從而決定是否升級(jí)，從反思層面來(lái)說(shuō)可以讓用戶看到產(chǎn)品的用心和提升友好度。可以從幾個(gè)案例看到大部分升級(jí)插圖都是通過(guò)選擇表現(xiàn)速度和探索的方向來(lái)設(shè)計(jì)，此類插畫大家可以自由發(fā)揮，只要能體現(xiàn)出趣味性即可。

07 loading刷新設(shè)計(jì)

當(dāng)我們?yōu)g覽微博等一些會(huì)實(shí)時(shí)發(fā)生一些變化的app、以及加載新頁(yè)面時(shí)，都不可避免的會(huì)出現(xiàn)加載動(dòng)畫來(lái)緩沖。單調(diào)的“菊花”和“箭頭”以及有些讓用戶覺(jué)得單調(diào)和乏味了，我們可以看到這些有趣的loading不僅能夠提現(xiàn)產(chǎn)品的差異性，同時(shí)有趣生動(dòng)，可以減少用戶在等待過(guò)程中的負(fù)面情緒，而且與品牌和業(yè)務(wù)息息相關(guān)。我們?cè)诳紤]此類小插圖動(dòng)效設(shè)計(jì)時(shí)，可以考慮從公司的業(yè)務(wù)、吉祥物和所傳達(dá)出的價(jià)值觀入手。

08 運(yùn)營(yíng)活動(dòng)

除了一些產(chǎn)品上的功能場(chǎng)景，在一些大的運(yùn)營(yíng)活動(dòng)和h5推廣時(shí)也是插畫得以大展身手的好機(jī)會(huì)。從前兩年淘寶雙十一、元旦等節(jié)日時(shí)首頁(yè)各種優(yōu)美的插畫特效開始，讓我們發(fā)現(xiàn)原來(lái)app還可以這么玩；還有一直火爆到現(xiàn)在的h5，可以發(fā)現(xiàn)大部分都是以插畫為主，只是風(fēng)格各異、各有千秋。優(yōu)美有趣的插畫可以在第一眼就獲取用戶好感，吸引用戶耐心的瀏覽查看活動(dòng)頁(yè)，同時(shí)加強(qiáng)活動(dòng)氛圍及用戶的帶入感，在反思層次引起用戶的共鳴和好感，吸引用戶主動(dòng)去分享參與。這一類插畫則沒(méi)有太多限制，主要看活動(dòng)需要提現(xiàn)什么樣的氛圍，神秘、喜慶、幽默、炫酷等，圍繞著活動(dòng)主題創(chuàng)作一段小故事或者場(chǎng)景，使用戶能夠體會(huì)到其所傳達(dá)出的情緒進(jìn)而引發(fā)回憶產(chǎn)生共鳴。

-----

特別要提的就是前段時(shí)間比較火的關(guān)于淘寶新的改版

淘寶這次的改版除了絢麗的色彩，內(nèi)容結(jié)構(gòu)上也做了一些調(diào)整，就在我寫文章的時(shí)候我老婆突然還和我說(shuō)了一句她覺(jué)得淘寶越來(lái)越人性化了，我想這應(yīng)該就是用戶最真實(shí)的心理感受吧。除了這些變動(dòng)，還有一個(gè)比較出彩并且與我們主題息息相關(guān)的就是插畫的設(shè)計(jì)啦。

淘寶通過(guò)和諧小插畫傳達(dá)自己的“小情緒”，將這些有趣故事敘說(shuō)給用戶，為用戶帶來(lái)更好的購(gòu)物心情和體驗(yàn)。在界面中文字總是很容易被忽略，這些統(tǒng)一的小插圖，塑造除了一個(gè)有個(gè)性的產(chǎn)品，更加擬人化有人情味，相比冷漠的文字更能拉近與用戶的距離、引發(fā)情感上的共鳴。大家也可以搜索一下《淘寶2017UI設(shè)計(jì)風(fēng)格改版升級(jí)》這篇文章了解淘寶團(tuán)隊(duì)具體的執(zhí)行方案。以下圖片也是來(lái)自文章。

OK.雖然前面說(shuō)了一大堆，但是紙上得來(lái)終覺(jué)淺~

現(xiàn)在我來(lái)列舉一個(gè)自己做的飛機(jī)稿幫大家加深印象吧

前面已經(jīng)介紹了插畫的多種應(yīng)用，內(nèi)容比較多，這里我篩選了幾個(gè)方向。

為一款音樂(lè)類app設(shè)計(jì)一個(gè)空態(tài)頁(yè)面：“無(wú)網(wǎng)絡(luò)”；一個(gè)通知確認(rèn)頁(yè)面“開啟app推送”；一個(gè)啟動(dòng)頁(yè)：可以任選一個(gè)節(jié)日，例如最近的“兒童節(jié)”。（尺寸：750x1334）

第一步：確定產(chǎn)品調(diào)性和方向

因?yàn)槭翘摂M產(chǎn)品，這里我選擇的方向是有趣、愛(ài)玩

第二步：關(guān)鍵詞聯(lián)想

根據(jù)產(chǎn)品及要設(shè)計(jì)的插圖寓意進(jìn)行關(guān)鍵詞聯(lián)想；啟動(dòng)頁(yè)的設(shè)計(jì)一般則與活動(dòng)主題密切相關(guān)，這次我選擇的是“六一兒童節(jié)日”，其制作流程也基本一致，不過(guò)其場(chǎng)景則需要更具細(xì)膩，故事感要更強(qiáng)，以引起人們的共鳴。