第01章 智能手机UI设计基础 11
1.1 APP UI设计相关知识 11
1.1.1 什么是APP UI设计 11
1.1.2 做APP UI设计的目的和重要性 11
1.1.3 APP UI设计中的重要元素 11
1.1.4 平面UI与手机UI的不同 13
1.2 UI设计原则 14
1.2.1 区分重点 14
1.2.2 界面统一性 15
1.2.3 清晰度是重中之重 15
1.2.4 界面存在的意义 16
1.2.5 让界面处在用户的掌握之中 16
1.2.6 界面的存在必须有所用途 16
1.2.7 强烈的视觉层次感 17
1.2.8 UI设计师如何展示他的价值 17
1.3 关于智能手机 18
1.3.1 智能手机操作系统的分类 18
1.3.2 手机屏幕的分辨率 20
1.3.3 屏幕的色彩 20
1.4 课后练习——UI设计的流程 21
1.5 课后思考——优秀的手机UI界面有哪些特点 22
第02章 APP界面设计的色彩理论 24
2.1 色彩的意象 24
2.1.1 红色的色彩意象 24
2.1.2 橙色的色彩意象 24
2.1.3 黄色的色彩意象 24
2.1.4 绿色的色彩意象 24
2.1.5 蓝色的色彩意象 25
2.1.6 紫色的色彩意象 25
2.1.7 褐色的色彩意象 25
2.1.8 黑色的色彩意象 25
2.1.9 白色的色彩意象 25
2.1.10 灰色的色彩意象 25
2.2 色彩的重要性 26
2.2.1 色彩的物理效应 26
2.2.2 色彩的心理反应 26
2.3 色彩的属性 27
2.3.1 色彩的分类 27
2.3.2 色相 27
2.3.3 明度 27
2.3.4 饱和度 28
2.3.5 色调 28
2.4 色彩的搭配原则 28
2.4.1 色相配色 29
2.4.2 色调配色 29
2.4.3 明度配色 30
2.5 课后练习——制作配色卡 31
2.6 课后思考——如何找到完美的色彩搭配 32
第03章 熟悉Photoshop的常用工具 40
3.1 Photoshop CC的工作界面 40
3.1.1 了解工作界面的工作组件 40
3.1.2 了解工具箱 41
3.1.3 了解选项栏 41
3.1.4 了解状态栏 43
3.1.5 了解面板 44
3.1.6 调整面板 45
3.2 选择工具 46
3.2.1 设定选区的工作组 46
3.2.2 矩形选框工具的选项栏 47
3.2.3 磁性套索工具的选项栏 48
3.2.4 魔棒工具的选项栏 49
案例1 利用多边形套索工具绘制立体盒子 50
3.3 填充工具 51
3.3.1 渐变工具的选项栏 52
3.3.2 油漆桶工具的选项栏 54
案例2 使用渐变工具填充图像颜色 55
3.4 图层的编辑 56
3.4.1 理解图层的概念 56
3.4.2 图层编组命令 57
3.4.3 排列命令 57
3.4.4 自动对齐图层命令 58
案例3 调整图层的不透明度 58
3.5 蒙版的应用 59
3.5.1 “属性”面板 60
3.5.2 图层蒙版的原理 61
3.5.3 图层蒙版的编辑 62
3.5.4 矢量蒙版 62
3.5.5 剪贴蒙版 62
3.5.6 快速创建与释放剪贴蒙版 63
案例4 创建矢量蒙版 63
3.6 课后练习——用快捷键熟练控制视图以提高工作效率 64
3.7 课后思考——怎样更好地应用图层样式 65
第04章 制作平面图标 67
4.1 图标尺寸大小 67
4.2 如何设计一组图标 67
4.3 图标设计的格式和大小 73
4.3.1 JPEG格式 73
4.3.2 PNG格式 73
4.3.3 GIF格式 73
案例1 制作Home图标 74
案例2 制作日历图标 76
案例3 制作录音机图标 78
案例4 制作文件夹图标 80
案例5 制作徽章图形 82
案例6 制作秒表图形 85
案例7 制作桃心图形 89
案例8 制作可回收资源图标 91
4.4 课后练习——制作闹钟图标 93
4.5 课后思考——如何快速制作一组图标 98
第05章 制作立体图标 100
5.1 如何让图标更具吸引力 100
5.2 立体图标的设计原则 100
案例1 制作Dribbble图标 101
案例2 制作天气图标 105
案例3 制作Chrome图标 110
案例4 制作twieet图标 113
案例5 制作照相机图标 117
案例6 制作摄像头图标 121
5.3 课后练习——制作短信图标 130
5.4 课后思考——怎样设计一个立体图标 132
第06章 制作按钮 134
6.1 如何设计和谐的交互 134
6.2 设计师关于按钮设计的几点建议 135
案例1 制作发光按钮 136
案例2 制作控制键按钮 140
案例3 制作播放器按钮 144
案例4 制作清新开关按钮 156
案例5 制作高调旋钮 163
案例6 制作电源风格按钮 168
6.3 课后练习——制作糖果按钮 176
6.4 课后思考——按钮设计的技巧和方法 182
第07章 制作局部界面元素 185
7.1 关于局部界面设计的几点建议 185
7.1.1 尽量控制质感的表现 185
7.1.2 在繁简之间做选择 185
7.1.3 不要忘记功能的表现 186
7.2 关于透明元素和透明度使用的艺术 186
7.2.1 内容模块和网站框架的对比 186
7.2.2 半透明导航的跟踪运用 187
7.2.3 使用较小的透明模块来衬托 187
案例1 登录界面 188
案例2 设置界面开关 192
案例3 通知列表界面 198
案例4 日历界面 203
案例5 对话框界面 209
案例6 调整面板 212
7.3 课后练习——制作搜索界面 220
7.4 课后思考——怎样解决线条的锯齿问题 227
第08章 设计手机UI控件 230
8.1 控件的设计原则 230
8.1.1 进度条的设计建议 230
8.1.2 导航列表的设计建议 230
案例1 进度条 232
案例2 音量设置图标 243
案例3 选项按钮 254
案例4 Wi-Fi标志 262
案例5 蓝牙标志 266
案例6 上传界面 269
案例7 菜单界面按钮 275
案例8 通知列表界面 278
8.2 课后练习——制作导航界面 285
8.3 课后思考——如何合理地设计进度条 290
第09章 制作手机软件界面 293
9.1 手机软件界面的概念 293
9.2 苹果、安卓和WP系统软件的区别 293
案例1 制作美拍界面 294
案例2 制作我爱记单词界面 300
案例3 制作计算器界面 307
9.3 课后练习——制作天气预报界面 310
9.4 课后思考——你对你的用户群了解吗？ 318
第10章 制作播放器界面 321
10.1 各种风格的播放器界面 321
10.2 宽大的背景面板 321
10.3 突出的质感 321
10.4 浓郁的色调 321
10.5 清晰的边缘 321
案例1 制作视频播放器图标 322
案例2 制作震撼的金属质感的播放器图标 325
10.6 课后练习——制作播放器皮肤 331
10.7 课后思考——UI设计师如何自我提升？ 339
第11章 制作手机游戏界面 344
11.1 手机游戏界面概述 344
11.2 手机游戏界面的设计方法 344
案例 制作威龙战士游戏界面 345
11.3 课后练习——制作大鱼吃小鱼游戏界面 352
11.4 课后思考——良好界面设计的几大特点 358
第12章 制作智能手机UI整体界面 362
12.1 界面设计的核心 362
12.2 Apple和Android移动端尺寸指南 363
12.3 iOS扁平化系统的特色 364
案例1 苹果手机界面总体设计 366
案例2 Android手机界面总体设计 375
案例3 Windows Phone手机界面总体设计 387
12.4 课后练习——制作一组清新的界面设计 400
12.5 课后思考——借助设计资源来提高自身能力 407