基于用戶體驗的教育類微信小程序界面視覺設計研究

發布時間：2022-10-11 10:27

摘要 (I)

Abstrct (II)

1緒論 (1)

1.1研究背景 (1)

1.2研究目的 (4)

1.3研究價值 (4)

1.3.1學術價值 (4)

1.3.2應用價值 (4)

1.4國內外相關研究 (4)

1.4.1國外相關研究 (4)

1.4.2國夕卜相關研究 (6)

1.5相關概念界定 (15)

1.6研究范圍、思路及方法 (15)

1.6.1研究范圍 (15)

1.6.2研究思路 (16)

1.6.3研究方法 (17)

1.7研究創新點 (17)

1.8研究框架 (18)

2界面視覺設計與用戶體驗理論研究 (19)

2.1界面視覺設計要素 (19)

2.1.1空間布局 (19)

2.1.2品牌內涵 (20)

2.1.3色彩 (20)

2.1.4圖形 (22)

2.1.5圖片 (23)

2.1.6文字 (23)

2.2界面視覺設計風格流變 (24)

2.3教育類微信小程序用戶體驗 (27)

2.4教育類微信小程序現狀 (27)

2.4.1國內教育類應用市場分析 (27)

2.4.2微信小程序視覺設計規范 (30)

2.5界面視覺審美心理轉化 (31)

2.5.1審美需要向用戶需求的轉化 (31)

2.5.2審美能力中用戶情感的轉化 (32)

2.5.3審美人格與用戶滿意度的相互轉化 (32)

2.6本章小結 (33)

3教育類微信小程序界面視覺設計新模式 (34)

3.1界面視覺中的用戶需求分析 (34)

3.1.1魅力質量理論與Kano模型 (34)

3.1.2用戶問卷調查 (36)

3.1.3核心價值提取 (37)

3.2界面視覺中的用戶情感分析 (39)

3.2.1用戶深度訪談 (40)

3.2.2訪談核心價值提取 (41)

3.2.3AT-one 模態分析 (42)

3.3教育類微信小程序界面視覺設計方法 (43)

3.3.1整體性設計(HHolistic design)方法(HD) (43)

3.3.2目標性設計(Purposeful design)方法(PD) (44)

3.3.3傳播性設計(Communicative design)方法(CD) (45)

3.3.4隱喻性設計(Metaphorical design)方法(MD) (46)

3.3.5反思性設計(Reflective design)方法(RD) (47)

3.4構建教育類微信小程序界面視覺設計模式 (48)

3.4.1舊模式 (48)

3.4.2提出新模式 (49)

3.5本章小結 (50)

4基于新模式的視覺實踐設計 (51)

4.1品牌概況 (51)

4.1.1品牌風格定位 (51)

4.1.2用戶畫像 (52)

4.2藝碩升微信小程序界面視覺設計 (53)

4.2.1界面空間布局設計 (53)

4.2.2界面視覺元素設計 (58)

4.2.3界面視覺設計詳情展示 (60)

4.2.4界面效果展示 (70)

4.3界面視覺用戶滿意度測試 (72)

4.4本章小結 (74)

5教育類微信小程序界面視覺設計模式評估 (75)

5.1評價體系構建原則 (75)

5.2構建評價指標體系 (76)

5.2.1評價體系層級 (76)

5.2.2評價因子的結構層次 (76)

5.2.3評價指標的分析 (77)

5.3判斷矩陣構造及權重計算 (78)

5.3.1構造判斷矩陣 (78)

5.3.2權重系數及一致性檢驗 (78)

5.3.3主觀評價因子的權重 (82)

5.3.4主觀評價因子的評分標準 (82)

5.4定性評價結果 (84)

6結論 (85)

6.1研究的結論 (85)

6.2研究的局限性 (86)

參考文獻 (87)

附錄A教育類微信小程序用戶問卷調査 (91)

附錄B教育類微信小程序界面視覺設計評價體系 (95)

附錄C攻讀碩士研究生學習階段發表論文 (96)

致謝 (97)

1緒論

1.1研究背景

（1）教育線上化的發展趨勢

體驗經濟時代下，互聯網仍處于快速發展階段，據 2021 年 9 月 15 日中國互聯網絡信息中心（CNNIC）發布的第48次《中國互聯網絡發展狀況統計報告》數據顯示。截至2021 年6月，我國網民①規模達10.11億，較2020年12月增長2175萬，互聯網普及率達71. 6%, 較2020年12月提升1.2個百分點②。與此同時，隨著支付方式、購票平臺等服務的線上化，手機成為人們生活中不可或缺的一部分。（如圖1. 1所示）截至2021年6月，我國手機網民的人均每周上網時長③為26. 9個小時，較2020年12月提升0.7個小時。

網民人均每周上網時長單位：小時

30.8

數據來源：CNNIC中國互聯網發展狀況統計調查 2021.6

圖1. 1 2018年至2021年中國網民人均每周上網時長柱狀圖

（圖片來源：作者自制）

如此龐大的用戶數量為手機應用提供了廣闊的發展空間，應用軟件相繼涌起一波又一波熱潮，手機用戶不斷接觸到各類別的APP（Application，移動互聯網應用）。近年來, APP在為大眾生活提供便利的同時，也被提出一些質疑，例如占據手機內存、申請獨立賬號步驟多、部分軟件使用頻率低但還需要時常更新等等。APP在架數量總體也呈現出下降的趨勢（如圖1. 2所示），截至2021年6月，國內市場上可監測到302萬款在架APP，與2020年12月相比減少43萬款，下降12.5%。

①《中國互聯網絡發展狀況統計報告》對術語界定：網民指過去半年內使用過互聯網的六周歲及以上我國居民。

②中國互聯網絡信息中心（CNNIC）.中國互聯網絡發展狀況統計報告[R].北京：中央網絡安全和信息化領導小組辦公室,2021.48.

③《中國互聯網絡發展狀況統計報告》對報告術語界定：人均每周上網時長指過去半年內網民一周平均每天上網小時數*7 天。

此外，中共中央辦公廳、國務院辦公廳 7 月 24 日印發的《關于進一步減輕義務教育階段學生作業負擔和校外培訓負擔的意見》，標志著“雙減”政策正式落地。“雙減” 意見的出臺，也為自主學習、線上學習提供了更多的時間和機會。越來越多的教育機構及學習者選擇通過線上平臺進行學習，教育線上化是對有學習需求用戶的響應，對學習時間和地點受限的學習者而言，可有效提高學習效率，因而教育類應用的發展也受到了更廣泛的重視。

APP在架數量單位:萬款

42! 452

2018.6 2018.12 2019.12 2020.6 2020.12 2021.6

數據來源：工業和信息化部 2021.6

圖1.2 App在架數量柱狀圖

（圖片來源：作者自制）

（2）微信小程序的發展優勢微信小程序是順應社會發展，與時代流行風向相互交融的應用形式，據艾媒數據中心對微信數據的統計，（如圖 1.3 所示）2020 年 1 月 20 日至 2 月 13 日中國微信的政務類微信小程序用戶環比增長 60%，教育類用戶環比增長 82%，醫療類用戶環比增長高達 347%。各類型輕應用隨著科技和時代的發展應運而生，小程序采用 PHP 開發模式，相比傳統 App 開發成本更低、效率更快，在微信、淘寶、百度等軟件中相繼被開發。微信的天然用戶群為微信小程序創造了較好的發展空間，同時，微信小程序表現出來的更加便捷高效、功能多樣、產品更新迭代快等特點，各行業紛紛踴躍將產品業務拓展進入微信小程序。

■用戶環比增長％

400

數據來源：微信艾媒數據中心統計

圖1.3不同類別微信小程序用戶環比增長柱狀圖

（圖片來源：作者自制）

（3）界面視覺的亟待改善目前國內應用市場呈現用戶研究與視覺設計相分離的現狀（如圖 1.4 所示），產品團隊有意識的將用戶研究放在產品初期調研環節，但過度專業化的分工導致各工種間無法較好的融合。對多數開發者和管理者來說，設計僅是為功能裝點視覺效果而已。團隊中，研究者只負責研究，設計師只負責設計，界面視覺設計僅依靠用戶研究員的書面總結報告，視覺設計工作者并不參與到用戶研究的過程中。如此分工，導致最終呈現的設計方案往往與用戶對視覺的需求相悖。

市場調查

形式設計

由圖形/GUI和工

業設計師執行

項目任務

項目負責人/產品

經理等領導層

圖1.4研究與設計分離的設計過程現狀分析圖

（圖片來源：作者自制）

微信小程序的“界面視覺設計”作為產品與用戶溝通的最直觀方式，是品牌與產品的鏡子。微信小程序現狀調研過程中發現，（如圖 1.5 所示）界面視覺中，指向性不夠明顯的功能區域、搭配不夠和諧的色彩、不易識別的圖標，界面視覺的不美觀、不完善、不適感大大降低了用戶體驗。綜合以上背景，更加堅定了教育類微信小程序界面視覺設計的研究方向，界面視覺設計作為影響用戶粘性的重要因素，將用戶內心需求轉化為現

實需要是視覺設計工作者迫切需要研究的問題，有效的界面視覺設計方法及模式亟待被廣泛的關注和研究。

1.2研究目的

在前人大量研究的基礎上，面向微信小程序這一新興輕應用形式，以用戶體驗視角出發，探究界面視覺中用戶審美心理的轉化，并提出可供未來相關研究及設計實踐領域參考的界面視覺設計理論方法及設計模式。本文具體的研究目的如下：

學術界對于微信小程序界面視覺設計的研究缺乏系統的方法指導。因此，對教育類微信小程序界面視覺設計基本理論的梳理和模式的提出，可豐富相關內容的研究，為界面視覺設計及用戶體驗領域的研究者提供更多可供參考的思路。構建界面視覺設計方法及模式，幫助教育類微信小程序及其他類型界面的視覺工作者更準確的把握界面視覺中的用戶需求、情感及滿意度，達到提高用戶體驗的愉悅感和流暢度的效果。

1.3研究價值

1.3.1學術價值

（1）以深層審美心理學與移動用戶間相互轉化的關系為出發點，提出界面視覺中的審美轉化方法。

（2）提出在界面視覺設計過程中加入用戶對界面視覺需求、情感、滿意度的研究步驟，以此提高視覺設計工作者對用戶的洞悉。

（3）提出適用于教育類微信小程序界面視覺設計方法，為構建模式及界面視覺設計提供理論參考。

1.3.2應用價值

通過構建教育類微信小程序界面視覺設計模式，為教育類微信小程序的利益相關者創造增值效益，提供可供參考的界面視覺設計模式。同時，設計模式有助于視覺設計師更高效的與其他界面設計工種的人員合作，為視覺設計工作者提供設計流程的新思路。

1.4國內外相關研究

首先從用戶體驗、界面視覺設計、界面設計原則三個維度對國內外相關文獻進行綜述分析，并借助Citespace文獻分析軟件對用戶體驗及界面視覺設計相關檢索文獻的關鍵詞突現、關鍵詞聚類以及年份等進行分析。

1.4.1國外相關研究

（1）基于用戶體驗的界面視覺設計研究維度

國外基于用戶體驗維度的研究相比國內較為完善，由艾倫•庫伯（Alan Cooper）提

出，羅布特•萊曼(Robert Reimann)帶領開發并優化目標導向設計方法①(Goal-Directed Design)，雖然該方法提出時被應用于交互設計領域，但在界面視覺設計的研究中，為界面的頁面空間布局提供了理論指導，有利于在設計層面確定產品各功能的優先級排布，為用戶提供舒適的層級，為界面功能框架在頁面中的再設計提供了新思路，是值得借鑒的核心設計原則。

此外，國外對于界面視覺設計和用戶體驗相關研究開始的都比較早，以源自Science Citaton Index Expended(SCA-Expanded)，Social Sciences Citation Index(SSCI)， Arts&Humanities Citation Index(A&HCI) 的 373篇“界面視覺設計”相關國外文獻為主，提取其中以“用戶體驗”理論體系展開研究的文獻，進行Citespace可視化分析，得出的中心性關鍵詞以及高頻關鍵詞(如圖1.6所示) 。

中心性(By Eigen. Centrality)關鍵詞由深及淺依次為“ attention ”、 “information”、“disability”、“walking performance”、“gait”、“distraction”、 “eye movement”、“perception”、“visual search”、“novice"等。頻率(By Frequency) 關鍵詞依次為 “sys tem”、“a tt ent ion”、“environmen t”、“visualiza tion”、 “therapy"、“impact” 等。

通過可視化圖譜的分析可以看出，國外基于用戶體驗的界面視覺設計研究的文獻中，核心關鍵詞為注意力、信息、障礙、步態分析、工作性能、干擾、視覺研究、感知、初學者等，關鍵詞頻率由高到低依次是系統體系、應用環境、用戶注意、視覺注意、可視化等。分析所得關鍵詞均與用戶研究相關，以上關鍵詞的提煉對本研究影響因子的提煉有借鑒和參考的作用。

①(美)艾倫•庫伯.Abou t Face4:交互設計精髓:紀念版[M].北京：電子工業出版社,2020.5.

（2）界面設計原則維度

通過對 Brad Frost 提出的“原子設計”相關文獻研究，對視覺界面設計的認知從抽象走向具體，對組件的認識更加清晰化。此外，設計師 Robin Williams 提出的平面設計基本原則、核心文獻 InterfaceDesignofGISSystemBasedonVisualComplexity 提出的設計設計策略、Scott?Evenson提出的交互設計三大基本原則以及Larry • Keeley 提出的功能性、可行性、稱許性設計原則在界面設計原則研究中具有極大的參考價值（如表 1.1所示）。

表1.1可供界面設計原則參考的相關理論（表來源：作者自制）

觀點來源觀點提出研究維度影響因素

Brad Forst 在 2013 年將 “原子設計”方法論應用于界面設計中 Brad • Frost 界面設計受模塊化設計的啟發“原子設計”方法論，原子設計的核心是將其分為不同的框架，內容層面包括了原子、分子、有機體、模板和頁。

1-可復用性

2-豐富性

《寫給大家看的設計書》 Robin • Williams 平面設計 1-對齊

2-對比

3-親密性

4-一致性（重復）

《Interface Design of GIS System Based on Visual Complexity》 Siyi Wang Chengqi Xue Jing Zhang

Junkai Shao 界面設計提岀了 GIS界面優化復雜性的設計策略

1-復雜性（Complexity）認知心理學視覺復雜性

2-人性化（Humanization）

3-智能化（Intelligence）

《視覺可用性：數字產品

設計的原理與實踐》 Scott • Evenson 交互設計 1-一致性(Consistency)

2-層級性(Hierarchy)

3-個性化(Individuation)

《創新十型》 Larry • Keeley 創新設計 1-功能性(Capability)

2-可彳亍性(Viability)

3-稱許性(Desirability)

1.4.2國內相關研究

（1）用戶體驗維度

國內對于“用戶體驗”的相關研究已逐步貫徹在眾多學科領域中，本研究在知網2 萬余篇與用戶體驗相關的文獻中挑選 500 篇 2000 年至 2022年的哲學與人文學科中文文獻，借助 Citespace 進行可視化分析。500篇用戶體驗相關文獻的分析結果（如圖 1.7 所示），Modularity聚類模塊值（Q值）=0.6639, （Q〉0.3 —般意味著聚類結構顯著）該分析結果聚類結構顯著。Silhouette聚類平均輪廓值（S值）=0. 9572（一般認為S〉0. 5聚類

類就是合理的，S>0. 7意味著聚類是令人信服的）該分析結果聚類令人信服。

戶體驗

海性產為設計

,。。°人機交互"

，潮覺設計‘，?pp 4 2新媒體’

「用戶'研究* .邁動，性，.

”界面設計，""體冬設，計「 "u設甘」夢字體驗囲令體，驗營雷

'”交互設計，

圖 1.7 用戶體驗相關文獻 Citespace 可視化分析

（圖片來源：作者自制）

對分析結果進亍整理（如表1.2所示），關鍵詞出現的頻次體現出，用戶體驗在哲學與人文學科中依次與以下幾方面進亍融合，分別為交互設計、服務設計、體驗設計、界面設計、產品設計、ui設計、App、人工智能、用戶研究、視覺設計、人機交互、情感體驗、虛擬現實、展示設計、體驗、新媒體、可用性、品牌設計、用戶需求等。對文獻關鍵詞的整理肯定了用戶體驗在界面視覺設計中的研究價值的同時，為后續探索提供了方向，通過對關鍵詞中情感體驗、用戶研究、品牌設計、用戶需求等方面進亍大量的研究，為界面視覺設計方法的提出提供了理論依據。

表 1.2 文獻關鍵字段頻次整理（表來源：作者自制 )

序號文獻關鍵字段出現頻次序號文獻關鍵字段出現頻次

1 用戶體驗 301 11 視覺設計 7

2 交互設計 54 12 人機交互 7

3 服務設計 21 13 情感體驗 7

4 體驗設計 19 14 虛擬現實 7

5 界面設計 17 15 展示設計 7

6 產品設計 15 16 體驗 7

7 ui 設計 15 17 新媒體 7

8 App 11 18 可用性 6

9 人工智能 10 19 品牌設計 4

10 用戶研究 9 20 用戶需求 3

在用戶體驗維度的相關文獻中（如表1.4所示），龔柏茂、鄧蘇婷在色彩、字體、圖

形、版式四個方面提出色彩運用的協調性、強化字體設計指向性、重視圖形設計的功能

性以及增強版式設計的定向性四個設計指導原則①，對本研究視覺設計方法的提出具有一定意義上的參考價值。孫雄飛、吳祐昕提出的保持界面簡潔以提升用戶操作效率以及界面信息傳遞效能②，都是對界面設計風格以及信息布局和顯現的深度思考。孟慶林、許世虎、曾梵影、劉文亞等學者在用戶體驗層面運用多種用戶研究方法進行目標用戶需求的探索，為本研究提供了方法指導。江亞妮、陳娟、陳星海、楊煥、廖海進等人的文獻發表時間雖然與筆者對該方面研究的時間間隔比較久，但其提出的觀點及探討的維度仍是經得起時間考驗的，筆者在其中收獲了很多對本研究有益的思維邏輯及方法論。但當前文獻中基于用戶體驗的界面視覺設計大多停留在表現層，筆者將在本研究中將框架層與表現層共同作為界面視覺的探討范圍。

（2）界面視覺設計維度

通過對知網392篇“界面視覺設計”高度相關的文獻進行分析，共得出（如圖1.8 左圖所示）視覺設計、界面設計、交互設計、用戶體驗、交互、App、用戶界面及人機交互等8 個關鍵聚類，聚類結果表明國內學者對界面視覺設計的研究主要在視覺、交互、用戶三個維度。突現關鍵詞（如圖1.8右圖所示）顯示2010年至2012年國內相關文獻開始重視用戶這一關鍵主體，起初體現在室內設計等領域，強調以人為本，2011 年起與界面相關的研究逐漸突現，強調人機交互以及網站和圖形元素。2014 年開始對界面扁平化風格以及App應用有較強深度的研究,2015年國內的相關文獻才開始逐步重視用戶體驗相關的研究，相較國外對該方面的研究有些滯后。2016 年至2021年被逐步廣泛應用于界面的視覺傳達領域（包括插畫、剪紙、電子書籍等）以及新媒體領域等其他領域。

Top 23 Keywords with the Strongest Citation Bursts

Keywords Year Strength Begin End

圖 1.8 國內文獻關鍵詞聚類（左圖）突現關鍵詞（右圖）可視化分析

（圖片來源于：作者自制）

2010年起，學者對界面視覺設計展開思考研究的文獻數量開始呈上漲趨勢（如圖1.9

①龔柏茂，鄧蘇婷.移動應用端中“新人禮”交互界面設計J].浙江師范大學學報（自然科學版），2022,45（01）:35-41.

②孫雄飛，吳祐昕.基于用戶心理模型的短視頻類App界面設計研究一一以快手為例[J].設計,2021, 34（04） :48-50. 所示），直至2021年10月，共計274篇。其中2010年至2011年平均每年的發文量在9 篇左右， 2012年至2014年的平均每年發文量上升至16篇左右， 2015年發文量上升至 32篇，之后逐年上升，直至2017年達到近10年的最高值40篇，之后研究趨勢開始下滑，2020年回落至與2015年相近的數量。

從“界面視覺設計”相關文獻發表數量的趨勢可以看出，學者近年來對界面視覺設計的研究熱情有所降低，與應用市場持續不斷投入移動應用數量很難成正比。這一現象或許與日新月異的互聯網大環境相關，學者對其理論的研究跟不上移動互聯網更新迭代的速度，但越是如此，學者才更應該發現其中難以找尋的規律，為界面視覺設計提供可供參考的設計模式。互聯網時代瞬息莫測，但即便微信小程序的熱潮退去，在此基礎上所提出的界面視覺設計方法及模式的思考，也將對此后的界面視覺設計理論方面的研究有一定的積極意義。

圖片來源于：作者自制）

（如表1.4所示）岳婉琪提出的視覺設計需求分析中的用戶導向需求、情感需要①，劉美杰提出的品牌一致性、用戶指導性以及精神至上的情感化設計②，李怡云提出的整體和諧性③，陳亞男提出的圖標圖形的隱喻性④與本研究的設計模式核心觀點高度相關。還有部分學者有針對性的對微信小程序、App、應用程序展開界面視覺相關的設計研究（如表1.3所示），其中張孜涵基于情感體驗提出的美觀性、功能性、舒適性、安全性⑤四個教育類微信小程序界面設計原則對界面視覺設計方法的提出有一定的啟發。此外，魏雅麗在界面視覺設計研究中用到的AHP層次分析法也為本文提供了研究方法的思路。

①岳婉琪.基于新媒體時代的企業網頁界面視覺設計[D].福州:福建師范大學,2018.

②劉美杰.基于城市特色文化的掌上公交App界面視覺設計研究[D].天津:河北工業大學,2017.

③李怡云.視錯覺在界面視覺設計中的應用探析[D].濟南:山東大學,2018.

④陳亞男.公益平臺類App界面視覺設計研究[D].武漢:武漢紡織大學,2017.

⑤張孜涵.基于情感體驗的教育類微信小程序界面設計研究[D].武漢:湖北工業大學,2021.

表 1.3 界面視覺設計相關文獻分析（表來源：作者自制）

作者/研究年份研究類別微信小程序主題

App 應用程序

張爽（2021）學前教育類 ◎ - -

張孜涵（2021）教育類 ◎ - -

李靚（2021）心理疏導類 ◎ - -

侯芊如（2021）景區類 ◎ - -

李瑩（2020）城市旅游類 - ◎ -

任悅（2020）購物類 - ◎ -

錢靜（2020）網購類 - ◎ -

盧曉燕（2019）地方性新聞 - ◎ -

李瑩（2019）公共服務類 - ◎ -

張曼玉（2019）寵物類 - ◎ -

梅雪瑩（2019）老年用戶智能手機購物類 - - ◎

淡珊（2019）旅游類 - ◎ -

陳婭雯（2018）數字閱讀類 - - ◎

李妙蘭（2018）本土農家樂 - ◎ -

陳亞男（2017）公益平臺類 - ◎ -

鄭一舟（2017）傳統文化類 - - ◎

李爽（2016）旅游分享類手機應用 - - ◎

楊少宸（2016）垂直化電商導購網站服飾類 - - ◎

秦帥（2016）數字音樂軟件類 - - ◎

劉振艷（2015）教育公益眾籌類 - ◎ -

徐曼鷺（2015）基于 IPAD 的閱讀類 - - ◎

牛琳（2014）手機新聞類 - ◎ -

殷佳麗（2014）兒童互聯網產品類 - - ◎

郝曉（2013）手機閱讀類 - - ◎

（3）界面設計原則維度

此外，本次研究的界面設計原則相關文獻共計239篇，文獻數量呈波動趨勢（如圖 1.10 所示），2005年開始呈波動上升趨勢，2015年發文量達到峰值 33篇，2017 年下滑至 20 篇，2018 年回升至 29 篇后逐年減少，直至 2021 年對界面設計原則的相關研究文獻僅有 7篇。在界面視覺設計原則等理論研究方面，除去少量學者對通用設計范式的提出和通用原則的探討，受界面更新迭代速度太快以及眾多新型界面風格的沖擊的影響，很少有學者持續不斷關注時代產生的設計難題。提倡研究者關注當下的生活和設計方式，關心設計真正服務的主體“用戶的體驗”。通過全方位多角度的考量，讓設計服務于用戶體驗，而不是一味追求與用戶體驗無關的形式感。

圖 1.10 1991 年至 2021 年“界面設計原則”相關文獻發表年度分布

圖片來源于：作者自制)

界面視覺設計原則維度的相關文獻中，陳星海提出的以原子設計理念為基礎的“有化學反應的原子設計方法①”對本文有較大的借鑒意義，殷佳麗基于兒童特征提出的情感化視覺設計原則②值得本研究深入思考和借鑒。此外，江亞妮基于用戶體驗提出的界面視覺設計原則③，肖紅、郭歌提出的簡潔易用的界面視覺設計總原則④，淡珊提出設計原則中的一致性、情感性原則⑤，郝晶、孫亞云針對色彩認知提出的設計原則⑥，以及任悅等人基于斯克萊特•艾文森提出的交互設計三大基本原則⑦均對本文有借鑒意義。

表1.4 本研究相關度較高的國內相關文獻整理 (表來源：作者自制)

年份作者涉及到的研究維度研究方向/提出的核心觀點

用戶體驗界面視覺設計界面設計原則

2021.12 龔柏茂

鄧蘇婷 ◎ ◎ ◎ 1-色彩運用的協調性

2-強化字體設計的指向性

3-重視圖形設計的功能性

4-增強版式設計的定向性

2021.10 賈彎 ◎ ◎ 1-沉浸式的體驗

2-便捷性的操作

2021.08 江梅梅 ◎ 1-色彩運用

2-圖形提煉

3-民族認同感

4-藝術美感

2021.07 趙佳欣劉雙花 ◎ 1-美觀趣味

2-內涵價值

2021.07 宋琛 ◎ 賦予圖案元素更高的功能引導作用

2021.02 孫雄飛 ◎ 1-保持界面簡潔提升用戶操作效率

①陳星海.移動應用界面視覺設計美學發展及其設計方法研究J].裝飾,2020. 01. 022.

②殷佳麗.基于情感化設計的兒童互聯網產品界面視覺設計研究[D].蘇州:蘇州大學,2014.

③江亞妮.基于用戶體驗的移動應用界面視覺設計的研究[D].上海:東華大學,2016.

④肖紅，郭歌.多感官人機交互界面的視覺設計原則J].包裝工程,2012,33(08):35-37+48.

⑤淡珊.絲路文化旅游App界面視覺設計研究[D].西安:西安建筑科技大學,2019.

⑥郝晶，孫亞云.面向學齡前兒童的App界面視覺設計原則[J].設計,2015 (03) : 120-121.

⑦任悅.基于用戶體驗的購物App界面視覺設計研究[D].沈陽:沈陽建筑大學,2020.

表 1.4 本研究相關度較高的國內相關文獻整理（表來源：作者自制）

年份作者涉及到的研究維度研究方向/提出的核心觀點

用戶體驗界面視覺設計界面設計原則

吳祐昕 2-產品易用性和信息傳遞效能

2020.11 孟慶林 ◎ ◎ ◎ 1-加強界面的合理化應用

2-App 設計開發中運用用戶體驗

3-界面操作應簡約易用

4-視覺外觀與功能的一致性

5-增強圖標的隱喻性

6-完善社交功能，滿足用戶多元需求

2020.08 李瑩 ◎ ◎ 1-賦予界面設計以文化價值

2-盲目加入廣告植入影響用戶的使用感受

3-保證可用性同時關注文化內涵

2020.04 徐嘉莉 ◎ ◎ 1-老年群體界面設計準則

2-易理解性、易操作性、美觀性、沉浸式

2020.01 許世虎

曾梵影 ◎ ◎ ◎ 1-通過界面設計提升用戶粘性

2-滿足簡易性、一致性、高效性、有效性、

友好的反饋原則

3-提升感知有用性、易用性、互動性

2020.06 黃宇瓊 ◎ ◎ 通過對頁面信息架構、功能、布局等設計實

現湘繡文化傳播、品牌推廣

2020.06 吳彬 ◎ ◎ 1-色彩、文字、圖標、圖片、空間、情感

2-用戶感知、產品屬性、信息架構

3-個性化、人性化的設計風格

2020.04 任悅 ◎ ◎ ◎ 1-一致性

2-層級性

3-個性化

2020.05 錢靜 ◎ 1-布局

2-視覺要素

3-圖形

2020.05 魏雅麗 ◎ ◎ 1-層次分析法

2-構建模糊綜合評價法模型

3-減少用戶心智模型和設計師概念模型的差距

2020.05 曹粲 ◎ ◎ 1-注重圖標的表意性與審美性原則

2-詮釋傳統文化元素原則

3-與設計要素相呼應原則

2020.02 毛舒

肖龍 ◎ 1-微信分眾優化設計

2-界面再布局

3-文字優化設計

4-強化色彩識別

5-突出圖形應用

2020.01 陳星海 ◎ ◎ ◎ 1-簡易性、一致性、連貫性、適當的隱喻性、復雜性

2-設計美學（客戶參與度/再訪率/忠誠度）

3-品牌特性

2019.09 楊煥 ◎ ◎ 基于用戶體驗，提出移動應用界面設計創新

表1.4 本研究相關度較高的國內相關文獻整理（表來源：作者自制）

年份作者涉及到的研究維度研究方向/提出的核心觀點

用戶體驗界面視覺設計界面設計原則

陳星海方法模型①

2019.05 淡珊 ◎ ◎ ◎ 1-易用性原則

2-一致性原則

3-情感性原則

4-直觀性原則

5-美觀性原則

2019.04 莫小慧 ◎ ◎ 基于 Kano 模型對應用進行需求調研

2018.05 湯汪艷 ◎ ◎ 從用戶的情感、感官、習慣分析等層面分析

2018.04 劉文亞 ◎ ◎ 1-目標用戶需求分析、針對性設計

2-卡片分析法輔助結構框架設計

3-可用性測試

2018.06 李怡云 ◎ ◎ ◎ 1-用戶中心原則

2-易用原則

3-版式控制

4-視覺平衡

5-顏色搭配

6-整體和諧性

7-獨特個性魅力

2018.05 李妙蘭 ◎ ◎ ◎ 1-體現慢生活理念

2-具備本土農家文化特征

3-符合大眾審美及視覺習慣

4-排版方式規范

5-適當的小動態

6-層級關系明確

2017.12 劉美杰 ◎ ◎ 1-界面設計美學觀

2-品牌一致性原則

3-以人為本的用戶指導性原則

4-移動端產品的可持續設計原則

5-精神至上的情感化設計原則

2017.05 王青嵩 ◎ ◎ 1-文字符號化、圖形化

2-色彩符號化、構成化

3-圖形指向性、抽象化

2017.04 張立 ◎ ◎ 1-畫面呈現與操作（界面美學的完整性）

2-隱喻性

3-風格、圖像、編排的一致性

2017.03 陳亞男 ◎ ◎ 1-圖標圖形的簡化設計

2-圖標圖形的識別性

3-圖標圖形的隱喻性

2016.09 翟佳佳張輝 ◎ ◎ 1-易用性

2-趣味性

3-藝術性

2016.06 江亞妮 ◎ ◎ ◎ 1-界面清晰可認知

①楊煥,陳星海.智能互聯時代下基于用戶體驗的移動應用界面設計研究J].設計,2019, 32（17）:38-40.

表 1.4 本研究相關度較高的國內相關文獻整理（表來源：作者自制）

年份作者涉及到的研究維度研究方向/提出的核心觀點

用戶體驗界面視覺設計界面設計原則

2-簡潔的視覺布局

3-層次邏輯分明

4-反饋及時

5-設計語言的一致性

6-用戶可控性

7-視覺平衡

2016.05 周熹 ◎ ◎ ◎ 1-簡潔性原則

2-一致性原則

3-個性化原則

2016.05 李爽 ◎ 文字、色彩、圖形、板塊布局

2015.11 胡杰萬萱李芳宇 ◎ ◎ 1-視覺感知（提供完善的界面導視）

2-視覺秩序（改變界面的瀏覽方式）

3-視覺審美（創造更多藝術時空）

2015.08 陳星海楊煥廖海進 ◎ ◎ 1-努力提高用戶的認知效率

2-界面內容信息的溝通效率

3-跨產品界面視覺的自適應設計效率①

2015.03 郝晶

孫亞云 ◎ ◎ 1-色彩豐富、鮮艷、適度

2-色彩運用的合理性、恰當性

3-利用色彩的視覺心理特性烘托氛圍

2014.12 牛琳 ◎ ◎ ◎ 1-符合人體視覺流程及最佳視域

2-保持界面的簡潔平衡

3-美學比例的合理利用

4-利用重復和韻律

5-利用變形和組合

6-利用虛實結合

2014.06 殷佳麗 ◎ ◎ ◎ 1-功能性原則

2-易用性原則

3-安全性原則

4-趣味性原則

5-益智性原則

6-體驗性原則

2013.04 陳亮 ◎ ◎ 1-易用性

2-規范性

3-布局的合理性

4-美觀性

2012.06 馮沖 ◎ ◎ ◎ 1-網格秩序化

2-圖像優先化

3-反饋明確化

4-設計美學化

5-感受人性化

6-體驗愉悅化

①陳星海，楊煥，廖海進.基于效率的移動界面視覺設計美學發展研究J].包裝工程,2015, 36（16） : 107-110.

表1.4 本研究相關度較高的國內相關文獻整理（表來源：作者自制）

年份作者涉及到的研究維度研究方向/提出的核心觀點

用戶體驗界面視覺設計界面設計原則

2012.04 肖紅郭歌 ◎ ◎ 簡潔易用的總原則

1-簡潔性與美觀性并存

2-統一性與多樣性并存

3-易用性與交互性并存

4-靜態與動態并存

2012.03 陳智 ◎ ◎ ◎ 1-應用形象的認知水平

2-應用界面的視覺吸引力

3-圖標設計的吸引力

4-實用性、易用性、觀賞性、流暢性

5-用戶繼續使用 App 的意愿

6-用戶主動向他人推薦App的意愿

1.5相關概念界定

表1.5 研究相關概念界定（表來源：作者自制）

名詞縮寫單詞概念界定

用戶界面 UI/GUI User Interface 指對軟件的人機交互、操作邏輯、界面美觀的整體設計，是系統和用戶之間進行交互和信息交換的媒介。本研究中的用戶界面指微信小程序的用戶界面。

用戶體驗 UE/UX User

Experience 1998 年 ISO9241-11 中將用戶一詞解釋為“與產品互動的人”； 20世紀90年代唐納德•諾曼（Donald Norman）最早提出，并廣泛推廣；2010年ISO9241-210國際標準人機系統交互的人機工程學中將用戶體驗定義為“用戶對產品、系統及服務因使用或預期而產生的人的感知和反應”①。在本研究中對用戶體驗的研究概念界定在用戶在使用教育類微信小程序前、中、后期的體驗感受。

用戶體驗設計 UED/UXD User

Experience

Design 以用戶為中心的一種設計方式。本研究是基于用戶體驗相關理論將用戶體驗的概念貫穿于教育類微信小程序界面視覺設計始終的設計研究。

界面視覺設計 IVD/VD Interface

Visual Design 本研究中的界面視覺設計指對教育類微信小程序用戶界面中

空間布局、內涵、色彩、文字、圖標等視覺要素展開設計。

1.6研究范圍、思路及方法

1.6.1研究范圍

1）界面視覺設計研究范圍

特指詹姆斯•格瑞特提出的用戶體驗五要素中的“表現層”以及“框架層”。

2）用戶研究范圍

①國際標準化組織 ISO (International Organization for Standardization)發布的 ISO9241-210 (First edition) 官方文件。

特指使用“教育類”微信小程序的相關用戶，在前期案例研究階段以及部分用戶研究階段也指代App等應用的相關用戶。

（3）教育類微信小程序研究范圍涵蓋對受教育者進行心智發展等教化培育的教育類微信小程序。

圖 1.11 研究范圍圖

（圖片來源：作者自制）

1.6.2研究思路

對界面視覺設計的研究，學術界從平面設計視角與用戶視角兩個角度著手。平面設計視角指從界面基本元素展開的視覺設計，主要有字體、字號、版式、色彩等；用戶視角指通過考察用戶使用時的情感、行為、心理變化等方面，從用戶體驗展開視覺設計。對界面視覺設計的研究基于用戶體驗視角，首先通過定量研究、文獻分析、對界面設計的界面視覺元素作出分析。其次通過對微信小程序的用戶需求的發掘，需求優先級的定性及排列，總結可切實提高用戶體驗的微信小程序界面視覺設計方法及設計模式。

研究以用戶體驗為中心，以教育類微信小程序為研究載體，探究充分理解用戶對界面視覺需求的設計方法及模式，研究過程分為以下幾個步驟：

第一步，在前人大量的界面視覺設計理論及實踐研究的基礎上，通過跨學科領域的研究，探尋用戶審美心理在界面視覺中的轉化方法。

第二步，通過定量和定性相結合的研究方式，將用戶審美心理在界面視覺中的三種轉化方法運用于教育類微信小程序界面視覺設計過程中。

第三步，提出本文研究范圍的界面視覺設計方法，并構建設計模式。第四步，運用本文提出的設計方法及模式進行設計實踐。

第五步，對提出的設計模式進行驗證。

1.6.3研究方法

(1)文獻研究法通過對大量國內外用戶體驗、界面視覺設計原則、界面視覺設計相關文獻資料的分

析，掌握其現有研究背景和研究現狀，積累豐富的教育類應用界面設計相關的理論知識，并且結合Citespace可視化科學圖譜工具對關鍵詞、熱點進行分析，為本研究提供廣闊、專業的研究視角。

(2)案例分析法

對現有教育類微信小程序及 App 做視覺化案例分析，整合歸納。

(3)問卷調查法及用戶訪談法通過問卷調查及用戶訪談全面地獲取用戶認知、態度、評價等方面的信息，以便對

教育類應用界面視覺設計的影響因素進行提取。

(4)跨學科研究法以用戶體驗為主，借鑒深層審美心理學、設計心理學等領域的研究成果和方法，多

視角審視本課題及設計實踐“藝碩升”微信小程序的界面視覺。

(5)層次分析法(AHP) 首先通過層次分析法對教育類微信小程序界面視覺設計的影響因素進行確定，其次建立層次結構，并邀請行業內高校專家及企業專家對因子進行賦值，計算得出權重后制定評分標準，最終對本研究的設計實踐進行評分。

1.7研究創新點

(1)理論創新以深層審美心理學與移動用戶間相互轉化的關系為出發點，提出界面視覺用戶審美轉化方法，分別是界面視覺用戶需求分析、界面視覺用戶情感分析以及界面視覺用戶滿意度測試，均以界面視覺設計角度對用戶展開研究，得出的結論更具有針對性。并提出整體性、目標性、傳播性、隱喻性、反思性五個教育類微信小程序界面視覺設計方法，為界面視覺領域的學者提供理論參考。

(2)實踐創新對界面設計行業中，界面視覺設計工作者不參與或不完全了解用戶研究相關工作的問題，提出具體的解決方案，即通過構建新模式，在界面視覺設計過程中，加入界面視覺用戶需求分析、界面視覺用戶情感分析以及界面視覺用戶滿意度測試等用戶研究環節，提高界面視覺設計工作者對用戶的洞悉。

1.8 研究框架

2界面視覺設計與用戶體驗理論研究

本章節首先對界面視覺設計要素、風格流變、用戶體驗進行闡述，分析并探究用戶體驗與界面視覺設計間相互依存、相互促進的關系。其次，探究界面視覺在新時代微信小程序應用形式下的設計現狀，最后通過對用戶深層審美心理學等領域的研究，得出界面視覺中，用戶審美心理轉化的方法，為下文研究提供理論基礎。

2.1界面視覺設計要素

良好的界面視覺設計，用戶不需要花費精力去了解系統的后臺是如何工作的以及背后的復雜程序，只需要利用界面與人體進行自然的交互，獲取所需的信息，即可完成任務。因而，應用功能覆蓋面的擴大和用戶需求的增多也為界面視覺的設計者和用戶帶來了巨大的挑戰。人們會自然而然的認為視覺設計是一件簡單且基于視覺設計師主觀思維的設計任務，這樣的認知顯然是有誤區的，視覺設計師應該將注意力集中在界面視覺所引起的操作行為“運作是否良好”以及“用戶體驗感優劣”這些面向使用者的問題上。

2.1.1空間布局

線框圖（Wireframe）是界面視覺設計過程中的重要一環，開發過程中，通過（如圖2. 1 所示）的線框圖對框架層中的信息設計、界面設計、導航設計進行布局和整合，為后期元素的設計提供引導，是化繁為簡且提高效率的設計工具。一直以來線框圖都是信息架構師和視覺設計師之間較為模糊的地帶，需要通過“協作”達到最終符合用戶行為和用戶心理的界面。對于本研究而言，教育類微信小程序的核心功能是傳播教育信息，因此對于空間布局的合理設計是研究的關鍵點。

圖 2.1 界面設計線框圖

（圖片來源：網絡）

2.1.2品牌內涵

傳達品牌的形象內涵是界面設計以及網頁設計最常見的戰略目標之一，想要傳達的品牌形象與實現視覺呈現的技術高度相關。例如，對于體現權威、技術型的品牌產品而言，使用動漫字體以及亮粉色等熒光色字體就顯得不合時宜。優秀的品牌識別會帶給用戶愉悅的使用體驗和深刻的品牌印象，以網易云音樂和QQ音樂兩大受廣大用戶喜愛的音樂軟件為例（如圖2. 2所示），界面中心視覺元素所選用的色彩都源自Logo的主色調，在用戶操作界面的過程中，主色調高頻次的出現，無形中會提高用戶心中對該品牌的識別度。同時，在整體統一的前提下，將品牌主色調進行多元化的應用，還可以使呈現形式更加新穎、豐富、具有層次感。品牌形象以適當的頻率和形式注入到界面元素中，更

圖 2.2 網易云音樂標志及圖標（左圖）和 QQ 音樂標志及圖標（右圖）（圖片來源：作者截圖）

2.1.3色彩色彩心理學被一代又一代的人所熟知并運用于各個領域中，極大的拓寬了其領域認知的邊界。英國色彩治療學家多蘿西•孫（Howard&Dorothy Sun）將色彩反映解讀（CRR）① 融入色彩治療中，充分體現色彩對于人身體、情感、心理、生活間的必然關聯，它能夠牽動人的情緒，使人產生激動、振奮、冷靜或憂郁這樣直觀的精神感受。色彩通過特定的實踐，可以達到揭露復雜的個人心理和情緒特點的作用，同時也為本研究在色彩方面提升用戶體驗提供了可能性。

在設計師積極地運用色彩的過程中，一些色彩搭配原則被廣泛提出，一部分是約定俗成的通用設計方案，另一部分是仍存在爭議的個人觀點。色彩的 6:3:1 黃金法則是一個簡單但高度運用于多領域的色彩運用法則，加之色彩具有隱喻性，不同色彩會因文化差異、民俗傳統、性格等多方面的不同帶給人不同的心理感受，嘗試對常見的色彩及情感進行分析（如表2.1所示）。

①（英）孫孝華.多蘿西•孫.白路譯.色彩心理學[M].上海:上海三聯書店,2017. 1

表 2.1 色彩情感分析及情緒體驗關鍵詞（表來源：作者自制）

分類情感分析情緒體驗關鍵詞

紅色(Red) 高純度，刺激性很強，給人備受鼓舞的感覺。熱烈喜慶熱情浪漫危險

橙色(Orange) 識別性很強，給人熱情、活潑、年輕化的心理感受。溫暖食物友好財富沖動

黃色(Yellow) 是色彩中明度最高的色相，色彩醒目性高。光輝明亮活潑權力華貴

綠色(Green) 大自然的色彩，刺激性不高，心理感受較為溫和。健康自然清新希望安全

青色(Cyan) 介于綠色和藍色之間，給人古典韻味的感受。莊重脫俗真誠清麗古樸

藍色(Blue) 注目性和識別性都不是很高，給人冷靜的感覺。平靜純潔清涼科技沉穩

紫色(Purple) 中性色調，是熱烈的紅色和冷靜的藍色調和而成。神秘高貴優雅浪漫妖艷

黑色(Black) 被部分年輕人所喜愛，是酷炫、理性的象征。深沉莊重嚴肅邪惡死亡

白色(White) 界面中多用于底色，給人干凈、整潔的氛圍感。純潔神圣干凈高雅冷淡

灰色(Gray) 介于黑色和白色之間的顏色，屬于無彩色系。平凡沉穩樸素冷漠簡樸

備注：地域文化層面的色彩認知不是本章節的重點部分，暫且不展開進行分析。

由于色彩在屬性、性格、情感等方面的多樣性，界面色彩的配色方案多樣，在對微信小程序界面配色進行調研后，（如表 2.2 所示）對微信小程序中的同色系配色、近似配色、對比配色以及互補配色進行了列舉，并對配色方案進行簡要分析。在案例調研及分析時發現，界面的配色方案如果可以與品牌形象一脈相承會使界面視覺更具整體性，當然這并不意味著要單一的去使用品牌色調，而是將品牌色調運用于主界面及界面關鍵視覺點，更易于在用戶心中產生品牌認同感。界面在設計前，應該整合與品牌內涵、形象聯系密切的、便于應用到整個界面視覺的配色方案。

表2.2微信小程序配色實例分析（表來源：作者自制）

采用同一種色彩的不同明度，形成一套顏色規范，在不同應用環境下搭配使用，不同的搭配方式可以呈現多種視覺效果。在傳達主題方面，同色系配色更為突出。

表2.2微信小程序配色實例分析（表來源：作者自制）

2.1.4圖形圖形由一些特定形狀的元素構成，特定圖形在界面中的運用可以讓用戶在理解特定內容時，產生相應的思考，從而簡化認知難度，快速理解界面想要傳達的內容。界面視覺中對圖形的應用大致可以分為形狀、圖標。

（1）形狀色彩與人類右側大腦相關，人的右腦主要負責感覺、情緒、創意和直覺，通過本能作出反應并通過內在的認知表達自己，與人的情緒、潛意識相關聯。而圖形與色彩是一對互補的力量，形狀主要與負責邏輯推理的左側大腦相關，是人們識別事物的首要方式，兩者的充分結合，可以在有限的用戶界面中產生無限的認知可能。

人們傾向于通過輪廓來識別對象，格式塔相似律指出，人們更容易將相似的項目聯系到一起（如圖 2.3 所示），在不提供任何提示時，圖 A 很容易能讓用戶知道接下來的形狀，而圖 B 則無從知曉，因為界面中形狀的應用能夠指引用戶更好的完成操作。

（2）圖標

圖標是基本且重要的視覺表達元素，在界面視覺設計中有著不可替代的作用。圖標在使用時，可以使用戶更加深刻、直接地了解產品的作用，使信息直接表意于用戶。圖標設計過程中，將圖標的大小保持相對一致性，便于設計時任意重組。現如今的圖標風格有面性、線性、線面結合、扁平化、擬物化等類型，還有標準、容器、漸變、3D、手繪、陰影等設計方式。

圖 2.3 格式塔案例

（圖片來源：作者自制）

2.1.5圖片

圖片指產品包含的專業指向性圖片以及所投放的廣告圖片。界面開發者以及界面設計師應對產品界面所展現的圖片作出統一規劃和相應的要求。對于研究的教育類應用而言，圖片內容首先應在思想上高度正確，傳播正確的價值觀，其次，為了提高用戶體驗感，大量出現圖片的界面應具有統一的視覺規范，以達到視覺統一的使用感受。無論是平臺發布的圖片還是用戶上傳的照片都需要對圖片背景、像素、規格有統一的規范。以經驗超市考研 App 為例（如圖 2.4 所示），平臺對圖片大小進行統一規范，風景配圖以及文字海報類配圖都應以相同的方式呈現在界面中，閱讀時整潔劃一的界面令人感到心情舒爽。

2.1.6文字

界面視覺設計師在與項目經理等相關部門溝通好文字信息后，在字體的選擇上，需要考慮版權等相應法律問題。對于正文而言尤其是本文所研究的教育類應用界面，文本會呈現在較大面積的區域并需要用戶長時間地注視。因此，該部分字體設計應以簡單為主，繁瑣的字體設計容易使大段的文本華而不實，更快的讓用戶產生視覺疲勞。這也是中文中的黑體，英文中的 Helvetica 等字體被國內外界面視覺設計廣泛使用的原因。需要強調的是，如果你所面對的是極具風格或有自身調性的品牌，這一點將需要根據實際情況重新定奪。

字體的選擇可以有效區分界面想要傳達不同類型的信息，字體間要有足夠的對比才能在需要的時候充分引起用戶的注意，但注意要適度。微信小程序的界面視覺中，對字

體有一定的限制，但微信平臺對字體方面的設定是一把雙刃劍，雖然限制了界面設計字

體效果的發揮，但可以讓微信小程序的整體視覺效果達到統一。

2.2界面視覺設計風格流變

（1）風格流變分析界面設計風格同時兼具多樣性和同一性的特點，設計呈現會因產品內涵的差異而迥然不同，同樣，同類產品也較容易出現界面趨于同質化的現象。風格的定義有眾多角度，本小節所探討的設計風格是以設計形式劃分，最先出現的界面設計風格是擬物設計風格，2007 年 1 月 9 日蘋果公司發布了擁有 iPhone OS 觸控操作系統的第一代 iPhone， 2007年11月5日谷歌公司發布擁有Linux內核的Android操作系統，界面圖標及整體風格均使用的是擬物風格。擬物風格迎合了當時手機用戶最直觀的接受方式，可以更直觀的讓用戶與真實世界中的相應元素相聯系，理解其所代表的隱喻功能，從而快速的理解操作方式。但隨著設計手法的逐步提高，絕對意義上的擬物風格也造成了識別功能的缺失，降低了產品的易用性，使用戶產生了審美疲勞，因而擬物風格在 iPhone 界面設計中止步于IOS6，例如（如圖2.6所示）IOS6系統中被精細刻畫的錄音界面，錄音機底部指針也十分惟妙惟肖。

效果逼真的擬物風格在扁平化風格的強烈沖擊下迅速淡出市場，2013年9月蘋果公司發布iOS7,國內主流產品也轉而采用扁平化的設計風格。2014年谷歌推出的Mat erial Design System 作為一套新的設計語言系統為后來的扁平化設計打開了一扇充滿可能性的大門。扁平化界面風格減少了 3D 效果和過度裝飾性的元素，所有圖標和界面都去掉了光影、質感、細節，界面層級也相較過去更加扁平。扁平化風格是密斯•凡德羅提出的“Less is more”在移動手機界面的設計體現，通過簡潔的設計讓重要元素更加醒目。

在人們愈加快節奏的生活方式下，手機用戶對信息的傳遞要求更加精準，扁平化簡潔的

設計風格更符合用戶的識別習慣，讓用戶的操作行為更準確、迅速。圖形的簡潔、色彩

的對比度都是扁平化的優勢，但一些過度追求簡潔的設計作品也會導致缺乏人情味，忽

視用戶情感需求的現象。

近年來更多形式的設計風格如雨后春筍般顯現出來，雖未代替扁平化設計風格，但給界面設計添加了新的展現形式。除了紅極一時的新擬物風格（如圖 2.7 所示），還有最早可以追溯到07年微軟發售的Windows Vista和Windows7的毛玻璃風格以及插畫風格, 不斷突破界面設計風格的邊界。設計趨勢變化無窮，設計風格迭代升級速度快，關注變化、洞感趨勢、覺察本質是設計工作者需要始終面對的挑戰。

（2）風格案例分析

本研究對界面視覺風格案例的分析（如表2.3 所示）選擇了具有時代特點的擬物風格、扁平化風格、新擬物風格、毛玻璃風格，插畫界面風格，除以上五種，還有很多風格不斷被創新出來，界面風格迭代更新速度快，但其背后的本質都應該是服務于用戶更好的使用體驗，背離該本質為新而新的形式設計容易背離以用戶為中心的設計初衷。

表 2.3 界面視覺風格案例分析（表來源：作者自制）

分類

分析描述

案例1 案例2

擬物風格

擬物風格是具像化的界面視覺設計，通過對視覺符號進行特定特征的提取，將富含寓意的圖標轉化為風格統一、效果逼真的界面圖標，可以直觀的喚起手機用戶認知中的相關記憶。極具真實感的3D圖形、光影。

表 2.3 界面視覺風格案例分析（表來源：作者自制）

分類

分析描述

去裝飾性的扁平呈現方式。極大程

度地剝離過度裝飾對界面視覺的過

扁平化風格

載影響。強調物理化特征的扁平化

2.0 也為界面用戶提供了一種更加

簡潔而精致的視覺效果。

在原有的擬物風格界面設計的基礎

上改變了設計手法，讓設計元素更

新擬物風格

具有真實的凹凸質感，元素更像是

本身就存在于界面一般。界面呈現

自然的凸起狀態，光陰效果柔和。

蘋果 iOS 7.0 之后，其系統很多界

毛玻璃風格

面都使用了毛玻璃效果。毛玻璃效

果旨在通過高斯模糊等設計手法，

帶給用戶模糊玻璃質感。

為界面加入了情緒化表達，可有效

插畫風格

提高點擊量，提升趣味性以及減少

用戶對界面等待或加載失敗時失望

的情緒。

案例1

案例2

2.3教育類微信小程序用戶體驗

杰西•詹姆斯•加勒特（Jesse James Garrett）提出用戶體驗的五層模型，分別為戰略層、范圍層、結構層、框架層、表現層①。本研究是探討用戶體驗在教育類微信小程序界面視覺的應用研究，是對框架層及表現層進行視覺設計實現的過程（如圖 2.8 所示）。

框架層是對結構層的宏觀概念由抽象到具體的設計過程，在教育類微信小程序界面視覺設計中，清晰的框架層設計可以使用戶在初次使用時，在流暢的空間布局基礎之上順暢的展開信息獲取的過程，因而框架層應基于用戶需求進行設計。由信息架構師與視覺設計師共同參與，為接下來的表現層設計做充分的鋪墊。

表現層為感知設計，即為視覺設計，表現層教育類微信小程序界面視覺設計研究的重點部分。視覺設計如同產品的外觀設計，良好的外觀設計可以讓消費者對品牌產生更深厚的認同感。通過對視覺設計元素展開以用戶為中心的設計，更深層次的滿足用戶對界面視覺的需求。在整個產品設計流程中，表現層設計提供了最直觀的用戶體驗。

（圖片來源：Jesse James Garrettt提出的用戶體驗模型）

2.4教育類微信小程序現狀

2.4.1 國內教育類應用市場分析

1）在架應用調研及分類

通過對在架教育類應用的調研（如圖 2.9 所示），將移動手機應用市場上現有的教育

①（美）Jesse James Garrett.用戶體驗要素[M].北京：機械工業出版社，2011:135.

27 類應用軟件大體分為以下五種類型。兒童早教類，這類軟件面向的用戶群體主要是兒童以及輔助兒童進行學習的家長，通過圖像、聲音以及交互小游戲讓兒童從中獲得知識，寓教于樂；在線教育類，通常視頻直播課程和視頻錄播課程，無需出門，隨時隨地即可接受教育的優勢；語言學習類，無論是家長還是學生自身都越來越重視國際化視角的培養，小語種的學習已然成為常態；考試信息類，隨著各類考試在教育界廣受歡迎，該類型的應用軟件受到越來越多的用戶的青睞；答疑解惑類，通過文字或圖片的形式搜索或上傳問題到擁有海量信息的檢索題庫，即可獲得答案及講解，對于輔導孩子較為吃力的家庭，這個軟件較好的解決了這個問題，市場歡迎度很高。

教育類應用軟件調硏

序號U育門類T良體應用類盤 APRS 稱咖4瑕序名執 Slogan 主要聯魏 iodSSTFttB

曲學習穹研政洽刷IS 硏究生等試

1 大學生搜題哥答案的學習神18 30?大字旳本 17+

2 在歧學習網題云舷在域3E用技齡習 - 為學習者提供海■、優理的謹程

3 三方聒平臺學綁育蟋上K12學科建制 - 救育畀的"美團"

4 習 -

5 愴感培弄 - 親子關SL生理.心連.情感習慣、學習方法

6 藝術豊研情報周硏究生考試 - 專業解讀，全IWffiL考硏稱導

7 必做500凰 202116咬學車瘠麗照

8 柞業幫中屮學生授題學習稱導平臺拍搭攪越輔導學*平臺 118萬 4+

9 學習通合海■知識值鼻與和E學習鬲課 $萬 9*

10 有老師財講解的灘車睹中”哮柞業搜理答疑工貝 126萬 4 +

11 IS馬 3-抄上毎馬學恩堆學英語學閱讀恩堆英語融全科累質教育平臺 32萬 4 +

12 百詞常姜語考試大殺S8 背頤學姜逼必備 60萬 4 +

13 學小易大學生搜題練題學習平臺

14 朗作業 1眇P8題,擡本解折”作業利鹽中寸彌業理題學習平臺

15 洪恿識字徑松1E«13時兒童認字啟象敕冃 4+

16 粉筆教育公考學習81上粉第公務員拳業單位考試郴 "萬 4+

17 專業的BJ業技團fltg訓互諭學習平臺網檢 28萬 4+

18 ；tKf£ 錦合考證譽備壓題翩題挽屛題庫考試考證押S6顧神醫 8萬 4+

19 自考；麺庫公務員考試自考禪蝕刷題聽課神黠自學*iaa?^ 9萬 17+

20 綿音考M證押題必備神器心所有嶋刪證si鷹 22萬 4+

21 牧師資林證考試教麗格證筆試88庫數師的格證面試考試 8.8萬 4 +

22 圍BRi證考試 -S二建閆題實戰禪題鞘準頂測 &8萬 4*

23 較備準越庫教0隔格證考試真囲賣戰輛準押鬆跑教卿資格證教怖招聘通關神器 37S 17*

24 考蟲語施丈學生考■研公考四六級英語必備考硏公考英語必留 4.2萬 17*

25 小片硏 ■蠢近300所高枝.翅4萬豪專業謖頁蠹大學生豊研和在職粵研刷豔必備神鬍 4 +

26 考硏簾硏究生考試/公務員考試考研公考11線JHB!學習必備APP 大學生在職考硏研兗生備考平臺 22萬 4 +

27 硏兄生考試/英語琴試考硏學習，就上橙啦號硏四級六級實用英語必備 2】萬 4 +

28 卯全KJfc 在職研/MBA管理類聯考必備學習軟件在職爭輙大學生考硏學習平曹 9+

29 小西考硏不花時間的妍考短刪HAPP 考研英語貞押尊學習鞘手 8.2萬 4 +

30 師兄轄總；*^呀試狀卑作業 5年專注解決大學作業JM5 櫃®SJ砂考試S3歸 1.7萬

31 考硏辭硏究生旳 IM 考硏跡手 40萬 12+

32 學而思網校綜合中”愕生旦動學習平臺 M6萬 4 +

53 類站硏藝術生考硏藝術勺硏主SSE2S 藝術專硏生 4+

藝術學人茗術生考硏稱品吁図"學科倍息

55 壞莒考賺藝術生考硏 MH忤品.交諫社區

36 考研人學堂藝術生考硏專業真題、干貨總結，交流社區

37 醫學考硏噴業醫師考試醫料硏、艸醫聞合并版 4.】萬 17*

圖 2.9 在架應用調研整理

（圖片來源：作者自制）

（2）應用設計團隊及流程

互聯網的發展日新月異，界面設計已經不是由一個人或幾個人主觀決定的設計過程，而是設計團隊協作、分工明確、發揮各自優勢的結果。產品的研發過程在橫向、縱向維度都對團隊協作提出要求，團隊內的成員都需要縱向提高自身專業能力，橫向提高跨業務感知的能力，從而實現設計的品牌價值以及商業價值。

界面視覺設計行業相關的職位現狀（如表2.4所示），界面視覺設計行業呈現三種分工，UI設計師、GUI設計師、視覺設計師。UI設計師從事軟件的界面和交互式應用設計;

GUI 設計師也就是國內大多數 UI 設計師所從事的相關工作，仍為界面美工，大多不參與用戶研究等工作；視覺設計師在設計過程中考慮的更加全面，但目前行業覆蓋數量較低。各個工種間呈相對獨立狀態，導致設計結果與用戶心理模型相悖，從而出現最終呈現的界面用戶體驗感差的問題。

目前界面視覺設計人員的職位及其所屬設計市場的職能均不具有唯一性，視覺設計工作者可以根據自身能力身兼兩職或身兼多職。在數字技術大融合的時代環境下，產品的功能、形式、內容、行為有著密切的聯系，需要高度的專業性對職能進行劃分才能保證設計環節良好、高效的運行。界面視覺設計師需要與其他相關職位相互貫通、緊密配合，從而減少視覺設計工作者主觀決策所導致的目標定位不準確、功能不清晰等問題。

表2.4相關術語及功能（表來源：作者自制）

名詞行業簡稱全稱職能

產品經理 PM Product Manager 綜合規劃產品的誕生、發展和優化。

產品設計師 PD Product Designer 側重于產品功能的設計，重點思考技術層面

的可行性和性價比。

用戶體驗設計師 UED User Experience

Designer 負責產品線的體驗優化以及產品迭代等，對不斷優化用戶體驗的功能點進行研究。

用戶界面設計師 UI 設計師 User Interface Designer 通常從事軟件的界面及互式設計部分。

圖形用戶界面設計師 GUI 設計師 Graphical User

Interface Designer （國內大多數 UI 設計師所從事的相關工作）界面美工，只針對軟件視覺界面。

視覺設計師 VD Visual Designer 站在更高維度，探索界面視覺的一致性、傳播度、色彩、企業文化等。

（3）國內教育類應用發展趨勢

隨著我國人民物質水平不斷提高，無論什么年齡段的人，都越來越重視自身的精神需求。教育類應用可以實現足不出戶線上學習，其便捷程度可見一斑，未來的教育類應用數量仍將逐步上漲，越來越被人們所需要。因此對于界面視覺設計理論、實踐方面研究的需要是迫切的。界面設計過程應保證每個階段都有其關鍵的內容和要求，但各階段之間不相互獨立，是密切關聯的。（如圖 2.11 所示）產品呈現模型與用戶心理模型越相近，用戶操作產品時的學習成本就越低。

障• ♦ • •

實現模型 V 豐警 » 心理模型

映射技術較差較好反應用戶的愿景

圖2.10設計反應用戶愿景的映射關系

（圖片來源：About Face4:交互設計精髓）

(4)教育類應用的特征分析

教育類微信小程序有傳播信息的特性，教育類應用功能相較其他類型也更加垂直，需要讓功能在界面展示的更加明顯，讓用戶在進入界面后快速捕捉功能及可操作區域，從而快速高效的識別需要獲取的信息。此外，用戶通常會對教育信息是否安全可靠有心理及情感上的聯系，因此界面視覺設計的過程也應該充分考慮到用戶隱含的需求。以界面視覺為出發點對用戶需求展開的調查研究，是為了比用戶自己更準確地去理解他們的需求，用戶無法準確描述的需求，設計師需要通過用戶研究等方法進行深度剖析。

2.4.2微信小程序視覺設計規范

微信小程序自推出以來，微信官方就為開發者提供了一套視覺設計規范，其中主要包含字體規范、列表視覺規范、表單輸入視覺規范、按鍵使用原則、圖標使用原則等五個方面，官方對于視覺規范的提出有利于界面視覺的統一。微信小程序官方規范中視覺設計部分包含具體的框架、組件、API等，并提供給開發者和設計者對應的參考文檔。對組件的統一規范管理體現了微信對視覺一致性的要求。例如圖標(icon)的類型、大小 (size)、顏色(color)、進度條(progress)的百分比、圓角大小(border-radius)、進度條線的寬度(stroke-width)以及富文本(rich-text)和文本(text)等十幾項屬性規范①。

圖 2.11 微信小程序官方提供 icon 組件

圖片來源：微信小程序官方網站截圖)

①資料來源于 https://mp.weixin.qq.com/cgi-bin/wx 微信小程序官方網站。

2.5界面視覺審美心理轉化

人類對美的定義各不相同，作為視覺設計工作者應該深入洞悉心理學等研究人內心的學科。用戶體驗對深層審美向表層審美轉化的方式是可以科學量化的，本小節將用戶

深層審美心理學是關于審美活動中深層心理學的科學①，是專門研究審美無意識和審美潛意識的心理學學科，也稱審美“下意識”（意識閾之下的心理活動）。在界面視覺設計中，用戶由深層審美向表層審美轉化的過程可以對應為，在界面視覺層面發掘用戶需求、洞悉用戶情感、提升用戶滿意度的過程。

從審美需要、審美能力到審美人格的建構過程統稱為審美意識②，據唐納德•諾曼從泛用戶體驗角度的研究成果，將用戶體驗劃分為三個層次：本能層設計、行為層設計、反思層設計③。在界面視覺設計中，深層審美心理中的審美需要通過本能層發掘出用戶需求，審美能力通過用戶行為層轉化為用戶情感體現，審美人格借由反思層體現在用戶滿意度上。不論產品界面的使用者是客戶、合作伙伴、還是員工，用戶體驗都會在各個方面對最終結果產生間接的影響④。因此，基于用戶展開的價值體系研究，目的是為了在各設計環節提高效率，具體體現為“幫助用戶更快操作”以及“減少用戶犯錯的概率”。

2.5.1 審美需要向用戶需求的轉化

在對產品的前期研究實踐中，開發者對用戶需求的研究大多是指用戶對產品的需

①張玉能.深層審美心理學[M].武漢:華中師范大學出版社,201 & 1.

②張玉能.深層審美心理學[M].武漢:華中師范大學出版社,201 & 1.

③（美）諾曼.小柯譯.設計心理學1：日常的設計[M].北京：中信出版社,2015. 5.

④（美Jesse James Garrett.用戶體驗要素[M].北京:機械工業出版社,2011:135.

31 求，但隨著物質不斷豐裕，應打開設計視野，發掘用戶對界面視覺設計的需求。我國著名商業顧問劉潤，在《底層邏輯》一書中講述自己和神經學科研究所高級研究員、博士生導師仇子龍的一次對話，“所謂的‘滿足用戶需求'，已經涉及神經科學層面了”。這一觀點與從深層審美心理學中探尋界面視覺用戶審美轉化是異曲同工的。本文對用戶需求的研究不同于用戶體驗五要素第一層的用戶對產品的需求，而是只針對用戶對該產品的界面視覺方面的顯性或潛在的需求。

在本研究中，設計師對界面視覺中用戶審美無意識的首要轉化過程就是對教育類微信小程序用戶（審美）需求的轉化，該轉化過程需要借助用戶體驗的相關研究方法，所選用的用戶體驗中用戶需求的研究方法為 Kano 用戶需求模型，該模型有利于對需求層級進行分類，是有效探索用戶對界面視覺需求的研究工具。

2.5.2審美能力中用戶情感的轉化

審美能力是保證審美活動成功完成所必須具備的個性心理特征①。深層審美心理學中將“以情感能力為主的藝術活動中所滲透的審美意識稱為藝術審美意識”。對用戶情感的設計即對審美潛意識的物化過程，審美潛意識是人們在長期審美實踐過程中反復形成的，是某種以動力定型為基礎的審美心理模式的結果。用戶情感需要考慮到潛意識里影響用戶對界面視覺滿意度的色彩、圖標、字形、布局等元素以及場景更換對情感轉變的映射。在本研究中，將運用用戶深度訪談的研究方式，對用戶情感進行探索，同時對用戶需求進行驗證，捕捉定量分析中難以獲取的情感層面的用戶需求。

2.5.3審美人格與用戶滿意度的相互轉化

反思層的設計與信息、文化以及產品的含義和用途都緊密相關②，對用戶進行滿意度調查研究，是審美顯意識轉化的呈現方式，有利于用戶在接觸產品界面后做出反饋，更有利于反思層設計的不斷優化、迭代和完善，是產品長期良性發展的保障。需要準確的在界面視覺設計中更快更準的體現用戶想要獲取的教育相關信息，以及在情感上令用戶產生愉悅、輕松、安全的心理感受。

審美人格是人類個性發展和人格發展的最終目的和最高理想③，提高用戶體驗是界面視覺設計師應不斷追求的目標，界面視覺的提高可以有效提升用戶滿意度，用戶對界面視覺設計的滿意度測評結果也會反作用于界面視覺的提升。

①張玉能.深層審美心理學[M].武漢:華中師范大學出版社,201 & 1.

②（美）諾曼.小柯譯.設計心理學1：日常的設計[M].北京：中信出版社,2015. 5.

③張玉能.深層審美心理學[M].武漢:華中師范大學出版社,201 & 1.

2.6本章小結

本章節首先對用戶體驗理論、界面視覺設計相關要素以及界面視覺設計風格流變進行分析，而后對教育類微信小程序現狀進行了調研，并對調研結果進行了梳理及分析。最后，通過跨學科領域的探究，分析深層審美心理學在界面視覺層面的轉化方法，得出審美需要到用戶需求的轉化、審美能力到用戶情感的轉化以及審美人格到用戶滿意度的相互轉化方法，為下一章構建教育類微信小程序界面視覺設計新模式提供了前期理論基礎。

3構建教育類微信小程序界面視覺設計新模式

本章基于第二章的理論基礎，基于用戶體驗，通過Kano模型、用戶訪談等用戶研究方法，在前人大量的研究基礎上，對界面視覺用戶需求、界面視覺用戶情感進行分析，從而提出教育類微信小程序界面視覺設計方法，以及構建本章節的核心研究內容，教育類微信小程序界面視覺設計模式。

圖 3.1 第三章研究框架圖（圖片來源：作者自制）

3.1界面視覺中的用戶需求分析

供需理論的提出者阿爾弗雷德•馬歇爾提出“價值不是由勞動創造的，而是由用戶的需求決定的”。精準分析用戶對界面視覺的需求是減少用戶模型與設計師模型差距的關鍵。用戶體驗由于其主觀能動性，測量和感知方式是易變且多變的，因此用戶的需求在特定周期及環境下也會相應發生變化。

3.1.1魅力質量理論與 Kano 模型

以用戶需求為首要研究方向可以保證始終以用戶為中心展開設計實踐，將用戶需求轉化為符合用戶心理以及可以提高用戶體驗的符合表層審美心理的界面視覺在用戶體驗中的本能層設計。與此同時，也能確保之后展開的設計流程是為需要而設計，而非為設計而設計。選擇在問卷調查中融合Kan。模型對需求進行劃分，是因為Kan。的特點有利于設計工作者在設計開始前掌握用戶對界面布局的需求。

（1）魅力質量理論

日本著名的質量管理大師東京理科大學教授狩野紀昭（Noriaki Kano）于1979年根據顧客的感受和產品質量特性的實現程度提出魅力質量理論，將其質量特性劃分為基本

型屬性、期望型屬性、魅力型屬性、無差異型屬性以及逆向屬性。此外，還有一種屬性為可疑要素，除問題設置有誤以及用戶理解有誤等情況，通常不會出現。對Kan。模型需求屬性的詳細釋義（如表 3.1所示）。

表3.1 Kan。模型需求屬性分析（表來源：作者自制）

需求屬性屬性釋義影響備注

若不提供此需求若提供/優化此需求

基本型需求(M)

Must-be Quality 用戶認為理所當然，必

須要有的需求用戶滿意度會大

幅降低 + 用戶滿意度不會

得到顯著提升核心需求

期望型需求(0)

One-dimensional

Quality 用戶需求的癢處用戶滿意度會降

低 | 用戶滿意度會提

升 t 體現產品競爭能

力的需求

魅力型需求(A)

Attractive Quality 用戶意想不到的需求、

需要挖掘用戶滿意度不會

降低用戶滿意度會有

很大的提升個利于提高用戶忠誠度的潛在需求

無差異型需求(D

Indifferent Quality 對用戶體驗毫無影響，

用戶不在意的需求用戶滿意度不提

升用戶滿意度不降

低盡量避免的需求

逆向型需求(R)

Reverse Quality 用戶無此需求用戶滿意度不提

升用戶滿意度降低

1 盡量避免的需求

（2）Kan。模型

Kan。模型（如圖3.2所示）是魅力質量理論的測算工具，是一種通過結構型問卷、評價結果分類對用戶需求進行識別的定性分析模型，Kano問卷可以傾聽用戶的心聲，是對用戶體驗的探索，通過Kan。模型得出影響用戶期望品質的因素，并對信息進行歸納處理，從中找到影響用戶體驗的關鍵質量因素，以此作為設計魅力產品的有效依據。

在本研究中，Kano問卷法可以為界面視覺設計師指明界面視覺的改進方向，為設計出能真實反映用戶潛在視覺需求的微信小程序界面做準備。視覺設計必須從用戶的角度出發，設計出符合用戶期望的界面視覺設計，進而提升用戶體驗。

3.1.2 用戶問卷調查

Kano 模型是對影響用戶滿意度的各個設計屬性進行用戶需求分類和排序的有用工具。運用 Kano 模型分析結果對教育類微信小程序界面視覺設計進行設計，是針對設計行之有效的定性分析研究方法，運用 Kano 模型對教育類用戶進行界面視覺設計需求分析，可以高效的在視覺設計開始之前明確用戶對界面視覺的期望。

（1）標準化 Kano 問卷設計通過對大量界面視覺設計層面的國內外文獻、專著、設計案例進行分析整理后，提煉出的23項需求內容（如表3.2所示），通過設置標準化Kano問卷對教育類應用的用戶進行調研，根據調研結果對23 項教育類應用需求內容進行歸類劃分，解決需求屬性的定位問題，以提高用戶需求內容的準確度。

表 3.2 微信小程序用戶對教育類應用界面視覺需求內容設計（表來源：作者自制）

ID 需求因子

D1 功能層級清晰明確（2016 江亞妮）（2018 李妙蘭）（2020 任悅）

D2 空間布局規整（2016 江亞妮）（2020 黃宇瓊）（2020 毛舒,肖龍）（2020 錢靜）

D3 設置導航欄（Citespace國外文獻）

D4 核心功能的重復岀現（Citespace國外文獻）

D5 不同使用場景界面視覺會發生相應轉變（Citespace國外文獻）

D6 廣告推送欄位置及大小考究（Citespace國外文獻）

D7 色調、色彩協調（Citespace國內外文獻）（2015郝晶，孫亞云）（2021龔柏茂，鄧蘇婷）

D8 界面配色可以自主調節（Citespace國外文獻）

D9 品牌主色調融入界面視覺（Citespace國內文獻）（2019淡珊）

D10 色障人群色彩模式（Citespace國外文獻）（2019莫小慧）

D11 界面圖標和可操作區域有文字信息提示（2021 孫雄飛，吳祐昕）（2021 宋琛）（2020 孟慶林）

D12 字體樣式美觀（2017張立）（2022龔柏茂，鄧蘇婷）

D13 字號可調節（2022 龔柏茂，鄧蘇婷）

D14 視覺標識標記已學板塊（2021 孫雄飛，吳祐昕）

D15 圖形、圖片賦有美感/創意（Citespace國內文獻）（2022龔柏茂，鄧蘇婷）

D16 圖標簡潔易識別（2012肖紅，郭歌）（2017陳亞男）（2019雷昆）

D17 圖標與整體視覺元素統一（2020 孟慶林）（2018 李怡云）

D18 品牌形象（圖標/元素）融入界面視覺（Citespace國內文獻）（2021趙佳欣，劉雙花）

D19 元素組件與常規樣式一致（2016江亞妮）（2020 任悅）（2020陳星海）

D20 界面排版具備對齊性（2014 牛琳）

D21 界面色彩/圖形具備對比性（Citespace國外文獻）（2017張立）

D22 界面組件、元素間具備親密性（2020 陳星海）

D23 界面視覺元素具有一致性（2020孟慶林）（2019淡珊）（2019雷昆）（2018李怡云）

（2）問卷需求層次劃分

需要強調的是，需求并不是一成不變的，因用戶個體心理、性格、情感、信仰、文化等多方面差異而不同，標準化Kan。問卷會從正反兩個方向向用戶進行提問，以此測量教育類用戶在此類需求滿足或不滿足情況下的主觀反映，并采取五級選項的答案形式進行作答（問卷詳情見本文附錄A教育類微信小程序用戶問卷調查表），回收并統計問卷后，通過（如表3. 3所示）Kano模型需求層次劃分方法進行需求內容分類。

表3. 3 Kan。模型問題選項的需求層次劃分（表來源：Noriaki）

需求滿足滿意無法滿足

必須這樣無所謂可以接受不滿意

滿意 Q A A A 0

必須這樣 R I I I M

無所謂 R I I I M

可以接受 R I I I M

不滿意 R R R R Q

（3）問卷樣本屬性信息

將 23 項需求內容進一步劃分為空間布局、色彩、文字、圖形、情感五個類別，每個問題從正反兩個方面進行提問，被測試者從Kan。模型問題選項的需求層次“滿意、必須這樣、無所謂、可以接受、不滿意”5 個選項中根據實際的主觀感受選擇最佳答案。

在正式發放問卷前進行了預調查，對部分問題的表述方式進行調整后在問卷星平臺上公開發布了《教育類微信小程序用戶對界面視覺設計的需求研究調查問卷》，問卷內容包含用戶基礎調研問題以及Kan。需求調研問題兩部分，借助微信群、微信朋友圈、微信私信、網易郵箱等方式邀請受訪者填寫，共回收有效問卷135份，經統計剔除重復答案、無效答案后，對130份有效問卷進行基本屬性結果分析以及Kano問卷核心價值提取，本次問卷的有效率為 96.2%。

3.1.3核心價值提取

（1）基本屬性結果分析從被調查者自身屬性進行統計，本次問卷填寫的性別占比為男性用戶約等于55%，女性用戶約等于45%（如圖3.3左圖所示），年齡均在18歲及以上，其中29歲至45歲的人群占36%，其余年齡段占比相同（如圖3.3右圖所示）。總體而言，樣本選擇較為合理，具有代表性和典型性。該年齡段人群更容易接受和嘗試新的科技產品，也對視覺要求更高，調研結果更具參考價值。

圖 3.3 調查問卷用戶性別（左圖）年齡（右圖）占比餅圖

（圖片來源：作者自制）

問卷結果顯示（如圖3.4所示），用戶使用App、微信小程序、公眾號等教育類應用軟件進行學習的頻率為，每天使用的用戶約占 27%，一周使用一次的用戶約占 37%，一周兩次及以上的用戶約占31%，每周使用頻率不足一次的用戶占 12%，頻率為一周使用兩次及以上的用戶占比最大。用戶使用教育類應用軟件學習的持續時間中，占比最高的是 15 分鐘至 30 分鐘，約占 34%，其次為 15 分鐘以內，約占 26%，再次分別從高到低依次為 30 分鐘至 1 小時、1 小時至 2 小時以及 2 小時以上，學習時長為 15 至 30 分鐘的用戶占比最大。因而，在進行用戶界面視覺設計時，應考慮界面視覺對用戶粘性的影響以及照顧到長時間在界面停留的用戶的生理及心理感受。

用戶使用教育類應用軟件頻率% 用戶使用教育類應用軟件學習的時間%

12% 21% 15%5% 26% \

36% 31% 翼每天使用

、一周兩次及以上犠一周一次

«不到每周一次 20%耳 34% 樓15分鐘以內

15-30分鐘

W30- 60分鐘

« 1 ~ 2小時

W 2小時以上

圖 3.4 用戶使用教育類應用軟件頻率（左圖）學習時長（右圖）占比餅圖（圖片來源：作者自制）

此外，基礎調研結果還顯示，教育類手機應用在各學歷、專業的用戶中都體現出較高的使用頻率，也逐漸在眾多場合和碎片化時間為人們所用。用戶使用教育類應用的地點也較為多元，大多為教室、圖書館、自習室、家中或其他固定學習場所，也有相當大部分人群是在公交、地鐵等乘坐交通工具時使用。因此，對于教育類應用而言，界面視覺的不斷優化是提升用戶體驗的關鍵因素。本次問卷調查中對專業類別、學歷、軟件使用傾向及色彩傾向等方面的調研內容此處不做詳細論述，數據為第四章用戶畫像部分

38 提供生成用戶標簽的數據依據。

(2)Kan。問卷結果分析

將測試的結果對照(如表3.3所示)需求層次矩陣，得出教育類微信小程序用戶界面視覺設計屬性需求層次劃分(如表3. 4所示)。剔除研究結果中無差異需求(I)以及逆向需求(R)，最終確定了剩余的15條教育類微信小程序用戶界面視覺設計屬性，作為教育類微信小程序界面視覺設計的部分影響因子。

影響因子中，五項為用戶的期望型需求，分別是功能層級清晰明確、空間布局規整、色彩協調、圖標與整體視覺元素統一、界面組件與元素間具備親密性，是可以提高界面核心競爭力的需求。六項為用戶的魅力型需求，分別是設置導航欄、廣告推送欄位置及大小考究、品牌主色調融入界面視覺、界面圖標和可操作區域有文字信息提示、界面排版具備對齊性以及界面視覺元素具有一致性，是需要挖掘和洞悉才能獲得的，有利于提高用戶忠誠度的需求。四項為用戶的基本需求，分別是字體樣式美觀、圖形以及圖片賦有美感和創意、圖標簡潔易識別、界面色彩和圖形具備對比性，是用戶認為教育類微信小程序界面視覺中必須要有的需求。用戶層面對界面視覺需求的研究有利于設計師在設計過程中有的放矢的展開設計，讓設計更貼近用戶的需要。

表3. 4 Kan。標準化問卷結果需求分類(表來源：作者自制)

編號需求項目需求屬性編號需求項目需求屬性

D1 功能層級清晰明確 0 D13 字號可調節 I

D2 空間布局規整 0 D14 視覺標識標記已學板塊 I

D3 設置導航欄 A D15 圖形、圖片賦有美感/創意 M

D4 核心功能的重復出現 R D16 圖標簡潔易識別 M

D5 不同使用場景界面會發生相應轉變 I D17 圖標與整體視覺元素統一 0

D6 廣告推送欄位置及大小考究 A D18 品牌形象融入界面視覺 I

D7 色調、色彩協調 0 D19 元素組件與常規樣式一致 I

D8 界面配色可以自主調節 I D20 界面排版具備對齊性 A

D9 品牌主色調融入界面視覺 A D21 界面色彩/圖形具備對比性 M

D10 色障人群色彩模式 I D22 界面組件與元素間具備親密性 0

D11 界面可操作區域有提示性文字 A D23 界面視覺元素具有一致性 A

D12 字體樣式美觀 M

3.2界面視覺中的用戶情感分析

霍爾布魯克提出了消費體驗維度，指出在物質日益豐富的時代，消費者的選擇開始轉向情感層面的消費體驗。因而基于用戶體驗研究方法為用戶帶來的更高效的使用感受和審美上的愉悅感，使用戶與界面相處更加融合。也能通過界面視覺優化提高教育類微信小程序與用戶之間的粘性，促進教育類微信小程序的良性發展。

3.2.1用戶深度訪談

用戶訪談首先對Kano問卷結果中的15項用戶需求進行驗證，而后對用戶的情感層面進行更深層次的挖掘。

（1）調查背景

用戶訪談調研工作開始于2020年10月，結束于2021年5月。首先，根據研究的目的，針對教育類微信小程序的用戶信息、使用需求、選擇原因、操作過程中出現的問題等方面建立結構化訪談的訪談提綱，其次對20名定向教育類應用的用戶以面對面訪談和在線訪談兩種形式進行深度訪談，最后根據訪談記錄和錄音進行了資料整理以及核心價值提取。

用戶深度訪談的調查對象是來自筆者身邊的在讀研究生以及在職青年群體，該部分群體對界面視覺有更多的自己的建議。調查對象表示對教育類微信小程序的使用目前還比較少，但如果應用發展完善，有較大的意愿選擇微信小程序作為入口進行學習（受教育）活動，原因一：微信小程序注冊方便，也不存在跨系統不兼容的問題；原因二：可以避免下載多個教育類應用，減少手機運行負荷；原因三：微信小程序屬于輕應用，帶給用戶的心理負擔較小，更有利于隨時想學就學（但也有調查對象表示當前的微信小程序在使用時無法及時查收微信信息，對于長期學習而言存在一定的弊端）；原因四：微信小程序相較 App 功能更突出，更純粹（該點是因為多數已投入運行的微信小程序層級更扁平）。

2）用戶深度訪談內容框架

10 您認為當下教育類微信小程序（也可以是教育類應用）界面視覺設計

有哪些需要改進的地方? Q&A

11 請您對這23項界面需求內容（表3.2中的23項需求內容）在教育類微信小程序中的重要程度打分，最重要項打5分，次重要項打4分，一般重要打3分，不太重要打2分，不重要打1分。 Q&M

3.2.2訪談核心價值提取

表3.6用戶訪談記錄匯總表（表來源：作者自制）

在校研究生的訪談記錄匯總表

時間 2020. 10. 5—2021. 5. 25

—地點—「中原工學院校內線下訪談/線上訪談

訪談概要

人物中原工學院藝術設計學院/材料與化工學院/能源與環境學院20名在校研究生年齡 23—28歲

軟件~背英語單詞的軟件：扇貝、百詞斬、樂詞等；學習強國；新東方、考蟲等平臺專

類型用的軟件；直播使用到的軟件：釘釘、企業微信、慕課、騰訊會議等其他教育類應用時的問題還表現在功能太多導致核心功能不明確、層級太多導致使用不順暢、色彩以及圖形對比不夠強烈導致不易識別、視覺過于沉悶導致心理上比較壓抑等界面視覺問題。用戶在使用內容較為垂直的教育類微信小程序時，希望能夠在首頁更快的看到主要功能或者主要功能的入口，界面布局更清晰，界面視覺不要太過于復雜，以簡潔的設計以及明亮的界面色調為主。

3.2.3AT-one 模態分析

以用戶情感分析的研究結果進行AT-one模態分析，AT-one法則的特點有利于研究者站在整體角度進行思考。分析結果對本研究提供了用戶角色、服務觸點、供應方案、用戶需求以及用戶體驗五個方面的指導。站在教育類微信小程序的利益相關者角度，界面視覺設計師缺乏對用戶需求、情感、滿意度的研究是界面視覺不符合用戶期望的原因。

服務觸點方面，需要提出符合教育類微信小程序用戶界面視覺需求的設計方法。供應方案方面，需要構建界面視覺設計過程中包含用戶研究的設計模式，在現有模式中加入用戶研究環節。用戶需求方面，將界面視覺設計研究的目光放到，用戶對界面視覺的要求

上。用戶體驗方面，需要關注用戶的界面視覺需求以及用戶滿意度。

圖 3.5 AT-one 模態分析圖

圖片來源：作者自制）

3.3教育類微信小程序界面視覺設計方法

本小節基于前人大量的研究，提出適用于教育類微信小程序的五個界面視覺設計方法，分別是整體性設計方法、目標性設計方法、傳播性設計方法、隱喻性設計方法以及反思性設計方法，旨在通過理論方法的總結，為本領域的理論研究及設計實踐提供可參考的設計方法。

3.3.1整體性設計（HHolistic design）方法（HD）

整體性，是把研究對象看作由各個構成要素形成的有機整體，從整體與部分相互依賴、相互制約的關系中，揭示對象的特征和運動規律，研究對象整體性質。本研究提出的整體性設計方法包括空間布局的整體性、空間布局的整體性以及色彩運用的整體性。

（1）空間布局的整體性

整體性設計方法旨在提醒設計過程以全局思維展開思考，以整體洞察的角度關聯各局部要素間相互聯系和作用的設計路徑。教育類微信小程序的特性之一是內容信息的專業性、準確度，這就要求其功能和信息呈現由整體到局部都要遵循整體性，哪怕是廣告欄等具有商業效益的設計，都不應該犧牲信息呈現的整體性而導致碎片化。將設計界面中可被用戶感知的全部視覺元素看作一個視覺整體，以用戶體驗角度首先對其進行布局規劃，從而展開設計思考的全部過程。

（2）界面組件的整體性

將界面視覺元素以組件的形式展開設計有利于從宏觀角度呈現視覺的整體性，避免陷入設計師較嚴重的主觀局部性的設計情緒中。格式塔心理學理論即是將單一元素通過重復等設計形式引起用戶的同理心并隨之產生共鳴，從而設計出符合用戶心理需求的界面視覺。任何單一需求的滿足都需要建立在整體觀的基礎之上。界面視覺所呈現的全部可被用戶感知的內容都應該運用整體性設計思維展開設計，這樣做有利于形成有效的用

戶認知并帶給用戶連貫的體驗。

圖 3.7 整體和非整體設計的界面布局及組件

（圖片來源：作者自制）

（3）色彩運用的整體性將界面所有視覺元素的色彩運用看作一個整體，無論是以品牌色調出發進行設計，還是為產品設置了單獨的色彩體系，都要在整個界面中沿用一整套顏色規范，以達到色彩、色調整體一致的效果。

圖 3.8 整體和非整體設計的界面布局及色彩

（圖片來源：作者自制）

3.3.2目標性設計（Purposeful design）方法（PD）

Jesse James Garrett 將成功的界面設計定義為讓用戶一眼就看到“最重要的東西” 的界面設計①。本研究提出的目標性設計方法包括用戶注意力用戶操作行為的目標性。

（1）用戶注意力的目標性從教育類微信小程序中獲取信息是用戶的首要目標，視覺設計需要讓功能在界面中

①（美）Jesse James Garrett.用戶體驗要素[M].北京：機械工業出版社，2011:135.

44 作為視覺主題讓用戶的注意力有更明顯的目標感。用戶看到界面后眼睛的移動軌跡是否是流暢，是判斷設計是否成功的關鍵。不完善的設計會帶給用戶界面“擁擠”、“忙碌” 的視覺感受。因而，通過有效的視覺設計方法吸引或分散用戶的注意力，有助于引導用戶在界面中高效的完成操作任務。有以下吸引用戶注意的工具例如：對比(contrast)，通過色彩、圖形大小、文字排列等方式區分相似元素，將用戶的注意力吸引到界面的關鍵部分，幫助用戶理解頁面視覺元素間的關系。

(2)用戶操作行為的目標性

操作流程有目標性，引導用戶操作行為。界面視覺設計首先要遵循用戶體驗設計所要解決的應用環境的綜合問題，確保所選擇使用的要素可以在用戶使用時引起注意。精心設計的界面必須要具有它應該具有的功能，所呈現的元素目標都應該是服務于用戶更快更好的使用功能。因此，界面視覺設計應符合用戶操作過程中的目標導向設計。人們操作微信小程序的初衷要求設計者充分考慮突出主體，讓用戶的操作在視覺設計的加持下，不借助復雜的操作手冊或特別提示，即可輕松的使用產品。對于設計師而言，每一個用戶行為都需要與用戶的目的，也就是產品的功能相關聯，界面視覺設計活動受用戶目標的影響，因此應當在界面視覺設計中通過色彩、圖標、標記等視覺符號起到目標導向作用。此外，目標性可以幫助設計師在該層面明晰各組件的關聯性，做到先整體統籌，再以模塊為單元有目標性的展開設計，從而為更細化的小部件設計提供廣闊的設計空間，拒絕單一零部件給用戶帶來的孤立感。

Sort by Sort by

Latest recipe 0 Latest recipe

Most review o Most review

Rate o Rate

Favorite o Favorite

■ Apply

0 ®

圖 3.9 有目標和無目標設計的界面 (圖片來源：作者自制)

3.3.3傳播性設計(Communicative design)方法(CD)

移動應用作為品牌以及內容傳播的新媒介，對用戶而言，可以快速獲取有效的信息。對品牌而言，可以傳達產品信息、建立市場信譽、擴大自身影響和可持續發展①。本研

①王琳•品牌傳播新媒介一品牌App界面設計研究與探索[D].東華大學,2014.

究提出的傳播性設計方法包括內容信息的高效傳播和品牌理念的有效傳播。

(1)內容信息的高效傳播傳播性是表現產品內容特性的入手點，而后對產品的內容以視覺設計的方式呈現，

通過對文字、信息區域組件的設計，讓內容以合理、適合的方式展現在用戶的眼前，讓用戶在愉快的使用體驗中獲取高效的信息。

(2)品牌理念的有效傳播品牌傳播需要考慮到簡潔性、個性化、經驗化、期望值、一致性、口碑性以及整合

化①。想要達到品牌形象深入人心的效果，品牌理念可以體現在品牌標志在于界面全鏈路的運用，品牌標志、色彩在界面中的體驗，以及圖形圖標等元素與品牌理念的融合。

圖片來源：作者自制)

3.3.4隱喻性設計(Metaphorical design)方法(MD)

隱喻性視覺語言自 20 世紀 90 年代以來被廣泛應用于網站、移動應用的設計中。學者陳星海 2020 年在界面視覺設計美學發展及設計方法研究中提出“適當的隱喻性”的設計原則②。隱喻提供了一個整合新信息與之前知識的記憶方法，產出更深的理解與具有創造力的推理③。本研究提出的隱喻性設計方法包括空間留白的隱喻性和用戶情感的隱喻性。

(1)空間留白的隱喻性

通過隱喻的手法進行表達時，能夠簡單且充分的再現場景，通過減法的原則，給用戶留下無限的想象空間。無論是圖標還是其他界面元素，都要容易讓用戶理解，否則再

① 同上

②陳星海.移動應用界面視覺設計美學發展及其設計方法研究[J].裝飾,2020(01) :92-95.

③張立.基于用戶的移動應用產品界面視覺設計研究[J].理論月刊，2017 (04) :67-72+91.

46 新穎的設計都將是華而不實的設計。在本研究中，諾曼提出的可視性和易通性①可視作通過在設計中注入隱喻性方法，完善用戶在看到產品后對設計意圖、用途及不同控件的作用的理解，從而更融洽的與產品發生交互。

（2）用戶情感的隱喻性

教育類微信小程序界面色彩的運用不宜有明顯的性別傾向性，界面色調、主色調與配色之間的主次、不同的色彩明暗度都能夠在用戶體驗的過程中帶給用戶或多或少的情感共鳴。情感與認知是相互依存的，設計產品時脫離情感考量的用戶認知，所得出的結論可能是片面的。人的大腦是根據外部世界建構的，每一個行為動作都承載其行動發出者的心理目標及預期，而該過程都會對人的情緒產生或好或壞的影響。此外，界面視覺圖標、圖形元素也應該對其所代表的符號內容有隱喻含義，使之在文字提示的搭配下讓用戶快速理解其內容及操作方式。

圖 3.11 有隱喻和無隱喻設計的界面（圖片來源：作者自制）

3.3.5反思性設計（Reflective design）方法（RD）

唐納德• A •諾曼提出產品設計應考慮本能、行為和反思三個不同層次的認知和情感處理過程②。本研究提出的反思性設計方法包括，信息時效性的反思和迭代邏輯性的反思

（1）信息時效性的反思教育類信息講求信息的時效性，界面設計要有視覺更新的空間，對時事類信息以及

重要通知要以用戶可以接受的形式展現在界面中，保證后臺對推送信息擁有的主動權，同時保證用戶在界面中對最新信息的及時掌握。

（2）迭代邏輯性的反思反思行為往往發生在事情發生之后，通過評估發生時的狀況、行動、結果，得出行

為得失的背后原因邏輯。界面視覺設計的反思層活動常常決定著用戶對界面產品的整體

①（美）諾曼.小柯譯.設計心理學1：日常的設計[M].北京：中信出版社,2015. 5.

②（美）Donald A. Norman.何笑梅，歐秋杏譯.設計心理學3:情感化設計[M].北京：中信出版社,2015. 6.

印象，換句話說，在本研究中用戶對教育類微信小程序界面視覺設計的整體印象可以來

自通過用戶研究對用戶滿意度的測量，在用戶對其評價的過程中對界面不斷進行反思，從而更好的迭代界面視覺效果。

3.4構建教育類微信小程序界面視覺設計模式

3.4.1 舊模式

圖 3.12 不同階段軟件開發流程模式圖

（圖片來源：About Face4:交互設計精髓）

軟件開發過程的演變（如圖 3.12 所示），視覺設計在四個不同歷史階段開發過程中所處的位置不同，第一、第二階段設計并未能在其中占據一席之地，第三階段隨著商業發展不斷成熟，設計成為一個獨立的流程。第四階段即艾倫•庫伯指出以目標為導向的設計過程，在產品構建階段，首先確定產品的性能、形式和行為①，將設計者的工作放在相對更重要的位置。

①（美）艾倫•庫伯.About Face4:交互設計精髓:紀念版[M].北京：電子工業出版社,2020. 5.

3.4.2提出新模式

本研究提出的教育類微信小程序界面視覺設計模式流程（如圖 3.13 所示），管理者或產品經理將任務轉交至視覺設計工作者，視覺設計工作者基于用戶體驗，將界面視覺用戶需求、界面視覺用戶情感、界面視覺用戶滿意度三個環節分別添加到界面視覺設計流程中。用戶需求的研究結果可為界面布局及組件的設計提供依據，用戶情感的研究結果可為色彩、字體、字號、圖標、元素的設計提供依據，用戶滿意度的測試結果可為設計方案及產品界面的更新迭代提供依據。視覺設計工作者站在界面視覺角度，對用戶進

49 行研究的結果，可以在設計過程中更精準的把握用戶對界面視覺的需求，從而呈現出更貼近用戶心理預期的設計方案。

視覺設計工作者可以與用戶研究團隊共同展開對界面視覺的用戶研究，也可以在團隊的支持下單獨進行，且視覺設計工作者可根據項目的實際情況選擇用戶研究的工具。需要強調的是，本研究提出的模式是“界面視覺”設計模式，用戶體驗中戰略層、范圍層、結構層以及功能等方面的制定仍由團隊中的專業人員進行，不屬于界面視覺設計工作者的研究范疇。

3.5本章小結

產品的功能和內容都相同時，界面視覺將成為最大競爭力。本章節是對第二章節用戶審美心理轉化的展開，基于魅力質量理論，運用調查問卷、Kan。標準化問卷等用戶研究方法，將教育類微信小程序界面視覺進行用戶需求層次劃分，其次通過用戶訪談、 AT-one 模態分析對用戶情感做出研究。從而提出教育類微信小程序界面視覺設計的整體性、目標性、傳播性、隱喻性、反思性五個界面視覺設計方法，整體性設計方法包括空間布局、界面組件、色彩運用三個維度，目標性設計方法包括用戶注意力、用戶操作行為兩個維度，傳播性設計包括內容信息、品牌理念兩個維度，隱喻性設計包括空間留白、用戶情感兩個維度，反思性設計包括信息時效、迭代邏輯兩個方面。并構建出界面視覺設計過程中加入用戶需求、用戶情感、用戶滿意度研究的教育類微信小程序界面視覺設計模式。

4基于新模式的視覺實踐設計

本章將基于第三章提出的教育類微信小程序界面視覺設計方法及所構建的模式，以藝碩升為例展開設計實踐，站在用戶角度對其界面視覺進行優化設計，以達到提升用戶體驗，提高用戶滿意度的效果。設計首先通過第三章研究得出的用戶需求對界面空間布局以及組件進行設計，其次通過第三章用戶情感分析對界面視覺元素展開設計，并對優化后的藝碩升微信小程序進行用戶滿意度測試。

4.1品牌概況

4.1.1 品牌風格定位

藝碩升微信小程序是藝術門類考研信息搜索平臺，其主要目標用戶偏年輕化，沒有明顯的性別傾向，品牌定位關鍵詞主要為年輕化、信息化。藝碩升當前界面（如圖 4.1 所示），通過用戶需求及情感研究，得出用戶對現有界面視覺不滿意的地方主要有以下幾點，功能重復出現、核心功能不夠突出、色彩與藝術類無法產生情感上的共鳴、品牌缺乏標識性等。對界面的優化設計將從本文提出的整體性、目標性、傳播性、隱喻性以及反思性五個設計方法展開，同時結合本實踐項目藝術類用戶的特性。界面風格仍以扁平化為主，界面色調以藍紫色系為品牌主色調，與標志相呼應，在品牌形象有效傳播的同時，突出品牌調性。界面層級在設計時側重通過簡潔來減輕用戶的認知負擔，不讓相

4.1.2用戶畫像

用戶畫像（Personas）又稱用戶角色，作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具，被作為融合研究廣泛應用于圖書情報學、信息技術學、設計學、營銷管理學等學科領域。用戶畫像可以形象深刻的描述藝碩升微信小程序用戶的群體行為特征，為設計提供情境化參考依據。本研究基于第三章的問卷調查及用戶訪談，對其中的 30 位華北地區教育類應用用戶進行主觀信息提取，并整合調研結果中的真實基本信息、視覺及心理屬性特點、用戶偏好等數據，生成用戶標簽（如表4.1所示）。

表4. 1藝碩升微信小程序用戶標簽生成（表來源：作者自制）

基本信息標簽選項標簽目的

靜態屬性性別男女性別傾向分級

年齡 18-25 25-30 31-40 年齡段分級

年級（狀態）本科在讀在職備考/脫產備考學習狀態分級

動態屬性專業類別純藝術類設計學類美術理論美術教育類專業類別分級

具體專業視環

傳設服

設數

媒攝

影動

畫建

筑書

法雕其

塑他專業分級

使用時長（分鐘） 15 以內 15-30 20-60 60-120 120以上使用應用時長分級

使用軟件 App 微信小程序網頁軟件需求分級

視覺屬性界面頂級注重項布局色彩圖標形文字視覺傾向分級

色彩偏好冷色中性色暖色顏色傾向分級

心理屬性學習心理客觀要求式學習主觀能動式學習學習能動性分級

情感需求生理需求安全需求社會需求情感需求分級

層出不窮的考研信息平臺，為考生帶來便利的同時，界面大量冗雜的信息也為用戶帶來了煩惱，藝術類碩士報考生有意識的選擇針對性較強的藝術類考研信息平臺，通過應用對學校信息進行搜索、查找院校排名等。藝碩升微信小程序實踐設計的用戶畫像，首先以第三章問卷調查、深度訪談的結果進行教育類應用用戶的共性及差異分析。其次

對本文用戶研究所搜集到的數據使用定量、定性分析法進行歸納和梳理，生成教育類應用用戶標簽。再結合藝碩升微信小程序的應用特性對其用戶角色特征及屬性進行分析，

最終繪制成三位不同屬性的具有代表性的藝碩升微信小程序用戶畫像（如圖4.2所示）。

9 性格特征：活潑開朗，勤奮好學

g 教育背景：本科考入二本綜合類院校，大三開始準備報考研究生，目前對報考院校以及可以選擇的專業比較迷茫，無從下手。

O 用戶期望：想要在藝術類考研平臺上查找院校信息，對本專業研究生可以選擇什么專業也不了解，希望軟件可以對專業有所介紹。備考壓力大，希望界面簡潔，信息清晰明了，沒有過多額外的信息干擾。

® 性格特征：內斂含蓄，勤奮聰慧

g 教育背景：本科考入師范類院校，畢業后考入公務員崗位，就業后仍向往校園生活，未來想當一名高校老師，因此脫產備考研究生。

0 用戶期望：目前有幾所鐘意的院校，但還需要持續關注院校信息做最后的抉擇，希望能有該學校的學生或老師可以咨詢。想要藝術類考研平臺功能清晰，一眼就能找到功能入口在哪里。顏色希望不要太中規中矩，不喜歡壓抑的感覺，喜歡明快的色調。

® 性格特征：開朗大方，沉穩上進

令教育背景：本科就讀于美院，畢業后在知名插畫培訓機構授課，就業近十年，目前想要在職考研，提升專業能力以及拓寬未來就業領域，想要在藝術類考研軟件上了解是否有在職讀研的招收非全日制學生的院校。

O 用戶期望：蔣老師是一位時尚的老師，有姣好的生活品味，也受專業的影響，日常里在使用手機軟件時會因為好的界面設計而感到心情愉悅。

圖 4.2 藝碩升微信小程序用戶畫像

（圖片來源：作者自制）

4.2藝碩升微信小程序界面視覺設計

本章節對藝碩升界面視覺設計的說明首先為界面空間布局的低保真原型設計以及組件設計分析，其次是界面視覺元素：品牌標志、色彩、文字、圖標設計以及各級頁面核心設計內容分析，最后是界面實現效果的展示。過程中，界面空間布局及組件遵循整體性設計方法，以用戶需求展開設計，界面視覺元素遵循用戶情感展開，旨在通過界面視覺設計提升用戶體驗。

4.2.1 界面空間布局設計

（1）系統分析

微信小程序是一個跨系統的平臺，微信后臺已經解決了跨系統與后端是否適配的問題，小程序上線后可在不同的設備上運行，開發者不需要考慮多尺寸屏幕、機型、系統帶來的適配問題，可以實現一稿適配。本次設計實踐選擇 IOS 系統，以 iPhone 12 Pro Max 型號的尺寸為準，屏幕大小為 6.7 英寸。

（圖片來源：作者自制）

（2）信息架構藝碩升微信小程序內容主要包括首頁、院校頁面、私信頁面及個人信息頁面四個一級界面。

圖 4.4 藝碩升微信小程序信息架構圖（圖片來源：作者自制）

3）界面布局低保真原型

教育類微信小程序的主要目標之一是盡可能有效地傳遞信息。當前教育類微信小程

序主要聚焦為刷題型、信息咨詢、信息搜索、視頻學習、資料學習等幾方面，傳遞教育信息的途徑主要是文字、圖片、視頻甚至音頻。因此對于教育類微信小程序的界面視覺而言，組件排列適當、界面布局合理是滿足用戶對界面視覺需求的基本保證,（如圖 4.5 所示）是藝碩升微信小程序界面設計原型圖，體現出微信小程序復雜結構下的規律性，受微信小程序依附于微信這一特點，受教育用戶在使用時更注重其便捷性在界面視覺中的體現。

藝碩升微信小程序的界面優化在布局方面遵循第三章提出的整體性、目標性、隱喻性設計方法。整體性設計方法旨在設計過程以全局思維展開思考，以整體洞察的角度關聯各局部要素間相互聯系和作用的設計路徑。教育類微信小程序的特性之一是內容信息的專業性、準確度，這就要求其功能和信息呈現由整體到局部都要遵循整體性，哪怕是廣告欄等具有商業效益的設計都不應該犧牲信息呈現的整體性而導致碎片化；目標性旨在界面布局時以用戶目標為出發點，將核心目標展現在用戶注意力集中的區域，并且通過布局為用戶提供視覺上的操作引導；隱喻性體現在兩個方面，首先是界面通過對組件部分打散重組，讓同一功能的區域更明顯，從而給用戶心理上帶來更清晰的功能分區的使用體驗。界面將院校信息板塊組合優化為卡片式，讓頁面展示的院校數量增加，能夠有效傳播更多的信息給用戶。

（4）界面組件功能分析

表4.2界面組件設計說明（表來源：作者自制）

組件設計描述

表4.2界面組件設計說明（表來源：作者自制）

組件設計描述

推薦界面以卡片形式放在界面底部，既可以與核心功能相區分，也可以讓用戶注意到該功能區域的變化，從而達到有效傳播推薦信息的功能，推薦信息包含院校推薦、廣告推送、時事信息等，可以在用戶不反感的同時有效發揮界面視覺設計的傳播性。

導航組件出現在界面最下方，以圖標加說明文字的形式出現，體現目標性方法，為用戶提供操作指引。

院校信息與原有頁面最大的區別是避免了同樣內容在界面重復出現，讓用戶在首頁快速鎖定小程序的核心功能，并且以卡片的排列形式顯示，可以提高頁面空間的利用率，相比原有的列表式布局，更加整體，也更易與院校頁面的分類導航欄相區分。

私信詳情界面添加用戶頭像組件，方便用戶在使用時更快捷的切換到其他私信對象的聊天界面，是針對用戶情感隱喻的視覺設計呈現。不同于專門的聊天類軟件，該布局設計更符合信息查詢類應用用戶間的交流方式。

個人信息組件包括頭像、昵稱、賬號、三個個人功能以及激活 VIP 等功能，通過圓角卡片將以上內容形成一個獨立組件，可以有效整合個人信息，在視覺上減輕用戶的使用負擔。

4.2.2界面視覺元素設計

（1）品牌標志設計

首先對藝碩升微信小程序的品牌標志重新進行了設計（如圖 4.6 所示），品牌名稱中的“藝”字結合了美術類藝術研究生的特點，下方字體表現的方式是通過畫筆勾勒出彎曲的弧線，以達到和用戶更親近、更具有共鳴的效果；“碩”字與圖形對話框以及書本相結合，體現品牌與用戶對話的親密連結以及教育類品牌的特質；“升”字上方一方面代表向上的箭頭，表現品牌及用戶勇往直前的態度，另一方面代表畢業學士帽，寄予用戶都能如愿進入理想院校的美好愿望。

（2）界面色彩規范

界面色彩規范（如圖 4.7 所示），主色調為不同明度及色相的藍紫色系，搭配互補色黃色。紫色帶給人權威、聲望、深刻、精神的感覺，藍色給人沉穩、平靜之感。該色調的選擇是在對用戶需求進行調研后，結合藝碩升品牌服務于藝術生的特性，提取文森特•威廉•梵高的油畫《星空》中的色調搭配，并與品牌色調結合后確定的。在色彩運用中體現教育類微信小程序用戶情感方面深刻、努力、堅持的精神價值，以及寓意考生都能如愿考入理想的院校。通過品牌的輸出與用戶渴望知識、信息、希望能夠成就理想的內心相呼應，從而在色彩上引起用戶的共鳴。背景采用同色系中低飽和度的淡紫色，字體的色彩以灰色系為主。

圖 4.7 藝碩升微信小程序界面配色

（圖片來源：作者自制）

（3）界面文字規范

界面文字規范（如圖 4.8 所示），對于教育類微信小程序而言，文字是信息傳播的窗口。對界面字體規范的設計可以有效降低用戶處理文字信息時的閱讀障礙。除了字體、字重、字號以外，在實際應用時，文字的排版，字體間不同的親密關系排布可以帶給用戶截然不同的使用感受。

（4）界面圖標設計

藝碩升的界面圖標設計（如圖 4.9 所示），互補色和同色系淺色圖標的應用，可以有效提高用戶的注意力，達到用戶獲取信息目標性更強的目的。Tabbar圖標選中狀態和未選中狀態通過圖標亮度進行了明顯的區分，既有利于用戶快速區分圖標的應用狀態，也不會造成用戶的認知負擔。金剛區①的圖標采用了與主色調互補的色彩，有利于引起用戶的視覺注意力。其他區域的應用圖標，一部分采用簡化的方式進行設計處理，另一部分增加了創意的反色處理，增強用戶體驗，讓界面效果更加活潑。

① 金剛區指頁面的核心功能區域，是用戶進入界面后應首先注意到的視覺模塊。

4.2.3界面視覺設計詳情展示

（1）首頁界面

表 4.3 首頁界面優化設計說明（表來源：作者自制）界面效果

為您推薦區域與導航欄排列更緊密，讓界面關系更加簡單，簡化用戶認知難度，導航欄的圖標以及文字提示采用背景色，既可以與其他功能有效區分也很容易被識別。

推薦欄位于頁面底部，該模塊是對信息時效性的反思性設計，包括院校推薦、時事熱點信息推薦以及廣告推薦等，既不會給用戶造成視覺上的困擾，還因其迭代快的特點，為界面增添了新鮮感，該區域的點擊量有利于進行后臺對用戶數據的測試，是用戶偏好研究的有效方式。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

2）院校界面

界面效果

設計描述

2:19

旨頁升

專業

院校界面

中央美術學院

暹空院校代碼：10047

•2019年錄取：70

•2021年錄取：72

美術類院校雙一流大學

①北京市

中央美術學院

煜空院校代碼：10047

•2019年錄取：70

• 2021年錄取：72

美術類院校雙一流大學

0北京市

4$^中央美術學院

燃畫愛娜疣校代碼：10047

•2019年錄取：70

• 2021年錄取：72

美術類院校雙一流大學

©北京市

中央美術學院

魅羞於皖校代碼：10047

•2019年錄取：70

•2021年錄取：72

美術類院校雙一流大學

®北京市

中央美術學院

三校代碼：1°°47

• 2019年錄取：70

中央美術學院

毬處礬院校代碼：10047

• 2019年錄取：70

我的

Q搜索院校

搜索地區/歷史

華北地區

清華大學

院

校

全

部

中國科學技術大學

按地區搜索

華中地區

西南地區

搜索界面

類別

中央美術學院

燃羞色瓷四完校代碼：10047

•2019年錄取：70

•2021年錄取：72

美術類院校雙一流大學

®北京市

院校界面首先以空間布局、界面組件、色彩運用的整體性方法為目標，作為藝碩升微信小程序的核心功能頁，以展現內容信息為目的。院校信息界面通過卡片式的排列方式進行展示，避免了列表式與上方分類導航視覺相似造成的認知負擔。同時，被選中的卡片以梵高的油畫《星空》為背景，體現了隱喻性設計方法，更容易與藝術類用戶產生情感上的共鳴，并且給用戶以內心深處的激勵作用。

院校界面包含三個二級界面，分別是全部院校，專業院校以及分類別院校。卡片在點擊產生交互時，會產生放大效果并且轉化成品牌主色，起到強調作用，是目標性設計方法在界面中的體現。此外，界面右側添加了按照院校名稱首字母搜索的滑動搜索欄，更加注重用戶體驗，為用戶營造盡可能全面的搜索方式。

中國科學技術大學

鄭州大學

華北地區

西北地區

華東地區

東北地區

華南地區

港澳臺地區

全部院校界面點擊搜索圖標，會跳轉至該頁面，呈現形式仍為下方彈出，該界面可以顯示歷史搜索記錄，并采用精準搜索以及地區模糊搜索的方式。可以有針對性的滿足用戶對搜索的需求以及情感關懷。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

表 4.4 院校界面界面優化設計說明（表來源：作者自制）

界面效果設計描述

2:19

專業分類

請選擇您的專業

學術型碩士

專業型碩士

糊處理，提高用戶注意力，讓操作更具有目標性。上方彈出專業（模糊）搜索界面，點擊具體某一專業后，會顯示該專業的院校卡片。

2:19

點擊院校界面上方分類導航中的類別后，上方會彈出學校類別（模糊）搜索界面，點擊專業后，會顯示該類別院校的院校卡片。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

3）院校詳情界面

設計描述

院校詳情界面

界面效果

中央美術學院，簡稱“央美”，位于北京市，是中華人民共和國教育部直屬的高等美術學校，國家“雙一流”建設高校，入選國家建設高水平大學公派研究生項目、中國政府獎學金來華留學生接收院校和首批教育部來……展開V

央美往事

中央美術學院的前身是國立北平藝術專科學校，可以追溯至1918年教育家蔡元培先生倡導成立的國立北京美術學校美術教育家鄭錦擔任第一任校長。這是中國歷史上第一所國立美術教育學府，也是中國現代美術教育的……展開▽

在組件的設計上體現了界面的整體性，院校詳情界面分為背景區域，包含糾錯功能、在線咨詢和收藏功能的院校信息卡片，包含學校概況、招錄信息、關注考生、院校話題的院校詳情信息界面。

收藏圖標會在交互后產生相應的變化，從白底紫色圖形變為紫色底白色圖形輪廓，同時圖標搭配提示文字，減少用戶認知的障礙。

在線咨詢引導用戶操作行為的目標性，可跳轉至私信界面，減少了用戶操作的重復率，遇到有疑問或者心儀的院校可直接進行私信咨詢。

院系概況

據2020年12月23 H學校官網發布的2021年本科招生章程

信息顯示，學院設有中國畫學院、造型學科…… 展開▽

背景區域做了模糊（毛玻璃）的設計處理，讓界面內容呈現的更清晰，同時突出對用戶情感隱喻性的設計，開發者可以提供給用戶該院校具有代表性的圖片，用戶也可以自主更換喜愛的背景圖片/視頻，為用戶提供個性化選擇。界面圖標通過色彩的突出，為圖標增加了強調作用，更加醒目。

突出隱喻性設計原則，用戶可通過下滑信息組件，看完整的背景圖片，了解更多院校風貌。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

界面效果

設計描述

該頁面還特別添加了關注考生的私信轉換窗口，對該院校關注考生可進行更直觀的查看。關注考生的圖標顏色采用與主色相同的顏色，是一級注意區域，私信入口的圖標采用同色系的淺紫色，是二級注意區域，可以有效起到對用戶的視覺引導作用。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

4）私信界面

私信界面在設計時，將對話框設計為圓角，打破常規的方形對話框，更有創新意味，界面呈現也更顯活潑。

界面上方可在不退出該界面的情況下切換至其他用戶的私信界面，操作更方便。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

5）個人信息界面

界面效果設計描述

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

表 4.7 個人信息界面優化設計說明（表來源：作者自制）

界面效果設計描述

2:19 C- ■3，

T®)

< 我的算分記錄

算分記錄1

2022/03/17 ■ 1

2:19 ?川令»•

個人信息 ―®

您注冊的是：

學術型研究生

專業型研究生

修改成績

英語政治成績估分

360

專業課成績估分

270

在用戶必須進行手動輸入信息的界面，突出目標性設計方法，讓用戶可以更直觀的看到界面中可以點擊的區域。并且在需要填寫的位置添加提示性文字信息，減少用戶的認知成本。

確認修改

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

設計描述

糾錯詳情界面

界面效果

糾錯日期

2022.03.18

糾錯評分

糾錯內容

中央美術學院，簡稱“央美”，位于北京市，是中華人民共和國教育部直屬的高等美術學校，國家“雙一流”建設高校，入選國家建設高水平大學公派研究生項目、中國政府獎學金來華留學生接收院校和首批教育部來華留學示范基地。

糾錯區域體現了反思性設計方法，在調研中多次得出用戶需要安全的應用信息環境。作者在與品牌方協商后，建議增添該功能，可以對界面有誤信息進行實時更改，給用戶安全、可靠的考研信息平臺。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

6）彈窗界面

表 4.8 個人信息界面優化設計說明（表來源：作者自制）

界面效果

.ill & ■

增加了個性化彈窗設置，采用信封樣式，顏色延續了品牌主色調，品牌標志在彈窗界面重復出現，增添了品牌傳播效果，背景采用毛玻璃的藝術效果，突出彈窗信息的同時，更具設計感。

備注：界面內容信息及數字僅為了展示界面效果，不具有參考性。

4.2.4 界面效果展示

圖 4.10 藝碩升微信小程序界面效果圖

（圖片來源：作者自制）

圖 4.11 藝碩升微信小程序首頁界面展示

圖片來源：作者自制）

圖 4.13 藝碩升微信小程序私信界面展示

圖片來源：作者自制）

圖 4.14 藝碩升微信小程序個人信息界面展示

（圖片來源：作者自制）

4.3界面視覺用戶滿意度測試

用戶測試（UserTesting）是一種常見的用戶調研方法，主要目的是為了洞察用戶如何看待并使用該產品，從而確定當前設計是否需要進行調整。用戶測試方法主要有結構式以及非結構式問卷法、觀察印象方法、指導式和非指導式的面談法等。對用戶滿意度的測試有利于界面視覺設計進行反思從而不斷迭代、創新。例如，用戶在進入到界面后，不能在第一時間找到想要使用的功能，界面中心區域被鋪天蓋地的廣告信息占據，一旦遇到這樣的體驗，就會造成用戶不好的使用體驗，嚴重的話會導致用戶不再使用該產品。

本研究的設計實踐部分采用問卷的形式（如表4.9、表4.10所示），運用李克特五分量表法對藝碩升微信小程序優化前及優化后的界面進行空間布局、色彩、文字、圖形、情感五個維度的用戶滿意度測試。優化前及優化后的測試問卷如下：

表 4.9 用戶滿意度測試問卷調查內容表（表來源：作者自制）

藝碩升微信小程序優化前界面視覺設計用戶滿意度測試

測試

維度測試內容非常滿意滿意一般不滿意很不滿意

空間界面功能層級的設置 ◎ ◎ ◎ ◎ ◎

布局界面版式布局 ◎ ◎ ◎ ◎ ◎

層面界面導航欄 ◎ ◎ ◎ ◎ ◎

界面廣告推送欄 ◎ ◎ ◎ ◎ ◎

色彩界面整體色調、色彩 ◎ ◎ ◎ ◎ ◎

層面界面主色調 ◎ ◎ ◎ ◎ ◎

文字界面出現的提示性文字 ◎ ◎ ◎ ◎ ◎

層面界面字體樣式 ◎ ◎ ◎ ◎ ◎

圖形

層面界面圖標 ◎ ◎ ◎ ◎ ◎

界面圖形

界面圖標與整體視覺元素統一 ◎

◎ ◎

◎

界面排版具備對齊性 ◎ ◎ ◎ ◎ ◎

情感界面色彩/圖形的對比性 ◎ ◎ ◎ ◎ ◎

層面界面組件、元素間距的親密性 ◎ ◎ ◎ ◎ ◎

界面視覺元素的一致性 ◎ ◎ ◎ ◎ ◎

表 4.10 用戶滿意度測試問卷調查內容表（表來源：作者自制）

藝碩升微信小程序優化后界面視覺設計用戶滿意度測試

測試測試內容非常滿意滿意一般不滿意很不滿意

維度

空間界面功能層級的設置 ◎ ◎ ◎ ◎ ◎

界面版式布局 ◎ ◎ ◎ ◎ ◎

布局 ◎ ◎ ◎ ◎ ◎

層面界面導航欄

界面廣告推送欄 ◎ ◎ ◎ ◎ ◎

色彩界面整體色調、色彩 ◎ ◎ ◎ ◎ ◎

層面界面主色調 ◎ ◎ ◎ ◎ ◎

文字界面出現的提示性文字 ◎ ◎ ◎ ◎ ◎

層面界面字體樣式 ◎ ◎ ◎ ◎ ◎

圖形界面圖標 ◎ ◎ ◎ ◎ ◎

界面圖形 ◎ ◎ ◎ ◎ ◎

層面

界面圖標與整體視覺元素統一 ◎ ◎ ◎ ◎ ◎

界面排版具備對齊性 ◎ ◎ ◎ ◎ ◎

情感界面色彩/圖形的對比性 ◎ ◎ ◎ ◎ ◎

層面界面組件、元素間距的親密性 ◎ ◎ ◎ ◎ ◎

界面視覺元素的一致性 ◎ ◎ ◎ ◎ ◎

在線上進行問卷收集后，共回收了 214 份藝碩升微信小程序優化前后的界面視覺設計用戶滿意度測試問卷，剔除無效問卷后對 200 份有效問卷進行分析，結果（如圖 4.15 所示），優化后的用戶滿意度得到大幅提升，“一般、滿意、非常滿意”的雷達矩陣均呈現擴張趨勢，用戶滿意度高于 73%，是有效提高用戶滿意度的設計方案。

4.4本章小結

本章節是基于本文提出的設計方法及模式展開的設計實踐，是藝碩升微信小程序的具體設計階段。與項目負責人交流溝通后，在原有功能的基礎上首先確定了藝碩升微信小程序的信息架構、繪制用戶畫像、設計品牌標志、界面圖標等，其次通過前期界面視覺用戶需求分析對界面進行空間布局和組件的設計并得出低保真原型圖。再次，通過前期對界面視覺用戶情感分析對其他視覺元素進行設計。最后，對設計方案進行用戶測試，測試結果顯示，優化后的藝碩升微信小程序界面視覺設計，用戶滿意度高于先前設計方案，驗證了本研究提出的界面視覺設計方法及模式可以有效提高用戶體驗。

5教育類微信小程序界面視覺設計模式評估

當前，界面視覺設計尚沒有成熟的評價體系，本章節所提出的評價體系，在快速發展的信息時代下，會隨著學術研究的不斷發展出現新的評價因子，同時也會淘汰陳舊的因子，評價因子并不具有唯一性，是不斷變化和迭代的。（如圖5.1 所示）是評價體系建立的四個關鍵環節，層次結構一般為多層次結構評價體系①。設計評估過程中的評審角色包括、設計人員及教育類微信小程序用戶群體，保證對教育類微信小程序界面視覺設計展開專業、科學、有效的評估。評審的參與者一般由專家與用戶組成。

確定評價因素

建立層次結構

確定因子權重

圖 5.1 評價體系關鍵環節（圖片來源：作者自制）

5.1評價體系構建原則

（1）科學性原則評價體系遵循科學性原則，首先在調研方法上，確保教育類應用用戶的數據收集來

源是真實可靠的，其次在數據分析及評價方式上保證方法的科學性，要求評價體系的權重設計、評分標準符合科學規律。

（2）動態原則微信小程序更新迭代周期較短，部分評價因子會依據時間、互聯網環境、網絡形式

及用戶需求變化，權重因素也會根據迭代周期發生變化，產生增加或消減。教育類微信

①高琳.藝術小鎮服務設計評價體系研究[M].南昌:江西美術出版社,2020. 9.

75 小程序界面視覺元素維度及用戶情感維度的評價隨著技術及社會的變化，存在動態性，在應用兩年后應考慮界面視覺設計評價因子的再審核。

（3）由整體到局部的測量原則教育類微信小程序界面視覺設計評價，目的是找出教育類微信小程序界面視覺設計中存在的問題，更好的優化其界面視覺設計，因此，從整體到局部的測量方式可以更全面的對數據進行采集及測評，盡量避免重要因子的缺失。

5.2構建評價指標體系

5.2.1 評價體系層級本研究的評價體系層級設計是以主觀評價體系為主的界面視覺設計評價（如圖 5.2 所示）。

圖 5.2 評價體系層級圖圖片來源：作者自制）

5.2.2評價因子的結構層次

在對界面視覺設計方法和模式的構建過程中，通過對微信小程序界面視覺設計的用戶體驗調查問卷、用戶需求 Kano 模型問卷以及情感價值層面的用戶深度訪談及數據分析，確定了教育類微信小程序界面視覺設計評價體系的因素集。從視覺元素及用戶情感兩個維度劃分出空間布局、色彩、文字、圖形以及情感五個層面構建教育類微信小程序界面視覺設計評價體系，共包含4個層次，目標層、2 個一級指標，5個二級指標，15 個三級指標（如表 5.1 所示）。

表 5.1 教育類微信小程序界面視覺設計評價因子的結構層次（表來源：作者自制）

目標層一級指標二級指標三級指標評價內容

A1 B1 視覺元素 C1 空間布局層面 D1 功能層級功能層級清晰明確

D11圖標與整體視覺元素圖標與整體視覺元素統一

B[5.2.3評價指標的分析] [ B1 視覺元素

C1空間布局層面是指在教育類微信小程序界面視覺中包括功能層級、布局、導航欄、廣告推送欄等視覺元素的整體空間布局，是用戶體驗框架層在界面視覺設計的首要體現。

C2 色彩層面是指教育類微信小程序界面包括圖標、圖片、圖形、字體、導航欄等視覺元素的色調、色彩的搭配和使用以及品牌主色調的設計是否符合用戶的審美及情感價值，

C3 文字層面是指教育類微信小程序界面圖標和可操作區域起提示作用的文字以及包含可能出現在圖片中的文字所應用的字體樣式的美觀程度。

C4 圖形層面是指教育類微信小程序界面圖形、圖片是否賦有美感和創意，圖標是否簡潔易識別以及圖標與整體視覺元素間的統一。] [ B2 用戶情感] [C5情感層面是指教育類微信小程序界面中能夠間接給用戶帶來情感上共鳴的設計] [方式，包括界面排版是否具備對齊性，界面色彩、圖形是否具備對比性，界面組件、元素間是否具備親密性以及界面視覺元素在設計風格及實現形式上是否具有一致性。]用戶情感C[77]情感層面 D12對齊性界面排版具備對齊性

D13對比性界面色彩/圖形具備對比性

D14親密性界面組件、元素間具備親密性

D15 一致性界面視覺元素具有一致性

5.3判斷矩陣構造及權重計算

確定評價因子的結構層次后，制定了教育類微信小程序界面視覺設計評價體系權重值調查問卷，向高校、界面設計企業的15名專家發放了征詢問卷，發送專家均對UI設計有較為深入的研究。12天后回收有效問卷14份，專家對影響因子給予了建議并給出相應的賦值。在后續的數據設計中，首先對根據14 名專家在教育類界面視覺設計評價體系專家問詢表（問詢表詳情見本文附錄B）中的打分數據進行分析及整理，對專家給出的指標權數進行均值大小關系分析并重新構造判斷矩陣，以保證數據結果的準確性。調查結果顯示，教育類界面視覺設計評價體系未增減評價因子。

5.3.1 構造判斷矩陣

表 5.2 9 個重要性等級及其賦值

標度含義

1 G元素和Cj元素的影響相同

3 G元素比Cj元素的影響稍強

5 Ci元素比Cj元素的影響強

7 Ci元素比Cj元素的影響明顯的強

9 Ci元素比Cj元素的影響絕對的強

2,4,6,8 Ci元素比Cj元素的影響之比在上述兩個相鄰等級之間

1,1/2, -,1/9 Ci元素比Cj元素的影響之比為上面Cij的倒數

5.3.2權重系數及一致性檢驗

（1） 1-10階的判斷矩陣的RI（如表5. 3所示）:

表 5.3 矩陣階數為 1-10 的 RI 取值

階數 1 2 3 4 5 6 7 8 9 10

RI 0.00 0.00 0.52 0.89 1.12 1.26 1.36 1.41 1.46 1.49

表中n=1, 2時RI=O,是因為1, 2階的正互反矩陣總是一致陣。

（2）第一層指標判斷矩陣及權重計算

根據指標體系，選取本領域企業專家及高校專家共 14 位，分別對教育類微信小程序界面視覺設計評價體系中的三層指標的重要程度進行打分，然后對打分結果再進行了內部的討論和歸納，一級指標得到兩兩判別矩陣如下:

B1 B2

B1 1 2

B2 1/2 1

用MATLAB軟件計算判斷矩陣S的最大特征根得2max = 2。運用MATLAB軟件計算出指標的權重。

指標層權重

B1 0.6667

B2 0.3333

(3)二級指標判斷矩陣及權重計算采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第二層中各項指標權重。構造判斷矩陣S = (uj)即：

X p

C1 C2 C3 C4

C1 1 3 4 3

C2 1/3 1 2 2

C3 1/4 1/2 1 1

C4 1/3 1/2 1 1

用MATLAB軟件計算判斷矩陣S的最大特征根得Amax = 4.0458。為進行判斷矩陣的一致性檢驗，需計算一致性指標：

平均隨機一致性指標RI = 0.89。隨機一致性比率:

CR =—= =0.0153 - 0.0172 < 0.10

RI 0.89

因此認為教育類微信小程序界面視覺設計評價體系層次分析的結果有滿意的一致

性，即權系數的分配是非常合理的。運用MATLAB軟件計算出指標的權重。

指標層權重

C1 0.5166

C2 0.2257

C3 0.1235

C4 0.1341

(4)三級指標判斷矩陣及權重計算采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第三層空間布局層面的四個指標的權重，構造判斷矩陣S = (Ujj) 即:

pXp

D1 D2 D3 D4

D1 1 2 5 5

D2 1/2 1 2 3

D3 1/5 1/2 1 1

D4 1/5 1/3 1 1

用MATLAB軟件計算判斷矩陣S的最大特征根得Amax = 4.0155。為進行判斷矩陣的一致性檢驗，需計算一致性指標：

平均隨機一致性指標RI = 0.89。隨機一致性比率:

CR =乞 =00052 = 0.0058 < 0.10

RI 0.89

因此認為教育類微信小程序界面視覺設計評價體系層次分析的結果有滿意的一致

性，即權系數的分配是非常合理的。運用MATLAB軟件計算出指標的權重。

指標層權重

D1 0.5259

D2 0.2616

D3 0.1117

D4 0.1008

采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第三層色彩層

面的兩個指標的權重，構造判斷矩陣S = (uj) 即:

X p

D5 D6

D5 1 3

D6 1/3 1

用MATLAB軟件計算判斷矩陣S的最大特征根得2max = 2。運用Matlab軟件計算出指標的權重。

指標層權重

D5 0.75

D6 0.25

采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第三層文字層面的兩個指標的權重，構造判斷矩陣S = (uj) 即:

pXp

D7 D8

D7 1 4

D8 1/4 1

用MATLAB軟件計算判斷矩陣S的最大特征根得2max = 2。運用MATLAB軟件計算出指標的權重。

指標層權重

D7 0.8

D8 0.2

采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第三層圖形層

面的三個指標的權重，構造判斷矩陣S = (uj) 即:

pXp

D9 D10 D11

D9 1 1/4 1/6

D10 4 1 1/2

D11 6 2 1

用MATLAB軟件計算判斷矩陣S的最大特征根得Amax = 3.0092。為進行判斷矩陣的一致性檢驗，需計算一致性指標：

平均隨機一致性指標RI = 0.52。隨機一致性比率:

CR =乞 =°.0046 = 0.0088 < 0.10

RI 0.52

因此認為教育類微信小程序界面視覺設計評價體系層次分析的結果有滿意的一致

性，即權系數的分配是非常合理的。運用MATLAB軟件計算出指標的權重。

指標層權重

D9 0.0890

D10 0.3234

D11 0.5876

采用層次分析的方法求出教育類微信小程序界面視覺設計評價體系第三層情感層面的兩個指標的權重，構造判斷矩陣S = (Ujj) 即:

pXp

D12 D13 D14 D15

D12 1 3 1 1/2

D13 1/3 1 1/2 1/4

D14 1 2 1 1/2

D15 2 4 2 1

用MATLAB軟件計算判斷矩陣S的最大特征根得Amax = 4.0206。為進行判斷矩陣的一致性檢驗，需計算一致性指標:

平均隨機一致性指標RI = 0.89。隨機一致性比率:

CI 0.0069

CR =——匚 - —0.0077 < 0.10

RI 0.89

因此認為教育類微信小程序界面視覺設計評價體系層次分析的結果有滿意的一致性，即權系數的分配是非常合理的。運用MATLAB軟件計算出指標的權重。

指標層權重

D12 0.2437

D13 0.0994

D14 0.2190

D15 0.4379

5.3.3主觀評價因子的權重

按照上一小節5.3.2的建模及權重計算給出主觀評價因子的權重（如表5.4所示）。

表 5.4 教育類微信小程序界面視覺設計評價體系主觀評價因子權重（表來源:作者自制）

指標層權重指標層權重指標層權重綜合權重

B1 視覺元素 0.6667 C1 空間布局 0.5166 D1 功能層級清晰明確 0.5259 0.1811

D2 空間布局規整 0.2616 0.0901

D3 設置導航欄 0.1117 0.0385

D4廣告欄位置及大小考究 0.1008 0.0347

C2 色彩層面 0.2257 D5 色調、色彩協調 0.75 0.1129

D6 品牌主色調融入界面視覺 0.25 0.0376

C3 文字層面 0.1235 D7 界面圖標和可操作區域有文字信息提示 0.8 0.0659

D8 字體樣式美觀 0.2 0.0165

C4 圖形層面 0.1341 D9 圖形、圖片賦有美感/創意 0.089 0.0080

D10 圖標簡潔易識別 0.3234 0.0289

D11 圖標與整體視覺元素統一 0.5876 0.0525

B2 用戶情感 0.3333 C5 情感層面 1 D12 界面排版具備對齊性 0.2437 0.0812

D13 界面色彩/圖形具備對比性 0.0994 0.0331

D14界面組件、元素間具備親密性 0.219 0.0730

D15界面視覺元素具有一致性 0.4379 0.1460

5.3.4主觀評價因子的評分標準

根據專家打分表收集、教育類應用用戶訪談以及專家給出對指標解釋及具體因子的分值區間，由于用戶體驗評價因子的特殊性，分別制定指標判斷的標準，經過多次討論，得到主觀評價體系全部因子的評分標準（如表5.5所示）。

表5.5教育類微信小程序界面視覺設計評價體系主觀評價因子的評分標準釋義（表來源：作者自制）

第三層指標指標解釋分值評定辦法

D1 功能層級清晰明確界面中從頂級界面到各個功能的詳情頁面的入口及層次清晰。非常滿意10分、較為滿意8-9分、滿意5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D2 空間布局規整界面各功能以及各個組件的位置布

置合理規整。非常滿意10分、較為滿意8-9分、滿意5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D3 設置導航欄界面是否設置導航欄，以及導航欄的實用性及美觀性。設置導航欄且具有實用性及美觀性 7-10 分，設置導航欄且具有實用性及美觀性中的一種 3-7 分、未設置導航欄但界面具備實用性及美觀性7-10分、未設置導航欄但界面整體具備實用性及美觀性中的一種 3-7 分、未設置導航欄且不具備實用性及美觀性 1-3 分。

表 5.5 教育類微信小程序界面視覺設計評價體系主觀評價因子的評分標準釋義（表來源:作者自制）

第三層指標指標解釋分值評定辦法

D4 廣告欄位置及大小考究界面是否設置廣告欄，以及廣告欄的

實用性及美觀性。設置廣告欄且具有實用性及美觀性 7-10 分，設置廣告欄且具有實用性及美觀性中的一種 3-7 分、未設置廣告欄但界面具備實用性及美觀性 7-10 分、未設置廣告欄但界面整體具備實用性及美觀性中的一種 3-7 分、未設置廣告欄且不具備實用性及美觀性1-3分。

D5 色調、色彩協調界面色調、色彩具有協調性。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D6 品牌主色調融入界面視覺將品牌主色調或主要元素與界面色彩、圖標等視覺元素相結合。品牌主色調與界面視覺元素充分融合 10分、品牌主色調與界面視覺元素結合并且融合的較好 7-9 分、品牌主色調與界面視覺元素結合但融合不夠充分4-6分、品牌主色調與界面視覺元素沒有關聯但界面色彩色調較好 4-10 分、品牌主色調與界面視覺元素沒有關聯且色彩色調不夠協調 1-3 分。

D7 界面圖標和可操作區域有文字信息提示界面圖標以及可操作區域的下方或周圍有提示性說明文字，告知用戶圖標以及功能的作用，并指引用戶的操作行為。有提示說明文字且具有實用性及美觀性 7-10 分，有提示說明文字且具有實用性及美觀性中的一種 3-7分、沒有提示說明文字但界面具備實用性及美觀性 7-10 分、沒有提示說明文字但界面整體具備實用性及美觀性中的一種 3-7 分、沒有提示說明文字且不具備實用性及美觀性 1-3 分。

D8 字體樣式美觀界面使用的字體樣式、字號大小是否

美觀、實用。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D9 圖形、圖片賦有美感/ 創意界面使用的圖形、圖片賦有美感和創

意。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D10 圖標簡潔易識別界面使用的圖標簡潔且容易識別。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D11 圖標與整體視覺元素

統一界面使用的圖標與界面整體的視覺元素具有一致性，搭配不違和。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D12界面排版具備對齊性界面排版中各個視覺元素，如組件、圖片、圖標等均以對齊的形式出現。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D13 界面色彩/圖形具備對比性界面色彩、圖形在表達不同功能涵義時色彩、大小方面具備對比性，通過對比進行有效區分。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D14 界面組件、元素間具備親密性界面組件、元素間的間距、排列以及組合方式具備親密性，方便用戶對相同及不同鉆、元素進行區分。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

D15 界面視覺元素具有一致性界面全部視覺元素具有整體一致性，例如色彩、文字、圖標等方面有一整套完整的色彩規范。非常滿意 10分、較為滿意 8-9分、滿意 5-7 分、一般滿意 2-4 分、不滿意 0-1 分。

備注:對專家打分進行加權平均值計算后得出總分，總分在1-3分為需要改進，4-6分為部分因子需要改進，

7-8 分為整體較好，9-10 分為最好。

5.4定性評價結果

共有10位專家及用戶參照（如表5.5所示）的教育類微信小程序界面視覺設計評價體系的主觀評價體系評分標準，對本文的界面視覺設計實踐項目，藝碩升微信小程序進行打分（如表 5.6 所示）。

表5. 6藝碩升微信小程序界面視覺設計專家打分得分表（表來源:作者自制）

第三層指標得分權重

D1 功能層級清晰明確 8.50 0.1811

D2 空間布局規整 8.25 0.0901

D3 設置導航欄 7.75 0.0385

D4廣告欄位置及大小考究 7.25 0.0347

D5 色調、色彩協調 8.75 0.1129

D6 品牌主色調融入界面視覺 8.50 0.0376

D7 界面圖標和可操作區域有文字信息提示 8.00 0.0659

D8 字體樣式美觀 7.50 0.0165

D9 圖形、圖片賦有美感/創意 8.50 0.0080

D10 圖標簡潔易識別 8.00 0.0289

D11 圖標與整體視覺元素統一 8.50 0.0525

D12 界面排版具備對齊性 8.75 0.0812

D13 界面色彩/圖形具備對比性 7.50 0.0331

D14界面組件、元素間具備親密性 8.50 0.0730

D15界面視覺元素具有一致性 8.75 0.1460

權重計算后的總得分:8.39

對 10位專家及用戶的打分結果進行加權平均值計算，得出藝碩升微信小程序的界面視覺設計的總得分為8.39分，用戶對優化后的界面較為滿意，研究提出的教育類微信小程序界面視覺設計方法及模式具有一定的參考價值。

6結論

界面視覺設計的深入研究是時代發展的需要，本研究以期為教育類微信小程序以及其他領域的利益相關者創造增值效益，提出可供未來相關領域參考的教育類微信小程序界面視覺設計方法及模式。

6.1 研究的結論

（1）研究通過加入深層審美心理學領域的研究，得出用戶視覺審美心理可以通過界面視覺用戶需求分析、界面視覺用戶情感分析、界面視覺用戶滿意度測試在界面視覺設計中轉化的觀點。

（2）研究通過對用戶在教育類微信小程序界面視覺層面的需求分析，運用基本信息問卷調查以及 Kano 標準化需求問卷調查，得出五項用戶的期望型需求，分別是功能層級清晰明確、空間布局規整、色彩協調、圖標與整體視覺元素統一、界面組件與元素間具備親密性，是可以提高界面核心競爭力的需求。得出六項用戶的魅力型需求，分別是設置導航欄、廣告推送欄位置及大小考究、品牌主色調融入界面視覺、界面圖標和可操作區域有文字信息提示、界面排版具備對齊性以及界面視覺元素具有一致性，是需要挖掘和洞悉才能獲得的，有利于提高用戶忠誠度的需求。還得出四項用戶的基本需求，分別是字體樣式美觀、圖形以及圖片賦有美感和創意、圖標簡潔易識別、界面色彩和圖形具備對比性，是教育類微信小程序界面視覺的基本需求。用戶需求研究為界面布局及組件的設計提供依據。

（3）研究通過對用戶在教育類微信小程序界面視覺層面的情感分析，運用用戶訪談、

AT-one模態分析，對需求內容進行檢驗，訪談結果一致，其中15項需求因子對教育類微信小程序界面視覺設計有效。用戶情感研究為界面色彩、圖形、圖片、文字的設計提供依據。

（4）研究提出整體性、目標性、傳播性、隱喻性、反思性五個教育類微信小程序界面視覺設計方法。整體性設計方法包括空間布局、界面組件、色彩運用三個維度，目標性設計方法包括用戶注意力、用戶操作行為兩個維度，傳播性設計包括內容信息、品牌理念兩個維度，隱喻性設計包括空間留白、用戶情感兩個維度，反思性設計包括信息時效、迭代邏輯兩個方面。教育類微信小程序界面視覺設計方法為界面視覺領域的學者提供理論參考。

（5）研究構建了教育類微信小程序界面視覺設計模式，旨在界面視覺設計過程中包含了用戶需求、用戶情感、用戶滿意度測試的用戶研究環節。通過將該模式在藝碩升微信小程序進行設計實踐，并對設計方案進行用戶滿意度測評，測評結果顯示優化后的用戶滿意度得到大幅提升，表示用戶“一般、滿意、非常滿意”的雷達矩陣均呈現擴張趨勢，用戶滿意度高于 73%，是有效提高用戶滿意度的設計方案。

（6）研究通過構建教育類微信小程序界面視覺設計評價體系，再次對需求內容及設計進行驗證。運用提出的教育類微信小程序界面視覺設計方法及模式展開的實踐設計，經專家及用戶打分后，分數明顯優于先前的設計方案，綜合評價結果進一步驗證了本文提出的設計方法及模式的可行性。

6.2 研究的局限性

由于本文設計領域較為寬泛，其中不少章節包含跨學科知識體系，因此僅僅從教育類微信小程序出發展開探索，其中定有不足之處，例如對情感的測量往往是多元且易變的，測量手法也具有主觀性，具有很大挑戰性。希望今后能在界面及更多領域作出更多深入細致的研究。

參考文獻

[1]中國互聯網絡信息中心(CNNIC).中國互聯網絡發展狀況統計報告[R].北京：中央網絡安全和信息化領導小組辦公室,2021.48.

[2](美)艾倫•庫伯.About Face4:交互設計精髓:紀念版[M].北京：電子工業出版社,20 20.5.

[3]龔柏茂，鄧蘇婷.移動應用端中“新人禮”交互界面設計[J].浙江師范大學學報(自然科學版),2022,45(01):35-41.

[4]孫雄飛，吳祐昕.基于用戶心理模型的短視頻類App界面設計研究一一以快手為例[J]. 設計,2021,34(04):48-50.

[5]岳婉琪•基于新媒體時代的企業網頁界面視覺設計[D].福州：福建師范大學,2018.

[6]劉美杰•基于城市特色文化的掌上公交App界面視覺設計研究[D].天津:河北工業大學,2017.

[7]李怡云•視錯覺在界面視覺設計中的應用探析[D].濟南：山東大學,2018.

[8]陳亞男.公益平臺類App界面視覺設計研究[D].武漢:武漢紡織大學,2017.

[9]張孜涵•基于情感體驗的教育類微信小程序界面設計研究[D].武漢:湖北工業大學,2 021.

[10]陳星海•移動應用界面視覺設計美學發展及其設計方法研究J].裝飾,2020(01) :92 -95.

[11]殷佳麗•基于情感化設計的兒童互聯網產品界面視覺設計研究[D].蘇州：蘇州大學， 2014.

[12]江亞妮•基于用戶體驗的移動應用界面視覺設計的研究[D].上海:東華大學,2016.

[13]肖紅，郭歌•多感官人機交互界面的視覺設計原則[J].包裝工程,2012, 33(08):35-3 7+48.

[14]淡珊.絲路文化旅游App界面視覺設計研究[D].西安：西安建筑科技大學,2019.

[15]郝晶,孫亞云.面向學齡前兒童的App界面視覺設計原則[J].設計,2015.

[16]任悅.基于用戶體驗的購物App界面視覺設計研究[D].沈陽：沈陽建筑大學,2020.

[17]楊煥，陳星海.智能互聯時代下基于用戶體驗的移動應用界面設計研究[J].設計,20 19,32(17):38-40.

[18](美)Jesse James Garrett.用戶體驗要素[M].北京:機械工業出版社,2011:135.

[19](英)孫孝華.多蘿西•孫.白路譯.色彩心理學[M].上海:上海三聯書店,2017. 1.

[20]張玉能.深層審美心理學[M].武漢:華中師范大學出版社,2018. 1.

[21](美)Donald A. Norman.小柯譯.設計心理學1: 日常的設計[M].北京：中信出版社,2015.5.

[22](美)Donald A. Norman.何笑梅，歐秋杏譯.設計心理學3:情感化設計[M].北京：中信出版社,2015.6.

[23]黃宇瓊.湘風云繡微信小程序營銷平臺設計[D].長沙:湖南師范大學,2020.

[24]王琳.品牌傳播新媒介一品牌App界面設計研究與探索[D].上海:東華大學,2014.

[25]高琳.藝術小鎮服務設計評價體系研究[M].南昌：江西美術出版社,2020. 9.

[26]孟慶林.場景化社交游戲中界面設計的優化研究[J].包裝工程,2020, 41 (22) :251-2 57.

[27]毛舒，肖龍.針對老年用戶群體的微信視覺改善設計研究[J].包裝工程,2020, 41 (0 4):177-181+251.

[28]王青嵩.智能手機圖形界面的扁平化視覺設計[J].出版廣角，2017 (08) : 69-71.

[29]張立.基于用戶的移動應用產品界面視覺設計研究[J].理論月刊，2017.

[30]翟佳佳，張輝•“數字唐陵”用戶界面的設計原則研究[J].包裝工程,2016, 37(18) :6 7-71.

[31]胡杰,萬萱,李芳宇.數字化公共文化平臺界面的人性化設計研究[J].包裝工程,201 5,36(22):43-46+56.

[32](日)樽本徹也，陳嘯譯.用戶體驗與可用性測試[M].北京:人民郵電出版社,2015. 4.

[33]陳星海，楊煥，廖海進.基于效率的移動界面視覺設計美學發展研究[J].包裝工程,2 015,36(16):107-110.

[34]趙志俊，張凌浩.智能電飯煲界面用戶體驗原則與設計策略研究[J].包裝工程,2017, 38(2):156-160.

[35]陳為.用戶體驗設計要素及其在產品設計中的應用[J].包裝工程,2011, 32 (10) : 138 -140.

[36]吳瓊，劉軍.手機革命從功能到服務的手機設計轉向[J].裝飾,2013 (1) : 16-21.

[37]任美琪，謝慶森.手機交互界面中圖標的隱喻設計研究[J].包裝工程,2014, 35(4):2 9-31.

[38]戴力農.當代設計研究理念一用戶體驗•超人性化設計方法[M].上海:上海交通大學出版社,2009.

[39](美)Jesse James Garrette.范曉艷譯.用戶體驗要素：以用戶為中心的產品設計[M]. 北京:機械工業出版社,2015.1.

[40](美)Steve Krug.蔣芳譯.點石成金[M].北京:機械工業出版社,2015. 8.

[41](美)Willians R.蘇金國等譯.寫給大家看的設計書[M].北京:人民郵電出版社,201

6.1.

[42]羅仕鑒,朱上上.用戶體驗與產品創新設計[M].北京:機械工業出版社,2015. 7.

[43](美)Rachel Hinman.熊子川，李滿梅譯.移動互聯:用戶體驗設計指南[M].北京:北京清華大學出版社,2013:116.

[44]顧振宇.交互設計原理與方法[M].北京:清華大學出版社,2016:247-248.

[45]劉再行.UI交互設計流程的探索與教學實踐[J].裝飾,2015 (261) :136-137.

[46]Lin F,Wei W.An Empirical Study on User Experience Evaluation and Identification of Critical UX Issues [J].Sustainability,2019,11(8):1-19.

[47]Tobias Mettler,Markus Eurich,Robert Winter.On the use of experiments in design science research:A proposition of an evaluation framework[J].Communications of the Association for Information Systems,2014,34(1):223-240.

[48]Andreas Sonderegger,Juergen Sauer.The influence of design aesthetics in usability testing:Effects on user performance and perceived usability[J].Applied Ergonomics,2010,41:403-410.

[49]Safurah Abdul Jalil,Beryl Plimmer,Ian Warren.Deconstructing Graphical User Interface for Learning Visual Aesthetics[C].The 7th International Conference on Computer Science&Education(ICCSE 2012).Melbourne:IEEE Press,2012:1549-1554.

[50]LetiziaBollini.Beautifulinterfaces.Fromuserexperiencetouserinterface design[J].The Design Journal,2017,20:89-101.

[51]Sauro J,Zarolia P.SUPR-Qm: A Questionnaire to Measure the Mobile App User Experience [J]. Journal of Usability Studies, 2017,13(1):17-37.

[52]Huang G H,Korfiatis N.Trying Before Buying:The Moderating Role of Onl ine Reviews in Trial Attitude Formation Toward Mobile Applications [J].International Journal of Electronic Commerce,2015,19(4):77-111.

[53]Schrepp M,Hinderks A,Thomaschewski J.Construction of a Benchmark for the User Experience Questionnaire(UEQ)[J].International Journal of Interactive Multimedia and Artificial Intelligence,2017,4(4):40-44.

[54]Verkijika S F,Wet L D.Understanding Word-of-mouth(WOM) Intentions of Mobile App Users: The Role of Simplicity and Emotions during the First Interaction [J].Telematics and Informatics,2019,41:218-228.

[55]Patrick C.Compiling User Experience Metrics Via Quantitative and Qualitative Methods [J].Applied Marketing Analytics,2021,6(4):353-358.

[56]湯汪艷•基于用戶體驗的手工藝微信小程序設計研究[D].杭州：中國美術學院,201 8.

[57]唐琳,常瑜.以用戶為中心的手持移動設備App界面設計研究[J].山東社會科學,201 5(S2):97-99.

[58]江梅梅•傳統文化視覺元素在App界面設計中的應用探析[J].滁州學院學報,2021, 2 3(04):47-51.

[59]陳抒,陳振華.用戶研究的踐行之路[M].北京:清華大學出版社,2018.

[60]宋琛.圖案元素在視覺傳達設計中的應用分析[J].藝術品鑒,2021 (20) : 74-75.

[61]吳彬•跨媒介閱讀下手機App界面的視覺藝術設計研究[D].南昌：南昌大學,2020.

[62]錢靜.基于用戶行為層次的網購App界面視覺設計研究[D].重慶:重慶郵電大學,202 0.

[63]魏雅麗.基于AHP和FCE的手機App界面視覺設計研究[D].蘭州:蘭州理工大學,202 0.

[64]曹粲.基于文化轉譯的傳統文化類App界面視覺設計研究[J].工業設計,2020 (05) : 1 27-130.

[65]魏雅麗，李麗，敬利平.基于AHP的手機App界面視覺設計影響因素的探究[J].中國包裝,2020,40(05):59-61.

[66]侯瑩.基于用戶體驗的手機界面視覺表現分析[J].包裝工程,2016.