2017-5-17 用心設(shè)計(jì)
前言
說到情感化設(shè)計(jì)相信大家或多或少都有些了解了。
那么我們該怎么將它運(yùn)用到UI設(shè)計(jì)中來呢？
要了解上面的問題首先我們得清楚什么是情感？
《心理學(xué)大辭典》中認(rèn)為：“情感是人對客觀事物是否滿足自己的需要而產(chǎn)生的態(tài)度體驗(yàn)”。情感在人類的日常生活中扮演著極其重要的角色，它能幫助評價(jià)處境的好壞，安全或危險(xiǎn)。
那么什么是情感化設(shè)計(jì)呢？
唐納德.諾曼在《設(shè)計(jì)心理學(xué)3-情感化設(shè)計(jì)》中將他分為三個(gè)層次，
以及其區(qū)產(chǎn)品之間的關(guān)聯(lián)
本能層次是先于意識與思維的，它是外觀要素和第一印象形成的基礎(chǔ)，
更多強(qiáng)調(diào)的是產(chǎn)品給人的初步印象，著重與產(chǎn)品的外觀、觸感
行為層次與產(chǎn)品的使用及體驗(yàn)相關(guān)，包括：功能、性能及可用性。
反思層次則是意識和更高級的感覺、情緒及知覺；也只有這個(gè)層次才能體驗(yàn)思想和情感的完全交融。在更低的本能層次和行為層次，僅僅包含感情，沒有詮釋或意識。詮釋、理解和推理來自反思層次。而在這三個(gè)層次里，反思層次最容易隨著文化、經(jīng)驗(yàn)、教育和個(gè)體差異的不同而變化，并且超越了其他層次。因此對于同一件事有的人喜歡有的人卻討厭。
本次文章重點(diǎn)介紹的其實(shí)是情感化設(shè)計(jì)中的一小部分——插畫設(shè)計(jì)在
情感化設(shè)計(jì)中的作用，但是為了便與理解，這里還是簡單的解釋一下這三個(gè)行為層次，
以及在app產(chǎn)品中的對應(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的視覺設(shè)計(jì)非常美觀，即使不用也沒有卸載呢。就是這個(gè)道理啦
唐納德說：具備視覺和平面藝術(shù)家以及工藝工程師的技能，才能進(jìn)行有效的本能層次設(shè)計(jì)。（這里指的是工業(yè)產(chǎn)品設(shè)計(jì)）
那么作為ui設(shè)計(jì)師呢？
當(dāng)然也需要視覺和平面藝術(shù)家的技能，不過說的通俗一點(diǎn)即：icon繪制、界面排版、插畫繪制、顏色搭配、動效等等...
行為設(shè)計(jì)和使用有關(guān)
這時(shí)候外觀就不那么重要了，唯一重要的是功能的實(shí)現(xiàn)。如果這個(gè)功能不吸引人，那么誰會在意他多棒呢？
這是那些注重使用性的實(shí)踐主義者所保持的設(shè)計(jì)觀點(diǎn)。
優(yōu)秀的行為設(shè)計(jì)有四個(gè)要素：功能、易理解性、易用性和感受。也就是說了除了產(chǎn)品的功能痛點(diǎn)之外，其界面展示、交互方式、用戶體驗(yàn)也是十分重要的。
良好的行為層次設(shè)計(jì)的第一步，就是了解顧客如何使用產(chǎn)品。
而產(chǎn)品設(shè)計(jì)的真正挑戰(zhàn)在于“最終了解用戶那些未被滿足和未明述的需求”
不過小黃車的開鎖和還車體驗(yàn)實(shí)在是有點(diǎn)糟糕~
反思層次設(shè)計(jì)涵蓋諸多領(lǐng)域，他與信息、文化以及
產(chǎn)品的含義和用途息息相關(guān)
你有時(shí)候會不會因?yàn)樽约旱南埠枚x擇某一款app？或者因?yàn)槟承┦虑樾遁d不再使用某款app？這些都是屬于反思型的決定。唐納德說：產(chǎn)品不僅是所有功能的集合，他們真正的價(jià)值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會地位。
反思層次的活動常常決定著一個(gè)人對某件產(chǎn)品的整體印象。當(dāng)你在該層次上回想這件產(chǎn)品，思及它的所有魅力和使用經(jīng)歷時(shí)，許多因素將一起作用；同時(shí)，它在某一方面的缺陷可能被另一面的有點(diǎn)所掩蓋。在整體評價(jià)中，一個(gè)小缺點(diǎn)可能被忽略（或放大），完全打破它原本應(yīng)占的比重。
目前app store 上有大量的相近或者功能類似的app，那么我們最終選擇使用的是同類型中的哪種產(chǎn)品，反思層次氣到了決定的作用，他包含并超越了前兩個(gè)層次。
隨著不停的迭（hu）代（chao），支付寶和微信也可以說是越來越像，最主要量大功能則是支付與社交；但是并不是他們給了我們什么功能，我們就會去用。我們會去權(quán)衡利弊，哪個(gè)安全性高？哪個(gè)適宜理財(cái)？哪個(gè)方便社交？哪個(gè)方便朋友間aa聚餐或者轉(zhuǎn)賬等等。
知乎與百度知道，表面上看同為問答社區(qū)，在百度巨頭的壓力之下，為什么現(xiàn)在知乎能夠做的這么火？真如前面所說：“產(chǎn)品不僅是所有功能的集合，他們真正的價(jià)值可以是滿足人們的情感需求，而其中最重要的需求就是建立自我形象與社會地位?！弊詮慕佑|了知乎，我們發(fā)現(xiàn)原來世界上有這么多我們不知道的事情、原來這部電影還能這么解讀、我終于知道老婆為什么那么愛生氣了等等等；同時(shí)也給了一些大v答主們被崇拜被夸張的虛榮心（人都會有虛榮心，此處非貶義）。當(dāng)然并不是說“百度問答”就完全不好，當(dāng)我單純的只想知道某個(gè)問題的答案時(shí)，我可能會選擇百度知道；可是當(dāng)我還想知道一些延伸的內(nèi)容時(shí)，“知乎”無疑時(shí)更好的選擇。這就是反思層次對我們的影響。
音樂市場的競爭也是十分激烈，我們可以看到無論是外觀還是功能其實(shí)大家都差不多，但是他們的用戶量和用戶群卻又不同。例如：我喜歡的歌曲版權(quán)歸屬、整個(gè)平臺的用戶氛圍、平臺的逼格屬性等等；用戶通過選擇自己喜歡的產(chǎn)品建立自我形象，甚至用某一個(gè)產(chǎn)品的用戶還是鄙視用其他產(chǎn)品的用戶，這些都是反思層次所做的決定。
這邊我們可以看到三個(gè)登錄頁在本能層次都很漂亮，可是行為層次上，圖1則考慮的比較少，圖二圖三都加入了第三方登錄及注冊等功能，體驗(yàn)更好；而圖三更是加入了“skip”以及一張高清的背景圖片，而這正是在反思層次所做的決定，考慮到用戶是否可以先瀏覽產(chǎn)品再決定是否注冊，已經(jīng)一張優(yōu)美的背景圖和slogan相結(jié)合給用戶描述一個(gè)簡單美麗的小場景，引起情感共鳴。
好了說了這么多我們正式進(jìn)入主題，插畫設(shè)計(jì)在情感化設(shè)計(jì)中的運(yùn)用；
以下將會通過不同的場景來分析其意義及制作思路。
01 引導(dǎo)頁
圖片來自老東家同事（馬師傅）
現(xiàn)在幾乎大部分app的啟動頁都會采取插畫的形式，將產(chǎn)品的內(nèi)容、功能、或者是升級的亮點(diǎn)表現(xiàn)出來。人們對于接受陌生事物過程中會產(chǎn)生緊張與不安，引導(dǎo)頁的作用就是短時(shí)間內(nèi)讓用戶對這款產(chǎn)品有一個(gè)大概的了解，緩解用戶的焦慮與不安，讓用戶更快的進(jìn)入使用環(huán)境。而且人們都是視覺動物，好看的插畫更會獲得用戶本能的好感。所以我們在制作引導(dǎo)頁時(shí)應(yīng)該緊扣產(chǎn)品功能的痛點(diǎn)，表達(dá)時(shí)需要易于理解、符合產(chǎn)品調(diào)性且風(fēng)格統(tǒng)一，可以通過一個(gè)個(gè)小場景、小故事、或者元素等方向來繪制插畫。
02啟動頁
一款成熟的產(chǎn)品，肯定少不了百變啟動頁啦。每當(dāng)節(jié)假日或者一些特殊的活動時(shí)，都可以欣賞到各大廠賞心悅目的啟動頁。既是對外宣傳，也是在用戶心中建立品牌形象，拉近與用戶的距離。啟動頁只有短短的幾秒鐘，所以需要畫面能足夠的吸引眼球以及獲得用戶情感上的共鳴。這時(shí)插畫則是一個(gè)絕佳的選擇了，豐富的色彩、精致有趣的插畫比真實(shí)的場景多了一層想象的空間，勾起用戶的某段回憶或者感受，且更加親切易于接受。繪制此類插畫時(shí)需要考慮活動或節(jié)日面向的人群、產(chǎn)品調(diào)性、并且需要緊扣主題元素，讓人能夠在短暫的世界內(nèi)理解其傳單的含義。
03空態(tài)頁面
當(dāng)用戶剛剛使用app不久時(shí)，肯定會遇到很多還未涉及的功能。可是空空的頁面對于用戶來說過于冷漠及不友好，這時(shí)候則需要去引導(dǎo)用戶或者說明狀況。而用戶對于圖片的接受程度明顯高于文字，通過簡單的插畫直接表達(dá)此頁面目前的狀態(tài)，或者用戶去使用某項(xiàng)功能，讓用戶易于接受和理解。此類插畫應(yīng)該簡單易懂，與頁面內(nèi)容和文案相對應(yīng)，并且不能和app整體風(fēng)格出入太大。話說這次站酷的改版似乎也有一些這類型設(shè)計(jì)~
04出錯(cuò)頁面
即使我們以產(chǎn)品體驗(yàn)毫無bug，但是實(shí)際的使用中依然會遇到一些無法預(yù)測的情況打斷用戶，例如斷網(wǎng)、404等。這時(shí)候插畫就體現(xiàn)了其特有的作用了，減少用戶的挫敗感，擬人化我們的app，使其更具有人情味。此處使用的插圖與“空態(tài)”的要求一樣，簡單易懂為首要前提，同時(shí)提高其可觀賞性和趣味性。如果產(chǎn)品有吉祥物，那圍繞著吉祥物來設(shè)計(jì)，既能減少用戶負(fù)面情緒，也能不斷的增強(qiáng)品牌在用戶心中的形象。
05結(jié)果通知
用戶在使用app完成自己“任務(wù)”時(shí)會得到不同的反饋，成功、失敗、或者驚喜等。此時(shí)插畫可以很好的傳達(dá)出這些信息，通過對于氛圍場景的繪制讓用戶即使不看文字也能知道大致的意思，同時(shí)精致的插畫可以讓用戶有更好的帶入感，不像單純的文字提示那么枯燥乏味。此類插畫與界面的設(shè)計(jì)需要符合整體所要傳達(dá)的氛圍及信息，不管是成功、失敗或者是獲的優(yōu)惠等；加強(qiáng)用戶的參與感，使產(chǎn)品與用戶的對話更加有人情味。
06升級提醒設(shè)計(jì)
為了能夠盡快讓用戶體驗(yàn)新功能、以及不斷優(yōu)化用戶體驗(yàn)，我們會經(jīng)常更新迭代我們的產(chǎn)品?？墒窍胍脩艄怨月犜捜ド壱膊⒉皇悄敲慈菀祝话銇碚f用戶看到一個(gè)滿是文字的彈窗，根本就沒有耐心去看就關(guān)閉了。而一副出彩的小插畫卻可能瞬間吸引用戶的眼球，進(jìn)而瀏覽其簡略的文字信息，從而決定是否升級，從反思層面來說可以讓用戶看到產(chǎn)品的用心和提升友好度?？梢詮膸讉€(gè)案例看到大部分升級插圖都是通過選擇表現(xiàn)速度和探索的方向來設(shè)計(jì)，此類插畫大家可以自由發(fā)揮，只要能體現(xiàn)出趣味性即可。
07 loading刷新設(shè)計(jì)
當(dāng)我們?yōu)g覽微博等一些會實(shí)時(shí)發(fā)生一些變化的app、以及加載新頁面時(shí)，都不可避免的會出現(xiàn)加載動畫來緩沖。單調(diào)的“菊花”和“箭頭”以及有些讓用戶覺得單調(diào)和乏味了，我們可以看到這些有趣的loading不僅能夠提現(xiàn)產(chǎn)品的差異性，同時(shí)有趣生動，可以減少用戶在等待過程中的負(fù)面情緒，而且與品牌和業(yè)務(wù)息息相關(guān)。我們在考慮此類小插圖動效設(shè)計(jì)時(shí)，可以考慮從公司的業(yè)務(wù)、吉祥物和所傳達(dá)出的價(jià)值觀入手。
08 運(yùn)營活動
除了一些產(chǎn)品上的功能場景，在一些大的運(yùn)營活動和h5推廣時(shí)也是插畫得以大展身手的好機(jī)會。從前兩年淘寶雙十一、元旦等節(jié)日時(shí)首頁各種優(yōu)美的插畫開始，讓我們發(fā)現(xiàn)原來app還可以這么玩；還有一直火爆到現(xiàn)在的h5，可以發(fā)現(xiàn)大部分都是以插畫為主，只是風(fēng)格各異、各有千秋。優(yōu)美有趣的插畫可以在第一眼就獲取用戶好感，吸引用戶耐心的瀏覽查看活動頁，同時(shí)加強(qiáng)活動氛圍及用戶的帶入感，在反思層次引起用戶的共鳴和好感，吸引用戶主動去分享參與。這一類插畫則沒有太多限制，主要看活動需要提現(xiàn)什么樣的氛圍，神秘、喜慶、幽默、炫酷等，圍繞著活動主題創(chuàng)作一段小故事或者場景，使用戶能夠體會到其所傳達(dá)出的情緒進(jìn)而引發(fā)回憶產(chǎn)生共鳴。
-----
特別要提的就是前段時(shí)間比較火的關(guān)于淘寶新的改版
淘寶這次的改版除了絢麗的色彩，內(nèi)容結(jié)構(gòu)上也做了一些調(diào)整，就在我寫文章的時(shí)候我老婆突然還和我說了一句她覺得淘寶越來越人性化了，我想這應(yīng)該就是用戶最真實(shí)的心理感受吧。除了這些變動，還有一個(gè)比較出彩并且與我們主題息息相關(guān)的就是插畫的設(shè)計(jì)啦。
淘寶通過和諧小插畫傳達(dá)自己的“小情緒”，將這些有趣故事敘說給用戶，為用戶帶來更好的購物心情和體驗(yàn)。在界面中文字總是很容易被忽略，這些統(tǒng)一的小插圖，塑造除了一個(gè)有個(gè)性的產(chǎn)品，更加擬人化有人情味，相比冷漠的文字更能拉近與用戶的距離、引發(fā)情感上的共鳴。大家也可以搜索一下《淘寶2017UI設(shè)計(jì)風(fēng)格改版升級》這篇文章了解淘寶團(tuán)隊(duì)具體的執(zhí)行方案。以下圖片也是來自文章。
OK.雖然前面說了一大堆，但是紙上得來終覺淺~
現(xiàn)在我來列舉一個(gè)自己做的飛機(jī)稿幫大家加深印象吧
前面已經(jīng)介紹了插畫的多種應(yīng)用，內(nèi)容比較多，這里我篩選了幾個(gè)方向。
為一款音樂類app設(shè)計(jì)一個(gè)空態(tài)頁面：“無網(wǎng)絡(luò)”；一個(gè)通知確認(rèn)頁面“開啟app推送”；一個(gè)啟動頁：可以任選一個(gè)節(jié)日，例如最近的“兒童節(jié)”。（尺寸：750x1334）
第一步：確定產(chǎn)品調(diào)性和方向
因?yàn)槭翘摂M產(chǎn)品，這里我選擇的方向是有趣、愛玩
第二步：關(guān)鍵詞聯(lián)想
根據(jù)產(chǎn)品及要設(shè)計(jì)的插圖寓意進(jìn)行關(guān)鍵詞聯(lián)想；啟動頁的設(shè)計(jì)一般則與活動主題密切相關(guān)，這次我選擇的是“六一兒童節(jié)日”，其制作流程也基本一致，不過其場景則需要更具細(xì)膩，故事感要更強(qiáng)，以引起人們的共鳴。
第三步：草圖方案
根據(jù)聯(lián)想出的關(guān)鍵詞，進(jìn)行串聯(lián)結(jié)合，打開腦洞繪制草圖方案，同時(shí)還需要給對應(yīng)的創(chuàng)意構(gòu)思文案，保證意思明確的同時(shí)，可以進(jìn)行一些藝術(shù)加工。
第四步：輸出效果圖
選擇最佳方案進(jìn)行執(zhí)行、輸出，（這里需要注意的是對于技法并不限制，符合產(chǎn)品定位和整體風(fēng)格即可）
因?yàn)楸酒恼虏皇擒浖寄茴惤坛?，所以就不介紹具體過程啦，有興趣的可以看我主頁教程~
ok，大功告成！
感興趣的同學(xué)也來練習(xí)一下加深理解吧～
有疑問可以一起溝通～
具有一定的手繪基礎(chǔ)對于ui來說也是一個(gè)加分項(xiàng)，但是我們在繪制產(chǎn)品相關(guān)的插畫時(shí)，
不能盲目炫技，應(yīng)該需要一定的理論支持，通過反思層次的設(shè)計(jì)來滿足其他所有層次的需求，進(jìn)而
完成一套優(yōu)秀的情感化設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com