超越平凡的视觉设计：网页设计原理

　　现代社会，互联网、计算机硬件、移动终端设备的发展日新月异，对于企业和用户来说，网站是一个很好的宣传与交流平台，它既是企业形象的展示平台，又是用户了解企业产品的平台，因此网页的视觉效果尤为重要。那么对于从事或即将从事网页设计的读者来说，如何才能高效又快速地制作出抓人眼球的网页页面呢？本书将带领读者从网页设计的基础知识开始学起。全书共分为8个部分：Part 0介绍了网页设计的基础知识，包括服务对象决定的设计核心内容、建立网站所用的工作流引擎、页面内所使用的设计要素等内容；Part 1则从字体、素材、配色三个方面分析了如何把握网页设计的风格；Part 2依次对颜色的固有印象、搭配方法、调配方法以及配色理论进行了讲解；Part 3则从多个角度对不同行业、不同领域的网站中出现的信息设计方法及异同之处进行了分析，同时在功能、配色、版式等方面进行了逐一解析，使读者在实际的网页设计工作中可以作为参考；Part 4则针对PC、平板电脑、智能手机等设备的显示尺寸，从版式、构图两方面讲解了如何不断优化网页；Part 5详细讲解了如何将照片、手绘插画等素材及字体、程序应用到网页设计中；Part 6对于如何设计好“当下流行”的网页、版式布局的流行趋势，以及*新的网页技术进行了讲解和总结；Part 7对网页中页眉、页脚、标题等设计要素进行了分类讲解，并介绍了各个要素的配置方式和版式设计，供读者参考学习。本书案例丰富、讲解清晰、版式新颖，适合网页设计师、用户体验设计师、前端页面开发人员阅读使用，同时还可作为各院校相关专业的教材。

　　久保田涼子（KUBOTA RYUKO）1982年出生于日本广岛县广岛市。毕业于东京女子大学心理学专业。是一位以“产生令人心动的产品、时间、场所”为主题的自由创作者。担任从事网页制作业务的Coco-Factory公司的法人，创作者集团ROOT的法人。在数字好莱坞STUDIO涉谷、以及广岛讲师开展在线讲座并从事教材的便携，还涉足多项公开研究课程的开发。其负责了多国不同领域企业的网站设计总监，还担任一些知名企业的设计顾问。此外，还担任过不同展会活动的监制。

目录
本书的使用方法····························· 8

PART　0 网页设计基础知识
01 网页设计基础知识························ 10
02 网页的结构和工作流程······················ 12
03 在网页中加入设计部件······················ 14
专栏 关于网页浏览器························· · 14
04 网页中所用的图像························ 16
05 网页设计与文字版式······················· 18
专栏 设计小窍门···························· 19
06 色彩的基础知识························· 20
专栏 通过调整补色让照片的色调更加理想················ · 21
专栏 颜色搭配方法的参考网站····················· · 23
专栏 用于判断色觉异常患者所看颜色效果的工具·············· 23
专栏 在醒目位置或页面按钮上反映出颜色的印象·············· 23
07 配色的基础知识························· 24
专栏 可供参考的网页设计网站···················· ·· 26

PART　1 从风格方面进行网页设计
01 源自可爱的萌动设计······················· 28
02 充满活力的流行风格设计····················· 30
03 洋溢着雅致高端气息的设计···················· 32
04 自然柔和的设计························· 34
05 炫酷先进的设计························· 36
06 信任可靠的设计························· 38
07 复古怀旧的设计························· 40
专栏 复古风格的字体在CSS中的表现方法·················· 41
08 古典高雅的设计························· 42
09 日式和风的设计························· 44
10 透明感的设计·························· 46
11 面向儿童用户的设计······················· 48
12 女人味的设计·························· 50
13 男人味的设计·························· 52
14 高级感的设计·························· 54
15 让食物看起来更美味的设计···················· 56
16 带有季节感的设计························ 58
专栏 可商用的摄影素材网站·················· ····· 60

PART　2 从配色方面进行网页设计
01 基于标志、品牌颜色的配色···················· 62
02 以黄色为基调的配色······················· 64
03 以橙色为基调的配色······················· 66
04 以红色为基调的配色······················· 68
05 以粉色为基调的配色······················· 70
06 以紫色为基调的配色······················· 72
07 以蓝色为基调的配色······················· 74
08 以绿色为基调的配色······················· 76
09 以茶色为基调的配色······················· 78
10 以白色和灰色为基调的配色···················· 80
11 以黑色为基调的配色······················· 82
12 与色调相结合的配色······················· 84
专栏 配色生成器与浏览器插件····················· · 86

PART　3 从不同行业、领域方面进行网页设计
01 西餐厅、咖啡店类网站的网页设计················· 88
02 医疗机构类网站的网页设计···················· 90
03 流行时尚类网站的网页设计···················· 92
04 美容、美发类网站的网页设计··················· 94
05 艺术节、展览类网站的网页设计·················· 96
06 音乐类网站的网页设计······················ 98
07 动画、游戏类网站的网页设计··················· 100
08 职业资格类网站的网页设计···················· 102
09 学校、幼儿园类网站的网页设计·················· 104
10 艺术类网站的网页设计······················ 106
11 新闻、门户类网站的网页设计··················· 108
12 电子商务类网站的网页设计··············· ···· 110
专栏 电子商务网站与平台······················· · 111
13 企业类网站的网页设计······················ 112
14 体育健身类网站的网页设计···················· 114
15 引导页的网页设计························ 116
专栏 提供引导页参考的网站················· ··· ·· 117
专栏 将使用目的与网页设计结合起来的方法·············· ·· 118

PART　4 从版式、构图方面进行网页设计
01 网格型版式··························· 120
专栏 在Photoshop中轻松制作参考线···················· 121
02 卡片、瓷砖型版式························ 122
03 单专栏型版式·························· 124
04 双专栏型版式·························· 126
05 组合专栏型版式························· 128
06 全屏型版式··························· 130
07 脱离网格型版式························· 132
08 自由型版式··························· 134
专栏 版式设计的4个法则························· 136

PART　5 使用素材、字体、程序的设计
01 以图像素材为主体的设计····················· 138
专栏 丰富的视差效果带来的魅力····················· 140
02 使用抠图照片的设计······················· 142
03 使用纹理材质的设计······················· 144
04 使用装饰素材的设计······················· 146
05 使用手绘插图的设计······················· 148
06 使用文字版式的设计······················· 150
07 有效运用视频的设计······················· 152
08 带有动态特效的设计······················· 154
09 展示数据图像的设计······················· 156
专栏 能够轻松制作出统计图和图表的Java Script库············· 157
专栏 Font Awsome的导入方法······················· 158

PART　6 网页设计的趋势
01 响应式网页设计························· 160
02 网页字体·········· 162
专栏 提供网页字体服务的网站·················· ···· 163
03 分屏式设计··························· 164
04 扁平化设计和材料设计······················ 166
专栏 采用材料设计语言的示例网站···················· 167
05 微交互式设计·························· 168
专栏 从手机APP的UI中学习微交互的应用·················· 169
06 品牌主视觉设计························· 170
07 视差设计···························· 172
专栏 能够实现视差效果的jQuery插件示例················· 173
08 双色调设计··························· 174
专栏 双色调图像的制作方法······················· 175
09 文字竖排的版式设计······················· 176
专栏 使用可更新编辑的WordPress····················· 178

PART　7 网页各个要素的设计
01 页眉······························ 180
02 全局导航栏··························· 182
03 标题························ ······184
04 按钮、图标··························· 185
05 表格······························ 186
06 填写项目···························· 187
07 页脚····························· ·188
专栏 收藏夹图标的设置方法······················· 190