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

人们常说靠前印象往往会给人留下一生的记忆。对于一个网站而言，这一说法也同样成立。但遗憾的是注意到这一点的站点并不是很多。要把这一切搬到互联网上则更不容易。不过，设计一个引人注目、令人动心的页面仍然是设计者工作中不可缺少的一部分。随着时代的发展，网页设计更接近于一门艺术。网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利，而这些也为视觉设计师提供了更多表现的空间。本书就是这样一本速食的设计创意与技巧手册。本书可以帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。

现代社会，互联网、计算机硬件、移动终端设备的发展日新月异，对于企业和用户来说，网站是一个很好的宣传与交流平台，它既是企业形象的展示平台，又是用户了解企业产品的平台，因此网页的视觉效果尤为重要。那么对于从事或即将从事网页设计的读者来说，如何才能高效又快速地制作出抓人眼球的网页页面呢？本书将带领读者从网页设计的基础知识开始学起。 全书共分为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