App界面視覺圖形的情感化設(shè)計研究

馬超 鄭曉東

【摘 要】研究目的：提出App視覺圖形界面，如何滿足用戶的使用感觀和使用體驗(yàn)，最終提升用戶情感體驗(yàn)。方法：首先基于唐納德·A·諾曼三層次理論，從本能層、行為層、反思層3個不同層面進(jìn)行解析，結(jié)合app的不同邏輯層界面的圖形設(shè)計進(jìn)行分析，然后從圖像、微交互角度提取情感訴求因子，提出情感化設(shè)計可以從情緒調(diào)動、感知影響和擬人化入手，最終得在不同交互層面的圖形設(shè)計情感化設(shè)計方法，使app界面兼具良好的美觀性和趣味性的同時，給用戶帶來更深層次的情感體驗(yàn)。結(jié)論情感化的設(shè)計可以從情緒調(diào)動、影響感知和擬人化著手。

【關(guān)鍵詞】視覺圖形；情感設(shè)計；微交互；本能層；行為層；反思層

中圖分類號： TP393.092 文獻(xiàn)標(biāo)識碼： A 文章編號： 2095-2457（2018）32-0048-002

DOI：10.19694/j.cnki.issn2095-2457.2018.32.021

【Abstract】Research purposes： Propose the visual graphical interface of App， how to satisfy the user's sense of use and use experience， and ultimately enhance the user's emotional experience. METHODS： Based on Donald A. Norman's three-level theory， this paper firstly analyzed from three different levels： instinct level， behavior level and reflection level， and then combined with the graphic design of app's different logic level interface， then extracted the emotional appeal factors from the perspective of image and micro-interaction， and proposed that emotional design can mobilize emotion and perceive shadow. Starting with sounding and personification， the emotional design method of graphics design at different interaction levels is ultimately required， which makes the app interface both beautiful and interesting， and at the same time brings users deeper emotional experience. Conclusion emotional design can start from emotional arousal， influence perception and personification.

【Key words】Visual graphics； Emotional design， micro interaction； Instinctive layer； Behavior layer； Reflective layer

隨著中國移動互聯(lián)網(wǎng)的快速興起，移動終端用戶已經(jīng)超過9億，成為全球移動互聯(lián)網(wǎng)的第一大市場。據(jù)統(tǒng)計，2018年5月底發(fā)布了我國市場上的app數(shù)量為415萬款，但人均手機(jī)app安裝量僅為30個。在app下載排行榜top1000中，78%是老面孔，超過20%的app為新晉應(yīng)用。隨著app同質(zhì)化競爭的日益激烈，人們消費(fèi)需求的提高。人的感性心理需求得到了前所未有的關(guān)注，人們已經(jīng)不在滿足單純的功能訴求，人的需求正向著情感互動層面的方向發(fā)展?！?/p>

美國學(xué)者唐納德·A·諾曼提出了情感化設(shè)計，他認(rèn)為：“任何實(shí)際的感受都包含所有的三種層面，即本能層、行為層、反思層。本能層關(guān)注的是產(chǎn)品的外觀設(shè)計，通過被感官接受從而形成初步認(rèn)知。行為層的設(shè)計以用戶研究為出發(fā)點(diǎn)，從而使設(shè)計的產(chǎn)品兼具的實(shí)用性與可用性，進(jìn)而增強(qiáng)用戶的心理體驗(yàn)。反思層關(guān)注產(chǎn)品所傳達(dá)出的文化內(nèi)涵及意義。例如品牌形象、文化價值、企業(yè)理念等，當(dāng)人們和產(chǎn)品之間發(fā)生互動后，會對產(chǎn)品蘊(yùn)含的意味給予情緒反饋和情感共鳴，進(jìn)而達(dá)到尋找自我形象、滿足個性化需求、產(chǎn)生持久記憶和關(guān)注的目的。”

情感化的設(shè)計的本質(zhì)是一種創(chuàng)意工具、表達(dá)和實(shí)現(xiàn)用戶的價值和預(yù)期。情感化的設(shè)計體現(xiàn)在情感化的產(chǎn)品形態(tài)、情感化交互方式和情感化的產(chǎn)品特質(zhì)三個方面。在app界面設(shè)計中，我們需要從把視覺效果與操作體驗(yàn)相結(jié)合，在為用戶提高審美App功能在傳遞給用戶的同時，在使用過程中給用戶的帶來持續(xù)的情感投射，可以使產(chǎn)品和使用者之間建立長期關(guān)系，增加用戶對產(chǎn)品的忠實(shí)度。情感化產(chǎn)品的設(shè)計需要構(gòu)建相對應(yīng)用戶心理模型，以有效激發(fā)其情感體驗(yàn)。

1 用戶心理模型的定位分析

用戶的感知與行為活動是受情感支配的。情感作為人對外界事物作用于自身的一種生理反應(yīng)，是由期望和需要決定的。反思層面的設(shè)計作為意識、情緒、認(rèn)知的高水平，更加傾向于強(qiáng)調(diào)以用戶為中心，聚焦到目標(biāo)用戶群，了解用戶心理及行為特點(diǎn)，挖掘用戶潛在需求，將用戶的情感認(rèn)知從虛擬的數(shù)據(jù)轉(zhuǎn)換成可視化數(shù)據(jù)，從而為設(shè)計提供依據(jù)。

2 反思層面的App情感化設(shè)計方法

2.1 產(chǎn)品形態(tài)的情感化

反思層面的產(chǎn)品設(shè)計，不僅僅包含了產(chǎn)品的使用功能，還包括了該產(chǎn)品所體現(xiàn)出的產(chǎn)品的審美體驗(yàn)和文化內(nèi)涵。視覺圖形、色彩、文案本屬于本能層面，但為這些設(shè)計元素賦予語義，使人通過對設(shè)計產(chǎn)品信息、內(nèi)容和意義的體會與了解產(chǎn)生情感。基于本層面的視覺設(shè)計體現(xiàn)為界面視覺圖形的本能層與審美體驗(yàn)的反思層的結(jié)合，表達(dá)app界面的視覺功能。情感來源于人們的生活體驗(yàn)，情感設(shè)計元素來源于生活體驗(yàn)中的人與物。蘇珊·朗格認(rèn)為：“一件藝術(shù)品就是一件表現(xiàn)性的形式，這種創(chuàng)造出來的形式是供我們的感官去知覺或供我們想象的，而它所表現(xiàn)的東西就是人類的情感。”App的界面設(shè)計應(yīng)以用戶心里模型為依據(jù)，將來源于用戶生活中的視覺元素進(jìn)行設(shè)計表現(xiàn)，表達(dá)符合用戶心智特點(diǎn)的美學(xué)特征及價值取向，從而讓用戶產(chǎn)生聯(lián)想與情感共鳴。

2.2 交互方式的情感化

產(chǎn)品的外觀是產(chǎn)品與用戶溝通的視覺化語言，而交互方式是產(chǎn)品與用戶情感表達(dá)的整體體現(xiàn)。本章所涉及到的交互方式主要是指在情感化設(shè)計背景下，從微交互的角度出發(fā)，探討視覺圖形的構(gòu)建。微交互通常關(guān)注于單個事件或者單個任務(wù)，這些交互元素，有助于減少用戶使用時產(chǎn)生的交互“挫折感”，提升操作體驗(yàn)，從而在反思層形成情感上的個人滿意。

2.3 微動效與情感體驗(yàn)

在人機(jī)交互的環(huán)節(jié)，響應(yīng)時長與持續(xù)時長是動效設(shè)計的核心元素，作為功能性特效，微動效在界面設(shè)計中涵蓋了入場、出場、過渡、加載等不同的狀態(tài)。微動效視覺動效設(shè)計需要充分考慮到交互相應(yīng)時長，Robert B.Miller認(rèn)為，在人機(jī)交互中，理想的響應(yīng)時間應(yīng)該控制在100毫秒內(nèi)。Nielsen在《響應(yīng)時間：3個重要限制》中指出，用戶操作出發(fā)的反饋，超過2秒無反饋需設(shè)計加載動效。

Dan Saffer在《微交互》中指出，微交互的出現(xiàn)可以將某個動作的結(jié)果視覺化的呈現(xiàn)出來或是幫助用戶操作屏幕上的某些元素。app微交互的視覺表現(xiàn)由文字、藝術(shù)符號、微動效三部分構(gòu)成。藝術(shù)符號作為人與產(chǎn)品的視覺溝通語言，是人機(jī)交互界面的核心元素。微交互的構(gòu)建可以通過將藝術(shù)符號多元混搭，把肌理、手繪、立體、線描等不同風(fēng)格視覺元素組合成風(fēng)格多樣的靜態(tài)圖案。交互動效的復(fù)雜程度及系統(tǒng)加載時長是交互動效設(shè)計另一個重要考量因素。動態(tài)圖形相較靜態(tài)圖案能更容易轉(zhuǎn)移用戶注意力，讓用戶在等待時間內(nèi)獲得更多的愉悅感。動態(tài)圖形的在微交互的表現(xiàn)特點(diǎn)體現(xiàn)在空間、大小、旋轉(zhuǎn)、透明度以及色彩的變化。受限于app交互空間尺寸，利用有節(jié)奏感的設(shè)計打破視覺畫面的單調(diào)感，增強(qiáng)畫面的感染力，動態(tài)圖形實(shí)際上是由一個個靜止的圖片所構(gòu)成的，在靜止的畫面中，節(jié)奏和韻律的體現(xiàn)與平面設(shè)計中表現(xiàn)一致。包括畫面中點(diǎn)線面的關(guān)系，色彩的關(guān)系，以及構(gòu)圖節(jié)奏的關(guān)系。微交互視覺效果轉(zhuǎn)換除了收到藝術(shù)規(guī)律的限制之外，速度受線性與曲線兩種運(yùn)動規(guī)律的影響，在動效加載的過程中，自然、流暢的動效不僅可以增強(qiáng)界面視覺感染力，更增加了畫面的文化性和娛樂性。正如蘇珊·朗格指出的那樣：“一件藝術(shù)品就是一件表現(xiàn)性的形式，這種創(chuàng)造出來的形式是供我們的感官去知覺或供我們想象的，而它所表現(xiàn)的東西就是人類的情感。”

3 app界面認(rèn)知體驗(yàn)中的情感設(shè)計

在移動產(chǎn)品開發(fā)中，用戶體驗(yàn)是決定產(chǎn)品成敗的關(guān)鍵。每一種情感體驗(yàn)都是心理和行為過程的體驗(yàn)，情感體驗(yàn)包括瞬時體驗(yàn)與長時體驗(yàn)，反思層的設(shè)計就是將用戶的瞬時體驗(yàn)升華為成長時體驗(yàn)，從而提升用戶對產(chǎn)品的粘合度。影響用戶體驗(yàn)的因素主要有使用者的心理狀態(tài)、認(rèn)知水平、環(huán)境狀況，而這些體驗(yàn)因子涵蓋了界面的視覺感知、情境中的人機(jī)對話、操作成就體驗(yàn)等多個環(huán)節(jié)。

視覺感知層面的情感設(shè)計通過自我認(rèn)同、興趣愛好出動用戶，從而產(chǎn)生情緒調(diào)動。感知層的情感設(shè)計在視覺設(shè)計上以用戶群體特征為出發(fā)點(diǎn)，以符合用戶群體生理特點(diǎn)的圖形、色彩，在界面符合用戶的心理預(yù)期，在應(yīng)用過程中產(chǎn)生自我認(rèn)同感，讓圖形和色彩來打造情境打好“感情牌”，表達(dá)出積極積極情緒同時，輔助文案的設(shè)計在情感表達(dá)上一定程度轉(zhuǎn)化了為交互過程中的空狀態(tài)的尷尬和失落。

4 結(jié)論

界面設(shè)計的最終目標(biāo)是為生活、為人的設(shè)計，以用戶為中心的設(shè)計強(qiáng)調(diào)人的中心地位，符合人的情感需求，界面設(shè)計中情感化設(shè)計應(yīng)從視覺層、功能層，反思層貫穿始終，從情緒調(diào)動、感知影響和擬人化入手，人機(jī)界面以更加友好、擬人化的設(shè)計，讓用戶在交互、等待過程中消除焦慮情緒，感受應(yīng)用成就模式，形成成就體驗(yàn)，將情感因素融入產(chǎn)品設(shè)計中，產(chǎn)品將不再是單純的物，它還具有了人的情感，產(chǎn)品的親和力會增強(qiáng)，很容易引起人們的情感共鳴，也會與人們產(chǎn)生情感交流。