最美中國精神

李鑫力　趙光澤

關(guān)鍵詞：中國精神 文化創(chuàng)新 UI設(shè)計流程 設(shè)計教學體系 項目式教學

中圖分類號：J504 文獻標識碼：A

文章編號：1003-0069（2022）02-0090-04

引言

近年來文化創(chuàng)新設(shè)計教學實踐主要集中在中華優(yōu)秀傳統(tǒng)文化傳承與創(chuàng)新上，例如非物質(zhì)文化遺產(chǎn)創(chuàng)新設(shè)計。比較而言，革命歷史文化與社會主義先進文化創(chuàng)新設(shè)計教學實踐較少，但它們同樣也是中華優(yōu)秀文化資源的重要組成部分。習近平總書記在2013年第十二屆全國人民代表大會講話中指出“實現(xiàn)中國夢必須弘揚中國精神。這就是以愛國主義為核心的民族精神，以改革創(chuàng)新為核心的時代精神”。五四精神、紅船精神、井岡山精神、蘇區(qū)精神、長征精神、遵義會議精神、抗聯(lián)精神、延安精神、紅巖精神、太行精神、呂梁精神、抗戰(zhàn)精神、沂蒙精神、西柏坡精神、抗美援朝精神、北大荒精神、大慶精神和鐵人精神、紅旗渠精神、焦裕祿精神、雷鋒精神、王杰精神、勞模精神、勞動精神、工匠精神、塞罕貝精神、偉大抗疫精神、探月精神、脫貧攻堅精神、兩彈一星精神都是中國人民在革命和建設(shè)時期匯聚形成的偉大中國精神。歷史是最好的教科書。2021學年以用戶界面設(shè)計課程為依托，選擇“最美中國精神”為設(shè)計主題，探索新時代紅色文化傳播的新媒介和新聲音，希望星星之火可以燎原。

一、UI設(shè)計課程教學理念

（一）UI設(shè)計課程教學目標

以“最美中國精神”為課程設(shè)計實踐主題，依托UI設(shè)計課程的理論知識和技術(shù)支持，完成中國優(yōu)秀精神文化的數(shù)字化傳播設(shè)計。拓寬“中國精神”傳播的覆蓋層面;探索紅色文化可持續(xù)傳播的路徑;構(gòu)建“思政+文化+藝術(shù)+科技”融合創(chuàng)新的設(shè)計教學新范式。

1.夯實課程理論基礎(chǔ)：（1）認知UI設(shè)計相關(guān)基本概念（UI用戶界面/UX or UE用戶體驗/IxD交互設(shè)計/UID用戶界面設(shè)計/UED用戶體驗設(shè)計/UCD以用戶為中心的設(shè)計）;（2）了解互聯(lián)網(wǎng)公司基本架構(gòu)及人員職能（Leader高管/UR用研團隊/PM產(chǎn)品經(jīng)理/UX交互設(shè)計師/UI視覺設(shè)計師/RD前端工程師/QA測試工程師/BD商務(wù)）;（3）掌握UI設(shè)計的七大流程及其相關(guān)任務(wù)文件（User Story用戶故事/Functional Map功能圖/Flow Chart流程圖/UI Flow頁面流程/Wireframe線框圖/Mockup視覺稿/Prototype原型）;（4）熟知IOS系統(tǒng)和Android系統(tǒng)的界面元素及其設(shè)計規(guī)范（iOS HumanInterface Guidelines/Material Design）。

2.提升UI設(shè)計專業(yè)能力：依據(jù)互聯(lián)網(wǎng)公司真實人員架構(gòu)、工作流程和任務(wù)要求，以項目式教學、UI設(shè)計流程訓練和小組合作學習為教學方法和手段，提高UI設(shè)計實戰(zhàn)能力和設(shè)計專業(yè)水平，把知識快速轉(zhuǎn)化為能力。

3.塑造社會主義核心價值觀：深入了解“中國精神”內(nèi)涵價值、文化符號和視覺形象，探索“思政+文化+藝術(shù)+科技”融合創(chuàng)新。以新時代更年輕化的視角，更具時代性的傳播媒介傳遞中國優(yōu)秀精神文化的內(nèi)涵和價值，增進文化認同，增強文化自信。

（二）UI設(shè)計課程教學方法

1.“中國精神”情境教學。通過中國精神的主題課堂學習以及東北烈士紀念館、北大荒博物館、大慶油田歷史陳列館的實地參觀，創(chuàng)建生動、形象的主題教育場景，激發(fā)學生的愛國情感，增強中國精神傳承的責任感和使命感。

2.項目式教學PBL（Project-Based Learning）。以中國革命歷史文化的傳承和創(chuàng)新為問題導向，以學生為中心，引導學生提出問題、分析問題并解決問題，從而建立起一個立體的UI設(shè)計知識體系和文化創(chuàng)新設(shè)計體系，最終從設(shè)計專業(yè)角度完成中國文化的創(chuàng)造性轉(zhuǎn)化和創(chuàng)新性發(fā)展。

3.線上線下混合教學。由于課堂教學時間有限，理論學時不能夠深入覆蓋UI設(shè)計的全部知識，因此借助于自建的在線課程資源，用于課前預(yù)習，課后復習，倡導“帶著問題來課堂”，培養(yǎng)學生的學習自主性，夯實課程理論基礎(chǔ)。

4.UI設(shè)計流程訓練。依托文化創(chuàng)新設(shè)計項目實踐，以設(shè)計思維和設(shè)計程序訓練為主要目標，引導學生完成UI設(shè)計的七大流程及其相關(guān)任務(wù)文件，積累UI設(shè)計項目的實戰(zhàn)經(jīng)驗，培養(yǎng)設(shè)計思維和設(shè)計實踐能力。

5.小組合作學習。按照互聯(lián)網(wǎng)公司角色分配任務(wù)（用戶研究UX/UE，產(chǎn)品經(jīng)理PM，交互設(shè)計師UX/UE，界面設(shè)計師UI）。兩人一組，每人主要負責兩個角色及其相應(yīng)任務(wù)文件和工作銜接。合作學習能夠提高工作效率，互相激發(fā)創(chuàng)意，培養(yǎng)文化傳承責任感和使命感。

二、UI設(shè)計流程主導的教學實踐體系

用戶界面設(shè)計課程共40學時，包括16學時理論教學和24學時實踐教學，共5周，每周8節(jié)課。實踐教學課題確定為從中國精神中選取具有龍江地域性特征的抗聯(lián)精神、北大荒精神、大慶精神和鐵人精神作為設(shè)計對象，要求從新時代更年輕的視角，著重強調(diào)藝術(shù)化的表達方式，傳達中國精神的內(nèi)涵和價值，完成“中國精神”App界面設(shè)計。實踐教學遵循UI設(shè)計真實流程并結(jié)合課程實際情況共分為五個教學階段，要求學生肩負起每個階段UI設(shè)計人員的具體職能并完成相關(guān)任務(wù)文件。

（一）中國精神調(diào)研——調(diào)研報告Research Report

運用多種調(diào)研方法收集和記錄有關(guān)中國精神的文字、照片、視頻、音頻等資料，認真整理和歸納出調(diào)研報告，包括中國精神的內(nèi)涵和價值、中國精神代表人物和事件、中國精神藝術(shù)化表達、App競品分析、問題與機遇等內(nèi)容。這一部分由小組成員共同完成。避免資料堆積，要有的放矢，著重整理中國精神的藝術(shù)化表現(xiàn)內(nèi)容，為后期設(shè)計方案積累素材，提供依據(jù)。

（二）用戶研究UR（需求）一用戶需求報告User Research

用戶研究的目的在于找到用戶需求，進而轉(zhuǎn)化為App功能。由于中國精神時代傳播的需要，我們把App目標用戶定位為中國青年一代，因此用戶研究圍繞中國青年一代具體展開。用戶研究可以運用用戶訪談、用戶畫像、用戶場景等多種研究方法，進而歸納研究資料，分析并整理出用戶需求報告。用戶需求報告包括產(chǎn)品分析、用戶研究方法、需求確認、App產(chǎn)品定位等具體內(nèi)容。（1）用戶訪談是通過定性研究獲得關(guān)于用戶的想法、行為和數(shù)據(jù)等信息，回答“什么是”“怎么樣”以及“為什么”等問題。目標用戶樣本越多，問題針對性越強，越能夠保證用戶需求的共性。（2）用戶畫像是將用戶群體的共同點如生活態(tài)度、行為方式等集結(jié)成一位“虛擬人物”，之后產(chǎn)品開發(fā)需要滿足人物模型的需要。人物模型來源于研究中真實用戶的行為和動機。人物模型最大的價值，在于它把目標用戶變得具體、凝練、易于認識和討論。（3）用戶情境是描述人物模型在什么情境下使用產(chǎn)品、怎么使用以及使用者和產(chǎn)品或服務(wù)互動時所產(chǎn)生的感受、感知和心境，以此理解用戶的期望、需要和動機。

（三）產(chǎn)品經(jīng)理PM（功能）——功能圖Functional Map

根據(jù)用戶需求報告歸納整理出“中國精神”App具備的基本功能模塊，用樹狀圖、功能列表、PRD產(chǎn)品需求文檔任選其一做出產(chǎn)品功能圖。（1）產(chǎn)品功能樹狀圖用樹干、樹枝等表示功能層級結(jié)構(gòu)。（2）產(chǎn)品功能列表圖是將功能模塊、功能名稱和功能簡述歸納整理在表格中。（3） PRD產(chǎn)品需求文檔表述了產(chǎn)品概念、產(chǎn)品特性、功能模塊、測試需求、體驗需求等內(nèi)容。比較而言產(chǎn)品功能樹狀圖和產(chǎn)品功能列表圖更簡潔明了，是初學者的首選。

（四）交互設(shè)計師UX/UE（邏輯）——線框圖Wireframe

根據(jù)產(chǎn)品定位和產(chǎn)品功能圖繪制“中國精神”App1：1尺寸的線框圖。線框圖其本質(zhì)是信息架構(gòu)的表象，是最直觀、有效的設(shè)計呈現(xiàn)形式。線框圖主要展示產(chǎn)品的框架，包括頁面內(nèi)容和組件以及怎么被操作。一個簡單的線框圖可能只有線條、方框、灰階色彩和文字說明。線框圖能夠引導一個頁面的內(nèi)容及概念，建立App信息層次結(jié)構(gòu)及邏輯關(guān)系，被認為是App的設(shè)計藍圖。

（五）界面設(shè)計師UI（視覺）一視覺稿Mockup

視覺稿是全部界面的視覺設(shè)計圖，是1：1尺寸的界面視覺呈現(xiàn)，即App真實使用界面呈現(xiàn)，包括主界面、二級界面、三級界面等。“中國精神”App視覺稿需突出革命精神主題內(nèi)容，遵守IOS系統(tǒng)或Android系統(tǒng)的設(shè)計規(guī)范，運用圖形、圖像、色彩、文字等視覺元素以及視覺設(shè)計原理和法則，豐富線框圖搭設(shè)的產(chǎn)品框架。在這一階段可以針對視覺設(shè)計的要求和特點對線框圖做出適當?shù)恼{(diào)整。遵循視覺統(tǒng)一性是界面設(shè)計至關(guān)重要的原則，界面元素應(yīng)在視覺上呈現(xiàn)一致性。

三、“中國精神”App界面設(shè)計教學成果案例

以第二小組李香楠和翟計涵兩位同學設(shè)計的“英雄薈萃”App為例，展示UI設(shè)計課程實踐教學體系以及中國精神融入UI設(shè)計課程實踐教學成果。兩位同學在深入思考并和教師討論后選擇了“東北抗聯(lián)精神”為設(shè)計主題，進而圍繞抗聯(lián)精神主題的設(shè)計實踐逐步展開?？孤?lián)精神主要表現(xiàn)為堅定的信仰信念、高尚的愛國情操和偉大的犧牲精神。

（一）“東北抗聯(lián)精神”調(diào)查研究

教師和學生一同走進東北烈士紀念館、東北抗聯(lián)博物館、黑龍江省博物館、黑龍江省圖書館和哈爾濱市圖書館，調(diào)研和收集東北抗聯(lián)重要文獻以及圖像、視頻和音頻等珍貴的多媒體資料。利用互聯(lián)網(wǎng)等現(xiàn)代信息技術(shù)了解抗聯(lián)精神的發(fā)展現(xiàn)狀，深刻理解抗聯(lián)精神的時代價值，充實和豐富抗聯(lián)精神的傳播素材。之后對收集到的所有資料進行整理、歸類和分析，最終撰寫出“東北抗聯(lián)精神”調(diào)研報告。

（二）“東北抗聯(lián)精神”用戶需求研究

首先，運用用戶訪談法初步了解用戶的需求和行為。設(shè)計小組根據(jù)調(diào)研報告和目標用戶設(shè)定出關(guān)于東北抗聯(lián)的訪談提綱，師生共同探討其可行性并做出適當調(diào)整。兩位同學分別與50位年齡在18-35歲之間的目標用戶進行了面對面訪談，了解用戶使用產(chǎn)品的目標和動機。其次，根據(jù)用戶研究結(jié)果創(chuàng)建虛擬“人物模型”。人物模型聚焦到文化自信和文化認同正在崛起的中國青年一代，他們具有正向的價值觀，關(guān)注中國文化，具備藝術(shù)修養(yǎng)，掌握科技動態(tài)，以傳承和傳播中國優(yōu)秀文化為責任和使命。最后，敘述人物模型的情境地圖。捕捉用戶與產(chǎn)品、環(huán)境和系統(tǒng)之間的交互行為.講述關(guān)于完美用戶體驗的故事，將滿足人物模型的目標和需求置于首位。通過用戶研究提取了用戶基本需求，定義了產(chǎn)品基本交互需要，重點如下：（1）文化和藝術(shù)融合的方式傳播時代精神;（2）信息傳遞注重視覺和聽覺等感官化的呈現(xiàn);（3）界面設(shè)計注重藝術(shù)化表達;（4）信息表述概括，界面功能簡捷;（5）信息傳遞快速且直接，App具備互動、分享、下載等交互功能。

（三）“英雄薈萃”App功能模塊設(shè)定

根據(jù)用戶需求以及產(chǎn)品定位繪制出產(chǎn)品樹狀功能圖（圖1）。經(jīng)過兩位同學的深入討論，并在認真聽取教師的建議后，確定以藝術(shù)作品作為“英雄薈萃”App精神傳遞的主要載體，目的在于運用東北抗聯(lián)題材的繪畫、雕塑、戲劇、音樂、舞蹈、小說等多種藝術(shù)形式及其豐富的視聽手段傳播抗聯(lián)精神?！坝⑿鬯C萃”App設(shè)置了我的、藝術(shù)作品、每日精選、收藏、設(shè)置五大功能模塊。其中藝術(shù)作品功能模塊為主要功能，包括視頻類作品（舞臺劇、影視劇、戲曲），繪畫類作品（繪畫、雕塑、紅色遺址）和FM類作品（有聲小說、評書等）。通過視覺和聽覺的感官傳達，抗聯(lián)精神變成了生動而有力量的影音語言，讓青年一代從藝術(shù)作品中感受那個年代，感受精神的力量。

（四）“英雄薈萃”App交互設(shè)計

根據(jù)產(chǎn)品定位和產(chǎn)品功能圖繪制線框圖。在實施具體設(shè)計之前確定“英雄薈萃”App的設(shè)計原則：（1）簡化App體量，突出主要功能;（2）交互功能明確、便捷，盡量減少交互層級（至多三級）;（3）界面設(shè)計以影像為主，視覺沖擊力要強;（4）簡化設(shè)計元素和組件，文字和圖標盡量隱藏，界面保持簡潔。

“英雄薈萃”App線框圖共繪制了三級界面。主界面為每日推送的抗聯(lián)英雄人物或者抗聯(lián)精神藝術(shù)作品全屏圖片，左上角為詳情圖標，點擊后在頁面下方彈出文字浮動面板，有語音播放功能。右上角為導航抽屜欄圖標，點擊后滑出我的、藝術(shù)作品、每日精選、收藏、設(shè)置五大功能控件。右下角為附屬功能抽屜圖標，隱藏了分享、筆記、收藏和點贊功能，可以對當前信息進行快速編輯和傳遞（圖2）。二級界面繪制了藝術(shù)作品功能界面，包括繪畫類界面、FM界面和視頻類界面。繪畫類二級界面基本保持了主界面的視圖和控件，右上導航抽屜按繪畫作品名稱首字母順序排列圖標，可上下滑動選擇作品（圖3）。FM二級界面主屏幕為音頻播放器組件，點擊中心播放器進入該藝術(shù)作品文字面板三級界面。功能抽屜圖標位于二級界面右側(cè)，右上導航抽屜功能同繪畫類界面（圖4）。視頻類二級界面上半部分為視頻播放面板，下部分為文字面板。文字面板右下角為功能抽屜圖標，右上導航抽屜功能同繪畫類界面（圖5）。App線框圖需遵循App設(shè)計原則，著重把握各界面之間的統(tǒng)一性以及頁面邏輯和頁面流程。

（五）“英雄薈萃”App界面設(shè)計

“英雄薈萃”App視覺稿的色彩采用深紅色為主色調(diào)，用于導航抽屜底色、文字底色和部分功能圖標，并適當調(diào)整透明度，增加界面層次感。白色主要用于文字詳情及其主要功能圖標底色。圖像選用高清晰度、藝術(shù)表現(xiàn)力強的影像，給人以強烈的視覺沖擊力。功能圖標設(shè)計線條簡潔，藝術(shù)作品圖標把文字圖形化處理，視覺效果更加統(tǒng)一。文字采用蘋方Medium字體。視頻二級界面的視頻面板和文字面板采用相應(yīng)的圓角處理，保持一致性。音頻二級、三級界面采用透明度調(diào)整后的主界面圖片作為背景，與主界面有一定的呼應(yīng)性（圖6～9）。App視覺稿需遵守IOS系統(tǒng)或Android系統(tǒng)的設(shè)計規(guī)范，不斷調(diào)整界面視覺設(shè)計元素的細節(jié)，使App整體風格和諧統(tǒng)一。

（六）“英雄薈萃”App設(shè)計成果

“英雄薈萃”App用精煉的視覺語言和嫻熟的界面設(shè)計技術(shù)完成了新時代、新媒介下革命文化的創(chuàng)新與傳播。從設(shè)計視角推動文化、藝術(shù)與科技的融合創(chuàng)新。（1）“英雄薈萃”App設(shè)計突出了中國精神主題，展現(xiàn)了科學的UI設(shè)計流程和設(shè)計方法，促進了設(shè)計者精神境界與專業(yè)能力的雙重提升。（2）“英雄薈萃”App從藝術(shù)化的視角出發(fā)，用專業(yè)的設(shè)計語言充分調(diào)動了用戶視覺、聽覺和其他感官，在最短的時間內(nèi)與用戶共情，傳遞“中國精神”的力量?？粗鳤pp首頁抗聯(lián)組畫中戰(zhàn)士們一張張被封凍的臉龐，聽著一段段可歌可泣的抗聯(lián)故事，內(nèi)心敬意油然而生。（3）“英雄薈萃”App用生動的藝術(shù)語言再現(xiàn)了具有時代意義和價值引領(lǐng)的抗聯(lián)精神符號。楊靖宇，趙尚志，趙一曼，周保中，李兆麟，八女投江，白山黑水，堅定的信仰信念，高尚的愛國情操，偉大的犧牲精神，中國青年一代需要銘記，更需要弘揚。

結(jié)語

UI設(shè)計課程力爭在課堂育人中培養(yǎng)藝術(shù)擔當和家國情懷。以更年輕的視角解讀“中華優(yōu)秀文化的創(chuàng)造性轉(zhuǎn)化和創(chuàng)新性發(fā)展”，服務(wù)國家文化建設(shè)。中國精神主題融入設(shè)計教學體系，實現(xiàn)了專業(yè)課與思政元素的同向同行，提升了文化自信和文化認同。UI設(shè)計真實程序架構(gòu)主導下的教學實踐提升了學生的設(shè)計思維能力和設(shè)計實戰(zhàn)能力。在取得豐碩教學成果的同時，仍有一些問題需要在今后的課程中著力解決，例如UI設(shè)計專業(yè)軟件的運用;“中國精神”內(nèi)涵的進一步挖掘和研究。這是一次有意義的教學嘗試，希望能夠?qū)ξ幕孕湃谌朐O(shè)計教學體系起到示范作用。

2508501705280