《網(wǎng)站情感化設(shè)計(jì)》以唐納德·A. 諾曼的情感化設(shè)計(jì)三層次理論為依據(jù),結(jié)合眾多案例介紹了以用戶情感為中心的網(wǎng)站情感化設(shè)計(jì)的理念、方法與技巧。全書共分十章,主要包括網(wǎng)站的版式、色彩和裝飾元素的情感化設(shè)計(jì);網(wǎng)站交互情感化設(shè)計(jì)的基本原則,以及網(wǎng)站交互元素、交互動(dòng)效、基于用戶心智模型的情感化設(shè)計(jì);如何引發(fā)用戶的情感共鳴、加深用戶的情感印象及獲得峰值體驗(yàn)的情感化設(shè)計(jì)。作為一部理論與實(shí)踐相結(jié)合的網(wǎng)站情感化設(shè)計(jì)的著作,全書內(nèi)容豐富、圖文并茂、專業(yè)性強(qiáng)、覆蓋面廣,網(wǎng)頁(yè)設(shè)計(jì)師可以從中學(xué)到各種相關(guān)知識(shí)點(diǎn)與技巧,學(xué)會(huì)打造一個(gè)個(gè)令人賞心悅目的網(wǎng)站,掌握提升網(wǎng)站品牌形象和商業(yè)價(jià)值的方法。 《網(wǎng)站情感化設(shè)計(jì)》既可以作為高校數(shù)字媒體藝術(shù)設(shè)計(jì)、產(chǎn)品設(shè)計(jì)、計(jì)算機(jī)技術(shù)、心理學(xué)等專業(yè)的師生進(jìn)行網(wǎng)站情感化設(shè)計(jì)的參考書,也可以作為網(wǎng)站設(shè)計(jì)初學(xué)者和愛(ài)好者進(jìn)行互聯(lián)網(wǎng)品牌形象設(shè)計(jì)、宣傳和營(yíng)銷的工具書。
情感化設(shè)計(jì)是一種以關(guān)注用戶內(nèi)心情感訴求為中心的設(shè)計(jì)理念,其首要目標(biāo)是促進(jìn)人與人之間的交流,情感化設(shè)計(jì)可以使用戶從生理、心理和精神理想方面能享受到產(chǎn)品帶來(lái)的價(jià)值。
《網(wǎng)站情感化設(shè)計(jì)》可作為高校數(shù)字媒體藝術(shù)設(shè)計(jì)、產(chǎn)品設(shè)計(jì)、計(jì)算機(jī)技術(shù)、心理學(xué)等專業(yè)師生的參考書,同時(shí)也可作為網(wǎng)站設(shè)計(jì)初學(xué)者和愛(ài)好者,互聯(lián)網(wǎng)品牌形象設(shè)計(jì)、宣傳、營(yíng)銷人員的工具書。
通常而言,情感總是與邏輯、理性相對(duì)立,但是,代表著標(biāo)準(zhǔn)化生產(chǎn)的工業(yè)化產(chǎn)物
如果擁有了情感和情緒,則更容易受到消費(fèi)者的歡迎和推崇。20世紀(jì)后,大規(guī)模生產(chǎn)幾乎滲透到每個(gè)行業(yè),其中有明顯的情感化設(shè)計(jì)趨勢(shì)。如大眾甲殼蟲汽車,它的外形像可愛(ài)的臉,仿佛在沖我們微笑,它圓潤(rùn)的線條表達(dá)出友好、歡樂(lè)的態(tài)度,讓每一個(gè)用戶都很容易地與之產(chǎn)生情感聯(lián)系。當(dāng)下,不僅僅是工業(yè)產(chǎn)品,各種互聯(lián)網(wǎng)產(chǎn)品都希望能與用戶建立情感上的聯(lián)系,為用戶帶來(lái)身心上的愉悅。
情感化設(shè)計(jì),最早出自美國(guó)認(rèn)知心理學(xué)家唐納德·A.諾曼的同名著作《情感化設(shè)計(jì)》(Emotional Design),該書闡述了情感在設(shè)計(jì)中所具有的重要地位和作用。書中諾曼由淺入深地將情感化設(shè)計(jì)分成了三個(gè)層次:本能層、行為層、反思層。諾曼認(rèn)為:將情感融入產(chǎn)品設(shè)計(jì),將解決設(shè)計(jì)師們的長(zhǎng)期困擾,即產(chǎn)品的實(shí)用性和視覺(jué)性的主要矛盾。情感化設(shè)計(jì)是一種以關(guān)注用戶內(nèi)心情感訴求為中心的設(shè)計(jì)理念,其首要目標(biāo)是促進(jìn)人與人之間的交流,情感化設(shè)計(jì)可以使用戶從生理、心理和精神理想方面享受到產(chǎn)品帶來(lái)的價(jià)值。
當(dāng)我們看到鮮艷的花朵、璀璨的煙花時(shí),總是忍不住贊嘆真漂亮!這就是基于人類天生的情感而作出自然的、潛意識(shí)的反應(yīng)。人類對(duì)于美好的事物,總是本能地接受并且產(chǎn)生好感,本能層次是先于思考和邏輯判斷的,它是用戶對(duì)產(chǎn)品的視覺(jué)和第一印象的直接反應(yīng)。
本能層次的設(shè)計(jì)就是感官層面的設(shè)計(jì),通過(guò)對(duì)外觀、色彩、聲音、材質(zhì)、氣味等多個(gè)方面進(jìn)行設(shè)計(jì),把控外在的優(yōu)秀品質(zhì),良好的本能層設(shè)計(jì)可以刺激用戶本能的感官反應(yīng),讓用戶感到愉悅和興奮。網(wǎng)站本能層次的設(shè)計(jì),關(guān)乎網(wǎng)頁(yè)的版式設(shè)計(jì)、色彩搭配、裝飾元素等視覺(jué)界面效果是否美觀,能否讓用戶打開網(wǎng)站的第一眼就被吸引。
本能層次的設(shè)計(jì)決定產(chǎn)品能否給受眾帶來(lái)良好的第一印象,而這樣的印象能否繼續(xù),關(guān)鍵就在于行為層次的設(shè)計(jì)。行為層次的設(shè)計(jì)是一種極其含蓄和理性的情感化設(shè)計(jì)方式。網(wǎng)站行為層次的設(shè)計(jì)關(guān)注的是交互過(guò)程的使用效率和使用體驗(yàn),它需要遵循交互設(shè)計(jì)的基本原則,要求網(wǎng)站交互設(shè)計(jì)滿足功能性原則、易理解性原則、易用性原則、感受性原則。網(wǎng)站行為層次的設(shè)計(jì)決定用戶能否產(chǎn)生繼續(xù)瀏覽的欲望,強(qiáng)調(diào)如何使用交互元素為用戶作出最合理、最簡(jiǎn)潔、最清晰的使用指導(dǎo),并運(yùn)用豐富的交互動(dòng)效讓網(wǎng)站的互動(dòng)變得更加愉悅,凸顯交互過(guò)程中用戶的主體地位,將用戶的生理感受、心理感受和網(wǎng)站的特點(diǎn)有機(jī)地聯(lián)系起來(lái)。
反思層次是意識(shí)對(duì)于客觀事物的反應(yīng),是人類的最高層次的情感。這與馬斯洛需求層次理論中,人類的最高需求也就是自我實(shí)現(xiàn)的需求是相通的。反思層次的設(shè)計(jì)可以讓用戶與網(wǎng)站之間建立長(zhǎng)久的情感紐帶,幫助網(wǎng)站提高用戶的忠誠(chéng)度,出色的反思層次設(shè)計(jì)可以讓網(wǎng)站與用戶產(chǎn)生情感交流。網(wǎng)站反思層次是用戶的情感反思與共鳴,體現(xiàn)在網(wǎng)站的感官記憶和行為記憶在用戶心中根植下的深刻印象,使用戶因?yàn)榫W(wǎng)站的內(nèi)涵、趣味等因素觸發(fā)情感的共鳴,可以通過(guò)個(gè)性化設(shè)計(jì)、驚喜感設(shè)計(jì)、成就感設(shè)計(jì)讓用戶達(dá)到情感體驗(yàn)的峰值,使用戶產(chǎn)生有意識(shí)的考慮和基于經(jīng)驗(yàn)的反思,從而讓用戶得到最高水平的情感體驗(yàn)。
情感化設(shè)計(jì)的三個(gè)層次是相互作用的,在滿足了本能層次之后,就會(huì)出現(xiàn)行為層次的互動(dòng),進(jìn)而再促成反思層次的思考,在網(wǎng)站設(shè)計(jì)中應(yīng)當(dāng)注意三個(gè)層次的相互作用、相互影響、相互平衡。每個(gè)網(wǎng)站都有自己的情感表達(dá)方式,如政府網(wǎng)站嚴(yán)肅莊重,娛樂(lè)網(wǎng)站活潑輕松,生活服務(wù)類網(wǎng)站貼近生活。本書將帶著對(duì)人的關(guān)懷去思考網(wǎng)站的情感化設(shè)計(jì),同時(shí)結(jié)合不同國(guó)家的優(yōu)秀設(shè)計(jì)案例,去分析如何做好網(wǎng)站情感化設(shè)計(jì),通過(guò)多種設(shè)計(jì)手段和設(shè)計(jì)思維與用戶建立情感連接,運(yùn)用整體邏輯、全局思維打造出令人身心愉悅的網(wǎng)站。
由于編者水平有限,書中難免存在疏漏和不足之處,敬請(qǐng)廣大讀者批評(píng)指正。
編 者
錢默,重慶郵電大學(xué)傳媒藝術(shù)學(xué)院老師。 碩士畢業(yè)于北京服裝學(xué)院,數(shù)字媒體藝術(shù)設(shè)計(jì)專業(yè) 。 研究領(lǐng)域:數(shù)字媒體藝術(shù)應(yīng)用。
第1章網(wǎng)站版式的情感化設(shè)計(jì) 1
1.1網(wǎng)站版式設(shè)計(jì)的尺寸 2
1.2網(wǎng)站布局的情感化設(shè)計(jì) 6
1.3網(wǎng)站視覺(jué)要素的情感化設(shè)計(jì) 10
1.4案例賞析:五種不同情感的網(wǎng)頁(yè)版式設(shè)計(jì) 19
1.5小結(jié) 24
第2章網(wǎng)站色彩的情感化設(shè)計(jì) 25
2.1網(wǎng)站色彩的情感表達(dá) 26
2.2網(wǎng)站色彩的情感魔力 29
2.3運(yùn)用色彩規(guī)律調(diào)和情感 32
2.4商業(yè)網(wǎng)站色彩的情感化設(shè)計(jì) 38
2.5案例賞析:不同類型的商業(yè)網(wǎng)站配色設(shè)計(jì) 44
2.6小結(jié) 47
第3章網(wǎng)站裝飾元素的情感化設(shè)計(jì) 49
3.1裝飾圖形的情感化設(shè)計(jì) 50
3.2裝飾插畫的情感化設(shè)計(jì) 54
3.3裝飾動(dòng)畫的情感化設(shè)計(jì) 60
3.4裝飾視頻的情感化設(shè)計(jì) 62
3.5裝飾轉(zhuǎn)場(chǎng)的情感化設(shè)計(jì) 64
3.6案例賞析:不同裝飾風(fēng)格的情感化表達(dá) 66
3.7小結(jié) 72
第4章網(wǎng)站交互情感化設(shè)計(jì)的基本原則 73
4.1功能性原則 74
4.2易理解性原則 78
4.3易用性原則 79
4.4感受性原則 85
4.5案例賞析:Demophorius網(wǎng)站交互情感化設(shè)計(jì) 89
4.6小結(jié) 92
第5章網(wǎng)站交互元素的情感化設(shè)計(jì) 93
5.1按鈕圖標(biāo)的情感化設(shè)計(jì) 94
5.2網(wǎng)站導(dǎo)航的情感化設(shè)計(jì) 100
5.3重要交互控件的情感化設(shè)計(jì) 107
5.4案例賞析:加拿大航空網(wǎng)站交互元素的情感化設(shè)計(jì) 113
5.5小結(jié) 115
第6章網(wǎng)站交互動(dòng)效的情感化設(shè)計(jì) 117
6.1使用戶愉悅的動(dòng)效很重要 118
6.2創(chuàng)建愉悅的動(dòng)效 122
6.3實(shí)現(xiàn)愉悅動(dòng)效的技術(shù) 132
6.4愉悅動(dòng)效的設(shè)計(jì)原則 134
6.5案例賞析:創(chuàng)意機(jī)構(gòu)網(wǎng)站交互動(dòng)效的情感化設(shè)計(jì) 135
6.6小結(jié) 138
第7章基于網(wǎng)站用戶心智模型的情感化設(shè)計(jì) 139
7.1心智模型的概念 140
7.2心智模型的特點(diǎn) 140
7.3網(wǎng)站心智模型的獲得方法 141
7.4以用戶畫像反映心智模型 144
7.5關(guān)注特殊群體的心智模型 146
7.6案例賞析:商業(yè)網(wǎng)站用戶心智模型的情感化設(shè)計(jì) 150
7.7小結(jié) 153
第8章引發(fā)共鳴的網(wǎng)站情感化設(shè)計(jì) 155
8.1講好故事增強(qiáng)情緒感染力 156
8.2游戲化設(shè)計(jì)建立情感紐帶 161
8.3戳中痛點(diǎn)驅(qū)動(dòng)情感共振 166
8.4案例賞析:溫馨友好的度假民宿網(wǎng)站情感化設(shè)計(jì) 172
8.5小結(jié) 174
第9章加深印象的網(wǎng)站情感化設(shè)計(jì) 175
9.1感官記憶 176
9.2行為記憶 180
9.3特別的回憶:出錯(cuò)的藝術(shù) 185
9.4案例賞析:充滿夢(mèng)想力量求職網(wǎng)站的情感化設(shè)計(jì) 189
9.5小結(jié) 192
第10章打造峰值體驗(yàn)的網(wǎng)站情感化設(shè)計(jì) 193
10.1個(gè)性化設(shè)計(jì) 194
10.2驚喜感設(shè)計(jì) 200
10.3成就感設(shè)計(jì) 204
10.4案例賞析:復(fù)古風(fēng)格的海鮮訂購(gòu)網(wǎng)站的情感化設(shè)計(jì) 208
10.5小結(jié) 211
參考文獻(xiàn) 216