中国IT资源网 设为首页
加入收藏
网站建设
您当前的位置:中国IT资源网 -> 文章 -> 设计学院 -> 网页制作 -> 文章内容
 网页界面设计系列教程

在人的视觉中所能感受到的色彩范围内,绝大部分是非高纯度的色,即含有一定程度灰的色。

  普通24位显示适配器可产生约1670万种颜色,虽然数字很大,但RGB的色彩范围要远远小于可见光谱的范围。由于CMYK与RGB分别是减色原理和加色原理,因此输出的图像与在显示器上看到的色彩相比要暗一些。Lab色彩模式以明度、纯度和色相对色彩进行表述,因此其在进行图像处理或在不同平台和系统间交换时,都不会产生色偏或失真的情况。

  人由亮处进入暗环境后,最初大约15分钟可以基本适应,达到完全的暗适应大约需要40分钟。

  从生理角度讲,眼睛最能适应的光是中等明度的全色光,即中间灰色,当外界光并非中间灰色时,视觉会自动调整这种不平衡现象,因而会出现视觉残像。为了降低视觉残像的影响,应避免使用高纯度的单一色彩,或是在纯色中加入一定量的灰。明度高的色彩在视网膜上形成的物象边缘会有一圈光包围着,视觉感受好像物象扩大了一些。

  不同色光在视网膜上所成影像位置有前差异,因此产生色彩的进退感。日光中波长较长的色光如红橙黄成像在视网膜的较前部位,因而产生色彩靠近的感觉;而波长较短的色光如绿蓝紫成像在视网膜的靠后部位,因而产生色彩后退的感觉。

  中国传统年画和西方教学的彩色玻璃艺术大量使用色相对比手法。色相的差别是由可见光波的波长差异造成的,查在色相对比中不能完全依据波长的差别来确定色相的对比程度,红色光与紫色光的波长差异虽然很大,但都处于可见光的两极,都接近不可见光的波长,因而从视觉感受上两者的色相是相近的。

  明度是色彩三要素中具有相对独立性的一个要素,它可以摆脱任何有彩色的特征而独立存在。色相和纯度都必须依赖明度而存在。

  色彩形状的认识程度主要取决于形的色彩与周围色彩的关系,特别是它们之间明度对比的关系,色相对比也可以造成对形的识别,但其作用远不如明度对比那么重要,例如,红绿对比是最强的色相对比,但因明度差异较小,形的清晰度不高,浅绿与深绿配色,虽然属于同类色相,但明度差别大,因此形就具有较高的清晰度。

  为了达到色彩和谐的目的,除改变色彩的三要素外,合理安排各种色彩所占的面积是调整色彩配合效果的有效手段。当两种色彩以相等的面积出现时,色彩的冲突达到最高峰,对比效果最为突出,如将一方面积减小力量削弱,整体色彩对比效果也就相应减弱。
色彩的力量取决于色彩的明度和面积,明度比例如下:黄:橙:红:紫:蓝:绿=9:8:6:3:4:6

  由上述比例可推导出各对补色的明度比例关系,并进一步确定各补色之间达到色彩力量平衡的面积比例关系:黄:紫=1:3 橙:蓝=1:2 红:绿=1:1

  色彩面积比例关系依据的原理是人视觉生理需求的色量平衡,即调和出视觉乐于接受的中性灰色所需要的色量比例。该平衡理论可以通过色盘的旋转混合的方法得以验证。

  从上面的理论看,红绿配色面积比1:1时为和谐,但实际应用中红绿面积相等时会给人以刺激强烈的感受,并不能真正体现出色彩的调和统一,这是由于色彩的纯度在配色中起到相当重要的作用,红色的纯度大约为绿色的两倍,因此在配色时红的面积应缩小至绿 

  色面积的二分之一,这样才能获得调和的色彩效果。

  色彩的秩序调和主要依靠色立体来实现,孟赛尔色立体和奥斯特瓦德色立体都是可应用的色彩模型。在色立体中做规则几何线形,线形所经过的色彩就会形成有序的排列。

  色彩的轻重感主要取决于色彩的明度,明度高的色感觉轻,明度低的色感觉重,在相等明度条件下,冷色一般比暖色感觉略轻。色彩构图中上轻下重符合人的视觉习惯,轻色通常用于上部,重色用于下部,如果界面上部为重色时,在下部的边缘部位应呼应一块重色范围,可以达到平衡构图的目的。以语言进行信息传达时,语气、语调以及面部表情、姿态手势是语言的辅助和补充,而在界面设计中,文字的字体、规格及其编排形式,就相当于文字的辅助信息传达手段。

  宋体字型结构方中有圆,刚柔相济,既典雅庄重,又不失韵昧灵气,从视觉角度来说,宋体阅读最省目力,不易造成视觉疲劳,具有很好的易读性和识别性。

  楷体字型柔和悦目,间架结构舒张有度,可读性和识别性均较好,适用于较长的文本段落,也可用于标题。
  仿宋体笔画粗细均匀,秀丽挺拔,有轻快、易读的特点,适用于文本段落。因其字型娟秀,力度感差,故不宜用作标题。
  黑体不仅庄重醒目,而且极富现代感,因其形体粗壮,在较小字体级数时宜彩等线体(即细黑),否则不易识别。
  圆体视觉冲击力不如黑体,但在视觉心理上给人以明亮清新、轻松愉快的感觉,但其识别性弱,故只适宜作标题性文字。
  手写体分为两种,一种来源于传统书法,如隶书体,行书体,另一种是以现代风格创造的自由手写体,如广告体,POP体。手写体只适用于标题和广告性文字,长篇文本段落和小字体级数时不宜使用,应尽量避免在同一页面中使用两种不同的手写体,因为手写体形态特征鲜明显著,很难形成统一风格,不同手写体易造成界面杂乱的视觉形象,手写体与黑体宋体等规范的字体相配合,则会产生动静相宜,相得宜彰的效果。

  美术体是在宋体、黑体等规范字体基础上变化而成的各种字体,如综艺体、琥珀体。美术体具有鲜明的风格特征,不适于文本段落,也不宜混杂使用,多用于字体级数较大的标题,发挥引人注目,活跃界面气氛的作用。

  拉丁字母依据其基本结构可以分为三种类型:
  (1)饰线体(Serif):此类字体在笔画末端带有装饰性部分,笔画精细对比明显,与中文的宋体具有近似形态特征,饰线体在阅读时具有较好的易读性,适于用作长篇幅文本段落。代表字体是新罗马体(Times New Roman)。
  (2)无饰线体(Sans Serif):笔画的粗细对比不明显,笔画末端没有装饰性部分,字体形态与中文的黑体相类似。由于其笔画粗细均匀,故在远距离易于辨认,具有很好的识别性,多用于标题和指示性文字。无饰线体具有简洁规整的形态特征,符合现代的审美标准。代表字体是赫尔维梯卡体(Helvetica)。
  (3)装饰体(Decorative,也称Display):即通常所说的“花”体,由于此类字体信笺于形式的装饰意味,阅读时较为费力,易读性较差,只适合于标题或较短文本,类似于中文的美术体和手写体。代表字体是草体(Script)。

  在某些特殊场合,如广告或展示性的短语中,拉丁字母全部使用小写字母,能够造成一种平易近人的亲切感。

  拉丁字母字体大都包含字幅(正、长、扁)、黑度(细、粗、超粗)、直斜的变化,因而由一种基本字型可以变化出多种具有相似特征的同族字体,这些字体统称为“字族”。

  同一页面中字体应尽量在同一字族中选用,以保证界面具有明确、统一的风格特征。

  在计算机字库中,有关字体特征的表示大多彩缩略语,如Cn(Condensed,长体),Ex(Expanded,扁体),Lt(Light,细),Med(Medium,中粗),DemBol或Dm(Demi Bold,半粗),Bd(Bold,粗),XBd(Extra Bold,特粗),It(Italic,斜体)等。中文正文的字符数每行以20-35个为宜,西文则约40-70个字符最易阅读,因此较宽的文字幅面应考虑采用分栏的排布方式。通常设定行距为字高的150-200%,西文的行距通常小于中文行距。

  粗细对比是刚与柔的对比,也有人称之为男性性格与女性性格的对比。在同一行文字中使用粗细对比的效果最为强烈。粗字少细字多易取得平衡,给人以明快新颖的感觉,细字少粗字多,则不易平衡,但往往会产生具有幽默感的特殊效果。
界面中文字编排要求视觉上产生类似于天平平衡的印象,失去平衡的文字编排设计,将得不到浏览者的信赖,并给人以粗劣的印象。
可能通过左右延伸的水平线,上下延伸的垂直线,动感的弧线和斜线,穿插的图形来诱导视线依照设计师安排好的结构形式顺序浏览。

  在界面的四角配置文字或符号,界面的势力范围就明确地确定下来,界面中即使存在让人感觉动荡不定的元素也会因此而稳定下来。在四角中,左上和右下具有特殊的吸引力,是处理的重点,处理得好,可以使界面左右均衡,同时还会形成从左上到右下沿对角线流动的视觉过程,给人以自然稳定的感觉。

  非规律性造型形式的错落变化,应出现在周围有较充分的留白空间的场所,效果较为显著。如在界面中央或正上方表现效果较好,标题性文字往往使用此手法处理。

  分栏式结构中,文字群体通常只出现在一栏中,每行的字符数相对较少,易于浏览。分栏中如果都排布文字群体,界面会显得十分拥挤,故不宜采用。其他栏中可设置目录、标题、导航等简洁的文字信息,整体形式繁简对比,疏密得当。国内使用较多的是三分栏,国外四分栏式结构则较为普遍。

 网页界面中除了点、线面这些实体造型元素,其余的空间就是“空白”,空白不一定是“白”,它可以是与背景色相同的表示“虚”的空间范围。空白能使实体在视觉上产生动态,获得张力。在中国传统绘画中,空白的表现力丰富,同时又使笔墨生支灵妙,无怪乎古人所说“形得之于形外”,“计白守黑”。页面中巧妙地留白,讲究空白之美,有助于更好地烘托主题,渲染气氛,集中视线,加强空间层次,使版面疏密有序,布局清晰。

  黄金之比所以有如此神圣和不可思议的力量,乃是因为黄金比是含有无理数 的数字,用公式表示为Φ=(1+)/2约=1.618。黄金矩形去掉短边为边长的正方形时,剩下的矩形仍为黄金矩形。

  以正方形的对角线为长边,所得矩形为矩形,再以矩形的对角线为长边,所得矩形为矩形,以此类推,可以得到任意自然数的矩形。 矩形对折成半时,面积虽然只剩一半,但形状不变,仍是矩形。

  网页界面的版式设计中,其比例关系一般体现在:页面所限定空间的长宽比,实体内容与虚空间(空白)的面积比,页面被分割的比例,图文的关系比以及各造型元素内部的比例等形式上的数量关系。
对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静,如同中国古代宫殿一样庄重、严肃,体现了一种古典主义的风格。为避免对称产生的单调和呆板,要在对称中略带变化。

  视觉艺术中的节奏和韵律来自音乐的概念,节奏较多地强调“节拍”,韵律较多地强调“变化”,如果说韵律感不够,是指缺少变化,过于呆板;如果说节奏感不强,是指变化缺乏条理规则。

  对比是指因多种元素相异的特点相比较而更加鲜明强烈的紧张感。对比有形的对比(大小、方圆、长短、曲直、宽窄),色的对比(色相、明度、纯度、冷暖),质的对比(刚柔、粗细、强弱、干湿、轻重、软硬、虚实),势的对比(疾缓、疏密、动静、抑扬、进退)等。对比关系越清晰,视觉效果就越强烈,在一个页面中,通常是多种对比关系同时并存,以产生多姿多彩的表现效果。
人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。视线的变化习惯于从左到右,从上到下和顺时针方向运动。
调查显示,视区内上部比下部注目程度高,左侧比右侧更引人注意。

  欲使网页在传递视觉信息时顺畅高效,页面须具备清晰的条理性和组织性,产生一定的主从关系。常采取的方式有:
  (1)加强主从对象的大小对比。
  (2)加大主体形象周围的空白。
  (3)加强主从对象之间的色彩对比。
  (4)将主体形象在页面反复出现,强化与视线的接触频率,这种强化方式尤其适合于以产品为主体形象的网页界面。
  (5)加强主从对象在形态上“势”的对比。一般来说,网页的版面中水平或垂直的形态居多,如果主体形象运用适当的斜线和曲线,就会从水平、垂直线构成的环境中突显出来。

  通过视觉流程,设计师运用视觉移动规律,将多种视觉信息进行有序组织,诱导浏者的视线依设计师的意图进行流动,从而使浏览者清晰、流畅、快捷地接受最佳信息。视觉流程的几种表现方式:
  (1)单向视觉流程:横向,竖向,斜向。
  (2)曲线视觉流程。
  (3)导向视觉流程:借助诱导因素来实现。
    ①线形导向:以线、文字等线形元素来引导观者的视线。
    ②形象导向:以图片中人或物的朝向来引导观者的视线,如人物的目光方向,一个座椅的朝向等。
    ③指示导向:通过指示性的箭头、手指或具有透视感的线条来引导视线。
  (4)重心视觉流程:视觉会沿着形象方向与力度的伸展来变换、运动,如表现向心力或重力的视线运动。
  (5)反复视觉流程:其运动虽不如单向、曲线、重心视觉流程运动感强烈,但更富于节奏和秩序美。
  (6)散点视觉流程:没有固定的视觉流动线,强调一种感性、自由性、随意性、偶然性。

  对于栏目设置比较复杂的网站,如果显示所有与该页相关的导航,页面势必变得相当庞大,影响了版面的整体布局。最好的办法是将此页面做成弹出窗口,不影响原有页面的导航信息,同时只设置与该页关系最近的导航链接和首页链接。

  在视觉习惯上,页面的垂直均匀分割,当左右两部分形成强烈对比时,会造成视觉心理的不平衡。这时,可将分割线作部分或全部的弱化处理,或在分割处加入其他元素,使左右部分的过渡自然而和谐。

周期、关键帧和行为被称为动画的三个属性。
使用简单的GIF动画生成的广告图形,点击率会上升10%-25%,而动画广告的面积平均比静态广告小5%-25%。
动画由于在信息的方向性诱导方面的优势,除了能够加强视线在视觉传达领域的注意外,在引导视线方面能够发挥更大的能动性,引导视线完全按照设计师的意图去浏览,以最快捷的途径,最有效的感知方式获取视觉信息,使设计师能够更有效地影响浏览者的视线运动轨迹。
当人们面对平面上一些静止的物体时,会在它们之间平分其注意力,如果其中一个物体突然动起来,所有的注意力在1/5秒后都将转向它。
人的正常视觉容量约为每秒25比特,即大约每秒4个汉字,每分钟约250个字左右。
动画表达追求的是信息的准确传达,意念的清晰易懂。而做到这一点取决于两个方面:一是动画本身有好的表现手法和设计,使每一个画面或主要变化以最清楚和最有效的方式呈现出来;二是好的时间掌握。画面转换的时间要恰到好处,太慢则感觉节奏缓慢,在里面寻找不到兴奋点,视觉心理就会感觉空洞、单调,使注意力分散;太快则浏览者还没看清要传达的信息,动作已经结束,创意没有意义,设计也就失败了。
一般一个页面有1-2个动画区域是比较适度的。如果在页面上必须出现不止一个动画,也应给予较大的区别,如采用面积的大小对比,或使动画的演示有时间差别等。
常见的动画设计效果:
(1)色彩循环动画
(2)元素沿直线或曲线的滚动
(3)元素的跳动与闪动。在跳动后保持5-10秒的静止,这样跳动吸引浏览者的视线,静止则使浏览者能看清图像。
(4)元素的淡入与淡出。
(5)元素飞入画面。
(6)元素的缓慢旋转,通常旋转几周后就停顿一会儿。
(7)元素的爆炸与组合。
(8)闪烁和灯光效果。
(9)元素之间的过渡与变形。将一幅图象的部分或整体毫无痕迹地融入另一幅图象中。

上一页  [1] [2] [3] [4] 


评论】【打印】【 】【关闭
  解析PHP中的内存管理问题 
  搭建SSH时的思考和遇到的几个问题
 
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 在线投稿

中国IT资源网版权所有
Copyright © 2002-2006 Gz235.Com All Rights Reserved
中华人民共和国电信与信息服务业务经营许可证编号 粤ICP备05022918号
本站在线服务QQ:105754049 程序定制:105754049 广告受理/投搞/投诉:105754049
本站所提供的程序均来自于 Internet(下载后首先检测是否有毒),仅供学习使用。因其产生的一切问题本站不负任何责任