《网站色彩构图-精简》由会员分享，可在线阅读，更多相关《网站色彩构图-精简（149页珍藏版）》请在金锄头文库上搜索。
1、WANGZHAN SECAI GOUTU,不同波长色彩的光信息作用于人的视觉器管，通过视觉神经传入大脑后，经过思维，与以往的记忆及经验产生联想，从而形成一系列的色彩心理反应。 这也是色彩能够控制人情感、感觉的一个重要因素。,色彩的冷暖 色彩本身并无冷暖的温度差别，是视觉 色彩引起人们对冷暖感觉的心理联想。 暖色：人们见到红、红橙、橙、黄橙、红紫等色后，马上联想到太阳、火焰、热血等物像，产生温暖、热烈、危险等感觉。 冷色：见到蓝、蓝紫、蓝绿等色后，则很易联想到太空、冰雪、海洋等物像，产生寒冷、理智、平静等感觉。,色彩的轻重 这主要与色彩的明度有关。明度高的色彩使人联想到蓝天、白云、彩霞及许多花卉
2、还有棉花，羊毛等。产生轻柔、飘浮、上升、敏捷、灵活等感觉。 明度低的色彩易使人联想钢铁，大理石等物品，产生沉重、稳定、降落等感觉。,色彩的前后 由各种不同波长的色彩在人眼视网膜上的成像有前后，红、橙等光波长的色在后面成像，感觉比较迫近，蓝、紫等光波短的色则在外侧成像，在同样距离内感觉就比较后退。 实际上这是视错觉的一种现象，一般暖色、纯色、高明度色、强烈对比色、大面积色、集中色等有前进感觉，相反，冷色、浊色、低明度色、弱对比色、小面积色、分散色等有后退感觉。,色彩的大小 由于色彩有前后的感觉，因而暖色、高明度色等有扩大、膨胀感，冷色、低明度色等有显小、收缩感。,色彩的华丽与质朴 色彩的三要素对
3、华丽及质朴感都有影响，其中纯度关系最大。明度高、纯度高的色彩，丰富、强对比 色彩感觉华丽、辉煌。明度低、纯度低的色彩，单纯、弱对比的色彩感觉质朴、古雅。但无化何种色彩，如果带上光泽，都能获得华丽的效果。,色彩的活泼与庄重 暖色、高纯度色、丰富多彩色、强对比色感觉跳跃、活泼有朝气，冷色、低纯度色、低明度色感觉庄重、严肃。,色彩的活泼与庄重 其影响最明显的是色相，红、橙、黄等鲜艳而明亮 的色彩给人以兴奋感，蓝、蓝绿、蓝紫等色使人感到沉着、平静。绿和紫为中性色，没有这种感觉。纯度的关系也很大，高纯度色兴奋感，低纯度色沉静感。最后是明度，暖以系中高明度、高纯度的色彩呈兴奋感，低明度、低纯度的色彩呈沉静
4、感。,点,能够吸引视线的东西，都是“点”。,线的基本性格： 垂直线富于生命力、力度感、伸展，庄严 水平线偏于稳定、平静、呆板的感觉 斜线有运动、动向、方向感 几何线有弹力、紧张，体现着规则美 自由曲线自由、潇洒、自如、随意、优美 细线精致、挺拔、锐利 粗线壮实、敦厚等等,线肌理的产生的不同情感、情态： 光滑线感觉平滑、纯净、畅快、随意 毛线轻松、朴实 粗线感觉粗犷、庄重 细线尖锐、精致 涩肌理感觉阻力等等,(1) 几何形的面，表现规则、平稳、较为理性的视觉效果。 (2 ) 自然形的面，不同外形的物体以面的形式出现后，给人以更为生动、厚实的视觉效果。 (3) 徒手的面:自由 (4) 有机形的面，
5、得出柔和、自然、抽象的面的形态。 (5) 偶然形的面，自由、活泼而富有哲理性。 (6) 人造形的面，较为理性的人文特点。,网站的视觉中心处在页面位置的不同，所表达的情感也就相应地不同，如： 视觉重心在上部时，感觉轻快、飘扬、积极、高昂； 视觉重心在下部时，感觉压抑、沉重、消沉、限制、低矮、稳定； 视觉重心在左侧时，感觉轻快、活跃、自由、舒展； 视觉重心在右侧时，感觉紧促、局限、庄重。,网站中，每一个元素如文字、图片、背景、按钮等都可以分别看作独立的点、线、面，而它们又必须是一个整体，围绕网站主题、内容与风格工作的整体。 所以在搭配中，怎样使这些元素在画面上和谐，达到预期的视觉效果，构成就起了很
6、大的作用。,在课程的开始部分，我们粗略学习了网站的栅格系统，它的作用就是把整个网站页面划分为数个部分，这看似是非常简单也无足轻重的工作，但正如在本节开头提到的，这是一项非常重要同时又是很困难的工作，因为栅格关系到页面元素的分布，视觉主次的控制，而这两项，是与色彩搭配同等甚至更重要的视觉设计项目。,页面元素的分布，顾名思义，就是网站上的文字、图片、动画、留白等在页面上的摆放情况。 我们在学习平面构成的时候就知道，在一个画面上几个简单的形状，如果位置、大小、方向都控制得很好，那这就是一幅很成功的作品，所以，构成的魅力就是如此巨大。,“网站设计尤是如此，就算是只有简单的文字与符号，哪怕没有图片，只要
7、把这些东西摆好了，也会比复杂眩目的特效组合更具吸引力。”,网站的制作人都想要在网站上放大量的信息，达到预期的宣传目的，而且这些信息，网站的所有者与设计者都希望每一个打开它的人把信息读完，在这里，除了内容、画面对受众有足够的吸引力之外，设计者最起码还应该对网站界面进行合理、巧妙的排布，这是重中之重。,一本书，一本很大的书，如果单页有60厘米宽，而且里面的留白又不是很多，文本就应该有40-50厘米宽，试想一下，如果不分栏，50厘米长的一行字，你能坚持看几行？如果当中没有图片衬托，你又能看几行？同样，一页书，划分为100个整齐排列的小方格，每个方格一张图片，你会看哪张？眼睛是不是觉得无所适从？这都是
8、视觉元素排布不合理的结果。,文本的长宽，图片的大小、数量、以及位置，等等，这些，都能够让人的视觉感觉舒适或是不舒适，至于是前者还是后者，就看设计者的功力和网站的定位了。,没有哪个在视觉上使人愉悦的网站会把页面元素像小学生写字一样规矩地依次排列，那只是堆砌。,人的视觉是具有焦点性的，也可以叫作点的焦点性，眼睛看到任何东西都会找一个点，一个能够最吸引视线的点，这就是视觉的焦点，如果找不到这一点，人眼就会不适。,网站的视觉界面规划，其实就是把整个页面分成若干块，也就是若干个点，这就是网站界面的栅格系统，而在这些点当中，我们还应当设计好当受众看到它们时，第一该看哪里，以二该看哪里，以及第三第四，规定好
9、眼睛的路线才不会产生视觉上的不适，这是视觉的引导，也是视觉层级。,网站界面的栅格化设计， 一个主要的目的就是为了体现视觉层级。,视觉层级的规划在美术设计中非常重要，它除了能让受众有舒适的视觉感受外，还能让他们看我们想让他们看的地方，这对广告来说举足轻重，让受众“看到”，宣传就成功了一大步。,栅格与视觉层级的要让受众从视觉上感到舒适，元素的分布与搭配也很重要，例如，图片的旁边是该放文字还是纯色块？这个文本该与左边的图片对齐还是稍微错开？诸如这一系列的问题，都是在网站的视觉设计中需要特别注意的。,一般来说，各种元素的搭配要有种类的对比，为什么一张普通的照片加上简单的文字就能成为优秀的设计作品？就是
10、因为图片与文字，它们是不同类型的元素搭配，这种对比使画面一下就丰富了起来，这是单纯的图片组合做不到的。,栅格还有另外一个含义：方格。,这个含义是针对信息量相对较大的网站页面的，因为网站的所有者想要受众阅读完整个网站的欲望，绝不会因为网站信息量的增大而减少，而如果一个信息量庞大的网站采用了很自由的构图，阅读起来是很困难的，这个时候设计者就会让页面规矩一点，秩序一点，除非网站上的信息并不需要受众一字不漏地全部阅读。,方格排列状的页面视觉划分，这也是网站采用得最多的构图形式：水平+垂直式，直线型分布是最容易阅读的，不过，也容易呆板。,当然，以上准则也不是一成不变的，我们可以有突破，可以有创新，这是任
11、何一种设计的精义。信息量庞大的网站构图也不一定非规矩不可，我们可以用一些很自由很跳跃的风格，但这需要设计者对色彩与形体具有极强的掌控能力，不过，这样的作品做好了，一定出类拔萃，因为它与众不同。,网站设计有一个特殊性，因为它是以电脑显示器或其他显示设备作为表现手段，而显示器的屏幕是有限的，我们当然也无法保证网站的界面就刚好与显示设备的屏幕一样大小，所以，分屏显示是网站设计特殊的地方，也是需要考虑在设计中的一个重要内容。,一个网站界面的第一屏，也就是打开网站首先出现在屏幕上的部分，是设计的重点部分，因为受众认可了已经看到的部分，才会对看不到的部分感兴趣。,除了吸引力的因素，在构图上还应考虑到：网站第一屏的界面，单看这部分应是完整的设计，整体看也应是完整的设计，换句话说，第一屏虽然必须完整，但是不能彻底独立，要让受众知道下面还有内容，而且第一屏与下面的内容衔接必须自然，在滚动条拖下时看起来也应是整体。这点和画册的设计异曲同工。,字体设计,文字最基本的传统的作用：辨认、阅读,文字与图像，欢喜冤家,标题与正文，法律与自由。,文字的装饰，正事不做，豆腐蘸醋？！,网站设计的色彩与构图是共同作用的，绝对不能忽视其中任何一个，它们两者都是利用视觉直接作用于人的情感的精灵。,
