Photoshop+Adobe XD+Illustrator移动UI设计教程

"本书主要根据读者学习的难易程度，以及在实际工作中的应用需求来安排章节，真正做到为读者考虑，让不同程度的读者更有针对性地学习本书内容，强化自己的弱项，并能够有效帮助UI设计爱好者提高操作效率。 本书的知识点结构清晰、内容有针对性、实例精美实用，适合大部分UI设计爱好者与设计专业的学生阅读。随书附赠书中所有实例的教学视频、素材和源文件，用于补充书中遗漏的细节内容，方便读者学习和参考。 "

本书主要讲解了iOS系统和Android系统两种移动设备系统界面的结构及设计规范，全面解析了移动端App界面的设计流程及技巧。本书还介绍了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流软件进行UI设计制作。本书共6章。第1章主要讲解移动UI设计基础；第2章主要讲解iOS系统界面设计；第3章主要讲解Android系统界面设计；第4章主要讲解移动UI图标设计；第5章主要讲解iOS系统界面应用设计；第6章主要讲解Android系统界面应用设计。本书将提供全部案例的素材、源文件和教学视频，读者可以结合书、练习文件和教学视频，提升移动端App界面设计的学习效率。

  

第1章移动UI设计基础
1.1UI设计与移动UI设计1
1.1.1了解UI设计1
1.1.2了解移动UI设计2
1.1.3移动UI与平面UI3
1.2移动UI设计的平台类型4
1.2.1Android系统5
1.2.2iOS系统6
1.2.3WearOS系统和WatchOS系统7
1.3移动UI的设计内容8
1.3.1配色方案的设计8
1.3.2页面布局的设计10
1.3.3按钮和图标的设计12
1.3.4文字和版式的设计15
1.4了解移动UI设计常用的软件16
1.4.1AxureRP和AdobeXD16
1.4.2Photoshop和Sketch17
1.4.3PxCook和AssistorPS18
1.5了解UI设计的工作流程19
1.5.1需求分析19
1.5.2交互设计22
1.5.3视觉设计25
1.6了解互联网产品职位划分26
1.6.1产品经理27
1.6.2项目经理27
1.6.3页面设计师27
1.6.4开发人员27
1.7本章小结28
第2章iOS系统界面设计
2.1分辨率与界面设计尺寸29
2.1.1像素与分辨率29
2.1.2iOS系统界面设计尺寸30
实战练习01——使用Photoshop新建App文件30
2.2iOS系统的组件尺寸32
2.2.1组件尺寸32
2.2.2边距和间距32
实战练习02——创建辅助线绘制iOS组件35
2.3iOS系统文字设计规范36
2.3.1字体36
2.3.2字号37
2.3.3颜色和字重38
2.4iOS系统图标设计规范39
2.5iOS系统图片设计规范40
2.5.1图片的比例40
2.5.2图片的格式41
2.6iOS系统内容布局42
2.6.1列表式布局42
2.6.2陈列馆式布局42
2.6.3宫格式布局43
2.6.4卡片式布局43
2.7iOS系统版式设计规范44
实战练习03——设计制作iOS系统App版面45
2.8iOS系统设计适配47
2.8.1向下适配47
2.8.2向上适配49
2.9iOS切图规范50
2.9.1切图输出51
实战练习04——使用Photoshop切图输出52
2.9.2切片命名规范54
2.9.3设计稿标注55
2.10提交最终文件58
2.11本章小结58
第3章Android系统界面设计
3.1了解Android系统“碎片化”59
3.2Android系统界面设计尺寸60
3.2.1了解屏幕密度的概念60
3.2.2Android系统开发单位61
3.2.3Android系统界面设计尺寸61
实战练习01——使用AdobeXD创建Android文档62
3.3Android系统组件设计尺寸64
3.3.1Android系统组件尺寸64
3.3.2Android系统的元素间距64
实战练习02——创建Android系统界面的组件65
3.4Android系统文字设计规范66
3.4.1字体66
3.4.2字号67
3.5Android系统中图标设计规范67
3.5.1图标尺寸69
3.5.2触摸反馈70
实战练习03——绘制AndroidApp界面结构70
3.6Android界面标注与切图73
3.6.1Android界面的标注73
3.6.2Android界面的切图74
3.6.3“点9”切图的应用75
3.7Android系统界面适配问题79
3.7.1采用哪种分辨率设计79
3.7.2设计师需要提供几套切图79
3.7.3界面设计中字体的应用技巧79
3.8如何做到一稿两用80
3.9本章小结80
第4章移动UI图标设计
4.1图标设计基础81
4.1.1图标设计的必要性81
4.1.2影响图标的属性82
4.1.3好图标的特点85
4.2了解图标栅格系统85
4.2.1系统图标栅格86
4.2.2不同造型图标的栅格规范86
4.3图标的渲染风格88
4.4图标的透视91
4.4.1关于透视91
4.4.2绘制零点透视图标91
实战练习01——绘制零点透视图标92
4.4.3绘制一点透视图标93
实战练习02——绘制一点透视图标94
4.4.4绘制两点透视图标95
实战练习03——绘制两点透视图标96
4.5图标集的制作流程97
4.5.1创建制作清单98
4.5.2设计草图98
4.5.3数字呈现98
4.5.4确定最终效果99
4.5.5命名并导出99
4.6移动UI图标设计形式99
4.6.1中文形式99
4.6.2英文形式101
4.6.3图形形式102
4.6.4数字和特殊符号形式102
4.7启动图标设计103
4.7.1启动图标设计要求103
4.7.2启动图标设计规范104
实战练习04——设计制作iOS指南针启动图标104
4.7.3快速索引、设置页面和通知图标107
4.8标签栏图标设计107
实战练习05——设计制作标签栏图标108
4.9图标设计的优点与原则111
4.10本章小结112
第5章iOS系统界面应用设计
5.1设计制作旅游App界面113
5.1.1旅游App界面布局分析113
实战练习01——设计制作旅游App界面布局114
5.1.2旅游App界面色彩搭配分析115
5.1.3旅游App界面元素分析116
实战练习02——设计制作旅游App界面118
5.1.4旅游App界面输出分析123
实战练习03——旅游App界面适配123
5.2设计制作外卖App界面125
5.2.1外卖App界面布局分析125
实战练习04——设计制作外卖App界面布局126
5.2.2外卖App界面色彩搭配分析127
5.2.3外卖App界面元素分析128
实战练习05——设计制作外卖App登录界面129
实战练习06——设计制作外卖App主页界面134
5.2.4外卖App界面输出分析138
实战练习07——外卖App界面适配139
5.2.5外卖App界面交互效果分析140
实战练习08——设计制作外卖App交互原型141
5.3设计制作播放器App界面143
5.3.1播放器App界面图标组143
实战练习09——设计制作播放器App界面图标组144
5.3.2设计制作播放器App界面146
实战练习10——设计制作播放器App界面147
5.3.3输出适配播放器App界面152
实战练习11——输出播放器App界面152
5.3.4标注适配播放器App界面154
5.4本章小结158
第6章Android系统界面应用设计
6.1设计制作商城App界面159
6.1.1商城App界面布局分析159
实战练习01——设计制作商城App界面布局160
6.1.2商城App界面色彩搭配分析162
6.1.3商城App界面元素分析163
实战练习02——设计制作商城App首页界面165
6.1.4商城App界面输出分析173
实战练习03——商城App界面适配174
6.2设计制作社交App界面177
6.2.1社交App界面设计同质化分析177
实战练习04——设计制作社交App“推荐”界面178
6.2.2社交App界面边距的设置分析183
实战练习05——设计制作社交App“自己”界面183
6.2.3社交App界面交互设计分析187
实战练习06——设计制作社交App“信息”界面188
6.2.4社交App界面标注和输出192
实战练习07——输出和标注社交App界面193
6.3本章小结196