基于C-MKE模型的交互界面設計

陽明慶，趙 銳，肖華亮，林 麗

?

基于C-MKE模型的交互界面設計

陽明慶，趙 銳，肖華亮，林 麗

(貴州大學機械工程學院，貴州 貴陽 550025)

為了滿足用戶對交互界面設計的感性需求，提出了基于C-MKE模型的交互界面設計方法。首先應用感性工學(KE)理論構架中的類目層次法(CC)推論交互界面設計項目，并在與現有交互界面對比分析的基礎上建立設計變量空間。其次，通過感性意象認知實驗構建感性意象認知空間，運用數學模型方程法(MM)實現交互界面設計變量與感性意象的映射模型，進一步通過T檢驗法驗證了該模型的有效性。最后依據C-MKE模型推導出苗族銀飾文化傳播APP首頁界面設計的參考性結論，并進行了界面的創新設計。

感性意象；感性工學；類目層次法；映射模型

隨著信息社會的迅猛發展，海量的交互界面已經能基本滿足用戶對其功能性和工具性的需求。然而長久以來關于用戶體驗的交互界面設計研究主要集中在可用性方面[1-2]，鮮有交互界面設計將滿足用戶隱性的情感訴求納入考慮范疇[3]。時下用戶越來越強調交互界面帶來的情感體驗，交互界面設計與用戶感性意象偏好的吻合已然成為吸引用戶并產生用戶黏性的重要因素[4]。

近年來，設計者和研究者均將設計重點由傳統的可用性等方面拓展到用戶的情感訴求方面，利用感性工學(kansei engineering，KE)理論，探索用戶感性意象和交互界面設計要素的關系，其研究取得了一定的成果。WANG[5]提出了一種基于KE、粗糙集理論和灰色系統理論的綜合研究方法，并以電子商務網頁為研究案例，建立了用戶感性意象與網頁交互界面設計要素之間的映射關系模型。郭伏等[6]構建了網頁交互界面設計要素、感性意象詞匯對以及用戶感性偏好的結構方程類型，明確了各交互界面設計要素與用戶感性偏好之間的影響程度及優化方向，最后建立網頁交互界面設計要素與用戶感性意象之間的BP神經網絡關系模型，運用遺傳算法得出結論并指導網頁交互界面設計優化方案的完成。QU[7]基于KE的整體用戶偏好，通過眼動儀實驗提取電子商務網站交互界面設計元素，并設計了基于正交試驗的代表性交互界面。最后利用神經網絡和進化遺傳算法，通過計算機仿真實現了電子商務網站交互界面的全局優化設計，為網站設計人員提供了有效的建議。張情華和王以群[8]采用混合式KE對少兒類網頁進行分析，推論出少兒類網頁交互界面的感性意象樹形圖，并提出了網頁交互界面設計中的不足以及改進方向。

中國具有極為豐富多彩的民族文化資源，苗族文化就極具代表性。然而隨著現代化進程的推進和苗族文化有效傳播方式的缺乏，年輕一代對于苗族文化知之甚少。苗族銀飾文化作為苗族文化的重要分支，有著區別于其他民族銀飾的獨特自身魅力，在經濟相對落后的黔東南地區未得到有效地保護[9]。目前，民族文化在傳承、創新方面還非常缺乏對內容的保護以及更多樣化載體的開發利用，民族文化的傳承、創新需要將科學與文化相結合，技術與藝術相結合，通過信息技術、數字技術、藝術手段并用，才能最大程度地使民族文化得以保護、開發、傳承和創新[10]。

時下APP作為智能手機功能實現的主要載體，以其輕便、迅捷等特點在信息服務和知識傳播領域得到了廣泛應用。本文針對苗族銀飾文化陷入的窘境，擬將苗族銀飾璀璨的文化依托于APP載體，研究建立一種能夠滿足用戶感性需求APP交互界面的設計方法，為交互界面的感性設計提供借鑒與參考，同時也通過數字化方式促進苗族銀飾文化的保護和傳播。

1 基于感性工學的C-MKE模型構建

KE是一套將使用者感性心理因素量化的理論及以消費者為導向的產品開發技術,其將感性信息與設計特征的關系用量化的模型表示出來[11]，即KE模型。該模型使設計者能夠明確應操作哪些設計特征，來增強設計的特定情感反應[12]，是一種研究人的情感與產品交互的有效方法[13]。為此，本文綜合應用KE理論構架中的類目層次法(category classification, CC)對人類感性體驗與設計變量的定性分析建立交互界面設計項目的樹形圖，進而推論交互界面的設計變量，再與數學模型方程法(mathematical model, MM)對人類感性體驗與設計變量的定量分析進行關聯從而構建C-MKE模型。最終推導設計指導性結論，協助設計師將用戶感性訴求落實到可操作的設計變量上，并以苗族銀飾文化傳播APP的首頁界面設計為例，驗證方法的可行性。本文研究框架流程如圖1所示。

圖1 研究框架流程圖

1.1 交互界面的設計變量推論

KE的要旨就是將能刺激用戶產生某種特定情感的設計要素在設計結果中予以表現。因此，為了推論出能夠引發某種特定情感的交互界面設計項目，建立起設計變量空間，從用戶對產品的感性需求(即0階感性概念)出發，以定性推論的方式進行逐步分解，從而得到設計細節[14]。此過程是以“為了達到······的要求，必須做到的項目有哪些？”的設問方式開始，采用逐層遞推的方法，細化感性為新的階層，把復雜約束分解為約束子問題進行求解，并以樹形圖的形式表示出來，建立產品的感性結構以獲取與感性最相關的設計項目，逐步實現將人對物的感性期望轉化為設計的細節。在這個推論過程中，隨著0階感性的分解，細化了用戶感性訴求，同時也建立起了設計感性空間。CC法的層次推論樹形示意圖如圖2所示。

圖2 CC法的層次推論樹形示意圖

1.2 感性意象認知空間構建

認知實驗是構建感性意象認知空間的必須環節。在此環節中，首先有目的地甄選實驗樣本，然后將前一步推論獲取的設計變量結合語意差異法(semantic differences，SD)，形成意象認知實驗問卷。最后，指導實驗測試者觀察實驗樣本，并記錄對每一個樣本的感性意象認知值。

1.3 C-MKE模型構建

由于交互界面設計變量無法直接應用于C-MKE模型的構建，因此，首先需將設計信息進行參數化表達，其參數化處理過程如下：

C-MKE模型的構建過程，是交互界面設計變量空間與設計感性空間量化映射的過程，對于第類情感，樣本的感性意象與交互界面設計變量的映射描述數學表達為

(=1,2,···,；=1,2,···,)

2 基于C-MKE模型的界面設計實例

2.1 感性意象及實驗樣本確定

本文在苗族銀飾文化內容及其現狀研究基礎上，用戶和設計師們通過頭腦風暴法確定出苗族銀飾文化傳播APP的總目標感性意象為“傳趣達意”。為了詳解研究過程，選擇APP首頁的界面設計作為實例。課題組從網站和應用商店等多種渠道廣泛地收集文化類APP首頁圖片，進過分析、整理并聚類出10個代表性實驗樣本，如圖3所示。

2.2 獲取目標交互界面設計項目

以“為了到達傳趣達意的要求，必須做到的項目有哪些？”的設問開始下一步的推理，即以“傳趣達意”作為0階感性，分解推論出4個1階感性，分別是：易用感、美觀感、文化感和趣味感，其共同實現對“傳趣達意”感性的解釋。然后繼續設問：“為了滿足易用感的需要，必須做到的項目有哪些？”，進一步分解成“交互感”、“操作感”和“識別性”，再針對“交互感”進行3階推論，得出交互界面的“層級邏輯順暢”和“功能明確”兩個特性，進而對“層級邏輯順暢”推論出“邏輯層級”這個設計項目。同理，針對其他的1階、2階及3階感性進行逐一推論，直到推論出對應的設計項目為止。推論結果如圖4所示。

圖3 10個代表性實驗樣本

圖4 苗族銀飾文化傳播APP交互界面設計項目樹形圖

2.3 交互界面設計變量空間構建

通過與交互界面設計專業人員進行討論，將CC法推出的交互界面設計項目和收集的10個首頁樣本進行反復對比、分析和研究，篩選出被唯一確定的設計項目，其可直接用于APP首頁界面的設計，如邏輯層級、背景色彩、圖文內容和功能。同時，由于設計目標為首頁界面，界面流程故不在此研究范圍。最后確定出“圖標樣式”、“文字樣式”、“界面布局”、“界面主體色”和“界面風格”作為本研究涉及的設計項目，通過結合現有APP，對其進一步分類，共得到8類交互界面設計變量及21個變量水平，結果見表1。

表1 交互界面設計變量及其水平

2.4 基于實驗的感性意象認知空間構建

(1) 實驗目的，獲取用戶對APP首頁界面的感性認知量值，建立感性意象認知空間；

(2) 測試者，不同性別、年齡及職業的網絡用戶共80人；

(3) 實驗樣本，10個文化類APP首頁界面；

(4) 實驗方式，通過網絡方式發放，應用語意差異法(SD)的問卷進行；

(5) 實驗步驟，發放10個實驗樣本給測試者，指導其針對每一個樣本在“易用的——難用的”、“美觀的——丑陋的”、“有文化的——沒有文化的”和“有趣的——乏味的”4類感性詞對上進行5點等級量表上打分。

實驗結果，回收有效問卷72份，測試者平均年齡為25.8歲，其中普通用戶45人、設計相關專業學生23人、交互界面設計師4人。在收集整理所有樣本的評價后，形成4類感性的意象認知空間。

2.5 基于多元回歸分析的C-MKE模型構建

以此類推，整理每個樣本在4個感性意象詞匯下的參數化數組及評價均值，并運用SPSS進行以多元線性回歸為數據挖掘技術的分析，得到“易用的”、“美觀的”、“有文化的”和“有趣的”4個感性意象詞匯的C-MKE模型，即

其中，1、2、3、4分別表示“易用的”、“美觀的”、“有文化的”、“有趣的”4個意象值。通過對模型的分析，設計者可知道全局導航位置選擇底部(12)等為影響界面“易用性”最為關鍵的設計細節。根據自變量前的偏相關系數的絕對值可知，文字大小選擇適中11(0.79)對“易用性”具有最大影響力，線面圖標11(0.69)對“有文化的”的感性意象具有最強影響。

2.6 模型效用檢驗

為了驗證KE模型的效用，選擇10個實驗樣本以外的2個首頁樣本進行驗證調查，樣本如圖5所示。

圖5 模型驗證的實驗樣本

首先分別應用上述的4個C-MKE模型對2個驗證樣本進行感性預測，再以“易用的”、“美觀的”、“有文化的”和“有趣的”4類感性作為標準意象，由10名測試者對這2個樣本的總體意象予以評價，采用SD法5點李克特量表打分，分別得出預測值和實驗值，再對預測值與實驗值進行單一樣本T檢驗。設定顯著性水平=0.05，若實際顯著性水平<0.05，則此預測值可以被接受。通過T檢驗(表2)，結果均滿足<0.05，表明預測結果與實驗結果無顯著性差異，說明C-MKE模型具有可靠的效用，其能幫助設計者快速并且準確地找到影響感性的關鍵設計特征，從而設計出能滿足用戶感性訴求的交互界面。

表2 模型預測值和實驗實際值

2.7 交互界面首頁設計

根據4個感性意象的C-MKE模型，將關鍵的交互界面設計變量進行歸納總結出適用于苗族銀飾文化傳播APP首頁的交互界面設計參考性結論(表3)。

表3 交互界面設計參考性結論

將表3的交互界面設計指導性結論作為苗族銀飾文化傳播APP首頁設計的重要依據，結合C-MKE中的偏相關系數的綜合考慮，確定參考性方案：界面的主體色為土黃色、圖標樣式為線面圖標、文字樣式為字體大小適中；在界面布局設計方面，全局導航位置確定為底部位置、界面布局樣式為混合樣式；在界面風格方面，標題欄背景色彩確定為黃色且有文化性底紋的樣式。最后根據苗族銀飾文化內容，以及確定的首頁功能，并結合蘋果IOS10的官方人機交互界面設計指南進行設計得出最終的設計方案，結果如圖6所示。

圖6 苗族銀飾文化傳播APP首頁

3 結束語

針對交互界面設計缺乏對用戶感性訴求的滿足，本文首先確定了用戶對于目標交互界面的感性需求意象，并通過類目層次法推論獲取交互界面的設計項目，然后在與文化類交互界面進行對比分析基礎上，分類整理出交互界面的設計變量。其次，在將交互界面設計定性變量通過參數化處理后轉化為定量變量后，運用多元線性回歸分析建立起感性意象與交互界面設計變量之間的映射關系模型。進一步地，通過T檢驗法，驗證了模型效用是可靠的。最后，依據C-MKE模型推導出苗族銀飾文化傳播APP首頁界面設計的參考性結論，并進行了界面的創新設計。

基于C-MKE模型的界面設計方法從用戶感性訴求出發，通過定性推論的方式建立起設計細節與感性訴求的關聯，進一步通過映射模型的構建，定量化地將感性需求轉化成設計變量，將原來割裂的設計師的編碼過程及用戶的解碼過程進行融合，為設計師站在用戶感性需求的視角，客觀、高效地產生更多設計方案提供了新途徑和方法，協助提升用戶的滿意度和創新設計的市場競爭力，亦為其他產品的交互界面設計提供了借鑒和參考。

[1] NIELSEN J. Designing web usability [J]. New Riders Indianapolis, 2000(1): 86-88.

[2] O’MALLEY G, DOWDALL G, BURLS A, et al. Exploring the usability of a mobile app for adolescent obesity management [J]. JMIR mHealth and uHealth, 2014, 2(2): e29.

[3] HADIANA A. Kansei analysis of interface’s elements for mobile commerce application [C]//International Conference on Information and Communication Technology. New York: IEEE Prees, 2016: 1-4.

[4] FU G, WEI L L, CAO Y, et al. Optimization design of a webpage based on kansei engineering [J]. Human Factors & Ergonomics in Manufacturing & Service Industries, 2016, 26(1): 110-126.

[5] WANG K C. The evaluation of e-commerce homepage design through grey-based kansei engineering scheme [J]. Journal of Grey System, 2011, 23(4): 391-404.

[6] 郭伏, 李美林, 屈慶星. 基于感性工學的電子商務網頁外觀設計優化[J]. 人類工效學, 2013, 19(3): 56-60.

[7] QU Q X. Kansei knowledge extraction based on evolutionary genetic algorithm: an application to e-commerce web appearance design [J]. Theoretical Issues in Ergonomics Science, 2015, 16(3): 299-313.

[8] 張情華, 王以群. 網頁人機界面感性化研究[J]. 電腦知識與技術, 2011, 7(2): 779-781.

[9] 邱滸. 黔東南苗族銀飾紋樣中的人物紋和動物紋[J]. 南京藝術學院學報: 美術與設計, 2015(6): 121-125.

[10] 譚坤, 劉正宏, 李穎. “非遺”傳承創新語境下的APP界面設計研究[J]. 包裝工程, 2015, 36(8): 60-63, 115.

[11] NAGAMACHI M. Kansei engineering as a powerful consumer-oriented technology for product development [J]. Applied Ergonomics, 2002, 33(3): 289-94.

[12] HONG S W, HAN S H, KIM K J. Optimal balancing of multiple affective satisfaction dimensions: a case study on mobile phones [J]. International Journal of Industrial Ergonomics, 2008, 38(3): 272-279.

[13] ZHAI L Y, LIPHENG K, ZHONG Z W. A rough set based decision support approach to improving consumer affective satisfaction in product design [J]. International Journal of Industrial Ergonomics, 2009, 39(2): 295-302.

[14] 蘇建寧, 王瑞紅, 趙慧娟, 等. 基于感性意象的產品造型優化設計[J]. 工程設計學報, 2015, 22(1): 35-41.

Interface Design Based on C-MKE Model

YANG Mingqing, ZHAO Rui, XIAO Hualiang, LIN Li

(School of Mechanical Engineering,Guizhou Univesity,Guiyang Guizhou 550025, China)

In order to meet the users' kansei requirements for the interfaces design, a design method of interface based on C-MKE model is proposed. Firstly, the category classification (CC) in the theoretical frame work of the kansei engineering (KE) was used to infer the interactive interface design project, and the design variables space is established based on the comparative analysis with the existing inter active interface.Secondly, constructing cognition space of the kansei images through the kansei image cognition experiment, in combination with the mathematical model equation (MM) to realize the mapping model between the interface design variables and the kansei image, furthermore verifying the validity of the model through T-test. Finally, based on the C-MKE model, the reference conclusions of the homepage interface design of the Miao silver jewelry culture communication APP are derived, and the interface is innovatively designed.

kansei image; kansei engineering; category classification; mapping model

TP 391

10.11996/JG.j.2095-302X.2018040635

A

2095-302X(2018)04-0635-07

2018-04-07；

2018-06-11

國家自然科學基金項目(51465007)

陽明慶(1973-)，男，貴州遵義人，副教授，碩士。主要研究方向為產品創新設計、認知交互及設計。E-mail：yangmq99@126.com

林 麗(1973-)，女，四川南充人，教授，博士，碩士生導師。主要研究方向為產品設計、感性工學、民間藝術。E-mail：linlisongbai@163.com