网页设计色彩与风格 第1篇
这是由一种色相构 成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比，但这里先讲述带主导色的配色案例。
同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。
twitter的案例
整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内 容信息，比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter的品牌形象。
观点：颜色差分割页面层次和模块，并代表不同功能任务属性。
近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来也很和谐。
ALIDP的案例
纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻近色使页面不那么单调，再把色彩饱和度降低用于不同背景色和模块划分。
观点：基于品牌色的邻近色运用，灵活运用到各类控件中。
类似色配色也是常用的配色方法，对比不强给人色感平静、调和的感觉。
BENMAPT的案例
红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导 航控件、按钮和图标，同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。
观点：基于品牌色的类似色运用，有主次地用到页面各类控件和主体内容中。
中差色配色
中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。
facebook的案例
颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运用，传播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出 绿色按钮任务层级为最高。深蓝色吊顶导航打通整站路径，并有引导用户向下阅读之意。
观点：利用色彩对比突出按钮任务优先级，增加页面气氛。
主导的对比配色需要精准地控制色彩搭配和面积，其中主导 色会带动页面气氛，产生激烈的心理感受。
YouTube的案例
红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任务，贯穿整个站点的可操作提示，又能体现品牌形象。红色多代表导航指引和类目分类，蓝色代表登录按钮、默认 用户头像和标题，展示用户所产生的内容信息。
观点：红蓝色反应不同交互和信息的可操作性，针对系统操作和用户操作的区分。
用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不会 受不必要的色彩干扰。这种过配色比较通用，非常经典。
Bechan的案例
网页设计色彩与风格 第2篇
1、水墨
水墨画是中华文明的代表性艺术形式，在世界美术的多元格局中独树一帜。它以墨为主要原料，加以清水调和出不同的浓淡层次，在画家笔下呈现出气象万千的形态。由于毛笔中水和墨的含量的差别，从而在水墨画中产生浓、淡、枯、湿、焦等不同的墨色韵昧，带给人丰富的心理感受。笔和墨两者是相辅相成的，画家用笔的轻重缓急、笔触线条的长短曲直亦能带来不同的视觉感受。传统风格的网页设计中经常可以见到水墨元素的运用，根据主网站主题的不同也会选用不同的笔墨表现技法。设计师为了获得更加充实的页面效果，经常会设计水印式的网页背景，将大幅的水墨图形化作极浅的底纹衬于网页底层，水墨元素虽然不是页面的主体，但是能创造出深远的画面意境和空间感。如果没有若隐若现的背景图案，整个页面也会黯然失色。水墨也可作为网页细节元素来应用，以主体图形或标题装饰条的形式出现。例如“乌镇”官方网页的设计，在笔墨运用上采用了大笔泼墨的技法，页面构图以水墨色块做分割，墨迹中又融合了乌镇水乡的风光摄影，画面显得奔放大气，中国水墨的韵味有机地融入网页设计当中。
2、留白
在水墨画中，空白的画面和着墨的地方一样，都是整体的组成部分。水墨画构图中讲究聚散、远近、开合、虚实、呼应等方法，将这些对立的关系统一于画面之中，才能形成好的作品。在传统风格的网页设计中，注重虚实空间的呼应，“实空间”是指文字、图形、色块等视觉元素，“虚空间”是指上述视觉元素之外的空白部分或背景。虚实空间是一种相互作用、相互影响的共生的关系，“实空间”吸引视线，产生分量感，“虚空间”产生距离，更好地突出网页主体元素。“画鱼不画水”的妙处就是通过留白使观者有更大的想象空间。网页设计中任何一处版式空间都是需要设计和经营的，设计师在排版时要注重疏密结合，主次分明。文字和图片的大小要适度，画面不能够填得太满。假如页面左右两个部分的分别为图形和文字，可以适当地调整它们所占面积的大小，左边图形内容很重要，可以放得靠上一些，占用较多的空间;右边文字内容少，可以用较小的字号编排在右下方，上面留出大量空白，这样就调整了整个页面的空间分配，创造出版式的视觉对比。通过留白的方法，可以合理的调剂网页上各种视觉要素之间的关系，页面要素的排布平衡又起伏跌宕，浏览起来富有极强的节奏感。
3、传统图形
中国传统图形的范围很广，它既包括中国历代的能工巧匠创作出来的立体器物，也包括在平面上或其它艺术形态上表现出来的传统纹样和装饰，例如太极图、书法、篆刻、中国结、彩陶、青铜器、帛画、壁画、石窟、瓷器、鼓、古琴、刺绣、蜡染、年画、舞狮、唐装、剪纸、皮影、年画、服饰、脸谱、泥人、面塑、建筑等，都为传统风格的网页设计提供了丰富的图式语言。中国传统图形是中国悠久文化的视觉呈现，包含着人们对美好生活的追求与向往，运用到网页设计中，既传达了设计理念又传承了民族文化。在很多传统风格的网页设计中，可以看到设计师将传统吉祥纹样与导航条、板块边框、按钮等融合到一起来进行创作，无论从美感还是寓意上都很完美，充满了传统文化的气息。网页是为了交流信息而存在的因互联网媒体的动态性要求设计者需离开的二维静态的设计模式，进入包含影像和声音的三维世界，才能设计出生动的网页作品。运用传统图形时可以参考点线面构成的形式规律，将图片解构后的局部元素以点线面的形式存在于网页中，通过相互穿插、相互对比，形成了统一、丰富的视觉心理感受。图片可以和网页特效结合使用，当鼠标放到图片上，图片就会出现相应的大小或形态上的变化，甚至产生一段活泼的小动画，增加了用户感受的多元性。
4、色彩
使用有特色的色彩可以产生强烈的视觉效果，网页色彩的变化可以使得网页更加生动，快速吸引用户的注意。网页设计中的视觉形象众多，如果使用太多颜色则会使页面显得花哨凌乱，难以找到视觉重心。
在设计网页时应首先确定好主色调，选择能够反映网站主题和风格的颜色。传统风格的网页设计特别强调色彩的整体和谐，通常使用较为厚重雅致的背景色，将网页界面的色彩设计控制在一种色系里。而富于变化的对比色被用来点缀个别形象，以突出重点部分，丰富画面效果，如网页的Logo、标题、按钮等。有些网页借鉴了水墨画的用色，将色彩和墨色相结合，以黑白墨色为页面主色调，让色彩成为黑白画面中最亮丽夺目的一点。还有些网页使用了中国传统文化中的象征色彩，例如“文化洛阳”网站的设计，以黄色作为画面当中的主色调，明黄色在网页顶部的背景色和大面积的图片中多次出现，与黄色搭配和谐的褐色和土黄色则应用在标题、边框、列表符号等元素中。黄色在中国五行色彩体系中被认为是最重要的色彩，代表“土”的性质，五行中以“土”为中心，因而黄色被用来作为皇家的专用色，代表着国家和权力。“文化洛阳”网站的色彩象征着十三朝古都洛阳的厚重历史和悠久文明，体现出洛阳地处中原的地域特色，应用色彩与传统文化理念的结合，丰富了设计的视觉表现力，既能体现形式美，又能深化作品的内涵。
网页设计色彩与风格 第3篇
http://
活泼诱人
http://
简单醒目
https://
红色生动
http://ides/
高雅亲切
http:///
未来科技
https://www.
结构动力
https://www.
极简温暖
http://www.
生动亮眼
https://www.
艺术与创意
http://
商业传统
http://
蓝色清爽
https://www.
现代极简
http://
玫瑰红和蓝莓
https://www.ehind-the-scenes/streetview/treks/petra/#streetview
华丽的对比
http:///
明亮对比
http:///it/
时尚精致
http://www.
扁平化设计
https://alive
独特组合
http://
欢快充满活力
http://www.
色彩充沛
http://
勇敢无畏
http://
优雅经典
https://www.mith/#!/
公司商务
https://www.
引入注目
https://
平静舒缓
http://www.
PS：别看这些网站的首页看起来普普通通，除了配色值得参考，打开网站后，你会发现互动体验和许多小细节设置也非常棒，建议PC端打开哦~
网页设计色彩与风格 第4篇
由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色 相对比效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的纯度对比效果。
色彩间对比视觉冲击强烈，容易吸引用户注意，使用时经常大范围搭配。
VISA的案例
VISA是一个信用卡品牌， 深蓝色传达和平安全的品牌形象，黄色能让用户产生兴奋幸福感。另外蓝色降低明度后再和黄色搭配，对比鲜明之余还能缓和视觉疲劳。
观点： 不管是整体对比还是局部对比，对比色给人强烈的视觉冲击，结合色彩心理学对品牌传达效果更佳。
三色对比色相上更为丰富，通过加强色调重点突出某一种颜色，且在色彩面积更为讲究。
NAVER的案例
大面积绿色作为站点主导航，形象鲜明突出。使用品牌色对应的两种中差色作二级导航，并降低其中一方蓝色系明度，再用同色 调的西瓜红作为当前位置状态，二级导航内部对比非常强烈却不影响主导航效果。
观点： 三色对比中西瓜红作为强调色限定在小面积展现非常关键，面积大小直接影响画面平衡感。
多色对比给人丰富饱满的感觉 ，色彩搭配协调会使页面会非常精致，模块感强烈。
Metro的案例
Metro风格采用大量色彩，分隔不同的信息模块。保持大模块区域面积相等，模块内部可以细分出不同内容层级，单色模块只承载一种信息内容，配 上对应功能图标识别性高。
观点：色彩色相对比、色彩面积对比，只要保持一定的比例关系，页面也能整整有序。
相对与色相对比，纯度差对比，对比色彩的选择非常多，设计应用范围广泛，可用于一些突出品牌 、营销类的场景。
PINTEREST的案例
页面中心登录模块，通过降低纯度处理制造无色相背景，再利用红色按钮的对比，形成纯度差关系。与色相对比相较，纯色对比冲突感刺激感相对小一些，非常容易突出主体内容的真实性。
观点： 运用对比重要的是对比例的把握，面积、构 图、节奏、颜色、位置等一切可以发生变化的元素，形成视觉的强烈冲突。
明度对比接近生活实际反映，通过环境远近、日照角度等明暗关系，设计趋于真实。
ARKTIS的案例
明度对比够构成画面的空 间纵深层次，呈现远近的对比关系，高明度突出近景主体内容，低明度表现远景的距离。而明度差使人注意力集中在高亮区域，呈现出药瓶的真实写照。
观点： 明度对比使页面显得更单纯、统一，而高低明度差可产生距离关系。
总结：
色彩是最能引起心境共鸣和情绪认知的元素，三原色能调配出非常丰富的色彩，色彩搭配更是千变万化。设计配色时，我们可以摒弃一些传统的默认样式，了解设计背后的需求目的，思考色彩对页面场景表现、情感传达等作用，从而有依据、有条理、 有方法地构建色彩搭配方案。
声明:文章内容来自网络侵权请主动联系,进行删除.
网页设计色彩与风格 第5篇
这是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。即使出现多种 色相，只要保持色调一致，画面也能呈现整体统一性。
SHOTFOLIO的案例
清澈调子使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较高的协调度。蓝色另页面产生安静冰冷的气氛，茶色让我们想起大地泥 土的厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。
观点：互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果。
概念应用的案例
阴暗的色调渲染场景氛围 ，通过不同色相的色彩变化丰富信息分类，降低色彩饱和度使各色块协调并融入场景，白色和明亮的青绿色作为信息载体呈现。
Tips：多色彩经过统一色调处理，区域间非常协调，也不影响整体页面阴暗气氛表现。
Kids plus的案例
明亮的颜色活泼清晰，热闹的气氛和醒目的卡通形像叙述着一场庆典，但铺满高纯度的色彩，过于刺激，不适宜长时间游览。
观点：饱和度与纯度特性明显的搭配，在达到视觉冲击力的同时，可适当采用对比色或降低明度等方法调和视觉表现 。
LEES FERRY的案例
页面以深暗偏灰色调为主，不同的色彩搭配，像在叙述着不同的故事，白色文字的排版，整个页面显得厚重精致，小区域微渐变增加版面质感。
观点：以低暗色调构成整体画面氛围，小面积明亮部分不会影响整体感觉。
Very的案例
柔和的调子使页面显得明快温暖，就算色彩很多也不会造成视觉 负重。页面的同色调搭配，颜色作为不同模块的信息分类，不抢主体的重点，还能衬托不同类型载体的内容信息。
观点：同色调不同色彩的模块，就算承载着不同的信息内容也能表现很和谐。
这是由同一或 类似色调中的色相变化构成的配色类型，与主导色调配色中的属于同类技法。区别在于色调分布平均，没有过深或过浅的模块，色调范围更为严格。
Tumblr的案例
在实际的设计运用中，常会用些更综合的手法，例如整体有主导 色调，小范围布局会采用同色调搭配。拿tumblr的发布模块来说，虽然页面有自己的主色调，但小模块使用同色调不同色彩的功能按钮，结合色相变化和图形表达不同的功能点，众多的按钮放在一起，由于同色调原因模块非常稳定统一。
观点：综合运用的情况， 整体界面是有主导色调，在布局例如重点图标等是同色调配色灵活运用。
这是由同一色相的色调差构成的配色类型，属于单一色彩配色的一种。 与主导色调配色中的同色系配色属于同类技法。从理论上来讲，在 同一色相下的色调不存在色相差异，而是通过不同的色调阶层搭配形成，可以理解为色调配色的一种。
Genrecolours的案 例
拿紫色界面来说，利用同一色相通过色调深浅对比，营造页面空间层次。虽然色彩深浅搭配合理，但有些难以区分主次，由于是同一色相搭配，颜 色的特性决定着心理感受。
观点：同色深浅配色有着极高的统一性，但有点枯燥。