本书是一本帮助热爱UI设计的学生及转行设计师快速掌握UI设计的专业书籍。书中深入浅出地介绍了UI入门需要掌握的基础知识,包括UI的基本概念、设计的基础知识、UI设计的组成部分,并详细指导读者运用Photoshop软件设计图标、界面和简单动效,帮助读者建立起基本的学习体系。最后,介绍了UI设计的基本规则,以及如何打破规则进行设计,帮助读者开拓思维,进行开放式设计。
本书定位为入门学习,对于一些本身不具备设计基础、不了解Photoshop软件使用的读者也是完全适用的,只要耐心跟随书中的步骤进行操作,就能够基本掌握UI设计的技巧。读完这本书,并做完相关的实战练习后,读者便可以胜任一些基础的UI设计工作了。
随书配套学习资料,包括核心章节第2章到第6章的素材图片、PSD源文件、模板文件,以及GIF图片,当遇到问题或者瓶颈时,读者可以在源文件中查找相关图层,获得参数设置详细信息,帮助你解决问题,提高学习效率。
1. 深入浅出地介绍UI入门需要掌握的基础知识,包括UI的基本概念、设计的基础知识、UI设计的组成部分,并详细指导读者运用Photoshop软件设计图标、界面和简单动效,帮助读者建立起基本的学习体系。
2. 配合实战训练,跟随实例步骤进行学习,举一反三,快速掌握UI设计技巧,并应用于实际工作中。
3. 介绍UI设计的基本规则,以及如何打破规则进行设计,帮助读者开拓思维,进行开放式设计。
邵和明,腾讯设计师,设计中心负责人。11年用户体验与产品策划行业经验,曾经负责过的项目包括手机QQ浏览器、手机QQ、91手机助手、91理财等,曾独立开发多款小游戏、设计工具和软件等。
1
UI基础/009
1.1 用户界面的风格演变/010
1.2 UI设计的种类/014
1.2.1 网页设计/015
1.2.2 软件界面设计/017
1.2.3 App界面设计/018
1.2.4 游戏界面设计/019
1.3 App界面设计师的职责/020
1.3.1 职责之内/020
1.3.2 职责之外/023
1.4 合格UI设计师的必备技能/024
1.4.1 了解互联网产品的诞生过程/024
1.4.2 深度掌握辅助工具/025
1.4.3 拥有良好的学习心态/026
2
设计入门/027
2.1 审美/028
2.1.1 审美观的概念及其重要性/028
2.1.2 艺术与设计的区别/028
2.1.3 如何培养自己的审美观/028
2.2 配色/029
2.2.1 色彩的基础知识/029
2.2.2 色域与屏幕选择/030
2.2.3 常用颜色模式/032
2.2.4 颜色与情感/034
2.2.5 色彩搭配/036
2.2.6 色彩的选择与应用/040
2.3 构图/042
2.3.1 构图的概念/042
2.3.2 常用的构图方式/042
2.3.3 黄金分割/045
2.4 文字与排版/046
2.4.1 字体的样式/046
2.4.2 系统常用字体/048
2.4.3 字体的搭配/050
3
认识Photoshop/051
3.1 初识Photoshop CC/052
3.1.1 界面布局/052
3.1.2 文档的保存/069
3.2 图层面板/071
3.2.1 图层的概念和用法/071
3.2.2 图层样式/073
3.2.3 图层混合模式/079
3.3 路径与布尔运算/081
3.4 神奇的滤镜/083
3.5 快捷键/085
3.5.1 常用快捷键/085
3.5.2 自定义快捷键/086
4
图标设计/087
4.1 图标发展进程/088
4.1.1 图标风格进化/088
4.1.2 移动端操作系统平台介绍/089
4.1.3 iOS与Andorid系统图标的差异/091
4.2 图标的可用性分析/092
4.2.1 图标的种类/092
4.2.2 不同图标的设计要点/092
4.3 扁平化风格的图标实战/093
4.3.1 iOS App图标设计规范/093
4.3.2 规范模板文档的使用/095
4.3.3 从零开始画一个“时钟”图标/098
4.3.4 保存与输出/104
4.4 写实风格的图标实战/105
4.4.1 Android App图标设计规范/105
4.4.2 写实版“时钟”图标/107
4.4.3 写实版“徽章”图标/119
4.4.4 保存与输出/131
4.5 设计习惯规范/133
4.5.1 不破坏原始素材/133
4.5.2 整洁的文档/134
4.5.3 规范的文件命名/134
5
界面设计/135
5.1 界面风格进化史/136
5.1.1 iOS从现实到抽象/136
5.1.2 Android与Material design/138
5.2 扁平化风格界面实战/140
5.2.1 从设计语言说起/140
5.2.2 交互设计稿/产品原型/140
5.2.3 从零开始画界面/141
5.2.4 页面标注/148
5.2.5 资源输出/150
5.2.6 切片工具/156
5.3 写实风格界面实战/160
5.3.1 从布局开始 /160
5.3.2 细化并打磨细节/161
5.3.3 标注与资源输出/166
6
动效设计/167
6.1 动效设计概念/168
6.1.1 什么是动效设计/168
6.1.2 为什么要做动效/169
6.1.3 动效设计常用软件/175
6.2 动效设计实战/176
6.2.1 动画的原理 /176
6.2.2 动画的节奏/176
6.2.3 Photoshop动效面板介绍/177
6.2.4 逐帧动画——小球弹跳/178
6.2.5 时间轴动画——气泡爆炸/181
6.2.6 时间轴动画——旋转/186
6.2.7 输出格式与命名规范/194
7
设计准则/197
7.1 HIG的概念介绍/198
7.1.1 什么是HIG/198
7.1.2 为什么要遵循HIG/198
7.2 iOS系统的HIG /198
7.2.1 设计原则/198
7.2.2 交互方式/200
7.2.3 视觉与控件/207
7.2.4 其他扩展项/214
7.2.5 苹果UI设计资源/217
7.3 Android系统的HIG /217
7.3.1 设计原则/217
7.3.2 与iOS差异点/218
8
破坏规则/229
8.1 为什么要破坏既有的规矩/230
8.2 独一无二的设计/230
8.2.1 活用设计准则/230
8.2.2 设定应用场景/234
8.2.3 情感化设计/235
8.3 无招胜有招/237
9
关于成长/239
9.1 成长的阵痛与迷茫/240
9.2 学会学习的方法/242
9.3 写在最后/244