内容简介

一个优秀的网站，通常具备丰富的内容、美观的界面效果和独特的风格，并在这几个方面能够实现和谐的统一。在多姿多彩的互联网世界中，美观的界面效果和鲜明的设计风格能够给浏览者留下深刻的印象。

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

《网页UI设计之道》共分为9章，全面介绍了网页UI设计中的理论设计知识以及具体案例的制作方法；第1章：关于网页UI设计，第2章：网站基本图形元素设计，第3章：网站导航设计，第4章：网页文字与广告设计，第5章：网页布局与版式设计，第6章：网页UI配色，第7章：儿童类网页UI设计，第8章：企业类网页UI设计，第9章：游戏类网页UI设计。

《网页UI设计之道》配套的光盘中提供了本书所有案例的源文件及素材，方便读者借鉴和使用。

《网页UI设计之道》适合有一定Photoshop软件操作基础的设计初学者以及设计爱好者阅读，也可以为一些设计制作人员以及相关专业的学习者提供参考。

作品目录

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．1　文字 10

1．3　网页UI构成元素 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

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

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

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

9．2．1　设计分析 352

【自测1】设计游戏网站页面 352

9．3　本章小结 365