网页UI设计之道（第二版）（全彩）（含DVD光盘1张）

1. 全书采取基础知识 实用案例的整体结构，将基础知识合理的融入到实用案例中，即有利于读者理解，又方便案例的制作。

 

本书是一本使用Photoshop进行网页UI设计制作的案例教程，语言浅显易懂，配合大量精美的网页UI设计案例，讲解了有关网页UI设计的相关知识和使用Photoshop进行网页UI设计制作的方法和技巧。使读者在掌握网页UI设计各方面知识的同时，能够在网页UI设计制作的基础上做到活学活用。

盛意文化工作室，高金山，资深UI设计师 ，有丰富的UI设计经验,先后从事软件界面、网站界面和游戏界面的设计工作。参与了大量的手机界面设计工作。熟知UI设计领域的相关知识。有丰富的教学经验，曾在中国传媒大学、北京大学、北京师范大学等重点院校教授设计课程。对UI设计风格有独特见解。并参与清华大学中职教材的编写工作。

CHAPTER　1
关于网页UI设计 1　
1.1　了解网页UI 2
1.1.1　什么是网页界面 2
1.1.2　网页界面设计的特点 2
1.2　网页UI设计要点 5
1.2.1　设计与技术的结合 5
1.2.2　立体空间节奏感 8
1.2.3　视觉导向性 9
1.2.4　视觉服务 10
1.3　网页UI构成元素 10
1.3.1　文字 10
1.3.2　图形符号 11
1.3.3　图像 11
1.3.4　多媒体 12
1.3.5　色彩 12
1.4　网页UI设计与审美 13
1.4.1　功能与形式美 13
1.4.2　网页UI形式美法则 14
1.5　网页UI的设计原则 16
1.5.1　以用户为中心 16
1.5.2　视觉美观 16
1.5.3　主题明确 17
1.5.4　内容与形式统一 18
1.5.5　有机的整体 19
1.6　网页UI创意设计方法 20
1.6.1　综合型 21
1.6.2　趣味型 21
1.6.3　联想型 22
1.6.4　比喻型 22
1.6.5　变异型 22
1.6.6　古朴型 23
1.6.7　流行型 23
1.7　扁平化在网页UI设计中的
应用 24
1.7.1　图标 24
1.7.2　圆角 25
1.7.3　折角 25
1.7.4　标签 26
1.7.5　徽章 26
1.7.6　条纹 26
1.7.7　装饰元素 27
1.7.8　装饰背景 27
1.8　本章小结 28

CHAPTER　2
网站基本图形元素设计 29
2.1　认识网页图标 30
2.1.1　图标概述 30
2.1.2　网页图标应用 31
【自测1】设计简约风格网页图标 32
【自测2】设计按钮图标工具栏 37
2.2　网页中图标的设计原则 42
【自测3】设计水晶质感图标 43
2.3　网页中按钮的常见类型 55
2.4　网页中按钮的特点 56
【自测4】设计质感游戏按钮 57
【自测5】设计网站个性按钮 62
2.5　网页中按钮的表现形式 68
2.5.1　实现提交功能的按钮 68
2.5.2　实现链接的图片按钮 68
【自测6】设计网页中的下载按钮 69
【自测7】设计质感播放按钮 74
2.6　网站LOGO的表现形式 80
2.7　网站LOGO的特点和设计
规范 82
【自测8】设计影视网站LOGO 84
【自测9】设计娱乐网站LOGO 90
2.8　专家支招 99
2.8.1　图形元素的作用 99
2.8.2　网页中常用的图形格式 99
2.9　本章小结 100
CHAPTER　３
网站导航设计 101
3.1　网站导航概述 102
3.2　网站导航的表现形式 103
【自测1】设计游戏网站导航 104
【自测2】设计质感企业网站导航 110
3.3　导航菜单在网页中的布局 117
【自测3】设计下拉网站导航 121
【自测4】设计垂直网站导航 127
3.4　网站导航的视觉风格 136
【自测5】设计图标网站导航 139
3.5　专家支招 146
3.6　本章小结 146
CHAPTER　４
网页文字与广告设计 147
4.1　文字在网页界面中的作用 148
4.2　网页界面中文字设计要求 148
【自测1】设计网页中的变形文字 150
4.3　网页界面中文字的设计原则 156
4.3.1　可读性 156
4.3.2　艺术化 157
【自测2】设计网页主题特效文字 159
4.4　网页界面文字的排版设计 167
4.4.1　对比 167
4.4.2　统一与协调 169
4.4.3　平衡 169
4.4.4　节奏与韵律 170
4.4.5　视觉诱导 170
【自测3】设计3D广告文字 171
4.5　网站广告的特点 179
【自测4】设计网站产品宣传广告 180
4.6　网络广告的常见类型 186
【自测5】设计网站促销活动广告 188
【自测6】设计产品广告页面 197
4.7　专家支招 203
4.8　本章小结 204
CHAPTER　５
网页布局与版式设计 205
5.1　了解网页布局 206
5.1.1　网页布局的目的 206
5.1.2　网页布局的操作顺序 206
5.2　常见的网页布局方式 207
【自测1】设计手机宣传网页 210
5.3　网页布局方法 220
【自测2】设计咖啡馆网站页面 222
5.4　网页形式的艺术表现 230
5.4.1　分割构成 230
5.4.2　对称构成 231
5.4.3　平衡构成 231
【自测3】设计淘宝促销网页 232
5.5　网页界面设计风格 242
5.5.1　大众化设计风格 242
5.5.2　个性化设计风格 243
【自测4】设计化妆品网站页面 243
5.6　专家支招 251
5.6.1　网页界面分割方向的
布局方式 251
5.6.2　网页界面布局的连贯性和
多样性 251
5.7　本章小结 252
CHAPTER　６
网页UI配色 253
6.1　色彩在网页UI设计中的作用 254
6.2　理解色彩 255
6.2.1　色彩属性 256
6.2.2　基础配色 257
【自测1】设计数码产品网站页面 259
6.3　色彩的搭配 266
6.3.1　网页UI配色基础 266
6.3.2　网页UI配色原则 268
【自测2】设计房地产网站页面 269
6.4　网页UI配色的方法 278
6.5　网页中的文本配色 280
【自测3】设计珠宝网站页面 282
6.6　网页元素的色彩搭配 290
【自测4】设计手机网站页面 292
6.7　影响网页配色的因素 301
6.7.1　根据行业特征选择网页
配色 301
6.7.2　根据色彩联想选择网站
配色 303
6.7.3　根据产品销售周期选择
网页配色 304
6.8　专家支招 306
6.9　本章小结 306
CHAPTER　7
儿童类网页UI设计 307
7.1　了解儿童类网站 308
7.1.1　儿童网站的分类 308
7.1.2　儿童网站页面的设计原则 309
7.2　设计儿童网站页面 309
7.2.1　设计分析 309
7.2.2　制作儿童网站首页 310
【自测1】设计儿童网站首页 310
7.2.3　制作儿童网站二级页面 323
【自测2】设计儿童网站二级页 323
7.3　本章小结 327
CHAPTER　8
企业类网页UI设计 329
8.1　了解企业类网站 330
8.1.1　企业网站的分类 330
8.1.2　企业网站页面的表现形式 331
8.1.3　企业网站页面的设计原则 331
8.2　设计企业网站页面 332
8.2.1　设计分析 332
8.2.2　制作企业网站首页 333
【自测1】设计企业网站首页 333
8.2.3　制作企业网站二级页面 343
【自测2】设计企业网站二级页 343
8.3　本章小结 347
CHAPTER　9
游戏类网页UI设计 349
9.1　了解游戏网站设计 350
9.1.1　游戏网站的分类 350
9.1.2　游戏网站页面的表现形式 351
9.1.3　游戏网站页面的设计原则 351
9.2　设计游戏网站页面 352
【自测1】设计游戏网站页面 352
9.3　本章小结 364

UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的整体设计。网站是通过网页UI与访问者进行交流的，浏览者浏览了网站的整体性、功能性、可用性后，接下来只会查看页面中感兴趣的内容，在这个过程中如果浏览者感觉到不便或者麻烦，就会离开甚至以后不再访问该网页。
因此，设计师在网页UI设计过程中必须发挥可以快速传递网站整体性、内容可用性的创造力。本书以网页UI设计的理念为出发点，配以专业的图形处理软件Photoshop做讲解，重点向读者介绍了Photoshop在网页UI设计方面的理论知识和相关应用。通过大量网页UI设计案例的制作和分析，让读者掌握实实在在的设计思想。

本书章节安排
本书内容浅显易懂，从网页UI的设计思想出发，向读者传达一种新的设计理念，通过专业的理论知识讲解与精美案例制作的完美结合，循序渐进地讲解网页UI设计中的有关知识，让读者在学习欣赏的过程中丰富自己的设计创意，并提高动手制作的能力。本书内容章节安排如下：
第1章关于网页UI设计，介绍了网页UI设计的相关基础知识，包括什么是网页UI、网页UI设计要点、网页UI构成要素、设计原则，还讲解了网页UI创意设计方法，使读者对网页UI设计有更加深入的认识和理解。
第2章网站基本图形元素设计，主要介绍了网站页面中各种基本图形元素的设计方法，包括图标、按钮、LOGO等，并通过对网站页面中各种不同类型的设计元素的制作讲解，使读者快速掌握各种网站页面设计要素的设计和表现方法。
第3章网站导航的设计，主要讲解了网站导航设计的重要性及其特点，包括导航的表现形式、导航菜单在网页中的布局、网站导航的视觉风格等，通过对不同网站导航制作过程的讲解，提高读者对网站导航设计的认识。
第4章网页文字和广告设计，主要讲解了文字在网页中的作用及其设计特点和要求，也介绍了有关文字排版设计的常识性信息，通过对网页中常见文字效果和广告图片的设计制作讲解，使读者掌握网页文字和广告设计的常规思路及过程。
第5章网页布局与版式设计，主要介绍了网页布局的方法和目的，也向读者介绍了常见的网页布局方式，通过对多种不同网页的设计讲解，让读者明了布局在网页UI设计中所遵循的设计原则和要求。
第6章网页UI配色，色彩在网页UI设计中占有相当重要的地位，在本章中主要介绍了网页UI设计的色彩搭配，以及网页UI配色的设计方法和原则，通过对多种典型的网页的设计制作讲解，使读者掌握网页UI设计配色的方法，并认识到网页的多种设计特点和风格。
第7章儿童类网页UI设计，主要介绍了儿童类网站各页面的设计特点，了解儿童类网页UI的要素和技巧，通过儿童类网站页面的设计与制作，使读者掌握儿童类网站页面的灵活设计及具体的表现形式。
第8章企业类网页UI设计，主要介绍了企业类网站各页面的设计要点，了解企业类网页UI设计的特点和技巧，通过对企业网站页面的设计与制作，使读者掌握企业类网站页面的灵活设计及具体的表现形式。
第9章游戏类网页UI设计，主要介绍了游戏类网站页面的设计特点和技巧，了解游戏类网页UI设计的要素，通过经典游戏网站页面的设计与制作，使读者掌握游戏类网站页面的灵活设计及具体的表现形式。
本书特点
全书内容丰富、条理清晰，通过9章内容，为读者全面、系统地介绍了各种类型网页UI设计知识，以及使用Photoshop进行网页UI设计的方法和技巧，采用理论知识和案例相结合的方法，使知识融会贯通。
语言通俗易懂，精美案例图文同步，涉及大量网页UI设计的丰富知识讲解，帮助读者深入了解网页UI设计。
实例涉及面广，几乎涵盖了网页UI设计所涉及的各个领域，每个领域下通过大量的设计讲解和案例制作帮助读者掌握领域中的专业知识点。
注重设计知识点和案例制作技巧的归纳总结，在知识点和案例的讲解过程中穿插了大量的软件操作技巧提示等，使读者更好地对知识点进行归纳吸收。
每一个案例的制作过程，都配有相关视频教程和素材，步骤详细，使读者轻松掌握。
本书读者对象
本书适合有一定Photoshop软件操作基础的设计初学者及设计爱好者阅读，也可以为一些设计制作人员及相关专业的学习者提供参考。本书配套光盘中提供了本书案例的源文件及素材，方便读者借鉴和使用。
本书由盛意文化编著，参与编著的人员有张玲玲、曹梦珂、王坤、项辉、李晓斌、黄尚智、尚丹丹、解晓丽、程雪翩、刘明秀、陈燕、胡丹丹、张航、王巍、王素梅、王状、赵建新、赵为娟、方明进、张伟。书中难免有错误和疏漏之处，希望广大读者朋友批评、指正。

编　者

序言/前言

UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的整体设计。网站是通过网页UI与访问者进行交流的，浏览者浏览了网站的整体性、功能性、可用性后，接下来只会查看页面中感兴趣的内容，在这个过程中如果浏览者感觉到不便或者麻烦，就会离开甚至以后不再访问该网页。

因此，设计师在网页UI设计过程中必须发挥可以快速传递网站整体性、内容可用性的创造力。本书以网页UI设计的理念为出发点，配以专业的图形处理软件Photoshop做讲解，重点向读者介绍了Photoshop在网页UI设计方面的理论知识和相关应用。通过大量网页UI设计案例的制作和分析，让读者掌握实实在在的设计思想。

 

本书章节安排

本书内容浅显易懂，从网页UI的设计思想出发，向读者传达一种新的设计理念，通过专业的理论知识讲解与精美案例制作的完美结合，循序渐进地讲解网页UI设计中的有关知识，让读者在学习欣赏的过程中丰富自己的设计创意，并提高动手制作的能力。本书内容章节安排如下：

第1章关于网页UI设计，介绍了网页UI设计的相关基础知识，包括什么是网页UI、网页UI设计要点、网页UI构成要素、设计原则，还讲解了网页UI创意设计方法，使读者对网页UI设计有更加深入的认识和理解。

第2章网站基本图形元素设计，主要介绍了网站页面中各种基本图形元素的设计方法，包括图标、按钮、LOGO等，并通过对网站页面中各种不同类型的设计元素的制作讲解，使读者快速掌握各种网站页面设计要素的设计和表现方法。

第3章网站导航的设计，主要讲解了网站导航设计的重要性及其特点，包括导航的表现形式、导航菜单在网页中的布局、网站导航的视觉风格等，通过对不同网站导航制作过程的讲解，提高读者对网站导航设计的认识。

第4章网页文字和广告设计，主要讲解了文字在网页中的作用及其设计特点和要求，也介绍了有关文字排版设计的常识性信息，通过对网页中常见文字效果和广告图片的设计制作讲解，使读者掌握网页文字和广告设计的常规思路及过程。

第5章网页布局与版式设计，主要介绍了网页布局的方法和目的，也向读者介绍了常见的网页布局方式，通过对多种不同网页的设计讲解，让读者明了布局在网页UI设计中所遵循的设计原则和要求。

第6章网页UI配色，色彩在网页UI设计中占有相当重要的地位，在本章中主要介绍了网页UI设计的色彩搭配，以及网页UI配色的设计方法和原则，通过对多种典型的网页的设计制作讲解，使读者掌握网页UI设计配色的方法，并认识到网页的多种设计特点和风格。

第7章儿童类网页UI设计，主要介绍了儿童类网站各页面的设计特点，了解儿童类网页UI的要素和技巧，通过儿童类网站页面的设计与制作，使读者掌握儿童类网站页面的灵活设计及具体的表现形式。

第8章企业类网页UI设计，主要介绍了企业类网站各页面的设计要点，了解企业类网页UI设计的特点和技巧，通过对企业网站页面的设计与制作，使读者掌握企业类网站页面的灵活设计及具体的表现形式。

第9章游戏类网页UI设计，主要介绍了游戏类网站页面的设计特点和技巧，了解游戏类网页UI设计的要素，通过经典游戏网站页面的设计与制作，使读者掌握游戏类网站页面的灵活设计及具体的表现形式。

本书特点

全书内容丰富、条理清晰，通过9章内容，为读者全面、系统地介绍了各种类型网页UI设计知识，以及使用Photoshop进行网页UI设计的方法和技巧，采用理论知识和案例相结合的方法，使知识融会贯通。

语言通俗易懂，精美案例图文同步，涉及大量网页UI设计的丰富知识讲解，帮助读者深入了解网页UI设计。

实例涉及面广，几乎涵盖了网页UI设计所涉及的各个领域，每个领域下通过大量的设计讲解和案例制作帮助读者掌握领域中的专业知识点。

注重设计知识点和案例制作技巧的归纳总结，在知识点和案例的讲解过程中穿插了大量的软件操作技巧提示等，使读者更好地对知识点进行归纳吸收。

每一个案例的制作过程，都配有相关视频教程和素材，步骤详细，使读者轻松掌握。

本书读者对象

本书适合有一定Photoshop软件操作基础的设计初学者及设计爱好者阅读，也可以为一些设计制作人员及相关专业的学习者提供参考。本书配套光盘中提供了本书案例的源文件及素材，方便读者借鉴和使用。

本书由盛意文化编著，参与编著的人员有张玲玲、曹梦珂、王坤、项辉、李晓斌、黄尚智、尚丹丹、解晓丽、程雪翩、刘明秀、陈燕、胡丹丹、张航、王巍、王素梅、王状、赵建新、赵为娟、方明进、张伟。书中难免有错误和疏漏之处，希望广大读者朋友批评、指正。

 

编　者