交互元素设计.ppt

网页界面设计
学****方法
色彩作为传达网站形象的首位视觉要素,会给访问者留下深刻长久的印象。网页设计的成败,在很大程度上取决于色彩运用的优劣。
网页的色彩创作拥有自身的设计规则,与其他视觉形式有着较大的差异。
快速提高网页色彩设计应用水平以及面对客户阐述色彩选择理由时,需要具备色彩基础理论知识,同时汲取一些著名网站的用色经验。
Company Logo
色彩原理——色彩三要素及色彩对比
色相即色彩的相貌。红、橙、黄、绿、蓝、紫是基本色,它们相互混合就呈现出不同的色彩,也就是不同的色相。
纯度:指色彩的鲜艳程度,也叫饱和度、彩度。原色是纯度最高的色彩。颜色混合的次数越多,纯度越低,反之,纯度则高。原色中混入补色,纯度会立即降低、变灰
明度:指色彩的亮度或明度。颜色有深浅、明暗的变化。比如,深黄、中黄、淡黄、柠檬黄等黄颜色在明度上就不一样,紫红、深红、玫瑰红、大红、朱红、桔红等红颜色在亮度上也不尽相同。这些颜色在明暗、深浅上的不同变化,也就是色彩的又一重要特征一一明度变化。
Company Logo
24色色环
Company Logo
色相对比的基本类型  两种以上色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面,其对比强弱程度取决于色相之间在色相环上的距离(角度),距离(角度)越小对比越强,反之则对比越弱。
色彩原理——色彩三要素及色彩对比
Company Logo
色彩原理——色彩三要素及色彩对比
色相对比的基本类型 
 (1)无彩色对比 无彩色对比虽然无色相,但它们的组合在实用方同很有价值。如黑与白 、黑与灰、中灰与浅灰,或黑与白与灰、黑与深灰与浅灰等。对比效果感觉大方、庄重、高雅而富有现代感,但也易产生过于素净的单调感。 (2)无彩色与有彩色对比 如黑与红、灰与紫,或黑与白与黄、白与灰与蓝等。对比效果感觉既大方 又活泼,无彩色面积大时,偏于高雅、庄重,有彩色面积大时活泼感加强。
( 3)同种色相对比 一种色相的不同明度或不同纯度变化的对比,俗称姐妹色组合。如蓝与浅蓝(蓝+白)色对比,橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。对比效果感觉统一、文静、雅致、含蓄、稳重,但也易产生单调、呆板的弊病。 (4)无彩色与同种色相比 如白与深蓝与浅蓝、黑与桔与咖啡色等对比,其效果综合了(2)和(3)类型的优点。感觉既有一定层次,又显大方、活泼、稳定。
Company Logo
色彩原理——色彩三要素及色彩对比
色相对比的基本类型
2、调和对比 (1)邻接色相对比 色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。如红橙与橙与黄橙色对比等。效果感觉柔和、和谐、雅致、文静,但也感觉单调、模糊、乏味、无力,必须调节明度差来加强效果。
(2)类似色相对比 色相对比距离约60度左右,为较弱对比类型,如红与黄橙色对比等。效果较丰富、活泼,但又不失统一、雅致、和谐的感觉。 (3)中差色相对比 色相对比距离约90度左右,为中对比类型,如黄与绿色对比等,效果明快、活泼、饱满、使人兴奋,感觉有兴趣,对比既有相当力度,但又不失调和之感。
Company Logo
色彩原理——色彩三要素及色彩对比
色相对比的基本类型
 (1)对比色相对比 色相对比距离约120度左右,为强对比类型,如黄绿与红紫色对比等。效果强烈、醒目、有力、活泼、丰富,但也不易统一而感杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手段来改善对比效果。
(2)补色对比 色相对比距离180度,为极端对比类型,如红与蓝绿、黄与蓝紫色对比等。效果强烈、眩目、响亮、极有力,但若处理不当,易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。
Company Logo
色彩原理——色彩三要素及色彩对比
明度对比的基本类型 两种以上色相组合后,由于明度不同而形成的色彩对比效果称为明度 对比。它是色彩对比的一个重要方面,是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。
其对比强决于色彩在明度等差色级数,通常把1——3划为低明度区,8——10划为高明度区,4——7划为中明度区。在选择色彩进行组合时,当基调色与对比色间隔距离在5级以上时,称为长(强)对比,3——5级时称为中对比,1——2级时称为短(弱)对比。据此可划分为九种明度对比基本类型。
Company Logo
色彩原理——色彩三要素及色彩对比
明度对比的基本类型 (1)高长调 如10:8:1等,其中10为浅基调色,面积应大,8为浅配合色,面积也较大,1 为深对比色,面积应小。该调明暗反差大,感觉刺激、明快、积极、活泼、强烈。 (2