交互元素设计.ppt

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