夏敏燕， 莊潘雯， 何艷玲

（上海電機(jī)學(xué)院 機(jī)械學(xué)院，上海200245）

智能終端的多樣化和快速普及，推動(dòng)著新媒體藝術(shù)設(shè)計(jì)的形成和發(fā)展。界面的使用對(duì)象、使用環(huán)境、使用方式更為多樣化，設(shè)計(jì)師面臨著如何把控多終端界面設(shè)計(jì)的一致性與有趣性，以及兩者之間的協(xié)調(diào)平衡性。越來越多的界面設(shè)計(jì)師和交互設(shè)計(jì)師關(guān)注如何使界面元素既能實(shí)現(xiàn)信息的有效傳播，又能使受眾獲得藝術(shù)美的感受。然而，多終端的呈現(xiàn)方式導(dǎo)致界面設(shè)計(jì)限制重重，交互界面怎樣才能兼具美感與實(shí)用性呢？與傳統(tǒng)的個(gè)人桌面計(jì)算機(jī)終端相比，手機(jī)、平板電腦等平臺(tái)可以多指手勢(shì)輸入、支持用戶聯(lián)機(jī)操作等，使得其界面構(gòu)造更是涉及多領(lǐng)域、多學(xué)科的交叉，成為一項(xiàng)復(fù)雜的系統(tǒng)工程。一款足夠吸引人的產(chǎn)品，不僅在外觀上具備創(chuàng)新、體現(xiàn)品牌特征的界面，在功能上更是實(shí)用、易用，操作簡(jiǎn)單方便有趣，只有給予用戶以視覺、聽覺、觸覺的全方位體驗(yàn)，才能獲得用戶的認(rèn)可，增加用戶的使用粘性。

1 簡(jiǎn)潔的多維化空間界面

無(wú)論是手機(jī)還是平板電腦，其界面空間較小，過多的干擾因素會(huì)削弱、干擾主要功能，影響用戶認(rèn)知。因此，界面設(shè)計(jì)時(shí)，首要的是理順各種信息間關(guān)系，弱化界面元素，從而突出重點(diǎn)。在展現(xiàn)的形式上可以通過優(yōu)化主次信息之間的比例、各個(gè)信息模塊之間的距離、單個(gè)模塊里信息的間距；靈活運(yùn)用設(shè)計(jì)構(gòu)成中的圓、方、三角形等基本造型元素；遵循“對(duì)稱與均衡、對(duì)比與統(tǒng)一、比例與尺度”等美學(xué)法則，塑造美觀而簡(jiǎn)潔的界面空間。在界面中注意留白，讓文字、圖片有足夠的空間，從而顯得界面整體張弛有度而不局促。在設(shè)計(jì)風(fēng)格上，由于手機(jī)界面空間限制以及用戶認(rèn)知能力的差別，其界面總體風(fēng)格應(yīng)趨向于簡(jiǎn)潔大方、便于閱覽。尤其是卡片式設(shè)計(jì)正風(fēng)靡手機(jī)、平板電腦、筆記本電腦等各個(gè)平臺(tái)，傳統(tǒng)的內(nèi)容被分解成個(gè)體，經(jīng)重新整合后展現(xiàn)給用戶，如圖1所示的Google Now地圖，利用卡片式設(shè)計(jì)達(dá)到了簡(jiǎn)潔又實(shí)用的效果。圖標(biāo)、按鈕等元素往往經(jīng)過精心設(shè)計(jì)，成為點(diǎn)睛之筆，成為品牌的特征之一。例如，圖標(biāo)的質(zhì)感表現(xiàn)為圖標(biāo)設(shè)計(jì)增添了一個(gè)寫實(shí)的維度，有效地觸發(fā)了人的聯(lián)想，縮短了人機(jī)距離，而且，便于使用者對(duì)其進(jìn)行快速準(zhǔn)確的識(shí)別和操作，提高了使用效率[1]。

在不同平臺(tái)的界面設(shè)計(jì)上，通過一致的形態(tài)、色彩、質(zhì)感，一致的圖標(biāo)、版式等細(xì)節(jié)體現(xiàn)品牌特征。目前，為了適應(yīng)不同平臺(tái)的界面尺寸，一種常用的界面設(shè)計(jì)方式是將圖片模數(shù)化，通常是1倍、2倍、4倍或它們的整數(shù)倍，將圖片、信息實(shí)時(shí)更新地呈現(xiàn)，這樣，在任何一個(gè)平臺(tái)上，界面的形式結(jié)構(gòu)都更加完美無(wú)缺，風(fēng)格也更為統(tǒng)一。當(dāng)然，人們都有求新求變的心理，多終端的產(chǎn)品界面也不是一味的追求統(tǒng)一，而是在跨終端的統(tǒng)一與變化中找到一個(gè)平衡點(diǎn)，這就需要考察各個(gè)平臺(tái)的差異性，考驗(yàn)設(shè)計(jì)師本身的設(shè)計(jì)掌控能力了。

圖1 卡片式設(shè)計(jì)的Google NowFig.1 Card design of Google Now

盡管多終端界面追求簡(jiǎn)潔，但往往還會(huì)從細(xì)節(jié)處體現(xiàn)出空間感。顯示界面是個(gè)平面，設(shè)計(jì)師可以通過圖像表現(xiàn)的方式來營(yíng)造一個(gè)凹凸有致的三維立體空間。在視覺上形成投影、倒影、明暗來塑造這個(gè)空間自身的光源系統(tǒng)，利用大小變化、重疊、陰影、疏密、肌理等平面構(gòu)成的手法來模擬真實(shí)世界中的立體化三維空間?？臻g感的塑造，使得平面化的界面有了空間上的延伸，顯得華麗而層次分布清晰，從而凸顯重要內(nèi)容。例如蘋果的Cover Flow專輯封面（見圖2）中運(yùn)用透視變化、倒影的視覺表達(dá)，體現(xiàn)真實(shí)的空間。需要注意的是，不同平臺(tái)上由于顯示像素、界面大小的不同，有些圖標(biāo)、按鈕的圖層樣式參數(shù)也要做些微調(diào)，從而在視覺上產(chǎn)生一致的感覺。

圖2 蘋果手機(jī)播放器專輯封面設(shè)計(jì)Fig.2 Design of album cover of Apple mobile player

2 有用的易用的功能界面

視覺設(shè)計(jì)僅僅是界面設(shè)計(jì)的一部分。在統(tǒng)一而又不失變化的、美觀的外觀下，界面設(shè)計(jì)更是追求有用而又易用的功能，注重影響用戶使用產(chǎn)品或者服務(wù)的感受，以及用戶和產(chǎn)品建立的互動(dòng)方式，包括用戶如何理解、學(xué)習(xí)和如何使用產(chǎn)品。界面的用戶體驗(yàn)設(shè)計(jì)，以可用性與以用戶為中心為理論基礎(chǔ)，將用戶時(shí)時(shí)刻刻擺在設(shè)計(jì)過程的首位，將用戶的需求作為基本動(dòng)機(jī)和最終目的，對(duì)用戶的研究和理解應(yīng)當(dāng)被作為各種設(shè)計(jì)決策的依據(jù)，隨時(shí)了解用戶的反饋[2]。以用戶為中心的友好界面應(yīng)該首先向用戶傳達(dá)系統(tǒng)擁有哪些功能并考慮提高系統(tǒng)的有用性設(shè)計(jì)，其次再考慮易用性設(shè)計(jì)[3]。系統(tǒng)的可接受性主要取決于用戶是否相信該系統(tǒng)能夠幫助他們完成特定任務(wù)。手機(jī)、平板電腦往往在嘈雜的、擁擠的環(huán)境中單手使用，更容易產(chǎn)生誤操作，這就要求界面更為簡(jiǎn)潔。界面的有用性體現(xiàn)在界面信息的類型和數(shù)量應(yīng)控制在合理的范圍內(nèi)，可以采用Kelly Johnson提出的KISS原則（Keep It Simple And Stupid）[4]，也就是要保持簡(jiǎn)單的原則，通過刪除、組織、隱藏、轉(zhuǎn)移的方式，盡量減少界面信息量。對(duì)于信息的認(rèn)知已經(jīng)有不少理論與研究，如認(rèn)知負(fù)荷理論（Cognitive Load Theory）認(rèn)為若所有活動(dòng)所需的資源總量超過個(gè)體擁有的資源總量，就會(huì)引起認(rèn)知超載（Cognitive Overload）[5]，其關(guān)系到產(chǎn)品使用和操控的易學(xué)、易記、易理解和有效避錯(cuò)等方面[6]。因此在界面設(shè)計(jì)上，宜簡(jiǎn)潔地傳達(dá)系統(tǒng)擁有的功能，符合一般用戶的認(rèn)知能力。這就要求理清系統(tǒng)內(nèi)部結(jié)構(gòu)，簡(jiǎn)潔形象地表達(dá)功能分類，在視覺上突出功能。這樣的界面給予用戶“有用、易用”之感。Andrew等[7]的研究發(fā)現(xiàn)，感知易用性高的界面，能夠提高用戶使用技術(shù)類產(chǎn)品時(shí)的信心。而且，感知易用性高的界面，交互的效率和精確度也高。

在實(shí)現(xiàn)易用性方面，通過明確的操作入口、清晰的結(jié)構(gòu)、一致兼容的界面、適時(shí)的幫助、及時(shí)的反饋，按照認(rèn)知科學(xué)規(guī)律對(duì)信息構(gòu)架和資源進(jìn)行解析、重組，有利于在信息架構(gòu)復(fù)雜、資源極為豐富的條件下，減輕目標(biāo)用戶的認(rèn)知負(fù)荷，促成用戶快捷準(zhǔn)確地識(shí)別界面，執(zhí)行訪問動(dòng)作。跨平臺(tái)開發(fā)界面時(shí)，可以采用原生控件，保證了跨平臺(tái)的體驗(yàn)一致性，兼容多種終端設(shè)備。更重要的一點(diǎn)是原生控件可以支持鍵盤操作、Tab切換、快捷鍵等功能，從而有助于有視覺障礙的用戶使用讀屏軟件等輔助工具。在功能的呈現(xiàn)方式上，合理的界面應(yīng)該可以讓用戶對(duì)功能的選擇更準(zhǔn)確、快捷。我們可以從生活中汲取經(jīng)驗(yàn)，采用擬物化的結(jié)構(gòu)承載不同的信息，根據(jù)主題選擇相關(guān)聯(lián)的、現(xiàn)實(shí)中存在的物體作為信息承載體，從而直觀地體現(xiàn)核心內(nèi)容，突出主題。譬如功能的呈現(xiàn)方式，可以是貨架、書架、轉(zhuǎn)盤等形式，又如購(gòu)物網(wǎng)站類比于實(shí)體店進(jìn)行信息的分類、架構(gòu)，設(shè)計(jì)系統(tǒng)的使用流程?？梢允腔诳陀^存在的事物、事物功能、事物道理進(jìn)行隱喻[8]，界面從而具有了自解釋的功能，符合用戶的猜想，同時(shí)盡可能地避免或打斷用戶默認(rèn)的操作流程，以節(jié)約用戶的時(shí)間成本，提高用戶的使用體驗(yàn)[9]。良好的人機(jī)交互界面設(shè)計(jì)采用這種擬物、隱喻的手法，合理運(yùn)用心理學(xué)和符號(hào)學(xué)，能夠跨越文化，克服語(yǔ)言障礙，提示或暗示用戶，成為全球都能理解的、通用的設(shè)計(jì)，達(dá)到抽象事物具體化、深?yuàn)W道理淺顯化的目標(biāo)，減少用戶瀏覽過程中的焦慮感，增加其愉悅度。同時(shí)，界面應(yīng)具有良好的容錯(cuò)性，在用戶犯錯(cuò)后自動(dòng)調(diào)整恢復(fù)，避免用戶的損失。由于手機(jī)屏幕較小，網(wǎng)站結(jié)構(gòu)往往采用單一樹形結(jié)構(gòu)的組織方式，這樣導(dǎo)致用戶很難在其他的選擇中自由轉(zhuǎn)換，因此，在網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)中需要對(duì)用戶的操作需求有適當(dāng)?shù)念A(yù)見，合理的分級(jí)歸類將會(huì)幫助用戶很輕松地達(dá)到目的[10]，從而減少出錯(cuò)概率。

3 多通道人性化的交互界面

Moen[11]強(qiáng)調(diào)人機(jī)界面交互美學(xué)不僅僅是人與環(huán)境之間交相作用，還必須為人的精神和身體層面提供同樣滿意的完整表述。擁有一個(gè)完滿的、經(jīng)驗(yàn)的關(guān)鍵屬性，情感作為粘合劑將不同的經(jīng)驗(yàn)要素結(jié)合起來，貫穿于行為的過程中[12]。在全息學(xué)時(shí)代背景下，數(shù)字化交互呈現(xiàn)出過程性、共振性、沉浸性的內(nèi)核特征[13]。界面的本質(zhì)在于設(shè)計(jì)師運(yùn)用自身的知識(shí)與技能，用人性化的情感進(jìn)行設(shè)計(jì)，通過“敘事化”的手段對(duì)界面進(jìn)行創(chuàng)造性的藝術(shù)化“生產(chǎn)”，探索用戶身體和行為方式與界面的交互作用，完美表達(dá)設(shè)計(jì)的細(xì)節(jié)和情感，用戶全方位的參與，增加用戶的情感體驗(yàn)。

3.1 自然的多通道交互

在傳統(tǒng)的單通道用戶界面設(shè)計(jì)中，用戶通過鼠標(biāo)進(jìn)行人機(jī)對(duì)話，單擊、移動(dòng)、晃動(dòng)、滾動(dòng)鼠標(biāo)等交互行為，對(duì)應(yīng)著設(shè)計(jì)師預(yù)先設(shè)計(jì)好的場(chǎng)景、程序或?qū)崟r(shí)運(yùn)算得到的動(dòng)態(tài)元素。而在多感官人機(jī)交互界面設(shè)計(jì)中，用戶通過視覺、聽覺和觸覺器官進(jìn)行交互，視線追蹤、語(yǔ)音識(shí)別、手勢(shì)輸入、感覺反饋等新的交互技術(shù)，允許用戶利用本身內(nèi)在感覺和認(rèn)知技能，使用多個(gè)交互通道，以并行、非精確方式與計(jì)算機(jī)系統(tǒng)進(jìn)行交互，旨在提高人機(jī)交互方式的自然性和高效性[14]。用戶的一句話、一個(gè)眼神、一個(gè)表情、一個(gè)動(dòng)作，計(jì)算機(jī)捕捉后即時(shí)反饋，用戶在沒有察覺的情況下“沉浸”于虛擬的計(jì)算機(jī)交互環(huán)境中，注意力集中到任務(wù)本身，實(shí)現(xiàn)“人機(jī)合一”的理想境界。真實(shí)環(huán)境與虛擬物體相互疊加在一起，真真假假地共同增加用戶的體驗(yàn)性、沉浸感和交互性。美國(guó)麻省理工學(xué)院（MIT）媒體實(shí)驗(yàn)室流體界面組的印裔博士研究生普拉納夫·米斯特里[15]（Pranav Mistry）于2009年在India技術(shù)、娛樂、設(shè)計(jì)（Technology，Entertainment，Design，TED）大會(huì)上演示了他的“第六感裝置”發(fā)明（見圖3）?！暗诹醒b置”作為物質(zhì)與虛擬融合的信息設(shè)計(jì)實(shí)踐，體現(xiàn)了未來人機(jī)交互系統(tǒng)將朝著人的自然交流形式的方向發(fā)展，而且應(yīng)該具有多感官、多維度、智能化的特點(diǎn)，增強(qiáng)用戶的參與感、體驗(yàn)感和沉浸感，加速現(xiàn)實(shí)物質(zhì)世界與數(shù)字虛擬世界的不斷融合。

3.2 人性化動(dòng)態(tài)化的交互

圖3 普拉納夫·米斯特里在演示他的“第六感裝置”發(fā)明Fig.3 Pranav Mistry is showing his invention of the six sense device

柳冠中先生的“設(shè)計(jì)事理學(xué)”認(rèn)為設(shè)計(jì)是對(duì)相關(guān)的事的系統(tǒng)設(shè)計(jì)，同樣界面設(shè)計(jì)也是綜合考慮在“人-機(jī)-環(huán)境”系統(tǒng)中，人機(jī)交互的“事”。運(yùn)用敘事化的手段感性地呈現(xiàn)人機(jī)交互，通過人們熟悉的可感知的、具象的方式展現(xiàn)人對(duì)其操作的反饋，可以增加親切感，減少數(shù)碼產(chǎn)品的冰冷感，打動(dòng)用戶。正是把界面定義為虛擬的三維空間，不僅在界面的空間、圖標(biāo)設(shè)計(jì)上采用擬人、擬物的手法塑造三維形態(tài)，物體在真實(shí)空間中的重量感、緩沖、加速等屬性，亦可存在于界面中。產(chǎn)品展示動(dòng)畫中圖片“快要相撞時(shí)的讓一下”、頁(yè)面切換的速度、物體移動(dòng)的軌跡等細(xì)節(jié)的展現(xiàn)，界面或者其中的圖標(biāo)在用戶觸碰下產(chǎn)生的形態(tài)、色彩、質(zhì)感的變化，以人性化的變化方式吸引用戶或提醒警示，都賦予了界面元素人性的特征，為物象注入了沉浸感因素。設(shè)計(jì)呈現(xiàn)出動(dòng)態(tài)化、多維化、綜合化發(fā)展的多感官人機(jī)交互界面設(shè)計(jì)趨勢(shì)[16]?！皺C(jī)器”已經(jīng)是可以深度交互的實(shí)體，界面設(shè)計(jì)成為了人機(jī)交互這件事的陳述，即“敘事性”的表述，這樣營(yíng)造的體驗(yàn)將促進(jìn)用戶的視覺認(rèn)知與情感因素。譬如IPAD的IBOOKS書本表現(xiàn)方式，如真書般惟妙惟肖，Passbook中虛擬碎紙機(jī)的刪除方式，底部出現(xiàn)的碎紙效果真實(shí)有趣，Deal In的從紙上撕下來一樣的購(gòu)物清單可以放入底部的黃色牛皮紙（見圖4），絢麗、生動(dòng)、好玩，華麗而不失自然，深深地吸引著用戶的眼球。在各種界面中，我們可以看到各種元素紛紛“動(dòng)”了起來。不同場(chǎng)景的轉(zhuǎn)換類似于電影、PPT播放中的轉(zhuǎn)場(chǎng)，可以采用淡入淡出、疊加、翻轉(zhuǎn)等方式，通過用戶所熟悉的或者是意料之外的功能、方式，來增加用戶的好感，促進(jìn)用戶的視覺認(rèn)知與情感依托。譬如手機(jī)中的翻轉(zhuǎn)手勢(shì)，可以讓鬧鈴、來電靜音，跟用戶的預(yù)期完全一致，且生動(dòng)形象，非常有趣。

圖4 Deal In中從紙上撕下來的購(gòu)物清單Fig.4 Shopping list torn from paper in Deal In

在模擬動(dòng)態(tài)的同時(shí)，音效的使用可以讓用戶具有身臨其境的感覺，尤其是模擬真實(shí)的音效。譬如IPAD中翻閱紙張時(shí)的摩擦聲，LETTERPRESS中刪除游戲時(shí)字母表格分解小方塊掉落到屏幕底部發(fā)出的微妙的爆炸聲，讓人機(jī)之間的交流與反饋越來越真實(shí)。還有像QQ多彩氣泡使得你的聊天具有你的個(gè)性化特征，還展現(xiàn)了語(yǔ)音動(dòng)畫功能，從而讓用戶的情感表達(dá)充滿趣味（見圖5）。

圖5 QQ多彩氣泡對(duì)話框Fig.5 Colorful bubbles dialog of QQ

要塑造富有人情味的、有趣好玩的人機(jī)界面，還可以從游戲中獲取靈感。就如Stephen P.Anderson的游戲設(shè)計(jì)模型原理[17]一樣，界面設(shè)計(jì)同樣可以給予用戶玩耍和挑戰(zhàn)、矛盾和選擇、反饋回應(yīng)，以及目標(biāo)和獎(jiǎng)勵(lì)。只有當(dāng)界面不僅滿足用戶的基本需求，還超出用戶的期望需求，給予用戶驚喜，才能吸引用戶，留住用戶。

4 結(jié) 語(yǔ)

隨著更多的新技術(shù)從實(shí)驗(yàn)室應(yīng)用到實(shí)際產(chǎn)品中，人機(jī)之間構(gòu)建起視覺、聽覺、觸覺、姿勢(shì)等全方位的多維交互群組，人機(jī)對(duì)話更為隨意、自然、舒適，計(jì)算機(jī)會(huì)“消失”，增強(qiáng)用戶的參與感、體驗(yàn)感和沉浸感，真實(shí)世界與虛擬空間將日趨接近。當(dāng)然，在營(yíng)造沉浸式的人機(jī)界面時(shí)，也需要考慮到硬件條件。倘若動(dòng)態(tài)的、精美的界面導(dǎo)致用戶不能流暢地使用產(chǎn)品時(shí)，則得不償失。也就是說，設(shè)計(jì)師首先要考慮有用的易用的功能，使界面簡(jiǎn)單方便，在此基礎(chǔ)上，美化界面，塑造簡(jiǎn)潔的多維的界面空間，在硬件條件允許的情況下，運(yùn)用多通道動(dòng)態(tài)化的交互技術(shù)，增強(qiáng)用戶體驗(yàn)，增加用戶對(duì)產(chǎn)品的粘性，促進(jìn)用戶的視覺認(rèn)知與情感依托。

[1] 龐博.淺析數(shù)碼界面圖標(biāo)設(shè)計(jì)的質(zhì)感表現(xiàn)[J] .裝飾，2011（6）：104-105.

[2] 夏敏燕，王琦.以用戶為中心的人機(jī)界面設(shè)計(jì)方法探討[J] .上 海 電 機(jī) 學(xué) 院 學(xué) 報(bào)，2008，11（3）：201-203.

[3] 張寧，劉正捷.自助服務(wù)終端界面交互設(shè)計(jì)研究[J] .計(jì)算機(jī)科學(xué)，2012，39（6）：16-20.

[4] Giles Colborne.簡(jiǎn)約至上：交互式設(shè)計(jì)四策略[M] .李松峰，秦緒文，譯.北京：人民郵電出版社，2011：60-156.

[5] Kirschner P A.Cognitive load theory：implications of cognitive load theory on the design of learning[J] .Learning and Instruction，2002，12（1）：1-10.

[6] 金純，張乃仁.基于認(rèn)知理論的人機(jī)界面標(biāo)準(zhǔn)化設(shè)計(jì)原則[J] .人類工效學(xué)，2005，11（3）：32-36.

[7] Andrew B J，Geoffrey S H.The mediation of external variables in the technology acceptance model[J] .Information and Management，2006，43（6）：706-717.

[8] 梅凱.多媒體界面設(shè)計(jì)中的隱喻設(shè)計(jì)[J] .大眾文藝，2013（7）：64-65.

[9] 郭馨蔚.針對(duì)用戶界面中系統(tǒng)導(dǎo)航的分析研究[J] .裝飾，2011（1）：94-95.

[10] 馬志強(qiáng)，蔣曉.基于用戶體驗(yàn)的智能手機(jī)用戶網(wǎng)站界面設(shè)計(jì)探討[J] .包裝工程，2012，33（16）：63-66.

[11] Moen J.Towards people based movement interaction and kinesthetic interaction experience[EB／OL] .（2005-08-01）[2013-03-01] .http：∥www.researchgate.net／publication／220888823＿Towards＿people＿based＿movement＿interaction＿and＿kinaesthetlc＿interaction＿experiences.

[12] 耿陽(yáng).基于杜威實(shí)用主義美學(xué)思想的人機(jī)交互研究[J] .包裝工程，2012，33（2）：104-107.

[13] 艾小群，馮守哲，吳振東.全息學(xué)時(shí)代下數(shù)字化藝術(shù)設(shè)計(jì)的人機(jī)交互性取向[J] .遼寧大學(xué)學(xué)報(bào)，2012，39（1）：69-72.

[14] 徐佳理.基于多重觸控的多通道人機(jī)交互界面設(shè)計(jì)研究[D] .上海：同濟(jì)大學(xué)，2008：2.

[15] 楊茂林.從“第六感”看未來人機(jī)交互的發(fā)展方向[J] .裝飾，2013（3）：102-103.

[16] 肖紅，郭歌.多感官人機(jī)交互界面的視覺設(shè)計(jì)原則[J] .包裝工程，2012，33（4）：35-37.

[17] Stephen P.Anderson.怦然心動(dòng)——情感化交互設(shè)計(jì)指南[M] .侯景艷，胡冠琦，徐磊，譯.北京：人民郵電出版社，2012：149-154.