UI界面设计

目　　录
**部分 知识准备
第1章 UI设计相关知识 1
1.1 UI设计 1
1.1.1 UI设计的概念 1
1.1.2　UI设计的流程 2
1.1.3　UI设计的规范 4
1.1.4 UI设计常用工具 6
1.2 UI设计与用户体验 7
1.2.1 UI设计与用户体验概述 7
1.2.2 影响用户体验的因素 8
1.3 知识拓展 9
1.3.1 Photoshop CC 2017入门 9
1.3.2 Photoshop CC 2017精彩新功能 9
1.3.3 图像常用基本操作 12
1.3.4 选区的基本操作 15
1.3.5 画笔工具的应用 17
本章小结 19
第2章 UI设计的常用方法 20
2.1 UI设计中的设计方法 20
2.1.1 方法与方法论 20
2.1.2 设计方法学 20
2.1.3 UI设计中实用的设计方法 21
2.2 UI设计中实用的构成方法 23
2.2.1 什么是构成 23
2.2.2 形式美法则 23
2.2.3 构成的思维方式 29
2.3 UI设计中实用的色彩搭配技巧 31
2.3.1 色彩的基本理论 31
2.3.2 色彩搭配法则 33
2.4 知识拓展 45
2.4.1 扁平化设计风格 45
2.4.2 拟物化设计风格 47
2.4.3 卡通化设计风格 47
2.5 能力拓展 47
2.5.1 图层类别 47
2.5.2 图层的基础操作 47
2.5.3 图层样式 48
2.5.4 混合模式 49
2.5.5 Photoshop中的蒙版 50
2.5.6 渐变工具 54
本章小结 56
第二部分 牛刀小试
第3章 各种UI常用元素制作 57
3.1 常用背景制作 57
3.1.1 壁纸 57
3.1.2 图标背板 62
3.2 常见控件制作 64
3.2.1 按钮的制作 64
3.2.2 下拉选择框的制作 65
3.2.3 滑动条的制作 68
3.2.4 TAB切换块的制作 70
3.2.5 气泡对话框的制作 72
3.3 创意图标设计与制作 73
3.3.1 图标设计的基本知识 73
3.3.2 利用Photoshop打造拟物化图标 77
3.3.3 利用Photoshop打造扁平化图标 82
3.3.4 利用Photoshop打造单色图标 85
3.3.5 利用Photoshop打造线性图标 87
3.4 知识拓展 87
3.4.1 图标设计的趋势—响应式图标 87
3.4.2 路径与形状工具 88
3.4.3 擦除类工具 90
3.5 能力拓展 91
3.5.1 设计制作简单网页 91
3.5.2 独立实践 97
本章小结 98
第三部分 UI设计典型实战
第4章 操作型APP—计算器界面设计 99
4.1　UI设计任务分析 99
4.2　学习目标 100
4.3　制作步骤详解 100
4.3.1 新建文件，确定尺寸规范 100
4.3.2 制作背景 100
4.3.3 制作状态栏区域 101
4.3.4 制作显示区细节 101
4.3.5 制作功能键区和数字键区细节 101
4.3.6 定稿输出有效的设计方案 102
4.4 知识拓展 103
4.4.1 图层组 103
4.4.2 APP界面设计概述 104
4.4.3 APP界面布局设计 105
4.4.4 Photoshop外部素材的载入使用 105
4.5 能力拓展 106
4.5.1 设计制作水平仪UI 106
4.5.2 设计制作拼拼乐APP界面 107
4.5.3 独立实践 111
本章小结 111
第5章 实用型软件—播放器界面设计 112
5.1　UI设计任务分析 112
5.2 学习目标 112
5.3 制作步骤详解 112
5.3.1　创建播放器 112
5.3.2　制作播放器专辑信息部分 114
5.3.3　制作播放器播放按钮部分 117
5.4 知识拓展 121
5.4.1 色彩的搭配 121
5.4.2 Photoshop中的色彩调整 121
5.5 能力拓展 122
5.5.1 设计制作DVD光盘图标 122
5.5.2 设计制作金属按钮 123
5.5.3 为黑白照片调色 123
5.5.4 独立实践 126
本章小结 126
第6章 手机主题UI设计 127
6.1 UI设计任务分析 127
6.2 学习目标 128
6.3 制作步骤详解 128
6.3.1 制作主题形象 128
6.3.2 制作手机壁纸 129
6.3.3 制作锁屏界面 130
6.3.4 制作天气插件 131
6.3.5 制作桌面图标 136
6.4 知识拓展 142
6.4.1 手机界面设计原则 142
6.4.2 手机常用尺寸与图标格式 143
6.5 能力拓展 144
6.5.1 设计制作ico图标 144
6.5.2 设计制作伪扁平化手机主题界面 145
6.5.3 独立实践 146
本章小结 146
第7章 Web界面设计实例—儿童节专题网页设计 147
7.1　UI设计任务分析 147
7.2 学习目标 148
7.3 制作步骤详解 148
7.3.1 制作头部主图 148
7.3.2 制作装饰图形 161
7.3.3 制作栏目“书籍系列” 167
7.3.4 制作栏目“服饰系列” 175
7.3.5 制作栏目“玩具系列” 178
7.3.6 制作底部区域 181
7.4 知识拓展 183
7.4.1 网站界面设计基本原则 183
7.4.2 网站界面的功能美与形式美 183
7.5 能力拓展 184
7.5.1 打造照射在透明玻璃窗上的效果 184
7.5.2 打造倾盆大雨效果 185
7.5.3 设计制作电子商务网页界面 185
7.5.4 强化全局观念 198
7.5.5 独立实践 198
本章小结 198
第8章 智能电视界面设计 199
8.1　UI设计任务分析 199
8.2　学习目标 199
8.3 制作步骤详解 199
8.3.1 制作主界面 199
8.3.2 制作影视剧列表页 205
8.3.3 制作影视剧详情页 207
8.3.4 制作播放页 209
8.4 知识拓展 211
8.4.1 智能电视界面设计 211
8.4.2 智能电视界面设计的原则 212
8.5 能力拓展 212
8.5.1 设计制作乐视TV界面 212
8.5.2 独立实践 213
本章小结 213
参考文献 214