本书全面解析了网站页面布局与配色设计的相关知识，接近抛开了网页设计必须遵循的条件及有关设计软件的内容，而是运用可以激发创意、扩展设计思路的方法对网站页面布局与配色设计进行讲解，并对具体的案例进行分析。全书共分为9章，涵盖了网站设计的方方面面。

张晓景，编写过多本设计类、前端开发类畅销图书，包括《7天精通Photoshop CS6 UI交互设计》、《网站用户体验设计全程揭秘》、《中文版Photoshop CS6接近自学一本通》等，重印多次，深受读者好评。

  
\t章网站设计基础



\t1.1了解网站设计2



\t1.1.1什么是网站设计2



\t1.1.2网站设计的特点2



\t1.2网站设计构成元素6



\t1.2.1文字6



\t1.2.2图形符号6



\t1.2.3图像7



\t1.2.4多媒体7



\t1.2.5色彩7



\t1.3网站设计原则8



\t1.3.1以用户为中心8



\t1.3.2主题明确9



\t1.3.3视觉美观11



\t1.3.4内容与形式统一11



\t1.3.5有机的整体12



\t1.4色彩在网站设计中的作用13



\t1.4.1突出网页主题13



\t1.4.2划分视觉区域14



\t1.4.3吸引浏览者的目光14



\t1.4.4增强网站页面的艺术性14



\t1.5如何设计出好的网站15



\t1.5.1不要主动降低自己的眼光15



\t1.5.2多尝试新技术、新方法15



\t1.6如何提升网站的用户体验16



\t1.6.1用户体验包含的内容16



\t1.6.2用户体验对于网站的重要性18



\t1.6.3网站如何寻求突破19



\t1.6.4提升网站用户体验20



\t第2章 网站页面规划与元素设计



\t2.1网站栏目结构与页面策划22



\t2.1.1网站栏目结构22



\t2.1.2网站栏目规划24



\t2.1.3网站页面策划24



\t2.2网站 Logo设计25



\t2.2.1网站 Logo的特点25



\t2.2.2网站 Logo的设计规范26



\t2.2.3网站 Logo的表现形式28



\t2.2.4实战分析：设计影视 网站 Logo29



\t2.3网站图标设计31



\t2.3.1了解网站图标31



\t2.3.2网站图标设计原则31



\t2.3.3网站图标应用33



\t2.3.4实战分析：设计简约实用的 网站图标34



\t2.4网站按钮设计36



\t2.4.1网站按钮的功能36



\t2.4.2如何设计出色的网站按钮38



\t2.4.3实战分析：设计游戏 网站按钮42



\t2.5网站导航设计43



\t2.5.1了解网站导航43



\t2.5.2导航在网站页面中的布局位置45



\t2.5.3网站导航设计的基本原则49



\t2.5.4实战分析：设计汽车网站 导航菜单50



\t2.6网站广告设计53



\t2.6.1网站广告的常见类型53



\t2.6.2如何设计出色的网站广告55



\t2.6.3实战分析：设计家电网站 宣传广告56



\t第3章 网站中的图形与文字排版设计



\t3.1网站页面中的文字59



\t3.1.1关于字体59



\t3.1.2网页中常用的中文字体59



\t3.1.3字体大小60



\t3.1.4网页文字使用技巧63



\t3.2网页文字的排版65



\t3.2.1文字排版的易读性规则65



\t3.2.2文字排版设计常用手法67



\t3.2.3实战分析：设计手机宣传网站页面70



\t3.3图形在网站设计中的作用73



\t3.4网站图形设计类型75



\t3.4.1插图75



\t3.4.2图形符号75



\t3.4.3照片76



\t3.4.4页面分割77



\t3.4.5立体图形77



\t3.5网站图片的排列布局形式78



\t3.5.1传统矩阵展示78



\t3.5.2大小不一的矩阵展示79



\t3.5.3瀑布流展示79



\t3.5.4下一张图片预览79



\t3.5.5实战分析：设计产品促销活动页面80



\t第4章 网站页面布局与视觉风格



\t4.1了解网站页面布局85



\t4.1.1网站页面布局的目的85



\t4.1.2网站页面布局的操作顺序86



\t4.2网页布局的基本方法86



\t4.2.1网页布局的设计87



\t4.2.2网页布局的构成原则87



\t4.2.3实战分析：设计手机宣传网站页面88



\t4.3根据整体内容位置决定的网页视觉布局91



\t4.3.1满屏式页面布局91



\t4.3.2两栏式页面布局92



\t4.3.3三栏式页面布局95



\t4.3.4水平和垂直居中的页面布局96



\t4.4页面分割方向的布局方式97



\t4.4.1纵向分割97



\t4.4.2横向分割98



\t4.4.3纵向与横向复合型98



\t4.4.4运用固定区域的设计99



\t4.4.5实战分析：设计类网站页面100



\t4.5初始页面的网页布局类型102



\t4.6网页布局的要点104



\t第5章 网站页面视觉布局形态



\t5.1网页功能与网页形态哪个更重要107



\t5.2网页布局形态的含义及情感108



\t5.2.1点108



\t5.2.2圆109



\t5.2.3三角形110



\t5.2.4矩形111



\t5.2.5菱形112



\t5.2.6直线113



\t5.2.7斜线114



\t5.2.8曲线115



\t5.2.9自由曲线116



\t5.2.10实战分析：设计产品促销页面117



\t5.3大众化网页布局形态120



\t5.4个性化网页布局形态122



\t5.5常见网页视觉风格解析123



\t5.5.1简洁风格123



\t5.5.2极简风格124



\t5.5.3扁平化风格124



\t5.5.4插画风格125



\t5.5.5怀旧风格126



\t5.5.6照片风格127



\t5.5.7立体风格128



\t5.5.8大字体风格129



\t5.5.9实战分析：设计企业网站页面130



\t第6章 网页配色基础



\t6.1色彩基础134



\t6.1.1色彩的产生134



\t6.1.2光源色与物体色135



\t6.2RGB 颜色与CMYK 颜色的区别135



\t6.2.1RGB 颜色136



\t6.2.2CMYK 颜色137



\t6.3色彩的属性137



\t6.3.1色相137



\t6.3.2明度138



\t6.3.3饱和度138



\t6.3.4色调139



\t6.3.5无彩色与有彩色139



\t6.4网页配色的联想作用140



\t6.4.1色彩联想和心理效果140



\t6.4.2红色141



\t6.4.3粉色141



\t6.4.4橙色141



\t6.4.5黄色142



\t6.4.6棕色142



\t6.4.7绿色142



\t6.4.8蓝色143



\t6.4.9紫色143



\t6.4.10黑色144



\t6.4.11白色144



\t6.4.12灰色144



\t6.4.13实战分析：设计珠宝首饰网站页面145



\t6.5网页配色常见问题147



\t6.5.1如何培养色彩的敏感度147



\t6.5.2通用配色理论是否适用148



\t6.5.3配色时应该选择双色还是多色组合148



\t6.5.4尽可能使用两至三种颜色进行搭配149



\t6.5.5如何快速实现完美的配色149



\t6.5.6实战分析：设计汽车宣传网站页面150



\t第7章 网页元素的基本配色



\t7.1网页配色的基本方法154



\t7.1.1主题色154



\t7.1.2背景色155



\t7.1.3辅助色156



\t7.1.4点缀色157



\t7.2网页文本配色158



\t7.2.1网页与文本的配色关系158



\t7.2.2良好的网页文本配色159



\t7.3网页元素色彩搭配160



\t7.3.1Logo 与网页广告160



\t7.3.2导航菜单161



\t7.3.3背景与文字161



\t7.3.4链接文字162



\t7.3.5实战分析：设计咖啡馆宣传网站页面162



\t7.4根据受众群体选择网页配色165



\t7.4.1不同性别的色彩偏好165



\t7.4.2不同年龄的色彩偏好166



\t7.5根据商品销售阶段选择网页配色168



\t7.5.1新产品上市期的网页配色168



\t7.5.2产品拓展期的网页配色168



\t7.5.3产品稳定销售期的网页配色169



\t7.5.4产品衰退期的网页配色169



\t7.5.5实战分析：设计酒类产品宣传网站页面170



\t7.6如何打造成功的网页配色172



\t7.6.1遵循色彩的基本原理172



\t7.6.2考虑网页的特点173



\t7.6.3灵活应用配色技巧174



\t7.6.4避免配色混乱175



\t7.6.5实战分析：设计产品宣传网站页面176



\t第8章 网页配色的方法



\t8.1基于色相进行配色180



\t8.1.1基于色相的配色关系180



\t8.1.2相反色相、类似色调配色181



\t8.1.3相反色相、相反色调配色181



\t8.1.4渐变配色182



\t8.1.5无彩色和彩色183



\t8.2基于色调进行配色183



\t8.2.1基于色调的配色关系184



\t8.2.2同一色相或类似色相、类似色调配色184



\t8.2.3同一色相或类似色相、相反色调配色185



\t8.3色彩感觉在网页配色中的应用186



\t8.3.1冷暖感186



\t8.3.2轻重感188



\t8.3.3软硬感189



\t8.3.4前后感189



\t8.3.5大小感190



\t8.3.6华丽感与朴实感191



\t8.3.7宁静感与兴奋感192



\t8.3.8活力感与庄重感193



\t8.3.9实战分析：设计计算机产品促销广告页面193



\t8.4色彩对比的配色196



\t8.4.1冷暖对比196



\t8.4.2面积对比198



\t8.4.3色相对比200



\t8.4.4同时对比204



\t8.4.5连续对比204



\t8.4.6实战分析：设计运动鞋宣传网站页面205



\t第9章 网页配色的技巧



\t9.1突出主题的配色技巧209



\t9.1.1明确主题焦点209



\t9.1.2提高饱和度209



\t9.1.3增大明度差210



\t9.1.4增强色相211



\t9.1.5增强点缀色212



\t9.1.6抑制辅助色或背景213



\t9.2整体融合的配色技巧214



\t9.2.1接近色相215



\t9.2.2统一明度216



\t9.2.3接近色调216



\t9.2.4添加类似色或同类色217



\t9.2.5网页产生稳定感217



\t9.2.6实战分析：设计房地产宣传网站页面218



\t9.3网页配色印象221



\t9.3.1女性化的网站配色221



\t9.3.2男性化的网站配色222



\t9.3.3稳定安静的网站配色223



\t9.3.4兴奋激昂的网站配色224



\t9.3.5轻快律动的网站配色225



\t9.3.6清爽和风的网站配色226



\t9.3.7浪漫甜美的网站配色227



\t9.3.8传统稳重的网站配色229



\t9.3.9雍容华贵的网站配色230



\t9.3.10实战分析：设计清新自然的环保网站页面231



\t9.4使用配色软件进行配色233



\t9.4.1ColorKey XP 软件233



\t9.4.2Color Scheme Designer235



\t9.4.3Check My Colours236



\t9.4.4ColorJack236