Photoshop+PxCook+Cutterman网页UI设计教程

为了增加读者的学习渠道，增强读者的学习兴趣，本书配有配套资源包。在配套资源包中提供了本书所有实例的相关素材和源文件，以及书中所有实例的教学视频，读者可以跟随本书提供的案例做出相应的效果，并能够快速应用到实际工作中。

如今，各种通信和网络连接设备与大众生活的联系日益密切，而UI是用户与设备交互的界面，这导致人们对各种类型的UI的要求越来越高，同时促进了UI设计行业的飞速发展，本书为了满足广大UI设计者的需求，介绍如何设计美观又符合要求的UI。本书主要依据初学者学习UI设计的普遍规律安排内容，由浅入深地讲解初学者感兴趣和需要掌握的基础知识和操作技巧，全面解析各个知识点。全书结合实例详细地讲解了UI的制作步骤和软件的应用技巧，使读者能够轻松学习并掌握。本书共8章，主要根据UI设计知识的难易程度，以及读者在实际工作中的应用需求来安排章节，真正做到为读者考虑，也让不同程度的读者可以更有针对性地学习内容，弥补自己的弱项，并有效提高UI设计爱好者的操作速度与效率。本书结构清晰、内容有针对性、实例精美实用，适合大部分UI设计爱好者与设计专业的大、中专学生阅读。随书附赠的配套资源包中包含了本书所有实例的教学视频、相关素材和源文件，用于补充细节内容，方便读者学习和参考。

  

第1章网页UI设计初体验
1.1初识网页UI1
1.2网页UI的分类2
1.3网页UI设计的工作流程5
1.3.1网页产品调研5
1.3.2网页原型设计6
1.3.3设计网页UI7
1.3.4网页UI标注8
1.3.5网页UI切图输出8
1.4深刻理解网页UI设计原则8
1.4.1视觉美观8
1.4.2主题明确9
1.4.3内容与形式相统一10
1.4.4整体性11
1.4.5快速加载11
1.4.6为用户考虑12
1.5网页UI的设计风格13
1.5.1拟物化风格13
1.5.2扁平化风格13
1.5.3极简化风格14
1.5.43D风格14
1.5.5插画风格15
1.5.6低多边形风格15
1.5.7无边框风格15
1.5.8纵向分割风格16
1.5.9超级头版风格17
1.6设计网页UI的常用工具17
1.6.1AxureRP917
1.6.2Photoshop和Illustrator18
1.6.3Sketch和AdobeXD21
1.6.4PxCook和Cutterman23
1.7本章小结24
第2章合理的网页版式与布局
2.1了解网页布局25
2.1.1网页布局的目的25
2.1.2网页布局的操作流程26
2.2网页布局的基本方法27
2.2.1网页的布局设计27
2.2.2网页布局的原则28
2.3网页布局的常见类型29
2.3.1国字型30
2.3.2拐角型30
2.3.3标题正文型31
2.3.4左右框架型31
2.3.5上下框架型31
2.3.6封面型32
2.3.7变化型33
2.4根据内容位置决定网页布局方式33
2.4.1满屏式网页布局33
2.4.2一栏式网页布局34
实战练习01——设计并制作白酒网页35
2.4.3两栏式网页布局40
实战练习02——布局啤酒网站42
2.4.4三栏式网页布局45
2.4.5水平和垂直居中的网页布局47
2.5页面分割方向的布局方式48
2.5.1纵向分割48
2.5.2横向分割49
实战练习03——布局家居网站49
2.5.3纵向与横向复合型52
2.5.4运用固定区域的设计53
2.6网页布局的特性53
2.7PC端与移动端网页布局的区别55
2.8本章小结56
第3章奠定基础的网页构成元素
3.1网页中的线条57
3.1.1点、线、面的关系57
3.1.2网页中应用的线条风格58
3.1.3线条在网页UI中的作用62
3.2网页中的标志66
3.2.1网页标志的尺寸66
3.2.2网页标志的特点66
3.2.3网页标志的设计规范67
实战练习01——设计并制作网页标志69
3.2.4网页标志的表现形式71
3.3网页中的图标和按钮73
3.3.1网页图标的概念73
3.3.2网页图标的设计原则73
3.3.3网页图标的应用75
实战练习02——设计并制作简易图标76
3.3.4网页按钮的概念80
3.3.5网页按钮的功能80
3.3.6设计出色的网页按钮81
实战练习03——设计并制作简单的网页元素83
3.4网页中的导航88
3.4.1布局网页导航88
3.4.2网页导航的设计技巧91
实战练习04——设计并制作家居网页的主体广告和导航92
3.5网页中的文字96
3.5.1网页中的文字设置96
3.5.2网页文字的设计原则100
3.5.3网页文字的排版规则100
3.6网页中的图片103
3.6.1网页中的图片设置103
3.6.2网页图片的应用104
3.7网页中的富媒体106
3.8本章小结106
第4章美观的网页配色
4.1配色的基础107
4.1.1色彩的概念107
4.1.2色彩的三要素107
4.1.3颜色模式110
4.1.4十六进制颜色码111
4.2网页配色的基本要素112
4.2.1网页的主题色112
实战练习01——设计并制作家具网站的登录页面113
4.2.2网页的背景色115
4.2.3网页的辅助色116
4.2.4网页的文本色117
4.2.5网页的强调色117
4.3网页元素的色彩搭配118
4.3.1网页标志与广告118
4.3.2网页导航118
实战练习02——设计并制作图片资源网页118
4.3.3背景色与文字120
4.3.4链接文字121
4.4根据色调进行网页配色122
4.5利用色彩对比进行网页配色123
4.5.1色彩的冷暖对比123
4.5.2色彩的大小对比124
4.5.3色彩的色相对比124
4.6网页中的配色技巧128
4.6.1突出网页主题128
实战练习03——设计并制作咖啡网页131
4.6.2融合整体配色132
4.7本章小结134
第5章iOS系统UI设计
5.1iOS系统简介135
5.2iOS系统的元素设计136
5.2.1尺寸单位136
5.2.2尺寸大小137
5.2.3组件尺寸138
5.2.4图标138
5.3iOS系统的边距和间距设计140
5.3.1全局边距140
实战练习01——设计并制作运动App的主页141
5.3.2卡片间距143
5.3.3内容间距144
5.4iOS系统的文字设计146
5.4.1字体146
5.4.2字号与字重146
实战练习02——设计并制作旅游App的“我的”界面147
5.5iOS系统的图片设计151
5.5.1图片的比例151
5.5.2图片的格式152
5.6iOS系统的网页布局153
5.6.1列表式布局153
5.6.2陈列馆式布局153
5.6.3宫格式布局154
5.6.4卡片式布局154
5.7iOS系统UI的设计原则155
5.7.1亲密性155
5.7.2对齐、对比和重复156
5.7.3直截了当158
5.7.4提供邀请160
5.8本章小结162
第6章Android系统UI设计
6.1Android系统简介163
6.2Android系统的元素设计163
6.2.1设计单位164
6.2.2界面尺寸165
6.2.3组件尺寸165
实战练习01——设计并制作App的登录界面166
6.3Android系统的文字设计168
6.3.1字体和字重168
6.3.2字号169
6.4Android系统的图标设计170
6.4.1启动图标170
6.4.2标签栏/系统通知图标170
6.4.3上下文图标171
6.4.4图标尺寸171
实战练习02——设计并制作App界面中的上下文图标172
6.5Android系统UI的设计原则174
6.5.1一步到位174
6.5.2即时反应177
6.5.3简化交互179
实战练习03——设计并制作Android系统App“我的”界面181
6.6本章小结184
第7章适配输出网页UI设计
7.1PC端网页的适配输出185
7.1.1PC端的适配方法185
7.1.2适配时需要注意的点185
7.2iOS系统界面的适配输出186
7.2.1界面标注186
7.2.2标注工具——PxCook188
实战练习01——标注iOS系统App界面191
7.2.3适配输出193
7.3Android系统界面的适配输出195
7.3.1界面标注195
7.3.2适配输出196
7.3.3.9切图法198
7.3.4输出工具——Cutterman插件201
实战练习02——输出Android系统的App界面201
7.4本章小结203
第8章综合案例
8.1设计PC端的家居网页204
8.1.1家居网页案例分析204
8.1.2家居网页色彩分析205
8.1.3家居网页制作步骤206
8.2设计iOS系统的旅游App界面209
8.2.1旅游App界面案例分析209
8.2.2旅游App界面色彩分析210
8.2.3旅游App界面制作步骤211
8.3设计Android系统的家居App界面215
8.3.1家居App界面案例分析215
8.3.2家居App界面色彩分析217
8.3.3家居App界面制作步骤218
8.4本章小结222