具体描述
这是一本全面介绍如何使用Photoshop进行UI界面设计的实用教程。本书完全针对零基础读者而编写,是入门级读者快速而全面掌握利用Photoshop 进行UI界面设计的必读参考书。
本书由有着多年丰富UI设计经验的一线设计师精心编写,通过全实例、图文并茂的详细阐述,全面展示UI界面设计精髓,从UI界面设计基础到精致按钮及旋钮设计,从写实到扁平风格等,对UI设计中的各种流行设计风格做了全面剖析,每个案例都有制作流程详解,并且为读者朋友安排了相关的课后习题,读者在学完案例后可继续参考习题进行深入练习,以拓展自己的创意思维,提高UI界面的设计水平。
本书还为广大读者提供了一张DVD多媒体光盘,收录了本书中所有的调用素材及源文件,还包括了本书所有实例及课后习题的多媒体高清有声视频录像。另外,为方便老师教学,本书还提供了PPT教学课件,以供老师参考。
本书特别适合智能手机UI界面设计的初学者,可作为平面设计师和智能手机APP开发人员的参考用书,也可以作为培训学校、大中专院校相关专业的教学参考书或上机实践指导用书。
作者简介
目录信息
1.1 认识UI设计 10
1.2 常用UI设计单位解析 10
1.3 UI设计常用图像格式 11
1.4 UI设计准则 11
1.5 UI设计与团队合作关系 12
1.5.1 团队成员 12
1.5.2 UI设计与项目流程步骤 12
1.6 智能手机操作系统简介 12
1.7 UI界面设计常用的软件 14
1.7.1 Photoshop 14
1.7.2 Illustrator 14
1.7.3 CorelDRAW 14
1.8 UI色彩学基础知识 15
1.8.1 颜色的概念 15
1.8.2 色彩三要素 16
1.8.3 加法混色 17
1.8.4 减法混色 17
1.8.5 补色 17
1.8.6 芒塞尔色彩系统(Munsell Color System) 17
1.9 UI设计常见配色方案 18
1.10 UI设计配色秘籍 19
1.11 UI设计色彩学 20
1.11.1 色彩与生活 21
1.11.2 色彩意象 21
1.12 精彩UI界面设计赏析 23
1.13 本章小结 23
========================================================
第2章 精致按钮及旋钮设计 24
2.1 理论知识—移动APP按钮尺寸分析 25
2.2 课堂案例—下单按钮 25
2.2.1 打开素材 26
2.2.2 添加质感 26
2.3 课堂案例—下载按钮 27
2.3.1 打开素材 27
2.3.2 添加质感 27
2.4 课堂案例—简洁进度条 28
2.4.1 打开素材 28
2.4.2 复制变换图形 28
2.5 课堂案例—音量滑动条 29
2.5.1 打开素材 29
2.5.2 绘制图形 30
2.6 课堂案例—圆形开关按钮 30
2.6.1 制作背景并绘制图形 30
2.6.2 添加文字 34
2.7 课堂案例—功能旋钮 35
2.7.1 制作背景并绘制图形 35
2.7.2 绘制功能图像 37
2.7.3 制作立体质感 38
2.7.4 绘制指示图形 40
2.7.5 添加文字 41
2.8 课堂案例—金属旋钮 42
2.8.1 制作背景并绘制图形 42
2.8.2 制作质感 44
2.8.3 制作指示标记 46
2.8.4 制作滑块图形 48
2.8.5 制作插孔 52
2.9 课堂案例—皮革旋钮 56
2.9.1 制作背景 56
2.9.2 绘制图形 57
2.9.3 制作控件 60
2.10 课堂案例—品质音量控件 64
2.10.1 制作背景 64
2.10.2 制作控件 65
2.10.3 制作细节 74
2.11 课堂案例—音频调节控件 76
2.11.1 制作背景并绘制图形 76
2.11.2 绘制刻度 79
2.11.3 制作控件 82
2.12 本章小结 86
2.13 课后习题 86
2.13.1 习题1—白金质感开关按钮 86
2.13.2 习题2—品质音量旋钮 87
2.13.3 习题3—音量控件 87
========================================================
第3章 趋势流行扁平风 88
3.1 理论知识—扁平化设计 89
3.1.1 何为扁平化设计 89
3.1.2 扁平化设计的优缺点 89
3.1.3 扁平化设计四大原则 89
3.2 课堂案例—扁平铅笔图标 91
3.2.1 绘制图标 91
3.2.2 变换图形 92
3.2.3 绘制细节 93
3.2.4 制作阴影 95
3.3 课堂案例—微信图标 97
3.3.1 制作背景 97
3.3.2 绘制图标 98
3.4 课堂案例—淡雅应用图标控件 99
3.4.1 制作背景 100
3.4.2 绘制图形 100
3.4.3 添加素材 103
3.5 课堂案例—扁平化邮箱界面 104
3.5.1 制作背景及状态栏 104
3.5.2 添加文字 105
3.6 课堂案例—iOS风格音乐播放器界面 107
3.6.1 制作应用界面 107
3.6.2 展示页面 113
3.7 课堂案例—社交应用登录框 114
3.7.1 制作背景 115
3.7.2 绘制界面 116
3.8 课堂案例—简约风天气APP 118
3.8.1 制作背景 119
3.8.2 添加素材并绘制图形 119
3.9 课堂案例—个人应用APP界面 121
3.9.1 制作背景 122
3.9.2 绘制界面图形 122
3.9.3 添加文字并制作细节 123
3.9.4 绘制二级功能页面 125
3.10 本章小结 127
3.11 课后习题 127
3.11.1 习题1—便签图标设计 127
3.11.2 习题2—扁平相机图标 128
3.11.3 习题3—天气Widget 128
========================================================
第4章 超强表现力之写实风格 129
4.1 理论知识—写实风格解析 130
4.1.1 写实的艺术表现形式 130
4.1.2 UI设计的写实表现 130
4.2 课堂实例—写实计算器图标 132
4.2.1 制作背景并绘制图形 132
4.2.2 添加文字 134
4.2.3 绘制按键 135
4.3 课堂实例—写实邮箱图标 137
4.3.1 制作背景并绘制图形 138
4.3.2 制作高光质感 138
4.3.3 制作阴影质感 139
4.3.4 绘制细节图像 140
4.3.5 绘制邮筒元素图像 142
4.4 课堂实例—写实电视图标 145
4.4.1 制作背景并绘制图形 145
4.4.2 添加素材 147
4.4.3 添加高光质感 148
4.5 课堂实例—写实小票图标 152
4.5.1 制作背景并绘制图形 152
4.5.2 制作锯齿效果 155
4.5.3 添加文字并制作阴影 155
4.6 课堂实例—写实开关图标 157
4.6.1 制作背景 157
4.6.2 绘制图形 158
4.6.3 制作控件 160
4.7 课堂实例—写实牛皮钱包图标 164
4.7.1 制作背景并绘制图形 164
4.7.2 制作高光质感 167
4.7.3 添加素材并制作质感 168
4.7.4 制作细节 170
4.8 本章小结 173
4.9 课后习题 174
4.9.1 习题1—写实手机图标 174
4.9.2 习题2—写实闹钟图标 174
4.9.3 习题3—写实钢琴图标 174
4.9.4 习题4—写实开关设计 175
========================================================
第5章 iOS风格界面设计 176
5.1 理论知识—认识iOS风格 177
5.1.1 iOS的发展及界面分布 177
5.1.2 认识iOS的控件 177
5.2 课堂案例—苹果风格登录界面 178
5.2.1 制作背景 179
5.2.2 绘制图形 179
5.2.3 添加素材 181
5.2.4 绘制文本框 182
5.3 课堂案例—电话界面 184
5.3.1 制作背景并绘制图形 184
5.3.2 添加文字 186
5.3.3 制作界面元素 187
5.3.4 添加素材 188
5.4 课堂案例—用户界面 191
5.4.1 制作背景 191
5.4.2 添加素材 195
5.4.3 绘制图形 197
5.4.4 添加素材及文字 200
5.4.5 绘制拟物图形 204
5.5 课堂案例—会员登录框界面 208
5.5.1 制作背景并绘制图形 208
5.5.2 添加文字并绘制文本框图形 210
5.6 课堂案例—翻页登录界面 215
5.6.1 制作背景 215
5.6.2 绘制图形 215
5.6.3 制作界面细节 217
5.7 本章小结 220
5.8 课后习题 220
5.8.1 习题1—摄影网站会员登录 220
5.8.2 习题2—iPod应用登录界面 221
5.8.3 习题3—木质登录界面 221
========================================================
第6章 精品极致图标制作 222
6.1 理论知识—了解图标 223
6.1.1 图标的分类 223
6.1.2 图标的作用 223
6.1.3 图标的格式 223
6.1.4 图标和图像大小 224
6.1.5 精美APP图标欣赏 226
6.2 课堂案例—简洁罗盘图标 226
6.2.1 制作背景并绘制图形 226
6.2.2 绘制表座 228
6.2.3 绘制指针 229
6.3 课堂案例—简洁进程图标 230
6.3.1 制作背景并添加图像 231
6.3.2 绘制图形 231
6.4 课堂案例—唱片机图标 232
6.4.1 制作背景并绘制图形 233
6.4.2 制作纹理图像 234
6.4.3 绘制托盘 236
6.4.4 绘制卡座 239
6.4.5 绘制线缆图形 239
6.5 课堂案例—湿度计图标 240
6.5.1 制作背景并绘制图形 240
6.5.2 定义笔触并设置 243
6.5.3 绘制刻度图形 244
6.6 课堂案例—小黄人图标 246
6.6.1 制作背景并绘制图形 246
6.6.2 制作图标元素 248
6.6.3 绘制眼镜图形 249
6.6.4 绘制嘴巴图形 255
6.7 课堂案例—流量计图标 257
6.7.1 制作背景并绘制图形 257
6.7.2 定义笔触 259
6.7.3 绘制指针 261
6.8 课堂案例—清新邮件图标 262
6.8.1 制作背景并绘制图形 262
6.8.2 绘制锁扣图形 264
6.9 课堂案例—清新音乐图标 265
6.9.1 制作背景并绘制图形 266
6.9.2 制作光盘图形 266
6.10 课堂案例—下载图标 267
6.10.1 制作背景并绘制图形 267
6.10.2 制作图标元素 269
6.11 本章小结 272
6.12 课后习题 272
6.12.1 习题1—清新日历图标 272
6.12.2 习题2—进度图标 273
6.12.3 习题3—日历和天气图标 273
6.12.4 习题4—指南针图标 274
========================================================
第7章 流行界面设计荟萃 275
7.1 理论知识—UI界面设计尺寸 276
7.1.1 iPhone和Android设计尺寸 276
7.1.2 Android 系统换算及主流手机设置 277
7.2 课堂案例—天气界面 279
7.2.1 制作背景 279
7.2.2 绘制第1个界面 280
7.2.3 添加文字及素材 280
7.2.4 绘制第2个界面 283
7.3 课堂案例—票券APP界面 284
7.3.1 制作背景并绘制状态栏 284
7.3.2 添加素材 285
7.3.3 添加文字 286
7.3.4 绘制按钮图形 287
7.3.5 添加文字及素材 288
7.4 课堂案例—下载数据界面 290
7.4.1 制作背景并绘制状态栏 290
7.4.2 绘制图形 290
7.4.3 添加文字 291
7.5 课堂案例—游戏界面 294
7.5.1 制作背景 294
7.5.2 绘制界面 296
7.5.3 绘制界面元素 297
7.5.4 添加文字 298
7.5.5 制作按钮控件 302
7.6 课堂案例—APP游戏个人界面 307
7.6.1 创建画布并添加素材 307
7.6.2 添加文字 309
7.6.3 添加图标 311
7.7 课堂案例—iOS风格电台界面 312
7.7.1 制作背景并制作状态栏 312
7.7.2 制作界面元素 312
7.7.3 制作界面细节 317
7.7.4 添加素材 318
7.8 本章小结 320
7.9 课后习题 320
7.9.1 习题1—影视播放界面 320
7.9.2 习题2—美食应用APP界面 320
7.9.3 习题3—经典音乐播放器界面 321
========================================================
第8章 综合设计实战 322
8.1 课堂案例—精致CD控件 323
8.1.1 制作背景并绘制图形 323
8.1.2 绘制旋钮 324
8.1.3 制作质感 325
8.1.4 制作细节 327
8.1.5 添加文字 329
8.2 课堂案例—信息接收控件 330
8.2.1 制作背景并绘制图形 330
8.2.2 制作控件元素 332
8.2.3 添加文字 333
8.3 课堂案例—天气信息控件 334
8.3.1 制作背景 334
8.3.2 绘制界面 336
8.3.3 添加文字 345
8.4 课堂案例—Windows Phone界面 346
8.4.1 制作背景 346
8.4.2 绘制图形 347
8.4.3 添加文字及素材 349
8.5 课堂案例—APP游戏下载页 351
8.5.1 制作背景并添加素材 352
8.5.2 绘制图形 352
8.5.3 绘制细节图形 354
8.6 课堂案例—APP游戏安装页 355
8.6.1 制作背景并绘制图形 356
8.6.2 添加素材并绘制图形 356
8.6.3 添加文字 357
8.6.4 添加素材 357
8.7 本章小结 359
8.8 课后习题 359
8.8.1 习题1—点餐APP界面 359
8.8.2 习题2—概念手机界面 360
· · · · · · (收起)
读后感
用户评价
作为一名已经有几年经验的初级设计师,我最怕的就是买到那种只适合零基础小白的书籍。市面上很多教程都是从“认识菜单栏”开始讲起,这对我来说简直是浪费时间。我更希望这本书能直击痛点,专注于解决中高级设计师在日常工作中遇到的难题。比如,如何在高保真原型设计中,高效地管理上百个图层和成组的复杂文件?如何利用Photoshop强大的矢量编辑能力,精确地控制图标的视觉重量和网格系统对齐?如果书中能深入探讨如何与其他设计协作工具(如Sketch或Figma,即使主要是用PS制作,但了解协同流程很重要)进行文件交接和优化,那就太贴合我现在的实际工作需求了。我需要的是那种能让我瞬间提升设计专业度和工作效率的“秘籍”,而不是一本基础操作手册的翻版。
说实话,拿到这本厚厚的书时,我首先关注的是它的视觉呈现效果。毕竟,一本设计类的书籍,如果封面和内页排版都显得过时或杂乱,难免让人对其内容质量产生怀疑。我希望看到的是那种专业、现代的版式设计,全彩印刷带来的好处应该是让那些复杂的图层结构、颜色搭配示例能够清晰地呈现出来,色彩偏差最小化。我注意到很多教程书在讲解复杂工具时,往往会用黑白截图来代替,这极大地削弱了学习体验。我真正在意的是,作者是否对当前最新的移动操作系统(比如iOS和Android的最新设计规范)有深入的理解和实践。我希望书中能涵盖一些最新的组件,比如沉浸式导航栏、卡片式布局的高级应用,以及如何处理暗黑模式(Dark Mode)下的视觉调整。如果能附带一些可供下载的配套素材文件,用于跟着书本实例操作,那就太棒了,这样能让我立即上手练习,而不是光看不练。
我对这本教程的实用性非常看重。设计工作讲求的是效率和产出。我特别留意了书名中的“实用”二字。我期待看到大量的、可以直接套用到实际项目中的设计模板和UI元素库的构建方法。例如,一套完整的App导航栏、列表项、表单输入框的设计规范和分层结构应该如何搭建在PS中,并且易于修改和迭代。我希望作者能提供一套成熟的工作流程,从线框图到高保真界面的推进过程,每一步骤中Photoshop具体扮演了什么角色,以及如何高效地利用其特性来加速设计迭代。如果书中能提及一些关于图层命名规范和文件组织策略的建议,对于多人协作的项目管理来说,将是无价之宝。最终,我希望读完后,我能立刻着手去优化我手头正在进行的项目界面,而不是只停留在理论知识的层面。
我购买这本教材的初衷,主要是为了系统性地梳理我过去零散的学习知识点,并弥补我在用户体验(UX)理论方面的不足。单纯的软件操作我通过网络视频可以快速掌握,但真正的挑战在于“为什么”要这样设计。我迫切地想知道,作者在讲解每一个设计决策时,背后的逻辑是什么?例如,在按钮的尺寸和间距设计上,是否引用了Fitts’s Law或其他人体工程学数据?如果书中能提供一些行业内知名的App的优秀界面拆解分析,讲解它们是如何通过设计来提升用户留存率和转化率的,那这本书的价值就远超一本工具书的范畴了。我不太关心Photoshop软件本身的新功能介绍,更看重如何运用Photoshop强大的编辑能力,去实现那些“看起来很高级”但实际操作起来却很优雅的界面效果。希望它不仅仅是教我“怎么做”,更重要的是教我“如何思考”。
这本关于移动界面设计的书,我最近才入手,坦白说,我对它抱有很高的期望,因为市面上关于Photoshop这类软件的教程实在太多了,但真正能深入浅出、结合实战的却凤毛麟角。我希望看到的不仅仅是工具层面的操作讲解,更重要的是设计思维的构建。比如,如何将用户研究的结果有效地转化为视觉元素?在有限的手机屏幕空间内,如何平衡美观与功能性,做到信息的层级清晰且易于触达?我特别关注了关于响应式设计和不同分辨率适配的章节,这在当前多屏时代至关重要。我期待看到作者能提供一些行业内公认的、经过验证的设计原则和案例,而不是空泛的理论。希望它能提供一些高级技巧,比如如何利用图层样式、智能对象等功能,高效地创建可复用的UI组件库,这能极大地提升我的工作效率。如果书中能包含一些关于动效和交互流程的初步指导,那就更完美了,毕竟静态的界面设计已经无法满足现代应用的需求了。