课程门户-章节详情

UI界面设计

龙怡瑄

1 项目1：UI设计基础
- 1.1 课程简介
- 1.2 UI设计概述
- 1.3 UI设计流程
- 1.4 UI设计原则
- 1.5 UI设计要素
  - 1.5.1 设计风格
  - 1.5.2 色彩搭配
- 1.6 UI 设计技术准备篇（PS进阶）
  - 1.6.1 形状工具
  - 1.6.2 蒙版
  - 1.6.3 布尔运算
  - 1.6.4 重复变换
  - 1.6.5 图层样式
- 1.7 课程思政
2 项目2：移动端UI设计常识与设计规范
- 2.1 移动应用平台
- 2.2 移动设备尺寸标准
- 2.3 移动UI设计规范
- 2.4 APP页面设计
- 2.5 课程思政
3 项目3：图标设计
- 3.1 认识图标
- 3.2 图标分类与设计规范
- 3.3 线性图标设计
- 3.4 剪影图标设计
- 3.5 扁平化图标设计
- 3.6 拟物化图标设计
- 3.7 其他风格图标设计
- 3.8 手机主题图标设计
- 3.9 课程思政
4 项目4：APP控件的设计
- 4.1 APP控件概述
- 4.2 按钮
- 4.3 滑动条
- 4.4 表单
- 4.5 数据图表
- 4.6 其他控件
- 4.7 拓展阅读：超全面的UI元素尺寸设置指南
- 4.8 课程思政
5 项目5：交互设计与原型图绘制
- 5.1 交互设计概述
- 5.2 原型制作工具——Axure RP
  - 5.2.1 高保真交互设计案例
- 5.3 原型制作工具——墨刀（拓展））
6 项目6：APP项目设计实战
- 6.1 APP框架设计
- 6.2 APP项目实战——“UI社”APP产品设计与实现
  - 6.2.1 产品定位与背景简要分析
  - 6.2.2 竞品分析
  - 6.2.3 产品架构梳理
  - 6.2.4 绘制低保真原型图
  - 6.2.5 APP的视觉规范
  - 6.2.6 产品启动图标的制作
  - 6.2.7 启动页与引导页效果图制作
  - 6.2.8 登录页效果图制作
  - 6.2.9 首页效果图制作
  - 6.2.10 内容页与其他页面效果图制作
- 6.3 课程思政
7 项目7：交付文档与对接
- 7.1 标注
- 7.2 切图
- 7.3 知识拓展：IOS设计适配
- 7.4 知识拓展：蓝湖软件的使用
8 项目8：APP文档整理与作品提案
- 8.1 文档整理与作品提案
9 知识拓展1：UI设计综合实例
- 9.1 优选网APP项目（拓展）
- 9.2 极速云盘项目（拓展）
- 9.3 小米电视界面项目（拓展）
10 知识拓展2：PC端UI设计常识
- 10.1 网页UI设计概述
- 10.2 移动端UI设计和PC端网页UI设计区别
- 10.3 网页UI设计特点
- 10.4 网页的构成元素
- 10.5 网页UI设计原则
- 10.6 网页设计规范
- 10.7 单元检测
11 知识拓展3：网站页面布局和模块设计
- 11.1 网站页面布局
- 11.2 网页logo设计
- 11.3 网站导航设计
- 11.4 网站banner设计
- 11.5 网页效果图设计
12 拓展资源
- 12.1 学习参考网站
- 12.2 优秀学生作品展
  - 12.2.1 18级作品
  - 12.2.2 20软件1-2班优秀设计APP项目
  - 12.2.3 21级作品
  - 12.2.4 22级作品
- 12.3 比赛获奖设计案例
- 12.4 行业优秀设计案例
- 12.5 样机素材下载
- 12.6 教材电子版
- 12.7 操作习题集
- 12.8 UI界面设计常用软件下载

拟物化图标设计

1 教学课件
2 教学视频
3 操作练习

知识拓展：

1、三面五调

三大面：物体受光后一般可分为三个大的明暗区域：亮面、灰面、暗面
五大调子：调子是指画面不同明度的黑白层次。是体面所反映光的数量，也就是面的深浅程度。
除了亮面的亮调子，灰面的灰调和暗面的暗调之外，暗面由于环境的影响又出现了“反光”。另外在灰面与暗面的交界的地方，它既不受光源的照射，又不受反光的影响，因此挤出了一条最暗的面，叫“明暗交界”。这就是我们常说的“五大调子”。

三面五调.png