李鑫力 趙光澤
關鍵詞:中國精神 文化創新 UI設計流程 設計教學體系 項目式教學
中圖分類號:J504 文獻標識碼:A
文章編號:1003-0069(2022)02-0090-04
引言
近年來文化創新設計教學實踐主要集中在中華優秀傳統文化傳承與創新上,例如非物質文化遺產創新設計。比較而言,革命歷史文化與社會主義先進文化創新設計教學實踐較少,但它們同樣也是中華優秀文化資源的重要組成部分。習近平總書記在2013年第十二屆全國人民代表大會講話中指出“實現中國夢必須弘揚中國精神。這就是以愛國主義為核心的民族精神,以改革創新為核心的時代精神”。五四精神、紅船精神、井岡山精神、蘇區精神、長征精神、遵義會議精神、抗聯精神、延安精神、紅巖精神、太行精神、呂梁精神、抗戰精神、沂蒙精神、西柏坡精神、抗美援朝精神、北大荒精神、大慶精神和鐵人精神、紅旗渠精神、焦裕祿精神、雷鋒精神、王杰精神、勞模精神、勞動精神、工匠精神、塞罕貝精神、偉大抗疫精神、探月精神、脫貧攻堅精神、兩彈一星精神都是中國人民在革命和建設時期匯聚形成的偉大中國精神。歷史是最好的教科書。2021學年以用戶界面設計課程為依托,選擇“最美中國精神”為設計主題,探索新時代紅色文化傳播的新媒介和新聲音,希望星星之火可以燎原。
一、UI設計課程教學理念
(一)UI設計課程教學目標
以“最美中國精神”為課程設計實踐主題,依托UI設計課程的理論知識和技術支持,完成中國優秀精神文化的數字化傳播設計。拓寬“中國精神”傳播的覆蓋層面;探索紅色文化可持續傳播的路徑;構建“思政+文化+藝術+科技”融合創新的設計教學新范式。
1.夯實課程理論基礎:(1)認知UI設計相關基本概念(UI用戶界面/UX or UE用戶體驗/IxD交互設計/UID用戶界面設計/UED用戶體驗設計/UCD以用戶為中心的設計);(2)了解互聯網公司基本架構及人員職能(Leader高管/UR用研團隊/PM產品經理/UX交互設計師/UI視覺設計師/RD前端工程師/QA測試工程師/BD商務);(3)掌握UI設計的七大流程及其相關任務文件(User Story用戶故事/Functional Map功能圖/Flow Chart流程圖/UI Flow頁面流程/Wireframe線框圖/Mockup視覺稿/Prototype原型);(4)熟知IOS系統和Android系統的界面元素及其設計規范(iOS HumanInterface Guidelines/Material Design)。
2.提升UI設計專業能力:依據互聯網公司真實人員架構、工作流程和任務要求,以項目式教學、UI設計流程訓練和小組合作學習為教學方法和手段,提高UI設計實戰能力和設計專業水平,把知識快速轉化為能力。
3.塑造社會主義核心價值觀:深入了解“中國精神”內涵價值、文化符號和視覺形象,探索“思政+文化+藝術+科技”融合創新。以新時代更年輕化的視角,更具時代性的傳播媒介傳遞中國優秀精神文化的內涵和價值,增進文化認同,增強文化自信。
(二)UI設計課程教學方法
1.“中國精神”情境教學。通過中國精神的主題課堂學習以及東北烈士紀念館、北大荒博物館、大慶油田歷史陳列館的實地參觀,創建生動、形象的主題教育場景,激發學生的愛國情感,增強中國精神傳承的責任感和使命感。
2.項目式教學PBL(Project-Based Learning)。以中國革命歷史文化的傳承和創新為問題導向,以學生為中心,引導學生提出問題、分析問題并解決問題,從而建立起一個立體的UI設計知識體系和文化創新設計體系,最終從設計專業角度完成中國文化的創造性轉化和創新性發展。
3.線上線下混合教學。由于課堂教學時間有限,理論學時不能夠深入覆蓋UI設計的全部知識,因此借助于自建的在線課程資源,用于課前預習,課后復習,倡導“帶著問題來課堂”,培養學生的學習自主性,夯實課程理論基礎。
4.UI設計流程訓練。依托文化創新設計項目實踐,以設計思維和設計程序訓練為主要目標,引導學生完成UI設計的七大流程及其相關任務文件,積累UI設計項目的實戰經驗,培養設計思維和設計實踐能力。
5.小組合作學習。按照互聯網公司角色分配任務(用戶研究UX/UE,產品經理PM,交互設計師UX/UE,界面設計師UI)。兩人一組,每人主要負責兩個角色及其相應任務文件和工作銜接。合作學習能夠提高工作效率,互相激發創意,培養文化傳承責任感和使命感。
二、UI設計流程主導的教學實踐體系
用戶界面設計課程共40學時,包括16學時理論教學和24學時實踐教學,共5周,每周8節課。實踐教學課題確定為從中國精神中選取具有龍江地域性特征的抗聯精神、北大荒精神、大慶精神和鐵人精神作為設計對象,要求從新時代更年輕的視角,著重強調藝術化的表達方式,傳達中國精神的內涵和價值,完成“中國精神”App界面設計。實踐教學遵循UI設計真實流程并結合課程實際情況共分為五個教學階段,要求學生肩負起每個階段UI設計人員的具體職能并完成相關任務文件。
(一)中國精神調研——調研報告Research Report
運用多種調研方法收集和記錄有關中國精神的文字、照片、視頻、音頻等資料,認真整理和歸納出調研報告,包括中國精神的內涵和價值、中國精神代表人物和事件、中國精神藝術化表達、App競品分析、問題與機遇等內容。這一部分由小組成員共同完成。避免資料堆積,要有的放矢,著重整理中國精神的藝術化表現內容,為后期設計方案積累素材,提供依據。
(二)用戶研究UR(需求)一用戶需求報告User Research
用戶研究的目的在于找到用戶需求,進而轉化為App功能。由于中國精神時代傳播的需要,我們把App目標用戶定位為中國青年一代,因此用戶研究圍繞中國青年一代具體展開。用戶研究可以運用用戶訪談、用戶畫像、用戶場景等多種研究方法,進而歸納研究資料,分析并整理出用戶需求報告。用戶需求報告包括產品分析、用戶研究方法、需求確認、App產品定位等具體內容。(1)用戶訪談是通過定性研究獲得關于用戶的想法、行為和數據等信息,回答“什么是”“怎么樣”以及“為什么”等問題。目標用戶樣本越多,問題針對性越強,越能夠保證用戶需求的共性。(2)用戶畫像是將用戶群體的共同點如生活態度、行為方式等集結成一位“虛擬人物”,之后產品開發需要滿足人物模型的需要。人物模型來源于研究中真實用戶的行為和動機。人物模型最大的價值,在于它把目標用戶變得具體、凝練、易于認識和討論。(3)用戶情境是描述人物模型在什么情境下使用產品、怎么使用以及使用者和產品或服務互動時所產生的感受、感知和心境,以此理解用戶的期望、需要和動機。
(三)產品經理PM(功能)——功能圖Functional Map
根據用戶需求報告歸納整理出“中國精神”App具備的基本功能模塊,用樹狀圖、功能列表、PRD產品需求文檔任選其一做出產品功能圖。(1)產品功能樹狀圖用樹干、樹枝等表示功能層級結構。(2)產品功能列表圖是將功能模塊、功能名稱和功能簡述歸納整理在表格中。(3) PRD產品需求文檔表述了產品概念、產品特性、功能模塊、測試需求、體驗需求等內容。比較而言產品功能樹狀圖和產品功能列表圖更簡潔明了,是初學者的首選。
(四)交互設計師UX/UE(邏輯)——線框圖Wireframe
根據產品定位和產品功能圖繪制“中國精神”App1:1尺寸的線框圖。線框圖其本質是信息架構的表象,是最直觀、有效的設計呈現形式。線框圖主要展示產品的框架,包括頁面內容和組件以及怎么被操作。一個簡單的線框圖可能只有線條、方框、灰階色彩和文字說明。線框圖能夠引導一個頁面的內容及概念,建立App信息層次結構及邏輯關系,被認為是App的設計藍圖。
(五)界面設計師UI(視覺)一視覺稿Mockup
視覺稿是全部界面的視覺設計圖,是1:1尺寸的界面視覺呈現,即App真實使用界面呈現,包括主界面、二級界面、三級界面等。“中國精神”App視覺稿需突出革命精神主題內容,遵守IOS系統或Android系統的設計規范,運用圖形、圖像、色彩、文字等視覺元素以及視覺設計原理和法則,豐富線框圖搭設的產品框架。在這一階段可以針對視覺設計的要求和特點對線框圖做出適當的調整。遵循視覺統一性是界面設計至關重要的原則,界面元素應在視覺上呈現一致性。
三、“中國精神”App界面設計教學成果案例
以第二小組李香楠和翟計涵兩位同學設計的“英雄薈萃”App為例,展示UI設計課程實踐教學體系以及中國精神融入UI設計課程實踐教學成果。兩位同學在深入思考并和教師討論后選擇了“東北抗聯精神”為設計主題,進而圍繞抗聯精神主題的設計實踐逐步展開。抗聯精神主要表現為堅定的信仰信念、高尚的愛國情操和偉大的犧牲精神。
(一)“東北抗聯精神”調查研究
教師和學生一同走進東北烈士紀念館、東北抗聯博物館、黑龍江省博物館、黑龍江省圖書館和哈爾濱市圖書館,調研和收集東北抗聯重要文獻以及圖像、視頻和音頻等珍貴的多媒體資料。利用互聯網等現代信息技術了解抗聯精神的發展現狀,深刻理解抗聯精神的時代價值,充實和豐富抗聯精神的傳播素材。之后對收集到的所有資料進行整理、歸類和分析,最終撰寫出“東北抗聯精神”調研報告。
(二)“東北抗聯精神”用戶需求研究
首先,運用用戶訪談法初步了解用戶的需求和行為。設計小組根據調研報告和目標用戶設定出關于東北抗聯的訪談提綱,師生共同探討其可行性并做出適當調整。兩位同學分別與50位年齡在18-35歲之間的目標用戶進行了面對面訪談,了解用戶使用產品的目標和動機。其次,根據用戶研究結果創建虛擬“人物模型”。人物模型聚焦到文化自信和文化認同正在崛起的中國青年一代,他們具有正向的價值觀,關注中國文化,具備藝術修養,掌握科技動態,以傳承和傳播中國優秀文化為責任和使命。最后,敘述人物模型的情境地圖。捕捉用戶與產品、環境和系統之間的交互行為.講述關于完美用戶體驗的故事,將滿足人物模型的目標和需求置于首位。通過用戶研究提取了用戶基本需求,定義了產品基本交互需要,重點如下:(1)文化和藝術融合的方式傳播時代精神;(2)信息傳遞注重視覺和聽覺等感官化的呈現;(3)界面設計注重藝術化表達;(4)信息表述概括,界面功能簡捷;(5)信息傳遞快速且直接,App具備互動、分享、下載等交互功能。
(三)“英雄薈萃”App功能模塊設定
根據用戶需求以及產品定位繪制出產品樹狀功能圖(圖1)。經過兩位同學的深入討論,并在認真聽取教師的建議后,確定以藝術作品作為“英雄薈萃”App精神傳遞的主要載體,目的在于運用東北抗聯題材的繪畫、雕塑、戲劇、音樂、舞蹈、小說等多種藝術形式及其豐富的視聽手段傳播抗聯精神。“英雄薈萃”App設置了我的、藝術作品、每日精選、收藏、設置五大功能模塊。其中藝術作品功能模塊為主要功能,包括視頻類作品(舞臺劇、影視劇、戲曲),繪畫類作品(繪畫、雕塑、紅色遺址)和FM類作品(有聲小說、評書等)。通過視覺和聽覺的感官傳達,抗聯精神變成了生動而有力量的影音語言,讓青年一代從藝術作品中感受那個年代,感受精神的力量。
(四)“英雄薈萃”App交互設計
根據產品定位和產品功能圖繪制線框圖。在實施具體設計之前確定“英雄薈萃”App的設計原則:(1)簡化App體量,突出主要功能;(2)交互功能明確、便捷,盡量減少交互層級(至多三級);(3)界面設計以影像為主,視覺沖擊力要強;(4)簡化設計元素和組件,文字和圖標盡量隱藏,界面保持簡潔。
“英雄薈萃”App線框圖共繪制了三級界面。主界面為每日推送的抗聯英雄人物或者抗聯精神藝術作品全屏圖片,左上角為詳情圖標,點擊后在頁面下方彈出文字浮動面板,有語音播放功能。右上角為導航抽屜欄圖標,點擊后滑出我的、藝術作品、每日精選、收藏、設置五大功能控件。右下角為附屬功能抽屜圖標,隱藏了分享、筆記、收藏和點贊功能,可以對當前信息進行快速編輯和傳遞(圖2)。二級界面繪制了藝術作品功能界面,包括繪畫類界面、FM界面和視頻類界面。繪畫類二級界面基本保持了主界面的視圖和控件,右上導航抽屜按繪畫作品名稱首字母順序排列圖標,可上下滑動選擇作品(圖3)。FM二級界面主屏幕為音頻播放器組件,點擊中心播放器進入該藝術作品文字面板三級界面。功能抽屜圖標位于二級界面右側,右上導航抽屜功能同繪畫類界面(圖4)。視頻類二級界面上半部分為視頻播放面板,下部分為文字面板。文字面板右下角為功能抽屜圖標,右上導航抽屜功能同繪畫類界面(圖5)。App線框圖需遵循App設計原則,著重把握各界面之間的統一性以及頁面邏輯和頁面流程。
(五)“英雄薈萃”App界面設計
“英雄薈萃”App視覺稿的色彩采用深紅色為主色調,用于導航抽屜底色、文字底色和部分功能圖標,并適當調整透明度,增加界面層次感。白色主要用于文字詳情及其主要功能圖標底色。圖像選用高清晰度、藝術表現力強的影像,給人以強烈的視覺沖擊力。功能圖標設計線條簡潔,藝術作品圖標把文字圖形化處理,視覺效果更加統一。文字采用蘋方Medium字體。視頻二級界面的視頻面板和文字面板采用相應的圓角處理,保持一致性。音頻二級、三級界面采用透明度調整后的主界面圖片作為背景,與主界面有一定的呼應性(圖6~9)。App視覺稿需遵守IOS系統或Android系統的設計規范,不斷調整界面視覺設計元素的細節,使App整體風格和諧統一。
(六)“英雄薈萃”App設計成果
“英雄薈萃”App用精煉的視覺語言和嫻熟的界面設計技術完成了新時代、新媒介下革命文化的創新與傳播。從設計視角推動文化、藝術與科技的融合創新。(1)“英雄薈萃”App設計突出了中國精神主題,展現了科學的UI設計流程和設計方法,促進了設計者精神境界與專業能力的雙重提升。(2)“英雄薈萃”App從藝術化的視角出發,用專業的設計語言充分調動了用戶視覺、聽覺和其他感官,在最短的時間內與用戶共情,傳遞“中國精神”的力量。看著App首頁抗聯組畫中戰士們一張張被封凍的臉龐,聽著一段段可歌可泣的抗聯故事,內心敬意油然而生。(3)“英雄薈萃”App用生動的藝術語言再現了具有時代意義和價值引領的抗聯精神符號。楊靖宇,趙尚志,趙一曼,周保中,李兆麟,八女投江,白山黑水,堅定的信仰信念,高尚的愛國情操,偉大的犧牲精神,中國青年一代需要銘記,更需要弘揚。
結語
UI設計課程力爭在課堂育人中培養藝術擔當和家國情懷。以更年輕的視角解讀“中華優秀文化的創造性轉化和創新性發展”,服務國家文化建設。中國精神主題融入設計教學體系,實現了專業課與思政元素的同向同行,提升了文化自信和文化認同。UI設計真實程序架構主導下的教學實踐提升了學生的設計思維能力和設計實戰能力。在取得豐碩教學成果的同時,仍有一些問題需要在今后的課程中著力解決,例如UI設計專業軟件的運用;“中國精神”內涵的進一步挖掘和研究。這是一次有意義的教學嘗試,希望能夠對文化自信融入設計教學體系起到示范作用。
2508501705280