网页色彩与布局设计（第2版）课件 第六章 网页色彩的趋势

WebColorTendency第六章网页色彩的趋势2低度透明的色彩运用分析Low-levelTransparentColorApplicationAnalysis1柔和鲜嫩的色彩运用分析SoltAndTenderColorsApplicationAnalysis2偏灰的冷色系色彩运用分析AnalysisofColorApplicationofGreyAndColdColor3

用高亮色凸显用户交互BrightColorsHighlightUseInteractions4目录CONTENTS蓝色是网页的“基本款”BlueIsTheBasicDesignofWebPages53低度透明的色彩运用分析1PART4请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。低度透明的色彩运用分析Low-levelTransparentColorApplicationAnalysis6.1低度透明的色彩运用分析透明度低的色彩很有可能成为2016年网页设计的色彩趋势。如图6-1所示的网页中，选用低透明度的色彩作为背景，与网页整体协调，并且使用小块的亮色突出主题。图6-1低透明度色彩网页设计(1)5请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。6.1低度透明的色彩运用分析图6-2所示的网页是黑暗系电影《夜行者》的官方网站，将电影中阴暗的剧情呈现在网页上，简约现代的风格处理，透明度低的色彩背景让用户可以更加专注于视频和互动本身。

图6-2低透明度色彩网页设计(2)低度透明的色彩运用分析Low-levelTransparentColorApplicationAnalysis6请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。6.1低度透明的色彩运用分析图6-3所示的是Union的官网，虽然背景也采用了相对复杂的图片，但降低了背景色彩的透明度，使得图片、文字以及其他的装饰元素之间的搭配对比控制的很好，有视觉重心又不会觉得有视觉干扰。图6-2低透明度色彩网页设计(3)低度透明的色彩运用分析Low-levelTransparentColorApplicationAnalysis7柔和鲜嫩的色彩运用分析2PART8网页色彩应用分析SoltAndTenderColorsApplicationAnalysis6.2柔和鲜嫩的色彩运用分析扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年和2016年得到进一步的延续，其中马卡龙色系也许会常常出现在网页设计中。如图6-4所示的是著名的网盘服务Dropbox的官方网站，该网站使用了柔和扁平的配色方案，矢量插画与华丽的排版结合在一起，为用户带来可靠的功能和绝佳的体验。图6-4柔和鲜嫩色彩网页设计(1)96.2柔和鲜嫩的色彩运用分析

如图6-5所示的网页中，若干明亮的小色块组合成文字，给人一种欢快、动感的视觉感受。该网页不但音乐主题明确，而且网站色彩的设计也清新明快，让人过目难忘。图6-5

柔和鲜嫩色彩网页设计(3)网页色彩应用分析SoltAndTenderColorsApplicationAnalysis10偏灰的冷色系色彩运用分析3PART11偏灰的冷色系色彩运用分析AnalysisofColorApplicationofGreyAndColdColor偏灰的冷色系色彩是一种看起来比较百搭的颜色，但是实际上，要将这类颜色使用的恰如其分却并不是一件容易的事情。这类色彩表现的比较中性，所以搭配任何颜色都不会显得突兀，但也不算出挑，而要让色彩之间真正融合，应该选择清淡的粉色系，让网页看起来清新脱俗。6.3偏灰的冷色系色彩运用分析12

如图6-6所示的网页，风格优雅精致，配合美妙的粉色色彩，富有张力的排版和艺术化的风格，绝对是优秀设计的典范。6.3偏灰的冷色系色彩运用分析图6-6

偏灰的冷色系粉色网页设计(1)偏灰的冷色系色彩运用分析AnalysisofColorApplicationofGreyAndColdColor13

如图6-7所示的网页，加入了大图背景、精致的图标、扁平化的设计及粉色系色彩，能够很好地吸引浏览者的关注。6.3偏灰的冷色系色彩运用分析图6-7

偏灰的冷色系粉色网页设计(2)偏灰的冷色系色彩运用分析AnalysisofColorApplicationofGreyAndColdColor14图6-8所示的是一个美食相关的网站——世界烘培日。借助插画、矢量图形和大胆的个性化装饰字体以及粉色系色彩，网站设计师无所不用其极地试图勾起你的食欲，抓住用户的眼球。6.3偏灰的冷色系色彩运用分析图6-8

偏灰的冷色系粉色网页设计(3)偏灰的冷色系色彩运用分析AnalysisofColorApplicationofGreyAndColdColor15用高亮色凸显用户交互4PART16用高亮色凸显用户交互BrightColorsHighlightUseInteractions大片的高亮色设计一定会造成用户的视觉疲劳，令人很反感，但小部分的高亮色设计却能起到突出重点的作用，既能将内容有效的区分开来，又能保证与整体色调保持一致，还可以让用户进行很好地交互体验。如图6-9所示，这个有关音乐的网站，没有铺天盖地的设计元素，也没有精妙绝伦的创意，但是良好的浏览体验和细腻的处理令整个网站脱颖而出，利用亮色吸引用户并进行体验。6.4.用高亮色凸显用户交互图6-9

高亮色网页设计(1)17

如图6-10所示的网页，和其他堆砌产品的电商网站相比，它更富有活力，感觉更活泼，巧妙地运用了高亮的红色，激发了浏览者的购物欲望。6.4.用高亮色凸显用户交互图6-11高亮色网页设计(2)用高亮色凸显用户交互BrightColorsHighlightUseInteractions18蓝色是网页的“基本款”5PART19蓝色在网页设计中属于不会出错的颜色，当你举棋不定或是在色彩上产生困惑的时候，你可以用蓝色尝试一下，也许能顺利化解你的问题。

说到文物，人们往往会想到一些古朴的暖色，而央视大型文博探索类节目《国家宝藏》的官方网站却反其道而行之，运用蓝色表达科技的内涵，衬托了中国沉寂千年的国宝在新时代所焕发出的巨大生机，如图6-11所示。6.5.蓝色是网页的“基本款”图6-13蓝网页设计(1)蓝色是网页的“基本款”BlueIsTheBasicDesignofWebPages20

如图6-12所示的网页，在文案设计和视觉设计之间找到了平衡点，兼顾了视觉和阅读体验。此外，选取以蓝色调为主的图片作为背景，为整个网页营造出温馨的氛围。6.6.蓝色是网页的“基本款”图6-12蓝网页设计(2)蓝色是网页的“基本款”BlueIsTheBasicDesignofWebPages21

如图6-13所示的网页，将嫩黄色的动态图案均匀地平铺在高亮、高饱和的粉色上，使网页色彩充满了活力。使用C4D的三维纯色渲染技术做了背景GIF图，画面充满了仪式感。纯净的色彩加上空间布局，使整个界面生动了起来。同时，统一三维物体的色系也强化了立体画面的平面感。6.6.高饱和度的色彩运用分析图6-13高饱和色彩网页设计1蓝色是网页的“基本款”BlueIsTheBasicDesignofWebPages22蓝色是网页的“基本款”BlueIsTheBasicDesignofWebPages

如图6-14的页面，网页