潮流

内容简介：

本书是火星时代倾情打造的第一本关于UI 设计的图书，作者来自UI 设计一线。本书以UI 设计师的视角及丰富的工作经验，并通

过具体的案例，全面讲解UI 的具体应用。

全书分为4 篇共26 课。第1 篇介绍UI 的概念、分类、图形界面的发展史，以及UI 行业的发展前景等；第2 篇介绍UI 设计师的必

备技能、UI 设计的工作流程等；第3 篇介绍图标设计、界面设计、系统控件设计、LOGO 与Banner 设计、产品包装的设计，以及UI 质

感表现、色彩构图、元素风格等；第4 篇介绍了产品需求分析、交互设计、用户体验、手机应用APP 等。

随书附赠1 张DVD9 多媒体教学光盘，视频包括书中大部分内容的具体讲解，以及案例的制作过程，时长约12 小时，素材内容包括所有案例的工程文件。

本书不仅适合从事UI 行业的读者阅读，也可以作为高等院校平面设计、网站设计、游戏设计等相关专业的教辅图书及相关教师的参考图书。

作者简介：

本书是火星时代倾情打造的第一本关于UI 设计的图书，作者来自UI 设计一线。本书以UI 设计师的视角及丰富的工作经验，并通

过具体的案例，全面讲解UI 的具体应用。

全书分为4 篇共26 课。第1 篇介绍UI 的概念、分类、图形界面的发展史，以及UI 行业的发展前景等；第2 篇介绍UI 设计师的必

备技能、UI 设计的工作流程等；第3 篇介绍图标设计、界面设计、系统控件设计、LOGO 与Banner 设计、产品包装的设计，以及UI 质

感表现、色彩构图、元素风格等；第4 篇介绍了产品需求分析、交互设计、用户体验、手机应用APP 等。

随书附赠1 张DVD9 多媒体教学光盘，视频包括书中大部分内容的具体讲解，以及案例的制作过程，时长约12 小时，素材内容包括所有案例的工程文件。

本书不仅适合从事UI 行业的读者阅读，也可以作为高等院校平面设计、网站设计、游戏设计等相关专业的教辅图书及相关教师的参考图书。

目录：

第1 篇 你真正了解UI 行业................................... 1

第1 课 UI 名词的由来..................................................................1

第2 课 UI 的分类.........................................................................3

第3 课 图形界面发展史................................................................8

3.1 电脑操作系统界面................................................................................... 10

3.1.1 Windows 操作系统........................................................................................ 10

3.1.2 苹果操作系统................................................................................................... 13

3.2 手机与系统界面....................................................................................... 14

第4 课 UI 行业发展前景............................................................ 17

4.1 UI 设计师薪酬等统计数据..................................................................... 18

4.2 三大手机APP Store 数据...................................................................... 19

4.3 未来UI 新领域......................................................................................... 20

第2 篇 必需的UI 装备你有吗.............................. 23

第5 课 常用软件介绍................................................................. 23

第6 课 设计师必备技能 ............................................................ 25

6.1 了解UI 设计师职业规划 ....................................................................... 26

6.2 必须掌握的3 个基本技能 ..................................................................... 26

第7 课 UI 设计工作流程 ........................................................... 29

7.1 自主软件产品开发流程 .......................................................................... 30

7.2 外包公司开发流程 .................................................................................. 30

7.3 网站推出流程 .......................................................................................... 31

7.4 什么在影响着你的设计 .......................................................................... 31

第3 篇 设计看似很简单...................................... 34

第8 课 图标设计....................................................................... 34

8.1 图标设计的基础理论............................................................................... 35

8.2 36 种图标概念设计的灵感来源............................................................. 36

8.3 像素图标的绘制....................................................................................... 37

8.4 剪影2D 图标............................................................................................ 39

8.5 扁平化图标................................................................................................ 41

8.6 写实图标.................................................................................................... 42

8.7 3D 图标..................................................................................................... 43

8.8 手机系统主题图标................................................................................... 45

第9 课 界面设计........................................................................ 46

9.1 界面设计之APP ..................................................................................... 47

9.2 界面设计之Web 设计............................................................................ 56

第10 课 系统控件设计.............................................................. 66

10.1 为何要有控件......................................................................................... 67

10.2 常见的控件元素 .................................................................................... 70

10.3 桌面主题风格......................................................................................... 71

10.4 经验分享................................................................................................. 72

第11 课 LOGO 和Banner 设计............................................... 73

11.1 黄金分割................................................................................................. 74

11.2 LOGO 设计............................................................................................. 74

Ⅰ

11.3 Banner 的元素...................................................................................... 76

第12 课 产品包装设计.............................................................. 78

第13 课 质感表现精讲............................................................. 81

13.1 光线对物体表现的影响........................................................................ 82

13.2 9 类材质表现.......................................................................................... 82

第14 课 色彩与构图精讲.......................................................... 86

14.1 色彩.......................................................................................................... 87

14.2 构图元素................................................................................................. 95

14.2.1 设计中的构图要素......................................................................................... 95

14.2.2 视觉引导......................................................................................................... 97

14.3 色彩与构图范例..................................................................................... 99

第15 课 元素风格精讲............................................................ 100

15.1 网页UI 常用风格.................................................................................101

15.2 游戏UI 常用风格.................................................................................103

第16 课 优秀案例赏析 ........................................................... 108

第17 课 扁平化UI ................................................................. 113

17.1 什么叫UI 扁平化.................................................................................114

17.2 为什么要用UI 扁平化........................................................................114

17.3 其他类型的UI 设计 .....................................................................114

17.4 UI 扁平化未必适合所有产品.............................................................115

17.5 UI 扁平化的趋势..................................................................................116

第4 篇 与我一起升华UI 之道 ........................... 117

第18 课 产品需求分析 ........................................................... 117

18.1 需求分析...............................................................................................118

18.1.1 需求的基本概念...........................................................................................118

18.1.2 5W3H（八何分析法）.............................................................................119

18.1.3 思维导图（MindMap）...........................................................................120

18.2 如何做竞品分析...................................................................................121

第19 课 交互设计入门 ........................................................... 123

第20 课 用户体验入门 ........................................................... 128

20.1 用户体验的定义及其最终目的..........................................................129

20.2 头脑风暴与故事板...............................................................................130

20.3 积极与消极的用户体验......................................................................131

20.4 用户分类...............................................................................................132

20.5 潜在用户心中的疑问...........................................................................133

20.6 用户测试...............................................................................................134

20.7 数据可视化...........................................................................................134

20.8 SEO 优化（Search Engine Optimization）..............................134

第21 课 交互动态特效........................................................... 137

第22 课 Android 和iOS 平台规范 ........................................ 141

22.1 Android 平台 .....................................................................................142

22.2 iOS 平台 ..............................................................................................147

22.3 WIN METRO 风格设计 ....................................................................151

第23 课 手机应用APP 的设计 ............................................... 156

目录

CONTENTS

Ⅱ

23.1 写在3 个实践篇之前 .........................................................................157

23.2 APP 的UI 设计 ...................................................................................160

第24 课 专题网站的UI 设计 .................................................. 167

24.1 操作步骤 ..............................................................................................168

24.2 与客户沟通的步骤 .............................................................................169

第25 课 什么人闯进UI 设计 .................................................. 171

25.1 关于UI 设计师 ....................................................................................172

25.2 关于UI 的20 个问题 ........................................................................172

第26 课 不得不说的秘密 ........................................................ 179

附录 ...................................................................................... 184

光盘目录

UI 设计基础 （总时长09:55:16）

1.........................................................自我介绍： 00:09:23

2.............. UI 设计所在公司运营内容及职能： 00:08:23

3.......................................UI 设计师必备技能： 00:11:30

4.......................................UI 设计师常逛网站： 00:09:42

5..........UI 设计师具体工作内容及职业规划： 00:10:13

6....................... UI 产品设计流程和影响因素: 00:11:55

7...............................................PS 画剪影图标： 00:15:58

8............................. 做好扁平化的10 条建议： 00:10:40

9................................做好拟物化的6 条建议： 00:11:50

10..............................关于抄袭、临摹与借鉴： 00:09:23

11...............................关于色感和用色技巧1： 00:08:55

12...............................关于色感和用色技巧2： 00:09:14

13..........................关于竞品分析和交互架构： 00:09:24

14............. 光对材质表面和纹理质感的影响： 00:10:19

15............. 设计思维的形成和人脑记忆结构： 00:08:41

16.. 历史对UI 风格的影响，做有故事的设计： 00:09:35

17.......................................... 切图的概念讲解： 00:06:31

18..............................效果图、平台和分辨率： 00:09:03

19.......................................... 实际的切图案例： 00:07:48

20.......................................................开关控件： 00:08:27

21...............................................两个扁平图标： 00:13:22

22...............................................糖果质感按钮： 00:03:13

23.......................................................黑板图标： 00:07:18

24.......................................................简约相机： 00:13:34

25...............................................酷炫耳机图标： 00:06:12

26.......................................................彩虹加载： 00:04:12

27...................................................荧光加载圈： 00:03:12

28.......................................... 立体小房子图标： 00:07:29

29.......................................................宝石质感： 00:05:38

30...............................................可爱冰棍图标： 00:07:02

31...................................................拟物望远镜： 00:16:34

32.......................................................铅笔图标： 00:03:39

33...................................................小黄鸭图标： 00:19:07

34..............................3D 扁平APP 商城图标： 00:11:40

35...................3D 天气LOWPOlY 风格图标： 00:13:05

36............. 网页界面设计需要做的前期工作： 00:09:45

37............. 网页界面设计需要做的中期工作： 00:09:06

38............. 网页界面设计需要做的后期工作： 00:10:07

39.................................. 网站资源源文件展示： 00:05:01

40..............................活动页和电商产品页面： 00:09:13

41.................................. 优秀的网页交互赏析： 00:06:06

42............................... 响应式WEB 交互设计： 00:10:42

43..............................任务流程和线框图跳转： 00:09:42

44..........................用户分类及用户调研手法： 00:10:19

45......................................APP 设计注意事项： 00:09:22

46...................... 电商瀑布流AXURE 线框图： 00:10:44

47.................. 购物车列表AXURE 线框原型： 00:10:44

48.................. 小楼老师的AXURE 部件加载： 00:06:31

49................ AXURE 加载iOS7 部件库方法： 00:06:05

50............................. APP 扁平圆形导航页面： 00:09:58

51..............................................APP 聊天界面： 00:15:15

52......................................APP 界面图片模糊： 00:06:10

53..............................................APP 登录界面： 00:07:38

54............................APP 页面METRO 风格： 00:09:54

55...........................餐馆点评APP 界面设计： 00:05:45

56...........................蛋糕订购APP 界面设计： 00:07:23

57...........................即时通信APP 界面设计： 00:06:55

58...........................清透登录APP 界面设计： 00:09:23

59...........................可爱摄影APP 界面设计： 00:13:42

60...........................音乐播放APP 界面设计： 00:15:51

61.........LOGO 和BANNER 设计注意事项： 00:09:27

62.................................. 产品包装和新手指引： 00:09:35

基础软件操作（总时长01:40:23）

1..................... 做UI 需在PS 软件中的设置： 00:05:07

2................ PS 钢笔路径形状图层布尔运算： 00:08:15

3...................... 图层蒙版路径蒙版剪切图层： 00:08:24

4..................................... PS 选区的巧妙运用： 00:06:36

5...........................图层命名规则图层文件夹： 00:05:07

6.......................................图层属性图层样式： 00:12:17

7........................................... 如何标坐标切图： 00:03:58

8........................................ CTRL_T 网格变换： 00:03:58

9...............................液化涂抹加深减淡工具： 00:06:52

10.............................边缘透明度和精确对齐： 00:06:50

11....................................... PS 制作GIF 动画： 00:03:41

12.............................曲线色相亮度调节技巧： 00:06:28

13................................................PS 常用滤镜： 00:04:58

14.............................AI 和PS 协同路径作业： 00:08:07

15....................................AI 里网格渐变功能： 00:05:48