形·色——网页设计法则及实例指导

本书以深入浅出的方式，从设计的基本理念入手，通过几个网页设计标志性阶段的解读，向读者概述网页发展的历史，同时本书引入了网页设计的设计规范与配色法则，帮助读者快速梳理网页设计的流程。后面通过几个案例逐步解读网页设计的工作流程，将理论与实践充分结合，使读者能够深刻、多元地学习网页设计的技巧。
本书提供练习和实战中的素材和源文件，扫描封底“资源下载”二维码，即可获得下载方法，如需资源下载技术支持请致函[email protected]。
本书适合新入行的网页设计师、互联网技术相关行业的从业人员，如前端工程师、交互设计师、产品体验师等，也适合对互联网、新媒体行业感兴趣的人士学习、参考与使用。

姜鹏
UEHTML推荐设计师
UI中国2015年度作品集十佳人气设计师奖获得者
第三届小米主题设计大赛创意奖
华为第二届全球手机主题设计大赛入围奖

感谢人民邮电出版社给我机会分享一些过往的设计经验和心得。在多年的网页设计工作中，虽然因为互联网的飞速发展我经历过几次角色转变，但是对网页设计的热爱与研究从未停止。本书中有我多年经验的总结，希望能对读者有所帮助，也希望真正热爱设计的朋友在这条路上可以越走越远！

郭晓倩
青岛报业集团新媒体设计总监

在网页设计这个行业，我从刚开始设计时的摸着石头过河到如今已经摸爬滚打7年有余。感谢人民邮电出版社给我这个机会，让我可以把这些年积累的经验分享给大家。希望越来越多的人可以关注我们这个行业，给我们更多信任与尊重；也希望关注本书的设计师们能够热爱这个行业，坚守这份信念，用我们的双手让世界变得更美好。

一线网页设计师帮助新人快速理解网页设计概念，掌握网页设计规范化流程，实现标准化输出。
传达以用户为中心的设计思维
掌握网页设计中的基本配色法则
用案例引导读者尝试设网站计
扫描封底二维码，关注微信号即可获得资源文件下载方式。

第1章 网页设计之初体验 009
1．1 设计的意义 010
1．1．1 什么是设计 010
1．1．2 设计的目的 011
1．2 网页设计的前世今生 012
1．2．1 诞生——第一个网站 012
1．2．2 探索——表格布局 013
1．2．3 发展——Flash的“崛起” 014
1．2．4 渐入佳境——DIV与CSS的诞生 015
1．2．5 划时代——移动端兴起与响应式布局 017
1．3 网页设计师的审美培养 019
1．3．1 审美的差异 019
1．3．2 日韩设计行业的现状 019
1．3．3 如何培养审美 024
1．4 专业的设计网站推荐 026
1．4．1 国内设计网站推荐 026
1．4．2 国外设计网站推荐 028
第2章 以用户为中心的设计思维 031
2．1 什么是用户体验 032
2．1．1 生活中的用户体验 032
2．1．2 互联网产品中的用户体验 034
2．2 挖掘用户需求 035
2．2．1 需求层次论 035
2．2．2 用户需求解析 036
2．3 令人愉悦的设计 038
2．3．1 Google Doodle 038
2．3．2 国内设计师的尝试 039
2．4 渐进式创新思维 041
2．4．1 产品设计中的尝试 041
2．4．2 设计中的迭代 042
2．5 细节决定成败 044
2．5．1 细节习惯的养成 044
2．5．2 设计中的细节体验 045
第3章 网页设计中的配色 049
3．1 色彩的种类 050
3．1．1 无彩色 050
3．1．2 有彩色 050
3．2 色彩三要素 051
3．2．1 色相 051
3．2．2 明度 051
3．2．3 饱和度 051
3．3 色彩的情感 052
3．3．1 红色 052
3．3．2 黄色 053
3．3．3 蓝色 053
3．3．4 绿色 054
3．3．5 紫色 055
3．4 配色的法则 056
3．4．1 色彩的关系 056
3．4．2 单色搭配 057
3．4．3 类似色搭配 058
3．4．4 邻近色搭配 059
3．4．5 中差色搭配 060
3．4．6 对比色搭配 061
3．4．7 互补色搭配 063
3．4．8 色彩的对比 064
3．5 常用色彩搭配 065
3．5．1 商务促销类 065
3．5．2 门户类 068
3．5．3 儿童类 070
3．5．4 母婴类 071
第4章 网页设计前的准备工作 073
4．1 有规矩成方圆 074
4．1．1 网页设计的基本规范 074
4．1．2 网页设计的标注规范 079
4．2 网页设计的流程 081
4．2．1 设计前期 081
4．2．2 原型制作 082
4．3 网页设计的工具 085
4．3．1 常用软件的介绍 085
4．3．2 软件的基本操作 087
4．3．3 效果图的展现方式 097
4．4 关于切片 103
4．4．1 切片工具的使用方法 103
4．4．2 图片命名规范及保存格式 106
第5章 网页设计模拟练习 111
5．1 草图及原型图的制作 112
5．1．1 概念图的绘制 114
5．1．2 原型图的制作方法 116
5．2 确立基本风格和规范 117
5．2．1 根据风格确定配色 117
5．2．2 确立设计规范 118
5．3 网页制作的基本方法 120
5．3．1 新建画布与设置参考线 120
5．3．2 导航栏的设计 120
5．3．3 主内容区的设计 122
5．4 二级页设计 127
5．4．1 导航栏的设计 127
5．4．2 “在线选购”界面的制作 128
5．4．3 产品介绍栏的设计 129
5．5 标注的方法 131
第6章 网页设计实战解析 135
6．1 个人工作室网页设计 136
6．1．1 设计需求的确定 136
6．1．2 确立设计规范 138
6．1．3 导航与Banner设计 138
6．1．4 文字与图集板块的设计 141
6．1．5 表单与辅助信息 145
6．2 酒店预订网页设计 147
6．2．1 设计需求的确定 147
6．2．2 确立设计规范 149
6．2．3 导航设计 149
6．2．4 Banner设计 151
6．2．5 图文排版设计 153
6．2．6 图集设计 154
6．2．7 企业信息设计 158
6．3 旅游工作室网页设计 161
6．3．1 设计需求的确定 161
6．3．2 首页设计 164
6．3．3 二级页：新闻列表设计 168
6．3．4 二级页：新闻详情页设计 176
6．3．5 二级页：促销信息列表页设计 179
6．3．6 视觉效果图的展示 184
第7章 设计师的经验分享 193
7．1 设计师整理术 194
7．1．1 学习资料的整理 194
7．1．2 个人设计作品的整理 195
7．2 好用的设计工具推荐 196
7．2．1 自动填充工具——Craft 196
7．2．2 栅格工具——GuideGuide 197
7．2．3 圆角图形工具——Corner Editor 198
7．2．4 APP学习工具 198
7．3 必备的图片处理工具推荐 201
7．3．1 图片压缩工具——智图 201
7．3．2 免费商用图库工具 201
7．4 写给设计新人的话 205
7．4．1 圈子的选择 205
7．4．2 设计师发展的四大阶段 206
7．4．3 设计大师修炼法则 211
7．4．4 设计中的沟通技巧 213
7．4．5 绕开设计路上的“陷阱” 217
结束语 220