郑州财经学院艺术设计学院一课一展 | 视觉传达设计专业22级《界面与交互设计》课程成果展

发布时间：2026年4月1日分类：课程设计浏览量：1667

课程简介

《界面与交互设计》是视觉传达设计专业的一门核心必修课程，注重实践与应用相结合，旨在引导学生系统掌握界面设计的基本原理、规范流程、图标绘制及界面效果图制作等关键技能。课程着重培养学生面向互联网产品的设计思维，帮助学生将专业知识转化为解决实际问题的能力，从而全面提升学生的综合设计素养，为其未来职业发展提供重要的实践基础。

课程将每节课的知识点融入真实的产品设计情境中，通过模拟实际项目流程，学生可在完成每阶段学习后直接输出可交互原型或高保真界面设计，实现“学中做、做中展”的闭环学习体验。课程强调“输出驱动学习”，拒绝空洞理论堆砌，确保每一单元均能形成可用于作品集的高质量设计产出。所有训练案例均源自行业真实需求或典型应用场景，使学生直接掌握市场认可的设计语言与工作方法。

本课程亦鼓励学生将作业与行业设计竞赛及实际项目接轨，真正践行“以展促学、以练促用”，为成长为具备交互思维、界面技能与产品意识的复合型设计人才奠定扎实基础。

以下为本次课程中学生完成的优秀界面与交互设计作品展示。

授课对象：22级视觉传达设计本科1-3班

授课教师：魏三峡、王婧文

作品说明

延续品牌清新基调，以明亮蓝为主色，搭配柔和粉、活力黄等马卡龙色系。蓝色传递专业、洁净感，辅助色增添活泼氛围，贴合"趣味护牙"定位，让界面既具品牌辨识度，又轻松愉悦

打造专属牙齿精灵 IP ，赋予多样表情、动作与场景化造型作为功能引导、互动陪伴角色，拉近与用户距离，用拟人化设计降低护牙知识的理解门槛。

作品说明

通过将清洁科技可视化、环保理念游戏化、购物流程简便化，本项目重塑了日化行业的数字体验标准，使纳爱斯小程序从工具型应用进化为品牌价值传递的沉浸式空间。

作品说明

通过简洁明了的界面设计和流畅的操作流程，提升用户在小程序内的购物体验，统一的视觉风格和品牌元素，强化超能品牌在用户心中的形象，采用卡片式布局，将主要功能模块以卡片形式展示，便于用户快速定位所需功能。每个页面只展示核心信息，避免冗余元素干扰用户决策。例如，在商品列表页，仅展示商品图片、名称、价格等关键信息，采用统一的色彩方案、字体和图标风格，确保用户在不同页面间切换时，能够感受到一致的视觉体验。

作品说明

本界面设计围绕 HBN 品牌展开，以清新绿色为主色调，呼应品牌自然护肤理念。登录页用小精灵形象营造亲切氛围，吸引用户。首页布局合理，重点突出热门商品与品牌标识，方便用户快速了解。商品展示页图片清晰，信息详尽，助力用户决策。会员中心任务、权益明确，增强用户粘性。打卡、肤质测试等功能页，交互设计便捷，提升用户参与度与体验感。整体设计注重细节，在视觉与交互上平衡，力求为用户打造舒适、高效的品牌体验。

作品说明

本纳爱斯小程序的界面设计整体以蓝绿色为基调，清新治愈。整体风格可爱简约富有童趣，符合年轻人审美。将牙齿融入进去，用户在使用的过程也不会感到单一。在功能设计中设计了护牙打卡并获得奖励的功能，使画面更加富有趣味性的同时，也表达出品牌 slogan :养望健齿微笑纳爱斯 Nice ，可爱简洁的画面更能使用户增加品牌记忆点。

作品说明

本作品围绕“科技赋能个护，焕新生活体验”理念，以清新柔和的粉紫渐变为主调，营造自然、健康的视觉氛围，契合个护产品追求天然、有效的特质，传递品牌“用科技守护美好日常”的价值主张。

作品说明

围绕超能小程序"科技、清新、活力"的定位，以简约直观的视觉语言，传递功能信息购物车图标：以圆润线条勾勒购物车轮廓，填充清新蓝绿色，点缀白色圆点模拟商品，模拟衣物浸泡状态。商城图标将房屋造型与滚筒洗衣机元素相结合，里面的泡泡表现洗衣机在工作的状态用玫粉色突出活力。我的图标：简化人物轮廓为几何造型，浅蓝绿色营造清新温和感，人物头戴运动发带，身子是一个衣架形状。发现图标：放大镜轮廓搭配局部玫粉色填充，打破纯线条的单调，通过色彩强调"精准查找"的作用。分类图标：以模块化方块组合，蓝粉撞色平衡活泼与秩序感，不同衣领形状暗示"分类"逻辑。