情境感知下的智能家電界面動效設計策略研究

郭賢君 朱琪穎

摘要：面向智能家電產品界面信息的視覺性表達，研究界面動效對用戶體驗的影響。通過相關理論研究，定義情境感知的內容與智能環境下的情境因素， 分析情境感知介入動效設計的價值，具體構建人機情境感知的流程。圍繞情境感知不同階段的感知特點與情境任務，提出針對性的動效設計原則、策略及具體的設計方法。智能家電產品的界面應從可知性、易用性和預測性3 個層次考慮動效的設計與編排。

關鍵詞：人機交互 情境感知 智能家電 界面動效 設計策略

中圖分類號：TP391.9 文獻標識碼：A

文章編號：1003-0069（2023）20-0108-04

Abstract：The visual representation of information in the interface of smart home appliances，and the impact of interface motion on user experience.Through relevant theoretical research，we define the content of contextual perception and contextual factors in intelligent environments，analyze the value of contextual perception intervention in motion design，and concretely construct the process of human-computer contextual perception.Based on the perceptual characteristics and contextual tasks in different stages of contextual perception，we propose targeted motion design principles，strategies and specific design methods.The interface of smart home appliances should consider the dynamic design and layout from three levels：knowability，ease of use and predictability.

Keywords：Human-computer interaction Contextual awareness Smart home appliances Interface motion Design strategy

引言

隨著自動化控制和信息化技術的進步，智能家電產品不斷涌現。因其具備感知、處理、決策等能力，且能夠滿足人們便捷高效與個性化的需求，智能產品被應用在人們生活的方方面面。與此同時， 產品的智能化使得操作程序變得更加復雜，呈現給用戶的信息類型和內容也更加豐富。在人類的視覺感知中，動態的視覺線索可以傳達復雜的內容，引起高層次的社交與情感反饋[1]。然而，界面的動態視覺成效質量遠遠沒有同步于產品智能化的躍進，亦無法響應品牌高精尖的轉型，導致產品在品質和外觀上與界面的割裂與分離。有欠考慮流暢性的底層動效，也讓用戶在操作設備的過程中有著感知上的延緩與遲鈍。因此，在智能家居的場景下，如何通過動效傳遞信息、反饋使用狀態、可視化操作結果，增強用戶的直接操控和感知能力，并為產品帶來視覺美感，成為智能家電界面動效設計中值得探討的問題。

一、智能家居中的情境因素

（一）情境信息分類

“情境”是有關人機交互過程中相關的用戶、地點以及實體產品和應用程序的任何信息。在這一概念的基礎上，“情境感知”增加了感知的內容與感知的結果——即在特定情境下，通過機器設備感知人機交互過程中發生的一切因素與所有關系，一方面為用戶提供適時且恰當的情境信息，另一方面根據用戶當前的任務需要，提供恰當和準確的服務。

根據所處情境的不同，其包含的情境因素也有所差異。智能家居中的情境信息具有多樣性和復雜性，若想為用戶提供人性化和生活化的服務，用戶自身信息、系統軟硬件信息和二者所處環境的狀態信息必不可少。辛向陽教授將“交互”視作以產品為媒介“創造行為”的事件，提出了用戶（people）、行為（actions）、工具或媒介（means）、目的（purpose）與場景（contexts）的交互五要素[2]。受此啟發，本文將情境因素相應地劃分為用戶、任務、產品與設備、環境四類。這4 類情境因素之間信息交互傳遞，相輔相成， 相互影響，共同組成了界面動效設計的前因。

其中，用戶情境與用戶自身屬性和特征相關，包括用戶的基本個人信息、消費能力、家庭情況、交互能力、交互偏好等信息；任務情境主要指用戶完成相關交互任務的行為動機、目的、過程等； 產品與設備情境指產品功能與運行狀態方面的信息，這些系統表征不僅影響著人接收信息和控制系統的能力，同時也影響著系統的信息傳送效率和系統硬件的表現；環境情境指交互主體所在與交互行為發生的場所內的一切相關信息，包括時間與空間、物理環境與家居環境，這些信息是感知設備提供服務的基本信息，也影響著交互主體的能力發揮。

（二）人機情境感知的過程

隨著智能家庭交互產品的發展，意味著傳統人－機的單向交互模式正向人機雙向交互演進，人機交互的主動權和決策權逐漸由弱到強讓渡。智能產品不僅要接收用戶的行為信號并進行反饋，還要與外部的環境進行有效交流，對交互語境進行預判，主動作出判斷和決策，滿足用戶的多樣需求，生成對用戶的精準服務[3]。然而， 情境感知主要強調“機器”對情境信息的“獲取—推理—服務”過程， 考慮到“人”作為另一交互主體的在情境中的參與，在情境感知的過程中有必要將人的情境認知納入感知系統之中。Endsley 的人的情境認知理論模型指出，人的認知過程會經歷“意識—決策—動作執行” 三個階段[4]。綜合上述分析，將用戶情境、任務情境、產品與設備情境、環境情境視作影響智能家電交互的外部情境因素，人機情境感知的流程如圖1 所示。對信息的“獲取”“理解”和“應用”受外部情境因素的全域影響，處于有序且可控的動態變化之中。

二、情境感知在界面動效設計中的應用價值

界面動效指用戶與機器設備交互過程中，界面呈現出的動態效果。然而，智能家電操作端的界面動效設計尚未受到足夠重視。盡管對于智能家電產品人們依然以功能和外觀設計為主要競爭力，并傾向于在產品上減少或隱藏屏幕，但作為家庭交互中心的部分產品已不可避免地走上了帶屏和大屏化之路，視覺和傳感成為新興交互之勢，在高度定制化的家電用屏上盲目復制和嫁接移動端及網頁端的動效經驗只會弄巧成拙。情境感知的介入，使動效在視覺表現、功能價值以及情境化增益方面都有了新的變化。

（一）感官維度：側重對情境因素的人性化反饋

智能環境通過采集與系統服務相關的情境信息向用戶提供服務， 對情境因素的識別與感知，無論對于任何一方系統主體而言，都是作出預測、判斷以及動作執行的前提和基礎。外部環境的各類情境因素構成了信號刺激源和觸發器，貫穿于整個智能家居的動態信息處理過程之中，不同的情境變化促使產生不同的用戶信息需求。因此， 情境因素不僅是智能產品感知的上下文背景，也是界面動效設計的合理來源。利用動效對特定任務下的特定情境因素進行自適應反饋， 是滿足用戶當下情境核心信息需求的關鍵，有利于實現自然順暢的人機交互過程。

（二）功能維度：凸顯智能交互底層邏輯

系統服務的范圍、結構和框架是動效表現的基礎，因此動效本質上是為交互的內容需要與信息架構服務的。交互的內容與模式不同，自然也影響著動效的目的和功能。智能家電的界面動效相較于移動端和PC 端，除了手勢動效、頁面跳轉這些信息處理的邏輯支持之外，還需要體現狀態監控和自主決策等不同情境階段的智能交互優勢。這就對界面信息在不同環境、不同任務、不同認知內容下的動畫表征與信息構建做出了更高的要求。

（三）情感維度：信息敘事促進對情境的理解

動效對情境信息的可視化表現，使得用戶能夠主動參與信息的選擇、獲取、反饋和分享。相比于靜態的信息展示，動效由于時間和空間屬性，經時間軸運動所產生的視覺要素的形式、位置和結果變化，能夠以敘述的方式描述整個事件的內部關系和抽象信息，交代當前事件和任務操作的上下文背景，并通過人機的互動過程喚起用戶的回憶與思考，讓用戶更容易理解所處情境。其信息的生動性會與用戶建立起情感共鳴，進一步得到用戶的反饋[5]。

綜上所述，在進行智能家電產品的界面動效設計時，將情境因素和情境特點置于整個設計系統和流程的思考框架之中，能夠使界面動效更具人性化、智能化和商業化，實現信息傳達和與人機之間有效便捷的互動，以增加信息傳達過程中視覺藝術的感染力。

三、智能家電界面動效的設計原則

動效設計原則是設計理念在動效上的價值表現。盡管目前的學術研究中，針對智能家電操作端的界面動效尚未有專業的動效設計指導，然而，鑒于家電界面動效隸屬于動效設計的大范疇，其動效表現既具備應用于主流平臺的動效設計的共性，又具備智能環境下的動效特殊性。因此，結合動效設計的普適原則與智能家電界面動效的設計價值，將動效設計原則適配到智能家居場景與智能家電產品的使用情境之中，提煉出以下設計原則：

1. 系統性原則：系統性原則是進行動效設計所應該遵循的設計模式，尤其對于分布式智慧屏的套系家電產品而言，利用界面中重復要素的內容模塊滲透，能夠向用戶傳達出強烈的整體感受，讓體驗更加連貫，提高品牌的辨識度。考慮到智能家電的操縱方式跨媒介跨屏幕的特點，對應用于不同操作端的界面動效做出系統性規范化要求，也有利于節省開發成本，提高設計效率。

2. 效率性原則：智能家居環境下的智能家電交互系統具備了自發交互和精確交互的新特征，能夠適應物理世界帶來的變化并進行有效管理，有效且高效的反饋才能保障交互的順利進行。在動效的時間編排和觸發方式上，使用戶能夠直接和快速地從界面中獲取信息，及時告知用戶當前的操作狀態和結果，減少用戶在操作過程中因為誤觸或等待的負面和消極情緒，保障用戶在使用智能產品時的控制權，對用戶的體驗來說是至關重要的。

3. 真實性原則：人對圖形的認知與識別往往建立在日常生活的常識和經驗基礎之上，因此，在動效設計的過程中考慮真實的運動狀態、光影效果與材料質感，在細節上盡量遵循真實世界的運動規律與力學表現，在運動節奏上賦予動效生命力與力量感，不僅能使動效在視覺上達到舒適自然的效果，也有助于用戶理解和記憶整體信息或事件之間的聯系。

4. 適度性原則：動效雖然能夠讓界面呈現變得更加生動有趣， 但應該謹慎過度使用。“越是形式豐富和細節豐富的信息，認知者受到的注意力遷移越多，對信息的理解就越弱[6]。”如果對動畫形式的關注超過了對信息內容理解，無異于本末倒置。因此，動效應該出現在適合的場景，且能夠正確發揮其信息表征和功能意義的地方。

四、基于情境感知的智能家電界面動效設計策略

（一）基于情境獲取的可知性動效設計

在情境獲取階段，需要重視用戶對當前情境信息的感受與認知。智能家電的識別、感知外部情境因素、運行的狀態等，對于用戶而言是否清晰直觀、可見可控，是這一階段影響用戶智家體驗的關鍵因素。視覺和知覺上令人愉悅且信息分類明確的界面動效，能夠讓用戶留下對智能產品良好的第一印象，并有繼續使用的強烈意愿。

1. 真實而自然的視覺美感

藝術化設計越來越成為消費者和廠商對高品質智能家電的追求。為了使智能家電的產品外觀和操作界面達到藝術美的和諧統一，需在界面動效上增強審美的愉悅性。注重視覺美感的動效可以從兩方面進行設計：首先是動效的運動曲線編排上，符合真實物理世界的運動規律與受力法則，如圖2。通過運動曲線的設定，使動效在質量和速度的形式表現上，符合人的認知和常識；其次，根據格式塔學派主張的“同形同構”說，動態圖形的設計元素和運動樣式與其意象的運動原型之間，要有合理的映射關系。例如，通常情況下，進場動畫在速度上先快后慢，而退場動畫正相反，這一設定就模擬了現實世界中汽車從啟動到停止的速度變化，與人的心理經驗相匹配。

2. 清晰且有序的信息呈現

智能家電多樣的使用情境導致了其交互的復雜性，動效作為用戶進入界面最先注意到的元素，應該承擔快速幫助用戶搞清任務進展和界面內容的作用，增加界面使用的流暢性和操縱感[7]。已有研究表明，信息的類型及信息自身的特點會對信息動畫的表征產生影響，對動態的理解必須有助于滿足內在的專業信息呈現和任務完成， 與信息無關的動態變化元素既不應作為認知理解的要求，也不應作為認知吸引的要求去設計[6]。所以在進行動效設計前，要進行交互信息的歸納，按照信息功能的目的選擇合適的動畫形式進行表現。例如，智能家電界面中的進度描述類信息和度量描述類信息，相較于用以描述功能模式類的信息，具有更加多樣的動畫表現形式，如圖3，這便與信息的語用功能相關。

3. 符合視覺動線的注意停留

人在觀察事物的過程中，受當前任務目標和外界刺激的影響，視覺注意機制會對選擇性地對信息進行篩選，從而構建信息認知的整體。視覺信息的差異化越明顯，視覺注意對信息的篩選就越輕松[8]。因此， 動效的展示應當與用戶注意力相關聯。將動效元素的顏色、大小、透明度、旋轉、位移等變換要素，按照注意力的集中程度從中央到外圍過渡的層級，設置在用戶交互的視覺焦點區域。

4. 感知時間上的及時響應

時間是動效的核心元素，已有大量數據表明，時間預期和速度變化會影響用戶注意力與信任感。動效快速響應和及時反饋的能力對用戶的主觀時間感和用戶滿意度有著直接影響。為了盡可能清楚地向用戶傳達當前的運行狀況和結果，編排動效時需要根據界面元素大小、運動距離、動效復雜程度、動效的目標和運行動效的設備等， 對運動元素的響應時長與持續時長進行合理的時間取值，如圖4。

（二）基于情境理解的易用性動效設計

易用性是可用性范疇的重要組成部分，指在學習和使用產品的過程中有較少的使用和記憶負擔。在使用智能家電的理解階段，人需要通過對當前情境信息的掌握作出預測和判斷。為了幫助用戶決策，智能家電在處理復雜的情境信息時，需要隱藏繁雜的步驟，縮短操作路徑，使當前的信息呈現與信息交互簡潔流暢、清晰易懂， 注重“意義”的有效傳達和邏輯的連貫。

1. 化繁為簡的動畫演示

具備情境感知功能的智能家電在分析和推理過程中，以時間、地點、用戶、行為等情境信息為變量，會呈現出區別化和內容形式迥異的系統服務。在進行動效設計時，可以通過引人入勝的元素變化展示功能和運行過程，將機器復雜、多維的內部推理分解成用戶易于理解、接受和操作的步驟。例如，COLMO 洗衣機AI 慧眼洗功能的識別動畫，識別內容信息按照識別過程的進度依次展現，能讓用戶在等待過程中知悉并掌握洗衣機的實時運行狀態，如圖5。

2. 流暢過渡與引導提示

智能家電產品的豐富功能要求其布局多樣化，但易出現功能布局混亂、相似功能點分散、重要功能不突出、切換頻次高等諸多問題[9]，加劇用戶在接受和使用智能產品的畏懼感。為幫助用戶更快地掌握界面的操作以及功能的方向位置，降低用戶的學習成本和學習焦慮，設計師應使用動效進行有效的用戶引導。通過動效的過渡、引導和提示，向用戶提供系統運行的狀態與結果，反饋用戶的交互行為，實現用戶對操作結果的預知。

3. 邏輯明確的結構串聯

動態效果可以清晰地顯示界面層次結構的變化，使用戶更容易理解界面的轉換和層次關系，并對自己當前正在進行的工作狀態進行定位。特別是在界面復雜、界面轉換頻繁、用戶同時執行多個任務的情況下，界面動效的設計對于引導和呈現層次結構、增強界面及其轉換之間的連接感和連續性非常重要。Google 在material design 以容器轉換、共享軸、淡入淡出、無過渡4 種過渡模式展現信息層級[10] 已成為基本動效的設計語義范式，為智能家電的界面動效設計提供了有價值的借鑒和參考，如圖6。

（三）基于情境應用的預測性動效設計

在情境感知的應用階段，智能家電要向用戶呈現系統感知與分析的結果，并提供相關的信息服務，用戶會基于前階段的認知和決策， 最終輸出相應行為的動作執行。為了更好地實現用戶與系統之間的信任構建與協同工作，智能家電產品及服務系統必須具備一定的可預測性，適時考慮用戶的情感化需求，有效預判和評估用戶的決策與互動。

1. 可調整的響應式連續體驗

隨著智能家居互聯平臺整合力度的加強，未來智能設備終端和數字化產品之間的聯動與融合將會更加開放與包容。智能家電產品能夠跨場景跨設備與其他智能產品進行互聯互通，從而創造豐富的智慧生活交互體驗。為了保證用戶在不同設備終端的流暢性體驗， 在動效設計時需納入對各設備和平臺的情境信息數據共享的需求， 同時考慮不同終端相結合的交互模式，以響應式和可調整式動態設計，應對跨設備、跨屏多樣化顯示的問題，建立多場景之間的有效聯系與互動。

2. 提供多種交互選擇

由于智能家電產品使用過程的多情境化和交互形式的多態性， 動效應展現多通道信息反饋的多樣性，提高交互的個性化程度，為用戶提供多種交互選擇以適應情境中動態變化的信息。例如，在語音交互中使用聲音可視化，在觸覺交互中對手勢操作動效輔之以振動反饋等，使反饋更加自然、更加細致。

需要注意的是，無論選擇怎樣的動態表現形式，出發點都應該放在是否適用于該信息特征并能完成可視化目標上。另外，當用戶感覺機器的干預已經侵犯其隱私，威脅到用戶對智能產品的控制權， 需要簡化交互方案和自主操作時，也應該賦予用戶減少和關閉動態干擾的修正權利。iOS 在human interface design 中就指出了動效的可選擇性——當用戶期望在減少運動的輔助選項時，應用程序應最小化或消除動畫。

3. 增進情感的類人互動

機器不僅是協助用戶完成特定工作的工具，也是與人交流溝通的數字伴侶。在智能家居場景下，受用戶使用經驗和居住狀態的影響，用戶對智能產品主動風格的偏好都有著極大的差異[11]。也就是說，特定交互情境下，智能產品以何種身份角色與性格、何種方式與方法發起與人類的會話，都將影響人機協作與溝通的效率。情感化的動效設計可以通過顏色變化或序列幀動畫，融入對表情的設計和人類情緒的表達，綜合使用音效、振動、語音等多通道感知，適宜使用情感化的動態視覺靈活匹配不同的交互形態，加強用戶與產品的情感連接。使人機交互的過程更具生動性和趣味性。例如蔚來的NOMI 語音助手，就用不同的表情動畫表示接收到用戶操作指令后的反饋，讓語音助手的形象顯得更加可愛、更加貼心，如圖7。

結語

物聯網、云計算等相關技術為智能家居的智慧化創新提供了良好的技術環境和發展平臺。情境感知下的智能交互將滲透至人類的日常起居與生活空間，讓所有用戶都能隨時隨地、隨心所欲地控制智能家電，管理家居生活。

文章通過對情境感知及其相關內容的理論研究，將智能環境下的情境因素具體化，提出了人機情境感知過程的3 個階段：情境獲取、情境理解和情境應用，并基于不同階段情境感知的特點，提出了智能家電界面動效的設計策略：可知性動效側重動效的信息動畫表征、可用性動效強調動效的功能性表達、預測性動效突出動效的情感化增益，并分別提出了具體的設計方法，對界面動效設計在家電產品中的應用進行了新的探索。希望相應的設計策略能夠對家電用屏的動效設計起到一定程度的指導作用，提升用戶對智能家電產品的認知和交互體驗。

基金項目：2018 年度教育部人文社會科學研究規劃基金項目（18YJA760090）

參考文獻

[1]沈婕，譚浩.基于視覺特征的智能產品光效交互設計研究[J].包裝工程. 2019，（10）：107-112.

[2]辛向陽.交互設計：從物理邏輯到行為邏輯[J].裝飾. 2015，（261）：058-062.

[3]覃京燕.家庭智能產品的主動交互設計研究[J].包裝工程. 2019，40（20）：67-73.

[4]Mica R.Endsley. Design and Evaluation for Situation Awareness Enhancement[J]. Proceedings of the Human Factors Society Annual Meeting，1988，32（2），97-101.

[5]劉迪.網頁中交互式信息可視化設計研究[D].江南大學.2013.

[6]楊璇.影響信息可視化動畫表征的關鍵因素[J].裝飾. 2018，（01）：114-117.

[7]于思航.移動應用界面的動效設計研究[J].工業設計. 2019，（09）：70-71.

[8]徐德敏.動態圖形設計中視覺信息表達的秩序性研究[D].南京理工大學.2017.

[9]王怡妍，李勁松.提升智能交通工具用戶體驗價值的微動效研究[J].大眾文藝. 2020，（03）：150-151

[10]MATERIAL DESIGN. Understanding motion[EB/OL].https：//material.io/design/motion/ understanding-motion.html.2021-11-06.

[11]王爾卓，袁翔，李士巖.智能家居場景中會話智能體主動交互設計研究[J].圖學學報. 2020，41（04）： 658-666.

圖片來源

圖2動效設計的物理原理，摘自physical principles for motion design！ by Kenny Z. Porter

https：//dribbble.com/shots/5994963-physical-principles-for-motion-design/ attachments/11181452？mode=media

圖3智能家電類APP對度量類信息的不同表現形式，左圖摘自Smart Home App 02 by BAOLIN

https：//uiiiuiii.com/inspiration/1616243923.html

右圖摘自：Google Nest Learning Thermostat by ZhaoWei

https：//dribbble.com/shots/7202769-Google-Nest-Learning-Thermostat/ attachments/198520？mode=media

圖4動效的持續時長與元素大小和運動距離的關系，摘自Taras Skytskyi. The ultimate guide to proper use of animation in UX. Understanding motion.

https：//uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 .2018-09-05

圖6移動端動效的信息空間結構，摘自學位論文《基于空間隱喻的移動端Z軸動效設計》張興柱

圖7NOMI車載人工智能系統，摘自https：//www.nio.cn/nomi