Part 1 UI设计概念 1
Chapter 01 智能手机APP界面设计概述 1
1.1 APP界面的应用基础 3
1.1.1 智能手机与APP客户端 3
1.1.2 智能手机的操作系统有哪些 3
1.1.3 智能手机APP布局说明 4
1.1.4 APP界面的分类 6
1.2 手机UI设计的基本概念 8
1.2.1 什么是UI设计 9
1.2.2 UI设计的重要性 10
1.2.3 平面UI与手机UI的不同 10
1.2.4 UI设计软件——Photoshop 12
1.3 UI设计流程及视觉设计 13
1.3.1 UI设计流程 13
1.3.2 视觉设计 14
1.4 关于图标的设计 15
1.4.1 图标尺寸大小 16
1.4.2 图标格式建议 17
Chapter 02 APP界面设计的色彩理论和原则 18
2.1 颜色与光线 19
2.1.1 可见光 19
2.1.2 光谱色 19
2.2 颜色的属性 20
2.2.1 色彩的分类 20
2.2.2 色相 20
2.2.3 明度 21
2.2.4 饱和度 22
2.2.5 色调 22
2.3 色彩的混合 22
2.3.1 加色混合 22
2.3.2 减色混合 23
2.3.3 视觉混合 23
2.3.4 色域 23
2.3.5 色彩管理 23
2.4 APP界面设计中材质绘制的色彩理论 25
2.4.1 视觉中心 25
2.4.2 关于光能的传递 25
2.4.3 阴影的体现 26
2.4.4 冷暖的对比和烘托 26
2.4.5 线条的暗示性 27
2.5 APP界面的设计原则 27
2.5.1 捕捉对象的特征 28
2.5.2 让图标简单、通用,从而适应一系列项目 28
2.5.3 使用一致的光源 28
2.5.4 创建矢量格式的图标 29
2.5.5 注意文化差异 29
2.5.6 使用别样的色彩组合 29
2.5.7 图标的尺寸大小 30
2.5.8 仔细规划你的设计 30
2.5.9 设计一个犀利的小图标 31
Chapter 03 Photoshop制作图标常用的编辑操作 37
3.1 Photoshop CS6的工作界面 38
3.1.1 了解工作界面的工作组建 38
3.1.2 了解工具箱 39
3.1.3 了解选项栏 39
3.1.4 了解状态栏 42
3.1.5 了解面板 43
3.2 图标设计技巧和原则 45
3.3 跟大师设计一组图标 47
3.3.1 准备工作 47
3.3.2 构思、草图 47
3.3.3 辅助背景制作 48
3.3.4 基本形、放大 49
3.3.5 创作过程 49
3.3.6 常用方法——变形 51
3.3.7 进阶方法——改进 52
3.3.8 成品 53
问答:形状工具和选区的区别? 54
PART 2 实战案例 56
Chapter 04简单图标UI设计 56
4.1 制作桃心图标 57
技术链接:路径的运算方法 59
4.2 制作可回收资源图标 60
技术链接:钢笔工具的使用 62
4.3 制作短信图标 63
技术链接:基本图形工具 65
4.4 制作照相机图标 66
技术链接:基本图形工具 68
4.5 制作闹钟图标 69
技术链接:认识锚点 72
问答:如何快速上手制作图标? 73
Chapter 05 复杂图标UI设计 74
5.1 摄像头图标制作 75
技术链接:新建文档 89
5.2 Drive图标制作 90
技术链接:对图层的基本理解 97
5.3 tumblr图标制作 98
技术链接:设置图层不透明度 102
5.4 天气图标制作 103
技术链接:了解“图层”面板 110
5.5 工具箱图标制作 111
技术链接;显示与隐藏图层 125
问答:怎样完成一个图标设计? 126
Chapter 06图形UI设计 127
6.1 条码图形 128
技术链接:添加“图层样式”的方法 135
6.2 圣诞图形 136
技术链接:“图层样式”对话框 144
6.3 工具图形 145
技术链接:图层样式、渐变叠加 157
6.4 E-mail图形 159
技术链接:图层样式——斜面和浮雕 165
问答:怎样解决锯齿问题? 167
Chapter 07按钮UI设计 169
7.1 内发光按钮 170
技术链接——标尺和参考线 176
7.2 简单的水晶方按钮 177
技术链接:图层样式-投影 182
7.3 电源风格按钮 185
技术链接:图层样式-内阴影/光泽 198
7.4 糖果按钮 199
技术链接:图层样式-图案叠加 209
7.5 音乐播放器按钮 210
技术链接:图层样式——外发光/内发光 230
问答:按钮设计的技巧方法? 231
Chapter 08进度条、日历、开关UI设计 232
8.1 Loading加载进度条 233
技术链接:图层蒙版的使用 249
8.2 日历界面 250
技术链接:变换与变形图像 258
8.3 开关设置界面 260
技术链接:文字的编辑技巧 276
问答:如何合理地设计进度条? 277
Chapter 09输入框UI设计 279
9.1 对话框 280
技术链接:复制、粘贴和清除样式 288
9.2 登录窗口 289
技术链接:显示和隐藏效果 298
9.3 搜索界面 299
技术链接:修改效果 310
问答:怎么更好的应用图层样式? 311
Chapter 10导航和通知列表UI设计 312
10.1 通知列表 313
技术链接:智能滤镜 324
10.2 导航列表 325
技术链接:创建剪贴蒙版 332
问答:界面设计的核心有哪些? 333