本模块面向希望掌握界面设计技能、优化用户体验，然后直接进入前端应用程序编程的学员。

必须掌握的知识要求

  • UI/UX 基本概念：区分用户界面 (UI) 和用户体验 (UX)；视觉层次规则。

  • 网格系统和排版：如何使用网格系统（8pt 网格），为桌面/移动设备选择字体和字号的标准。

  • 基本设计系统：了解颜色、组件和间距的一致性。

执行顺序

  1. 环境初始化：根据公司指导创建 Figma 账户，登录实习生工作区：https://dev.mdcgroup.vn。

  2. 掌握 Figma 工具集：练习使用基本工具：画框、形状、钢笔工具、布尔运算，尤其是自动布局（对于响应式设计至关重要）。

  3. 构建可重用组件：创建可重用的界面组件，如：按钮、输入字段、卡片。设置变体状态（默认、悬停、活动、禁用）。

  4. 设计线框图和模型：重新设计（克隆）或全新设计 MDC Group 内部系统的一个管理仪表板页面，包括：导航菜单栏、数据表、统计图表。

  5. 创建原型（动画效果）：将页面/按钮链接在一起，形成一个完整的用户流程。创建流畅的智能动画效果，模拟真实应用程序。

  6. 发布设计稿（交付）：整理图层，标准化命名，准备文档（样式、规范），以便随时交付给前端开发团队。

结果验收

  • 测验/评估：导师将根据标准直接评估 Figma 设计文件。

  • 问题与建议：针对 MDC Group 现有系统的任何功能提出用户体验改进建议。

  • 结果报告：以共享/评论模式发送 Figma 文件链接给导师评分。

  • 周末讨论：在其他实习生面前直接展示原型产品并接收反馈。