UI设计全书（全彩）

第1 章 关于UI 设计…………………………………………………………… 1
1．1　关于UI 设计……………………………………………………………………… 2
1．1．1　UI 设计概念 ………………………………………………………………… 2
1．1．2　设计类别 ……………………………………………………………………… 2
1．1．3　UI 设计流程 ………………………………………………………………… 6
1．2　了解UI 设计师…………………………………………………………………… 8
1．2．1　研究界面――图形设计师 …………………………………………………… 8
1．2．2　研究人与界面的关系――交互设计师 ……………………………………… 8
1．2．3　研究人――用户测试/ 研究工程师 ………………………………………… 9
1．3　UI 设计应用软件………………………………………………………………… 9
1．3．1　图片处理――Photoshop……………………………………………………… 9
1．3．2　矢量绘图――Illustrator …………………………………………………… 10
1．3．3　矢量绘图――Sketch ……………………………………………………… 10
1．3．4　交互效果――Axure RP …………………………………………………… 11
1．3．5　小动画――Flash …………………………………………………………… 11
1．4　UI 设计的构成元素…………………………………………………………… 12
1．4．1　文字元素 …………………………………………………………………… 12
1．4．2　图形符号元素 ……………………………………………………………… 13
1．4．3　图像元素 …………………………………………………………………… 13
1．4．4　多媒体元素 ………………………………………………………………… 13
1．4．5　色彩元素 …………………………………………………………………… 13
1．5　UI 设计的重要原则…………………………………………………………… 14
1．5．1　清晰明了的设计 …………………………………………………………… 14
1．5．2　记忆负担最小化 …………………………………………………………… 14
1．5．3　设计的一致性 ……………………………………………………………… 15
1．5．4　美观大方的设计 …………………………………………………………… 15
Ⅵ
1．5．5　从用户习惯考虑 …………………………………………………………… 15
1．5．6　安全性 ……………………………………………………………………… 16
1．5．7　灵活性 ……………………………………………………………………… 16
1．5．8　人性化 ……………………………………………………………………… 16
1．6　专题讨论… …………………………………………………………………… 17
1．6．1　为什么要培养设计师的产品思维？ ……………………………………… 17
1．6．2　产品层面思考 ……………………………………………………………… 18
1．7　本章小结… …………………………………………………………………… 18
第2 章 UI 设计配色… ……………………………………………………… 19
2．1　初识色彩… …………………………………………………………………… 20
2．1．1　色彩属性 …………………………………………………………………… 20
2．1．2　基础配色 …………………………………………………………………… 21
2．2　软件界面中的色彩搭配… …………………………………………………… 23
2．2．1　色调的一致性 ……………………………………………………………… 23
2．2．2　保守地使用色彩 …………………………………………………………… 24
2．2．3　色彩的选择尽可能符合人们的视觉习惯 ………………………………… 24
2．2．4　使用色彩作为功能分界的识别元素 ……………………………………… 25
2．2．5　用户拥有调整界面的配色方案 …………………………………………… 25
2．2．6　色彩搭配要便于阅读 ……………………………………………………… 26
2．2．7　控制色彩的使用数量 ……………………………………………………… 26
2．3　色彩在网站UI 设计中的作用………………………………………………… 26
2．3．1　突出主题 …………………………………………………………………… 27
2．3．2　划分视觉区域 ……………………………………………………………… 27
2．3．3　吸引用户 …………………………………………………………………… 28
2．3．4　增强艺术性 ………………………………………………………………… 35
2．4　网站UI 设计中的色彩搭配…………………………………………………… 36
2．4．1　网站UI 设计配色基础 …………………………………………………… 36
2．4．2　网站UI 设计配色原则 …………………………………………………… 38
2．5　网站UI 设计配色方法………………………………………………………… 40
2．5．1　主色 ………………………………………………………………………… 40
2．5．2　背景色 ……………………………………………………………………… 40
2．5．3　辅色 ………………………………………………………………………… 41
2．5．4　点缀色 ……………………………………………………………………… 42
2．6　网站文本配色… ……………………………………………………………… 50
2．6．1　网页与文本的配色关系 …………………………………………………… 51
2．6．2　良好的网页文本配色 ……………………………………………………… 51
2．6．3　网页文本配色要点 ………………………………………………………… 52
2．7　网页元素的色彩搭配… ……………………………………………………… 52
2．7．1　Logo 与广告 ………………………………………………………………… 52
2．7．2　导航菜单 …………………………………………………………………… 53
2．7．3　背景与文字 ………………………………………………………………… 53
2．7．4　链接文字 …………………………………………………………………… 54
2．8　手机游戏界面配色… ………………………………………………………… 55
2．8．1　手机游戏界面设计中的色彩表现 ………………………………………… 55
2．8．2　手机游戏界面设计中的色彩设计方法 …………………………………… 56
2．9　专题讨论… …………………………………………………………………… 57
2．9．1　网站界面配色的基本方法是什么？ ……………………………………… 57
2．9．2　怎样培养对色彩的敏感度？ ……………………………………………… 57
2．10　本章小结……………………………………………………………………… 58
第3 章 图标按钮设计……………………………………………………… 59
3．1 图标按钮设计概述… ………………………………………………………… 60
3．1．1 图标按钮的起源 …………………………………………………………… 60
3．1．2 图标按钮的分类 …………………………………………………………… 61
3．2 软件图标按钮设计… ………………………………………………………… 63
3．2．1 图标设计规范 ……………………………………………………………… 63
3．2．2 图标常用格式 ……………………………………………………………… 65
3．2．3 软件按钮设计 ……………………………………………………………… 66
3．3 图标设计风格… ……………………………………………………………… 66
3．3．1 简约化软件图标 …………………………………………………………… 66
3．3．2 扁平化软件图标 …………………………………………………………… 70
3．3．3 拟物化软件图标 …………………………………………………………… 76
3．4　网页图标按钮设计… ………………………………………………………… 77
3．4．1 网页中按钮的设计规则 …………………………………………………… 77
3．4．2 网页中常见的按钮类型 …………………………………………………… 79
3．4．3 网页中按钮的特点 ………………………………………………………… 80
3．4．4 网页图标的应用 …………………………………………………………… 86
3．5 网页中按钮的实际作用… …………………………………………………… 87
3．5．1 具有提交功能的按钮 ……………………………………………………… 87
3．5．2 具有链接功能的按钮 ……………………………………………………… 88
3．6 游戏界面中的按钮设计… …………………………………………………… 89
3．6．1 按钮元素 …………………………………………………………………… 89
3．6．2 游戏按钮的视觉表现 ……………………………………………………… 90
3．7 专题讨论… …………………………………………………………………… 96
3．7．1 图标的常用尺寸有哪些？ ………………………………………………… 96
3．7．2 如何设计出好的图标或按钮？ …………………………………………… 96
3．8 本章小结… …………………………………………………………………… 97
第4 章 应用软件UI 设计…………………………………………………… 99
4．1 了解软件UI 设计……………………………………………………………… 100
4．1．1 软件UI 设计基础 ………………………………………………………… 100
4．1．2 软件UI 设计原则 ………………………………………………………… 101
4．1．3 软件UI 设计分类 ………………………………………………………… 108
4．1．4 软件UI 设计元素 ………………………………………………………… 111
4．2 开关和进度条设计… ………………………………………………………… 112
4．2．1 开关设计 …………………………………………………………………… 112
4．2．2 进度条设计 ………………………………………………………………… 117
4．3 软件菜单和工具栏设计… …………………………………………………… 122
4．3．1 软件菜单的必要性 ………………………………………………………… 122
4．3．2 软件菜单的设计原则 ……………………………………………………… 123
4．3．3 软件工具栏的作用 ………………………………………………………… 124
4．4 软件启动界面设计… ………………………………………………………… 129
4．4．1 软件启动界面的作用 ……………………………………………………… 129
4．4．2 软件启动界面的设计原则 ………………………………………………… 137
4．4．3 设计软件启动界面需要注意的事项 ……………………………………… 137
4．5 软件皮肤设计… ……………………………………………………………… 140
4．5．1 天气软件皮肤设计 ………………………………………………………… 140
4．5．2 输入法软件皮肤设计 ……………………………………………………… 148
4．6 专题讨论… …………………………………………………………………… 148
4．6．1 如何在软件安装界面设计中提高用户对软件的认知？ ………………… 149
4．6．2 在软件启动界面中通常会为用户提供哪些信息？ ……………………… 149
4．7 本章小结… …………………………………………………………………… 149
第5 章 游戏UI 设计………………………………………………………… 151
5．1 了解游戏UI 设计……………………………………………………………… 152
5．1．1 游戏UI 设计基础 ………………………………………………………… 152
5．1．2 确定游戏设计风格 ………………………………………………………… 154
5．1．3 游戏UI 设计规范 ………………………………………………………… 155
5．1．4 游戏UI 的三种设计方式 ………………………………………………… 158
5．2 游戏UI 设计元素……………………………………………………………… 160
5．2．1 图形图像元素 ……………………………………………………………… 160
5．2．2 文字元素 …………………………………………………………………… 161
5．2．3 动态显示元素 ……………………………………………………………… 162
5．2．4 视听元素 …………………………………………………………………… 168
5．3 网页游戏UI 设计……………………………………………………………… 169
5．3．1 熟悉网页游戏 ……………………………………………………………… 169
5．3．2 设计流程 …………………………………………………………………… 172
5．3．3 设计规则 …………………………………………………………………… 180
5．3．4 设计目标 …………………………………………………………………… 182
5．4 iOS 系统游戏UI 设计………………………………………………………… 184
5．4．1 设计基础 …………………………………………………………………… 184
5．4．2 设计原则 …………………………………………………………………… 185
5．4．3 移动端游戏UI 的特点 …………………………………………………… 189
5．4．4 iPad 游戏视觉设计要素 …………………………………………………… 190
5．5 Android 系统游戏UI 设计… ………………………………………………… 199
5．5．1 设计基础 …………………………………………………………………… 199
5．5．2 设计规范 …………………………………………………………………… 200
5．5．3 传统游戏与手机游戏UI 设计 …………………………………………… 210
5．5．4 手机游戏UI 设计常见问题 ……………………………………………… 211
5．6 专题讨论… …………………………………………………………………… 213
5．6．1 什么是人性化的网页游戏UI ？ ………………………………………… 213
5．6．2 网页游戏UI 为什么要具有一定的可扩充性？ ………………………… 213
5．7 本章小结… …………………………………………………………………… 213
第6 章 网页UI 设计………………………………………………………… 215
6．1 网页UI 设计详解……………………………………………………………… 216
6．1．1 认识网页界面设计 ………………………………………………………… 216
6．1．2 网页界面设计要点 ………………………………………………………… 219
6．1．3 网页界面设计规范 ………………………………………………………… 223
6．1．4 网页界面设计思路 ………………………………………………………… 225
6．2 网页Logo 设计… …………………………………………………………… 226
6．2．1 网页Logo 的表现形式 …………………………………………………… 226
6．2．2 网页Logo 的设计特点 …………………………………………………… 227
6．2．3 网页Logo 的设计原则 …………………………………………………… 228
6．3 网页导航设计… ……………………………………………………………… 235
6．3．1 网页导航概述 ……………………………………………………………… 235
6．3．2 导航在网页中的表现形式 ………………………………………………… 236
6．3．3 导航的摆放位置 …………………………………………………………… 237
6．4 网页广告设计… ……………………………………………………………… 247
6．4．1 网页广告的特点 …………………………………………………………… 247
6．4．2 常见的网页广告类型 ……………………………………………………… 249
6．5 网页布局与版式设计… ……………………………………………………… 250
6．5．1 了解网页布局 ……………………………………………………………… 250
6．5．2 常见的网页布局形式 ……………………………………………………… 251
6．5．3 网页构成的艺术表现 ……………………………………………………… 263
6．5．4 网页界面风格设计 ………………………………………………………… 265
6．6 专题讨论… …………………………………………………………………… 267
6．6．1 交互式导航的优势与劣势 ………………………………………………… 267
6．6．2 文字排版设计在网站界面中起到的作用 ………………………………… 267
6．6．3 什么是网站界面布局的连贯性和多样性？ ……………………………… 267
6．7 本章小结… …………………………………………………………………… 268
第7 章 淘宝店铺UI 设计…………………………………………………… 269
7．1 淘宝店铺UI 设计基本元素…………………………………………………… 270
7．1．1 关于网店设计 ……………………………………………………………… 270
7．1．2 店铺中的导航表现形式 …………………………………………………… 271
7．1．3 设计店铺中的工具栏 ……………………………………………………… 275
7．2 淘宝店铺视觉设计原则… …………………………………………………… 276
7．2．1 功能性原则 ………………………………………………………………… 276
7．2．2 实用性原则 ………………………………………………………………… 277
7．2．3 一致性原则 ………………………………………………………………… 279
7．3 店铺专题海报设计… ………………………………………………………… 280
7．3．1 海报的摆放位置 …………………………………………………………… 280
7．3．2 海报设计的层次 …………………………………………………………… 281
7．3．3 海报设计中文字的作用 …………………………………………………… 285
7．3．4 利用设计凸显海报主题 …………………………………………………… 289
7．4 淘宝店铺广告设计… ………………………………………………………… 293
7．4．1 移动端与PC 端淘宝店铺广告的不同 …………………………………… 293
7．4．2 广告设计元素 ……………………………………………………………… 294
7．4．3 广告设计要点 ……………………………………………………………… 296
7．4．4 广告设计技巧 ……………………………………………………………… 300
7．5 专题讨论… …………………………………………………………………… 312
7．5．1 淘宝店铺的海报尺寸 ……………………………………………………… 312
7．5．2 店招的作用 ………………………………………………………………… 312
7．6 本章小结… …………………………………………………………………… 313
第8 章 移动端App 设计… ………………………………………………… 315
8．1 初识移动端App… …………………………………………………………… 316
8．1．1 什么是App ………………………………………………………………… 316
8．1．2 智能设备 …………………………………………………………………… 317
8．2 移动端屏幕尺寸… …………………………………………………………… 318
8．2．1 Android 系统屏幕尺寸 …………………………………………………… 319
8．2．2 iOS 系统屏幕尺寸 ………………………………………………………… 319
8．2．3 App 启动界面 ……………………………………………………………… 319
8．2．4 App 引导界面分类 ………………………………………………………… 320
8．3 App 界面布局… ……………………………………………………………… 327
8．3．1 Android 系统软件界面布局 ……………………………………………… 327
8．3．2 iOS 系统软件布局 ………………………………………………………… 328
8．3．3 音乐App 界面布局 ………………………………………………………… 328
8．3．4 App 界面设计要求 ………………………………………………………… 341
8．3．5 App 软件界面设计原则 …………………………………………………… 343
8．4 App 界面视觉设计规范… …………………………………………………… 353
8．4．1 视觉设计规范的意义 ……………………………………………………… 354
8．4．2 常见的App 视觉设计流程 ………………………………………………… 354
8．4．3 注意事项 …………………………………………………………………… 355
8．5 专题讨论… …………………………………………………………………… 356
8．5．1 移动端App UI 设计与软件UI 设计之间的区别是什么？ ……………… 356
8．5．2 为什么App 软件界面非常重要？ ………………………………………… 356
8．6 本章小结… …………………………………………………………………… 356
第9 章 图标按钮设计综合案例…………………………………………… 357
9．1 绘制电源按钮… ……………………………………………………………… 358
9．1．1 按钮在不同页面中的作用 ………………………………………………… 358
9．1．2 按钮在不同环境下的状态 ………………………………………………… 361
9．1．3 案例解析 …………………………………………………………………… 361
9．1．4 操作步骤 …………………………………………………………………… 362
9．2 绘制游戏启动图标… ………………………………………………………… 368
9．2．1 产品构思 …………………………………………………………………… 368
9．2．2 优化设计 …………………………………………………………………… 368
9．2．3 案例解析 …………………………………………………………………… 369
9．2．4 操作步骤 …………………………………………………………………… 370
9．3 绘制游戏图标… ……………………………………………………………… 380
9．3．1 按钮属性 …………………………………………………………………… 381
9．3．2 按钮分类 …………………………………………………………………… 381
9．3．3 案例解析 …………………………………………………………………… 382
9．3．4 操作步骤 …………………………………………………………………… 383
9．4 绘制水晶质感图标… ………………………………………………………… 390
9．4．1 按界面位置和模块分类 …………………………………………………… 391
9．4．2 按功能模块分类 …………………………………………………………… 392
9．4．3 案例解析 …………………………………………………………………… 392
9．4．4 操作步骤 …………………………………………………………………… 393
9．5 本章小结… …………………………………………………………………… 406
第10 章 UI 配色设计综合案例……………………………………………… 407
10．1 绘制新春海报………………………………………………………………… 408
10．1．1 配色技巧――同色系搭配 ……………………………………………… 408
10．1．2 配色方案的熟练使用 …………………………………………………… 408
10．1．3 案例解析 ………………………………………………………………… 410
10．1．4 操作步骤 ………………………………………………………………… 411
10．2 制作Banner 海报…………………………………………………………… 415
10．2．1 配色技巧――对比配色 ………………………………………………… 415
10．2．2 色彩心理学的重要性 …………………………………………………… 416
10．2．3 案例解析 ………………………………………………………………… 417
10．2．4 操作步骤 ………………………………………………………………… 418
10．3 绘制休闲食品海报…………………………………………………………… 426
10．3．1 配色技巧――邻近色配色 ……………………………………………… 427
XIV
10．3．2 从生活中获取配色 ……………………………………………………… 427
10．3．3 案例解析 ………………………………………………………………… 429
10．3．4 操作步骤 ………………………………………………………………… 429
10．4 绘制数码产品促销海报……………………………………………………… 437
10．4．1 配色技巧――互补色配色 ……………………………………………… 438
10．4．2 色彩搭配中的文化差异 ………………………………………………… 439
10．4．3 案例解析 ………………………………………………………………… 439
10．4．4 操作步骤 ………………………………………………………………… 440
10．5 本章小结……………………………………………………………………… 452
第11 章 应用软件设计综合案例… ………………………………………… 453
11．1 绘制视频播放器界面………………………………………………………… 454
11．1．1 播放器界面设计 ………………………………………………………… 454
11．1．2 案例解析 ………………………………………………………………… 454
11．1．3 操作步骤 ………………………………………………………………… 455
11．2 半透明音乐播放器界面……………………………………………………… 463
11．2．1 人性化的播放器界面设置 ……………………………………………… 463
11．2．2 软件界面设计要点 ……………………………………………………… 465
11．2．3 案例解析 ………………………………………………………………… 466
11．2．4 制作步骤 ………………………………………………………………… 467
11．3 云空间软件界面……………………………………………………………… 475
11．3．1 Web 界面设计要点 ……………………………………………………… 476
11．3．2 播放器界面设计原则 …………………………………………………… 477
11．3．3 案例解析 ………………………………………………………………… 480
11．3．4 制作步骤 ………………………………………………………………… 481
11．4 绘制视频设置界面…………………………………………………………… 487
11．4．1 界面设计趋势 …………………………………………………………… 487
11．4．2 软件界面的屏幕显示 …………………………………………………… 490
11．4．3 案例解析 ………………………………………………………………… 491
11．4．4 制作步骤 ………………………………………………………………… 491
11．5 本章小结……………………………………………………………………… 502
第12 章 游戏UI 设计综合案例… ………………………………………… 503
12．1 绘制游戏帮助界面…………………………………………………………… 504
12．1．1 按游戏种类分类 ………………………………………………………… 504
12．1．2 按游戏模式分类 ………………………………………………………… 505
12．1．3 案例解析 ………………………………………………………………… 507
12．1．4 制作步骤 ………………………………………………………………… 508
12．2 绘制桌球网页游戏界面……………………………………………………… 515
12．2．1 网络游戏设计要求 ……………………………………………………… 515
12．2．2 了解游戏的世界观 ……………………………………………………… 518
12．2．3 案例解析 ………………………………………………………………… 519
12．2．4 制作步骤 ………………………………………………………………… 520
12．3 绘制拼图网页游戏界面……………………………………………………… 532
12．3．1 游戏界面的制作流程 …………………………………………………… 533
12．3．2 案例解析 ………………………………………………………………… 535
12．3．3 制作步骤 ………………………………………………………………… 536
12．4 绘制马会游戏界面…………………………………………………………… 544
12．4．1 色彩元素在游戏界面中的作用 ………………………………………… 544
12．4．2 案例解析 ………………………………………………………………… 545
12．4．3 制作步骤 ………………………………………………………………… 545
12．5 本章小结……………………………………………………………………… 556
第13 章 网页设计综合案例… ……………………………………………… 557
13．1 设计制作企业网站界面……………………………………………………… 558
13．1．1 了解企业网站设计 ……………………………………………………… 558
13．1．2 了解儿童网站设计 ……………………………………………………… 560
13．1．3 案例解析 ………………………………………………………………… 563
13．1．4 制作步骤 ………………………………………………………………… 564
13．2 设计制作咖啡网站界面……………………………………………………… 579
13．2．1 网页布局设计 …………………………………………………………… 580
13．2．2 网页布局原则 …………………………………………………………… 581
13．2．3 案例解析 ………………………………………………………………… 582
13．2．4 制作步骤 ………………………………………………………………… 583
13．3 设计制作淘宝促销网页……………………………………………………… 591
13．3．1 网页中文字设计要求 …………………………………………………… 592
13．3．2 网页中文字设计原则 …………………………………………………… 593
13．3．3 案例解析 ………………………………………………………………… 596
13．3．4 制作步骤 ………………………………………………………………… 597
13．4 本章小结……………………………………………………………………… 609