UI设计基础与应用标准教程(全彩微课版)

第1章 UI设计学习入门 1.1 了解UI设计 2 1.1.1 UI设计简介 2 1.1.2 UI设计原则 3 1.1.3 UI设计流程 4 1.1.4 UI设计常用软件 5 注意事项在线制作网站7 1.1.5 UI设计行业的发展 7 1.2 UI设计方向 8 1.2.1 用户研究 8 1.2.2 交互设计 8 1.2.3 界面设计 8 1.3 UI设计的设计规范 9 1.3.1 一致性 9 1.3.2 准确性 9 1.3.3 可读性 10 1.3.4 布局合理化 10 1.3.5 系统操作合理性 10 1.3.6 系统响应时间 11 1.4 UI设计的色彩基础 11 1.4.1 色彩的基础知识 11 知识点拨色相环的色彩构成12 1.4.2 色彩搭配 14 实战演练：UI设计欣赏 16 新手答疑 18 第2章 图标设计 2.1 图标的设计规范 20 2.1.1 图标的尺寸规范 20 注意事项图标切图21 2.1.2 图标的视觉规范 21 动手练 制作视频播放器图标 23 2.2 图标的基础知识 26 2.2.1 图标的概念 26 2.2.2 图标的设计原则 27 动手练 制作文件袋图标 28 2.3 图标的风格类型 33 2.3.1 像素风格 33 2.3.2 扁平化风格 33 知识点拨线性图标分类34 知识点拨面性图标分类34 2.3.3 拟物风格 35 2.3.4 立体风格 35 动手练 制作面性图标 35 实战演练：制作扁平化风格图标 39 新手答疑 44 第3章 控件设计 3.1 控件的基础知识 46 3.1.1 控件的概念 46 注意事项控件和组件46 3.1.2 控件的规范 47 动手练 制作搜索框控件 48 3.2 常见控件类型 50 3.2.1 按钮控件 50 动手练 制作不同状态的按钮控件 52 3.2.2 选择控件 55 知识点拨单选按钮56 3.2.3 文本输入框控件 56 3.2.4 弹框控件 57 实战演练：制作升级弹框 58 新手答疑 62 第4章 动效设计 4.1 UI动效简介 64 4.1.1 认识UI动效 64 4.1.2 UI动效类型 64 动手练 制作扫码动效 65 4.2 制作UI动效 70 4.2.1 After Effects的工作界面 70 知识点拨工作区设置71 4.2.2 UI动效制作 71 知识点拨重新设置合成72 知识点拨添加关键帧74 注意事项关键帧应用74 4.2.3 蒙版和形状 74 知识点拨键盘↑↓键的妙用75 4.2.4 输出动效 76 动手练 制作logo的出现动效 76 实战演练：制作加载动效 79 新手答疑 84 第5章 App界面设计 5.1 App界面设计规范 86 5.1.1 iOS系统设计规范 86 知识点拨*小点击区域88 注意事项*小字号89 5.1.2 Android系统设计规范 89 注意事项Android界面常用尺寸90 5.2 App界面常见类型 91 5.2.1 闪屏页 91 5.2.2 引导页 92 注意事项功能介绍型引导页分类92 5.2.3 注册登录页 93 注意事项注册登录页分类94 动手练 制作食味App登录注册页 94 5.2.4 空白页 97 5.2.5 首页 98 5.2.6 个人中心页 99 注意事项其他常见页面99 动手练 制作食味App个人中心页 99 实战演练：制作旅行客App常用页面 103 新手答疑 112 第6章 网页界面设计 6.1 网页界面设计规范 114 6.1.1 网页尺寸规范 114 注意事项首屏高度115 6.1.2 网页界面结构规范 115 6.1.3 网页界面布局规范 115 注意事项网格列数116 6.1.4 网页界面字体规范 116 动手练 制作花间集网站首页 116 6.2 网页界面常见类型 125 6.2.1 首页 125 6.2.2 栏目页 126 6.2.3 详情页 127 动手练 制作花间集网站详情页 128 6.2.4 专题页 133 实战演练：制作饮炊美食网站首页 133 新手答疑 142 第7章 软件界面设计 7.1 软件界面设计规范 144 7.1.1 软件界面结构布局规范 144 7.1.2 软件界面尺寸规范 145 知识点拨断点145 7.1.3 软件界面字体规范 145 知识点拨常见无衬线体和衬线体146 注意事项文字间距147 7.1.4 软件图标规范 147 动手练 制作绘图软件启动页 148 7.2 软件界面常见类型 151 7.2.1 启动页 151 7.2.2 着陆页 151 7.2.3 集合页 152 动手练 制作绘图软件集合页 152 7.2.4 主/细节页 157 7.2.5 详细信息页 158 7.2.6 表单页 158 实战演练：制作视频软件界面 159 新手答疑 168 第8章 界面的标注与切图 8.1 界面标注 170 8.1.1 标注内容 170 注意事项极限值170 注意事项图标标注171 知识点拨其他需要标注的内容171 注意事项标注单位171 8.1.2 标注工具 171 动手练 标注App注册登录页 172 8.2 界面切图 175 8.2.1 切图原则 176 知识点拨点九切图176 知识点拨图标切图176 注意事项不需要切图元素176 8.2.2 切图命名规范 176 注意事项切图命名原因177 8.2.3 切图工具 177 动手练 切图并输出网页界面 178 实战演练：标注软件界面并进行切图 181 新手答疑 188 第9章 综合实战案例 9.1 设计美食App界面 190 9.1.1 设计思路 190 9.1.2 制作闪屏页 190 注意事项参考线的区别191 9.1.3 制作首页 193 9.1.4 制作详情页 201 9.2 设计移动端创意图标 208 9.2.1 设计思路 208 9.2.2 设计准备之画板的创建 208 9.2.3 绘制界面图标 210 9.2.4 绘制交流类应用图标 214 9.2.5 绘制其他常见图标 216