第六章 网页色彩的趋势-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Web Color Tendency 第六章 网页色彩 的趋势 2 低度透明的色彩运用分析 Low-level Transparent Color Application Analysis 1 柔和鲜嫩的色彩运用分析 Solt And Tender Colors Application Analysis 2 偏灰的冷色系色彩运用分析 Analysis of Color Application of Grey And Cold Color 3 用高亮色凸显用户交互 Bright Colors Highlight Use Interactions 4 目 录 CONTENTS 蓝色是网页的“基本款” Blue Is The Basic Design of Web Pages 5 3 低度透明的色彩运用分析 1 PART 4 请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。 低度透明的色彩运用分析 Low-level Transparent Color Application Analysis 6.1 低度透明的色彩运用分析 透明度低的色彩很有可能成为2016年网页设计的色彩趋势。如图6-1所示的网页中，选用低透明度的色彩作为背景，与网页整体协调，并且使用小块的亮色突出主题。 图6-1 低透明度色彩网页设计(1) 5 请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。 6.1 低度透明的色彩运用分析 图6-2所示的网页是黑暗系电影《夜行者》的官方网站，将电影中阴暗的剧情呈现在网页上，简约现代的风格处理，透明度低的色彩背景让用户可以更加专注于视频和互动本身。 图6-2 低透明度色彩网页设计(2) 低度透明的色彩运用分析 Low-level Transparent Color Application Analysis 6 请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。请替换文字内容，修改文字内容，也可以直接复制你的内容到此。 6.1 低度透明的色彩运用分析 图6-3所示的是Union 的官网，虽然背景也采用了相对复杂的图片，但降低了背景色彩的透明度，使得图片、文字以及其他的装饰元素之间的搭配对比控制的很好，有视觉重心又不会觉得有视觉干扰。 图6-2 低透明度色彩网页设计(3) 低度透明的色彩运用分析 Low-level Transparent Color Application Analysis 7 柔和鲜嫩的色彩运用分析 2 PART 8 网页色彩应用分析 Solt And Tender Colors Application Analysis 6.2 柔和鲜嫩的色彩运用分析 扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年和2016年得到进一步的延续，其中马卡龙色系也许会常常出现在网页设计中。如图6-4所示的是著名的网盘服务Dropbox的官方网站，该网站使用了柔和扁平的配色方案，矢量插画与华丽的排版结合在一起，为用户带来可靠的功能和绝佳的体验。 图6-4 柔和鲜嫩色彩网页设计(1) 9 6.2 柔和鲜嫩的色彩运用分析 如图6-5所示的网页中，若干明亮的小色块组合成文字，给人一种欢快、动感的视觉感受。该网页不但音乐主题明确，而