网页UI设计之道

出版者:电子工业出版社

作者:盛意文化

页数:372

出版时间:2015-11

价格:84.6

装帧:平装

isbn号码:9787121272974

具体描述

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

《网页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软件操作基础的设计初学者以及设计爱好者阅读，也可以为一些设计制作人员以及相关专业的学习者提供参考。

作者简介

高金山，资深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．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
· · · · · · (收起)

用户评价

**评价四：** 我是一位运营和市场人员，过去我们总依赖外包团队进行网站的迭代和优化，但经常出现“我要的”和“设计师做的”之间巨大的认知鸿沟。为了能更有效地与设计团队沟通，我开始自学一些基础的设计理论，希望能够用更专业的语言描述我的需求。这本书对我来说，提供了一个完美的“翻译手册”。它用极其清晰的逻辑，将“易用性”、“情感化设计”、“一致性”等专业术语，转化成了可以被市场人员理解的商业价值和用户反馈指标。书中探讨的“设计流程与迭代”部分，尤其契合我的工作场景。它展示了如何通过快速原型、用户反馈循环来验证设计决策的有效性，而不是一味地追求视觉上的完美。这套方法论让我学会了如何从用户的痛点出发，而不是从老板的“我觉得”出发来驱动设计改进。现在，我和设计师的沟通效率大大提高，因为我们共享了一套基于这本书建立起来的、对“好界面”的共同理解框架。如果你是产品经理、运营主管或项目负责人，这本书能帮你建立起与设计团队的有效桥梁。

**评价三：** 市面上关于用户界面设计（UI/UX）的书籍汗牛充栋，但大多集中在工具的使用或最新的设计趋势上，往往读完后感觉自己掌握了一些“招式”，但“内功”依然不足。这本书的价值恰恰在于它回归了设计最本质的原理。它没有被一时的潮流所裹挟，而是深入挖掘了人类认知心理学与界面交互之间的关系。例如，书中对“格式塔原理”在网页布局中的实际应用分析得极为透彻，结合大量的优秀案例和反面教材，我清晰地看到了形状、相似性、邻近性如何无声地影响着我们的判断。这种基于科学的洞察力，远比单纯模仿Dribbble上的作品来得更具生命力。更让我印象深刻的是，作者对“可访问性”（Accessibility）的重视程度，这在很多只谈“酷炫”的设计书中是被忽略的角落。这本书教导我们，一个真正优秀的设计，必须能够服务于所有用户，这不仅是职业道德，更是衡量设计成熟度的标尺。它让我对“好的设计”有了更广阔、更具人文关怀的定义。

**评价一：** 这本书简直是为我这种对网页设计有热情，但又苦于找不到清晰、系统性指导的初学者量身定做的。我一直觉得设计这东西很玄乎，光是色彩搭配就能让人抓耳挠腮，更别提布局和用户体验了。拿到这本书，我抱着试试看的心态翻阅，结果发现作者的叙述方式非常接地气，完全没有那种高高在上的“大师”腔调。他不是那种只会甩概念、堆理论的作者，而是真正带着你一步步走进网页设计世界的“引路人”。比如，书中对“留白”的讲解，深入浅出，让我终于明白它不只是空着一块地方，而是如何引导用户视线、提升信息层级的关键所在。我尤其喜欢它对“网格系统”的阐述，清晰地说明了为什么要用网格，以及如何根据不同的内容需求来灵活调整网格的结构，这让我的设计从原来的“凭感觉”变成了有章可循的科学流程。读完前几章，我立刻上手尝试重新设计了我个人博客的首页，效果立竿见影，那种从迷茫到豁然开朗的感觉，只有真正实践过的人才能体会。这本书真正做到了将复杂的理论拆解成易于消化的实践步骤，是每位想要提升网页审美和效率的设计师必备的案头参考书。

**评价二：** 坦白说，我是一个经验尚浅的网页开发者，更多关注的是代码的实现和功能的完善，对“美观”和“用户感受”往往是敷衍了事。自从公司要求我们前端团队提高界面的用户友好度后，我才开始正视UI设计的重要性。这本书的出现，对我来说简直是及时雨。它没有过多纠缠于Photoshop或Sketch的具体操作技巧，而是将设计的核心理念——即如何让信息以最有效、最愉悦的方式传递给用户——阐述得淋漓尽致。书中对于“视觉层次结构”的论述，让我对以往那些杂乱无章的页面有了新的认识。我明白了为什么有些网站一看就让人想关掉，而有些网站则能让人沉浸其中。作者强调的“设计即沟通”的理念，彻底改变了我对UI工作的理解。现在我写CSS的时候，会下意识地思考这个按钮的颜色是否传达了正确的“可点击性”，这个字号的对比度是否保证了信息的易读性。这本书帮助我建立了一个完整的“用户视角”，让我从一个单纯的代码搬运工，向一个注重用户体验的设计思考者转变。强烈推荐给所有技术背景出身，但渴望在界面表达上有所突破的同仁们。

**评价五：** 作为一名在行业内摸爬滚打了十几年的资深设计师，我本以为市面上鲜有能给我带来新东西的书籍了。然而，这本书在对基础原理的重新梳理和提炼上，做到了极高的水准，让我有种“久违的醍醐灌顶”。许多设计书籍在讲完基础后就匆匆收尾，但这本书的后半部分，对于“微交互”和“动态设计”的探讨，简直是点睛之笔。作者并未把动态效果当作花哨的点缀，而是深入分析了它如何承担信息传递和情感反馈的双重责任。书中列举的那些精心设计的加载动画、状态切换提示，展示了如何用时间的维度来优化用户体验，这远比静态的布局设计复杂得多，也更有技巧性。我从中学到了一种更克制、更精确地运用动态设计的方式，避免了那些无意义的晃动和拖沓。这本书适合那些已经掌握了基础操作，但希望将自己的作品提升到艺术与工程完美结合境界的设计师。它帮助我审视了自己多年来的设计习惯，并找到了突破瓶颈的关键所在。