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