课程门户-章节详情

UI设计

王俏

项目一　UI设计入门：AI时代的设计思维与基础
- ● 知识图谱
- ● 背景故事——UI设计之门：从零到一的奇幻之旅
- ● 任务1 走进UI设计
  - ● 情境导入：初探UI设计的奥秘
  - ● 知识探索
    - ● 1.1 UI设计介绍
      - ● 1.1.1 UI设计的概念
      - ● 1.1.2 UI设计原则
      - ● 1.1.3 UI设计分类
      - ● 1.1.4 UI设计尺寸相关知识
    - ● 1.2 UI设计流程
      - ● 1.2.1 需求分析
      - ● 1.2.2 原型设计
      - ● 1.2.3 视觉设计
      - ● 1.2.4 图与标注
    - ● 1.3 UI设计图像
      - ● 1.3.1 图像类型
      - ● 1.3.2 图像格式
    - ● 1.4 UI设计风格
      - ● 1.4.1 扁平化风格
      - ● 1.4.2 几何风格
      - ● 1.4.3 拟物化风格
      - ● 1.4.4 玻璃风格
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● 任务2 解析UI设计要素
  - ● 情境导入：解构设计要素的魔法法则
  - ● 知识探索
    - ● 2.1 UI设计布局
      - ● 2.1.1 宫格布局
      - ● 2.1.2 列表布局
      - ● 2.1.3 卡片布局
      - ● 2.1.4 瀑布流式布局
      - ● 2.1.5 多面板布局
  - ● 2.2 UI设计色彩
    - ● 2.2.1 色彩的构成
    - ● 2.2.2 色彩的混合
    - ● 2.2.3 色彩的调和
    - ● 2.2.4 色彩的推移
    - ● 2.2.5 色彩的联想
    - ● 2.2.6 色彩的心理应用
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● 任务3 探索移动端操作系统
  - ● 情境导入：揭秘移动系统的核心世界
  - ● 知识探索
    - ● 3.1 iOS
      - ● 3.1.1 主题明确
      - ● 3.1.2 色彩一致
      - ● 3.1.3 留白设计
      - ● 3.1.4 良好布局
    - ● 3.2 Android操作系统
      - ● 3.2.1 布局灵活
      - ● 3.2.2 色彩艳丽
      - ● 3.2.3 操作便捷
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● UI设计入门阶段性闯关
项目二　UI图标设计：智能终端符号标准化设计
- ● 知识图谱
- ● 背景故事——像素秘境：图标艺术的探险之旅
- ● 任务4 设计移动App应用图标
  - ● 情境导入：解锁图标基础的精髓
  - ● 知识探索
    - ● 4.1 图标基础概念
      - ● 4.1.1 图案的概念
      - ● 4.1.2 图标的概念
      - ● 4.1.3 图标的分类
    - ● 4.2 图标设计流程
      - ● 4.2.1 明确主题
      - ● 4.2.2 提炼核心形状
      - ● 4.2.3 草图绘制
      - ● 4.2.4 选择标准色
      - ● 4.2.5 图标设计
      - ● 4.2.6 切图输出
    - ● 4.3 图标设计初探
      - ● 【课堂案例 4-1】时钟图标绘制
      - ● 【课堂案例 4-2】学位帽图标绘制
      - ● 【课堂案例 4-3】折页图标绘制
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● 任务5 塑造移动App图标风格
  - ● 情境导入：探寻风格演变的无限可能
  - ● 知识探索
    - ● 5.1 剪影图标设计
      - ● 5.1.1 线性剪影图标设计
      - ● 【课堂案例 5-1】线性天气图标绘制
      - ● 【课堂案例 5-2】线性开关图标绘制
      - ● 【课堂案例 5-3】线性删除图标绘制
      - ● 5.1.2 面性剪影图标设计
      - ● 【课堂案例 5-4】面性确认图标绘制
      - ● 【课堂案例 5-5】面性设置图标绘制
      - ● 【课堂案例 5-6】面性笑脸图标绘制
      - ● 【课堂案例 5-7】面性相机图标绘制
      - ● 【课堂案例 5-8】面性文档图标绘制
    - ● 5.2 扁平化图标设计
      - ● 5.2.1 纯平面扁平化图标
      - ● 【课堂案例 5-9】纯平面扁平化电池图标设计
      - ● 5.2.2 折纸风扁平化图标
      - ● 【课堂案例 5-10】折纸风扁平化信封爱心未读图标设计
      - ● 【课堂案例 5-11】折纸风扁平化信封爱心已读图标设计
      - ● 5.2.3 长投影扁平化图标
      - ● 【课堂案例 5-12】长投影下载图标设计
      - ● 5.2.4 轻折叠扁平化图标
      - ● 【课堂案例 5-13】轻折叠多媒体图标设计
      - ● 【课堂案例 5-14】轻折叠扁平化计算器图标设计
      - ● 5.2.5 微立体扁平化图标
      - ● 【课堂案例 5-15】微立体定位图标设计
    - ● 5.3 拟物化图标设计
      - ● 5.3.1 拟物化图标特点
      - ● 5.3.2 拟物化图标案例
      - ● 【课堂案例 5-16】拟物化旋转按钮图标设计
      - ● 【课堂案例 5-17】拟物化卡包图标设计（横版）设计
      - ● 【课堂案例 5-18】拟物化卡包图标设计（竖版）设计
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● UI图标设计阶段性闯关
项目三　UI界面设计：场景界面设计与用户体验
- ● 知识图谱
- ● 背景故事——界面迷宫：控件与美学的协奏曲
- ● 任务6 开发界面控件库
  - ● 情境导入：驾驭控件的逻辑与美学
  - ● 知识探索
    - ● 6.1 滑块设计
      - ● 6.1.1 滑块构成
      - ● 6.1.2 滑块分类
      - ● 【课堂案例 6-1】线条滑块设计
      - ● 【课堂案例 6-2】旋转滑块设计
    - ● 6.2 表单设计
      - ● 6.2.1 表单类型
      - ● 6.2.2 下拉列表框设计
      - ● 【课堂案例 6-3】类目下拉子菜单设计
      - ● 6.2.3 搜索栏设计
      - ● 【课堂案例 6-4】移动端APP搜索框设计
      - ● 6.2.4 选择器设计
      - ● 【课堂案例 6-5】日历界面设计
      - ● 6.2.5 开关设计
      - ● 【课堂案例 6-6】开关设计
    - ● 6.3 按钮设计
      - ● 6.3.1 按钮类型
      - ● 6.3.2 简约按钮设计
      - ● 【课堂案例 6-7】简约确认按钮设计
      - ● 6.3.3 水晶确认按钮设计
      - ● 【课堂案例 6-8】水晶按钮设计
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● 任务7 布局规划App界面
  - ● 情境导入：绘制多元界面的蓝图
  - ● 知识探索
    - ● 7.1 启动页
      - ● 7.1.1 启动页的意义
      - ● 7.1.2 启动页的特点
      - ● 【课堂案例 7-1】启动页案例分析
    - ● 7.2 闪屏页
    - ● 7.3 引导页
      - ● 7.3.1 引导页的意义
      - ● 7.3.2 引导页的特点
      - ● 【课堂案例 7-2】引导页案例分析
    - ● 7.4 首页
    - ● 7.5 登录注册页
      - ● 7.5.1 注册登录页的意义
      - ● 7.5.2 注册登录页的特点
      - ● 【课堂案例 7-3】注册登录页案例分析
    - ● 7.6 子页
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● UI界面设计阶段性闯关
项目四　UI交互实战：智能界面交互设计与优化
- ● 知识图谱
- ● 背景故事——界面双星：iOS与Android的创意交响曲
- ● 任务8 iOS界面设计
  - ● 情境导入：雕琢iOS的极简美学
  - ● 知识探索
    - ● 8.1 iOS界面设计规范
    - ● 8.2 iOS字体设计规范
    - ● 8.3 iOS 音乐 App 界面设计实战
      - ● 8.3.1 音乐App项目分析
      - ● 8.3.2 音乐App原型设计
      - ● 8.3.3 音乐App风格分析
      - ● 【项目实战8-1】设计音乐App启动图标
      - ● 【项目实战8-2】设计音乐App主题界面
      - ● 【项目实战8-3】设计音乐App启动页
      - ● 【项目实战8-4】设计音乐App引导页
      - ● 【项目实战8-5】设计音乐App注册登录页
      - ● 【项目实战8-6】设计音乐App首页
      - ● 【项目实战8-7】设计音乐App播放页
      - ● 【项目实战8-8】设计音乐App歌词页
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● 任务9 Android系统界面设计
  - ● 情境导入：铸造Android的开放生态
  - ● 知识探索
    - ● 9.1 Android系统界面设计规范
    - ● 9.2 Android字体设计规范
    - ● 9.3 Android系统宠物 App 界面设计实战
      - ● 9.3.1 宠物App项目分析
      - ● 9.3.2 宠物App原型设计
      - ● 9.3.3 宠物App风格分析
      - ● 【项目实战9-1】设计宠物App启动图标
      - ● 【项目实战9-2】设计宠物App引导页
      - ● 【项目实战9-3】设计宠物App登录页
      - ● 【项目实战9-4】设计宠物App首页
      - ● 【项目实战9-5】设计宠物App宠物圈页面
      - ● 【项目实战9-6】设计宠物App购物车页面
      - ● 【项目实战9-7】设计宠物App设置页面
  - ● 任务实践
  - ● 任务考核
  - ● 知识拓展
  - ● 课后实训
- ● UI交互实战阶段性闯关
UI爱好者社会培训
- ● UI设计入门培训
  - ● icon图标设计
  - ● 剪影图标设计
  - ● 扁平化图标设计
  - ● Android系统常用图标设计
  - ● iOS系统常用手机图标设计
- ● UI设计项目实战进阶培训
  - ● 食坊APP登录图标
  - ● 食坊APP登录界面
  - ● 食坊APP主视觉界面
  - ● 食坊APP饭圈界面
  - ● 食坊APP闪屏界面
  - ● 食坊APP首页界面
  - ● 食坊APP我的界面
  - ● 食坊APP下厨界面
  - ● 食坊APP二级界面
  - ● 食坊APP三级界面
综合能力评估测试
- ● 测试
拓展——UI设计创意工坊
- ● 图标精选集
  - ● 静态图标
  - ● 动态图标
- ● 界面创作坊
  - ● 创作指导文件
  - ● 创意素材
  - ● 创意文案

UI设计入门阶段性闯关

图片预览