潮流 UI设计必修课

内容简介

国内著名UI 论坛的产品交互版版主兼特攻队UI 讲师,数据调研及数据分析师,

上海UIF 分部负责人之一,圈内称雪姐。
插画中国- 版主,游戏论坛UI 版版主。
曾在日企工作4 年,有8 年手机UI 从业经验,并有2 年网站建设和运营经验,参与过20 个内置手机APP 软件的产品交互设计及图形界面设计;并负责过Android 平台、iOS 平台、展讯和MTK 等手机系统的深度定制项目,参与或主导中国移动、摩托罗拉、腾讯手机桌面合作业务,以及阿里云、康佳、海尔、波导、金立、朵唯和宇信小辣椒等国内外多家手机品牌的项目。

目录

第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
I
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
II
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