最美中国精神

李鑫力　赵光泽

关键词：中国精神 文化创新 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