以职教改革新形态教材为特色，科学严谨、深入浅出形式多样的手册和融媒体编写方法，全面系统地讲述了UI设计过程、原理和方法，详细介绍了常用UI元素以及界面设计思路和制作过程，重点讲解了当前热门的手机App设计，帮助读者在较短的时间内掌握UI界面设计的
具体流程、内容和技巧。
苏州信息职业技术学院多媒体动漫系主任，副教授。中国大学慕课公开课“UI设计”课讲了8轮，2022年获江苏省教学大赛一等奖，获得过教育部正保教育杯it教育工程就业技能大赛优秀指导教师称号。
第一部分 UI基础设计
项目1 UI基础与规范
任务1 什么是UI设计
一、UI设计概述
二、UI设计的分类
三、UI设计的发展趋势
任务2 UI设计的常用工具和工作流程
一、UI设计的常用工具
二、UI设计的流程
任务3 UI设计的原则和规范
一、UI设计的原则
二、UI设计的规范
三、设计规范分析
项目2 UI设计常用控件
任务1 控制元素制作
一、各类常用控制器
二、控制元素案例制作
任务2 筛选器制作
一、各类常用筛选器
二、筛选器案例制作
任务3 表单控件制作
一、各类常用表单控件
二、表单控件案例制作
任务4 按钮制作
一、按钮规范
二、国潮艺术
三、按钮案例制作
任务5 其他控件制作
一、模态浮层
二、非模态浮层
三、其他控件之模态浮层案例制作
项目3 图标设计
任务1 图标设计的准备
一、图标的含义
二、图标的分类
三、图标的设计原则
四、图标的设计创意
五、图标的设计要点
六、图标的设计规范
任务2 线性化图标设计
一、线性化风格图标的特征
二、线性化风格图标的分类
三、线性化风格图标的绘画准备
四、 两种常用线性化图标的绘画技法
五、线性化图标案例制作
任务3 扁平化图标设计
一、什么是扁平化风格
二、扁平化风格的特征
三、扁平化风格的四种类型
四、扁平化图标案例制作
任务4 拟物化图标设计
一、拟物化风格的特征
二、拟物化风格与扁平化风格的比较
三、拟物化风格图标的设计分析
四、拟物化风格图标的绘画技法
五、拟物化图标案例制作
第二部分 UI创意设计
项目4 “寅虎”手机主题界面设计
任务1 “寅虎”手机主题界面设计的准备
一、手机主题UI界面设计概要
二、“寅虎”主题界面设计思路
任务2 “寅虎”主题形象和壁纸制作
一、“寅虎”主题形象设计
二、手机壁纸设计
三、“寅虎”主题形象制作
四、手机壁纸制作
任务3 时钟天气Widget制作
一、Widget的含义
二、时钟天气Widget的结构组成
三、时钟天气Widget制作
任务4 “计算器”图标设计与制作
一、通用背板设计
二、图标内容设计
三、“计算器”图标制作
任务5 安卓系统界面布局
一、界面组成
二、操作要点
三、安卓系统界面布局操作
任务6 鸿蒙系统界面布局
一、界面特点
二、操作要点
三、鸿蒙系统界面布局操作
项目5 实用型APP --“四时”天气界面设计
任务1 “四时”天气APP产品定位和界面设计
一、认识实用型APP
二、几款天气APP比较
三、“四时”天气APP的产品定位
四、“四时”天气APP的界面规范
任务2 “四时”天气APP图标设计
一、“四时”天气APP的小图标种类
二、“四时”天气APP图标案例制作
任务3 “四时”天气APP闪屏设计
一、闪屏的作用
二、闪屏的常见类型
三、 闪屏的设计手法
四、“四时”天气APP闪屏页面的实现
五、“四时”天气APP闪屏案例制作
任务4 “四时”天气APP主页面设计
一、主页面的功能
二、 “四时” 天气APP主页面的组成
三、“四时”天气APP主页面案例制作
任务5 “四时”天气APP近5日天气页面设计
一、“四时”天气APP近5日天气页面的组成元素
二、“四时”天气APP近5日天气页面制作
项目6 新闻类APP --“悦”新闻界面设计
任务1 “悦”新闻APP产品定位和界面设计
一、认识新闻类APP
二、“悦”新闻APP的产品定位
三、 “悦”新闻APP的界面设计
任务2 “悦”新闻APP首页设计
一、新闻类APP首页排版
二、“悦”新闻APP首页案例制作
任务3 “悦”新闻APP详情页设计
一、“悦”新闻APP详情页的布局
二、“悦”新闻APP详情页案例制作
任?4 “悦”新闻APP登录页面设计
?、 注册登录方式
二、 登录页面设计要点
三、登录页面常用风格
四、“悦”新闻APP登录页面布局
五、“悦”新闻APP登录页面案例制作
任务5 “悦”新闻APP我的页面设计
一、什么是我的页面
二、我的页面设计原则
三、我的页面设计风格
四、“悦”新闻APP我的页面布局
五、“悦”新闻APP我的页面案例制作
项目7 社交类APP --“轻说”界面设计
任务1 “轻说”APP产品定位和界面设计
一、社交类APP的功能
二、社交类APP的种类
三、社交类APP的设计风格
四、社交类APP赏析--以“微信”“QQ”和“抖音”为例
五、“轻说”APP的产品定位
六、“轻说”APP的界面规范
任务2 “轻说”APP图标与启动页界面设计
一、社交类APP启动页界面的类型
二、 “轻说”APP图标与启动页界面设计
三、“轻说”APP图标与启动页界面案例制作
任务3 “轻说”APP个人中心界面设计
一、社交类APP个人中心界面的功能
二、“轻说” APP个人中心界面的组成
三、“轻说”APP个人中心界面案例制作
任务4 “轻说”APP圈聊界面设计
一、社交类APP聊天界面的组成元素
二、“轻说”APP圈聊界面案例制作
任务5 “轻说”APP通讯录界面设计
一、社交类APP通讯录界面的组成元素
二、“轻说”APP通讯录界面案例制作
任务6 “轻说”APP圈子界面设计
一、社交类APP朋友圈界面的功能
二、“轻说”APP圈子界面案例制作
参考文献
书单推荐
