UI创意设计

本书采用活页式装订+项目案例编写模式，针对目前的智能手机AUI设计、网站WUI设计及智能穿戴设备、智能家居、公共场所智能终端等其他智能终端设备GUI设计所涉及的相关知识和技术技能逐一进行知识讲解和案例制作过程的演示，让读者深刻理解UI相关知识并熟练掌握各种图标、控件和界面的制作技术。本书共两个单元：单元1 UI基础设计，主要介绍UI设计的相关知识、图标的设计与制作和UI控件的设计与制作；单元2 UI创意设计，主要介绍手机端AUI设计、PC端WUI设计和其他智能终端设备的GUI设计，共14个相关知识点和50个案例制作。本书是“影视动画”国家职业教育教学资源库的子项目“UI创意设计”的配套教材，在“智慧职教”网站上有配套资源及配套课程。本书可作为全国职业院校影视动画专业、视觉艺术设计专业、数字媒体技术专业和计算机应用技术专业（移动开发与应用方向、虚拟现实技术方向）专业的教材，也可供UI设计爱好者学习参考。

单元1 UI基础设计
项目1 初识UI设计
任务1 何谓UI设计
任务2 UI设计流程
任务3 UI设计原则
任务4 UI设计风格
任务5 UI设计色彩
任务6 UI设计字体
任务7 UI常用工具
项目2 设计制作图标
任务1 认识图标
任务2 制作便签图标
步骤一 绘制图标背景
步骤二 绘制“笔”造型
步骤三 绘制“文字”造型
任务3 制作天气图标
步骤一 绘制图标背景
步骤二 绘制云朵造型
步骤三 绘制字母C造型
步骤四 绘制太阳造型
任务4 制作闹钟图标
步骤一 绘制图标背景
步骤二 绘制熊猫头像
步骤三 绘制刻度
步骤四 绘制指针
任务5 制作下载图标
步骤一 绘制图标背景
步骤二 绘制圆形造型
步骤三 绘制下载图形
任务6 制作邮箱图标
步骤一 绘制图标背景
步骤二 绘制邮件图形
项目3 设计制作UI控件
任务1 认识UI控件
任务2 绘制简洁音乐进度条
步骤一 绘制背景图像
步骤二 添加素材效果
步骤三 绘制进度条
任务3 绘制质感下载进度条
步骤一 绘制背景图像
步骤二 添加图文效果
步骤三 绘制质感进度条
任务4 绘制扁平按钮
步骤一 绘制背景图像
步骤二 添加基本文字
步骤三 绘制扁平按钮
任务5 绘制质感按钮
步骤一 绘制背景图像
步骤二 添加文字效果
步骤三 绘制质感按钮
单元2 UI创意设计
项目1 AUI设计
任务1 认识AUI设计
任务2 手机锁屏界面设计
步骤一 绘制背景
步骤二 绘制时间信息及解锁键
步骤三 绘制界面主体图案
任务3 手机主题界面设计
步骤一 绘制背景图案及手机顶部区域
步骤二 绘制时问、天气区域
步骤三 添加界面图标及文字
任务4 手机闹钟设置界面设计
步骤一 绘制背景及手机顶部区域
步骤二 绘制闹钟设置区
步骤三 绘制底部菜单栏
任务5 手机天气界面设计
步骤一 绘制背景及手机顶部区域
步骤二 绘制当日天气状况
步骤三 绘制一周天气状况
任务6 手机音乐APP首页设计
步骤一 绘制手机项部区域
步骤二 绘制封面推荐区域
步骤三 绘制推荐歌单区域
步骤四 绘制底部菜单栏
任务7 手机音乐APP播放页设计
步骤一 绘制背景及手机顶部区域
步骤二 绘制歌曲信息部分
步骤三 绘制播放进度条
步骤四 添加播放按钮组件
项目2 WUI设计
任务1 认识WUI设计
任务2 Edge浏览器图标设计
步骤一 绘制图标背景
步骤二 绘制六个不规则椭圆
步骤三 添加图标效果
任务3 网站Logo设计
步骤一 绘制背景
步骤二 绘制草芯
步骤三 绘制四片叶
步骤四 添加文字信息
任务4 网页按钮设计
步骤一 创建背景
步骤二 绘制绿色水晶按钮
步骤三 绘制其他水晶按钮
任务5 网页导航设计
步骤一 创建画布确定网页宽度
步骤二 绘制导航背景
步骤三 添加导航信息
步骤四 绘制搜索栏
步骤五 绘制导航水平线
任务6 网站Banner设计
步骤一 创建画布确定Banner宽度
步骤二 置入Banner元素
步骤三 绘制动画
任务7 网站首页设计
步骤一 创建画布确定网页宽度
步骤二 添加Logo和导航条
步骤三 绘制页面背景
步骤四 添加图片元素
步骤五 添加按钮
步骤六 添加文字信息
项目3 GUI设计
任务1 认识GUI设计
任务2 行车记录仪UI设计
步骤一 绘制界面背景
步骤二 绘制图标背景
步骤三 导入图标
步骤四 添加文字信息
任务3 图书馆自助机UI设计
步骤一 绘制界面背景
步骤二 添加文字信息
步骤三 绘制天气模块
步骤四 绘制功能模块
任务4 iPad点餐UI设计
步骤一 绘制界面背景
步骤二 绘制水平时间栏
步骤三 绘制侧面导航栏
步骤四 绘制内容栏
任务5 跑步机UI设计
步骤一 绘制界面背景
步骤二 绘制宫格功能模块
步骤三 绘制图标并添加文字
任务6 VR眼镜UI设计
步骤一 绘制界面背景
步骤二 制作内容区域
步骤三 绘制功能按钮
任务7 交通违法自助受理机UI设计
步骤一 绘制界面背景
步骤二 绘制上边框和下边框
步骤三 绘制按钮
步骤四 添加文字信息