您所在的位置:首页 教学教研 教学动态

教学动态

《UI设计》课程成果展示

《UI设计》课程成果展示

一、课程基本信息

课程名称:UI设计

课程类别:专业必修课

学分:3

总 学 时:48(其中:授课学时:16实践学时:32)

考核方式:考试

授课对象:21级视觉传达设计1-2班/23级视觉传达设计(专升本)1-2班

授课教师:李军燕、马欣

二、课程介绍

本课程主要教学内容包括UI设计的理论、发展、流程以及相关设计原则、设计规范与设计实践。课程通过分析UI设计产品的有效性与使用率以及用户的情感体验与主观满意度,使学生建立起完善的UI设计产品的任务流程与信息流程,培养学生梳理界面交互逻辑,提升产品视觉体验,以及快速构建交互原型的能力,对学生在信息与交互设计领域从事研究及实践具有十分重要的意义。

该课程侧重从设计艺术学的方面让学生了解UI设计的规范与原则,学会从软件人机交互、操作逻辑、界面美观的整体设计角度出发进行UI设计。学生在修读该课程前应完成数字媒体艺术概论、设计概论、交互设计等前期基础知识课程的学习。

三、教学设计思路

《UI设计》课程结合华为、阿里系、腾讯系等具有中国特色的行业代表性本土公司和机构的自主研发案例分析,提高学生对本土设计文化的认同感和民族自豪感,强化学生的思想引领和爱国教育。课程项目以5-6人为组完成,培养学生之间的团队意识,树立正确的世界观、人生观和价值观,以及作为新时代青年的家国情怀和使命担当,形成“以用户为中心”的设计理念和“以人为本”的价值观。


四、教学目标


五、教学成果

1.作品名称:“购宝惠”软件界面设计

班级:2021级视觉传达设计2班

创作人员:薛梓豪、黄运才、郑锦威、曾煜扬、李睿

设计说明:“购宝惠”APP是一个“专注于社交拼购的电商平台”,它可以促进农村市场的发展、买到更低价实惠的商品、拓展社交圈子寻找合适的拼友。在界面的输出阶段,以卡片的方式展示商品,以及信息层级的规划,配色上固定使用几种颜色,减少干扰。新功能——购物车,加入各种小功能,方便用户更简单的管理自己喜欢的商品。

[插入视频-“购宝惠”软件界面设计]

教师评语(李军燕):该组学生在在界面设计上,整体布局清晰,元素排列有序,便于用户快速获取信息。图标设计运用和谐的色调搭配,营造出舒适的视觉体验。在信息架构方面,层级关系明确,用户可以轻松地导航至所需内容。不过,在动效设计方面还有提升空间,可以增加一些微妙的动画效果来提升用户的互动体验,同时注重用户体验的细节打磨。

2.作品名称:“小滴出行”软件界面设计

班级:2021级视觉传达设计2班

设计人员:张梓怡、官权浩、韩青、张国、何颖、钟若菲

设计说明:“小滴出行”APP是一个“一站式出行服务平台”,它可以为乘客提供个性化的出行方式、完善的售后服务和安全出行,增加独特的“宠物专车”出行功能,提供多样化的出行方式且打车速度快。

[插入视频-“小滴出行”软件界面设计]

教师评语(李军燕):该组学生的图标设计独特,将品牌元素融入图标设计之中,采用对比鲜明的配色方案,使得界面更加活泼。在产品开发思路上加入“宠物专车”与“路途景点推荐”,给用户带来多种使用体验,提升产品的用户黏性。然而,在部分流程操作方面稍显不足,建议完善产品各项流程操作层级,提升用户操作的反馈感。

3.作品名称:“气泡音乐”软件界面设计

班级:2021级视觉传达设计2班

创作人员:温斯琪、刘洁、吴淑仪、胡文涛、黄仁铭

设计说明:“气泡音乐”是一个主打个人推荐的音乐平台,准确推荐用户喜欢的音乐,与“抖音”进行跨平台喜好关联。图标设计以“气泡”为思路,进行整体的界面设计。气泡音乐有成熟的推荐算法,切入推荐场景,有外部社交平台的引流扶持,资源互通。

[插入视频-“气泡音乐”软件界面设计]

教师评语(李军燕):该组学生图标设计与品牌理念相契合,极具辨识度且富有创意。色彩选择恰当,既符合主题又能吸引用户眼球。但在列表导航设计中,界面布局稍显单调,应对信息罗列做到有效的栏组划分,以此提升用户的阅读体验。

4.作品名称:“我们的节气”软件界面设计

班级:2023级视觉传达设计(专升本)1班

创作人员:曹潇、谭颖、林婧柔

设计说明:“我们的节气”是一个传达节日相关文化与知识的软件,软件根据用户需求通过与AI交流得到结果,提出问题或给出设定假设的方式,以及在社区交流经验,使用户将软件内容结合到实际生活当中,我们的产品提供精准节气信息、智能AI解答节气相关问题以及社区线上用户交流。

[插入视频-“我们的节气”软件界面设计]

教师评语(李军燕):该组学生界面设计极具传统文化气质,色彩选择温和,给人一种宁静、舒适的视觉感受。在产品信息层级中加入“黄历”元素,将传统周易文化与节气文化相结合,提升产品的利用率。但部分界面架构不够清晰,用户流程不够完善,后续应不断完善各个层级界面内容,给用户带来更全面的交互体验。

5.作品名称:“Lignt”软件界面设计

班级:2023级视觉传达设计(专升本)1班

创作人员:黄诗韵、梁少婷、李雨桐

设计说明:“light”是一个为自闭症儿童家庭他们的干预和改善的自闭症康复训练的软件

,产品可以进行自闭症的专业量表检测,提供数据化的结果;通过训练用数据记录孩子的行为,提供个性化训练;专业医生通过康复训练数据针对不同症状的表现推荐适配的训练计划;给予自闭症儿童家长沟通交流的平台。

[插入视频-“Lignt”软件界面设计]

教师评语(李军燕):该组学生设计针对特定人群进行设计,图标设计营造出一种平缓而富有活力的氛围,既符合功能需求,又体现设计价值。但在用户需求与功能挖掘中缺少对产品价值的平衡,应该对用户与客户进行不同功能引导,做到产品科学的辅助引导性。

6.作品名称:“闪映”软件界面设计

班级:2023级视觉传达设计(专升本)2班

创作人员:吴森

设计说明:“闪映”是一个短视频社交平台,为了年轻用户他们的创作与社交需求,它可以轻松创作、个性推荐、实时互动,而不像“微视”,我们的产品简洁好用、拍摄更快捷、内容更多元。

[插入视频-“闪映”软件界面设计]

教师评语(李军燕):该生图标设计体现品牌特色,符合用户审美,便于用户浏览和操作。在产品功能上加入AI元素,增加用户体验度,卡片式导航的设计丰富了产品层次性,对界面进行有效归纳。不过,在设计细节中应控制图标元素的尺寸大小,保持界面观看完整度。

7.作品名称:“HBN”小程序界面设计

班级:2023级视觉传达设计(专升本)2班

创作人员:卜莹莹、陈泫男、王铮、廖瀚

设计说明:HBN是一个综合性护肤购物平台以及满足用户的多样化的需求小程序,根据用户的肤质、需求、偏好等信息,提供肤质检测,保质期提醒,推荐产品满足用户的需求。

[插入视频-“HBN”小程序界面设计1]

教师评语(李军燕):该组学生在视觉设计上注重品牌理念的传递与产品形象的展示,在功能设计中增加“肤质测试”的形式,贴合用户使用需求,体现产品科学严谨的态度。然而,在购物后续流程中缺少动态关注,后续设计中应进一步补足。

8.作品名称:“光印相机”软件界面设计

班级:2023级视觉传达设计(专升本)2班

创作人员:翁泽吟

设计说明:光印相机为了满足艺术、手工爱好者轻松体验和学习蓝晒手工印象的需求,产品主打生成或模拟拍摄古典摄影效果的照片。利用传播古典摄影技术,将手工印象由小众变为大众,玩家可以通过印相滤镜模拟流程,通过软件提前模拟熟练玩法,试剂加减来调节照片,冲洗照片。光印相机提供滤镜轻松模拟古典摄影工艺的效果,帮助用户轻松体验学习、分享交流经验。

[插入视频-“光印相机”软件界面设计]

教师评语(李军燕):该生在图标设计上,其巧妙地融合了艺术性与实用性,既美观又易于识别。但产品在社交分享功能方面还有待加强,可以在界面上增加社交分享按钮,方便用户将内容直接分享到各大社交平台。同时,考虑增加用户之间的互动功能,以提升用户的参与度和粘性。

9.作品名称:“HBN”小程序界面设计

班级:20221级视觉传达设计1班

设计人员:方锶敏 、杨阳、赖菲菲、黄俐华

HBN小程序设计说明:HBN小程序旨在为用户提供便捷、高效的护肤体验。色彩搭配以品牌标志性的清新绿色调为主,确保用户在使用时获得舒适感受。同时,小程序注重个性化推荐,根据用户肤质和需求智能推送合适的产品,让护肤更科学、更专业。

[插入视频-“HBN”小程序界面设计2]

教师评语(马欣):该组学生的小程序设计注重化妆品类购物市场的功能需求,通过设计特色的筛选购买功能,完善的页面层级设计,提高用户的使用效率,提升用户操作体验。该组学生界面设计布局合理,配色舒适清新,符合品牌调性。

10.作品名称:“即时设计”软件HD端设计

班级:2021级视觉传达设计1班

设计人员:王小漫、蔡晓婷、林李钰、陈伊霖

设计说明:设计旨在打破传统电脑设计的局限,为设计师带来更为便捷、高效的工作体验。即时设计HD版打造了一个社区类交流功能,不仅为UI设计师提供了一个分享作品、交流经验的平台,让设计师们能够激发更多的创意灵感。

[插入视频-“即时设计”软件HD端设计]

教师评语(马欣):该组学生软件设计聚焦于工具软件延展到平板端的使用,关注对该工具好用、易用性,具有设计相对完善的层级架构,发挥软件功能在平板端的优势。该组设计注重产品用户体验,在软件功能上增加了设计创意分享功能,更具有专业性的社交属性。

六、教学场景与结课观摩活动



《UI设计》课堂教学场景



《UI设计》结课观摩活动

七、教学总结

《UI设计》课程融合“巴特勒学习模式”理论的立体化课程,充分发挥混合式教学的多样性教学课程特点,综合运用线下理论课程教学与线上直播录播结合的混合教学模式,课程以专案项目学习为主要教学方式,以真实专案项目体验为教学主线,按照教学课程内容安排具体专案项目任务。学生在完成专案项目时,遵循知识点中的相应设计原理,并根据相对应的专案项目进行一定的知识延伸,将文字化的知识理论转换成图像化的专案设计,学生在实践操作中检验理论知识点,在创新实践中动脑动手,充分调动积极性,激活兴奋点,在学与做中感受UI设计的魅力,在教学实践的细节中锤炼学生应对市场需求的专业技术能力。



撰稿人:李军燕

排版:钟湘

初审:周昊

复审:王海宾 

终审:袁希佳、梁金锋