高校门户网站视觉界面色彩运用探析

来源 :中国教育信息化·高教职教 | 被引量 : 0次 | 上传用户:AEXSN
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘要:文章借助于调查研究的方法,从网站的主色调、辅助色、色彩数量、文字色彩的视觉呈现等方面入手,对高校门户网站(以江苏省高校为例)色彩运用情况进行了调查与分析。从统计数据情况窥见当前高校门户网站在色彩运用方面普遍存在的问题,同时为高校门户网站视觉界面色彩的科学运用提出合理建议。
  关键词:色彩运用;高校;门户网站;调查研究
  中图分类号:G443 文献标志码:A 文章编号:1673-8454(2012)19-0027-04
  高校门户网站是校内外用户获取高校信息资源的起点,是面向社会各界展示高校办学特点、文化内涵的窗口,其所提供的信息类型和服务项目、网站本身设计的优劣、网页界面美观与否, 已经成为衡量一所高校校园信息化程度和社会声誉的一个重要标志[1]。在注重用户体验的今天,想从众多网站中脱颖而出,美观、友好的视觉界面必不可少。调查表明,用户对网站的第一印象来自于网站的色彩,色彩在一定程度上决定了网站视觉界面的艺术感染力与视觉冲击力。良好、恰当的色彩运用可以增强网站的用户体验,提升高校网站品质与网络形象,正确传达出高校的文化内涵。
  本文通过对高校门户网站(以江苏省为例)色彩应用情况的调查,分析思考国内高校门户网站在色彩运用中存在的问题,从主色调选取、辅助色、点缀色运用、色彩数量、文字色彩的视觉呈现等方面出发,提出合理化建议,为国内高校门户网站色彩科学合理运用提供参考。
  一、高校门户网站色彩的构成
  高校门户网站色彩的构成与普通网站并没有不同,一般是由网页页面的“框架色彩”与“内容色彩”构成的。“框架色彩”主要指页面中用于版式排布,固定不变(除非改版)部分的色彩,包括标志(Logo)、页眉、导航条、页脚、侧边栏、背景等部位的色彩等。“内容色彩”则是指页面中需要经常更新,提供给用户实质信息的“内容”的色彩,包括文字、横幅广告(Banner)、新闻图片、图标、动画等内容的色彩。
  从色彩功能组成上来看,高校门户网站色彩是由网站页面的主色调、辅助色、点缀色(也被称为点睛色)构成。“主色调”是指网站页面中色彩的总倾向、总趋势,是大的色彩效果,在页面中具有最大的视觉面积。“辅助色”为页面中面积仅次于主色调的色彩,起到丰富页面色彩层次的作用。“点缀色”主要起到对比衬托的作用,通过与主色调在色相、明度、纯度等方面的对比,来活跃画面,有画龙点睛的效果。
  二、高校门户网站色彩运用的调查与分析
  为了解当前我国高校门户网站色彩运用的状况,笔者以江苏省为例,对中国教育科研网提供的江苏省高校(包含高职高专院校)门户网站链接进行了访问调查。共计访问98个,其中有效链接95个(调查时间为2011年9月)。笔者从网站的主色调、辅助色、色彩数量、文字色彩的视觉呈现等方面进行了统计与分析,比较科学、全面反映出当前高校门户网站色彩的运用状况。在此次调查中,由于网站内容色彩具有随着内容的更新而变化的特点,有着不确定性,因此关于主色调、辅助色、色彩数量的相关统计数据不包含内容色彩。
  1.主色调
  网站的主色调可以从明度、纯度、色相等不同色彩属性来划分。从明度上我们可以将色调分为浅色调、中性色调和暗色调,从纯度上我们可以将色调分为鲜艳色调、中纯度色调与灰色调,从色相上我们可以按照色彩的品相将色调分为红色调、橙色调、黄色调、绿色调、蓝色调、紫色调等。本文中关于高校门户网站主色调的调查是基于色相属性进行的。被调查的高校门户网站所采用的主色调情况如图1所示,95所高校中有66所采用蓝色作为门户网站的主色调,超过半数。
  由上面的数据不难看出,当前高校门户网站所采用的主色调多为蓝色,色彩风格单一。调查结果印证了“蓝色是计算机世界中的流行色”的说法,但这并不意味着是蓝色适合所有高校,一味跟风,永远不能形成自己独特的风格。
  2.辅助色
  通过辅助色与主色调在色相环上的夹角,可以判断出两种色彩对比的强弱关系。我们一般将色相对比分为同类色对比(夹角15°)、类似色对比(夹角45°)、中差色对比(夹角90°)、对比色对比(夹角120°)以及互补色对比(夹角180°),如图2所示。夹角数值越大,对比就越强烈。被调查的高校门户网站中辅助色与主色调的对比关系为同类色对比的多达64个,具体情况如图3所示。
  从调查数据可以明显看出,目前超过半数的高校门户网站色彩对比较弱,网站视觉界面整体色调统一有余,对比不足,视觉界面普遍存在色彩关系沉闷,缺少生机与活力等问题。
  3.色彩数量
  网站色彩数量的多少直接关系到网站界面是否和谐统一。总体来说网站色彩数量太多页面会显得“花哨”,反之页面则会显得“单调”。高校门户网站色彩数量统计数据如图4所示。采用单色与双色配色的网站占绝大多数,这一结果实际上从另一个角度反映出当前高校门户网站的主色调与辅助色的对比关系较弱。总体来说被调查的高校门户网站色彩运用单一,过于谨慎,不够大胆,视觉冲击力不强。
  4.文字色彩的视觉呈现
  文字色彩是影响网站文字视觉呈现的重要因素。万维网联盟(World Wide Web Consortium,W3C)在Web内容无障碍指南(WCAG)2.0 Level AA标准中规定:文本的视觉呈现至少为4.5:1的对比度(装饰作用的文字除外),较大字号的文本的视觉呈现至少为3:1的对比度[2]。色彩对比度分析软件(Colour Contrast Analyser)正是依据W3C所建议的标准来检测文本色彩与背景色彩的对比情况,判断文字色彩的视觉呈现。笔者使用该软件对所调查的高校门户网站中文本色彩与背景色彩的对比度进行检测,数据显示有近半数(45所)高校门户网站存在至少一处文本视觉呈现未能达到W3C所建议的标准。此外,有近10%的高校门户网站中存在使用大面积纯色文本的情况。
  从调查情况来看,当前高校门户网站文字色彩的运用未能充分关注到用户视觉舒适性问题,存在文字色彩视觉呈现弱的问题,文字色彩的视觉呈现有进一步改进的空间。   三、高校门户网站色彩运用的建议
  高校门户网站是高校面向校内师生与社会各界的窗口,网站色彩运用应当庄重、大气,整体色调协调统一,富有学术氛围与人文气息,避免使用怪诞与另类的色彩。科学合理地运用色彩将有助于高校提升网站界面的视觉效果与网站文字的视觉呈现,形成良好独特的视觉风格。
  1.主色调的选择
  主色调犹如音乐中的主旋律,是整个网站氛围与意境的体现。高校门户网站主色调的选择应该在遵循“合适性”基础上注重“独特性”的原则。所谓“合适性”,是指主色调的选择要经过深思熟虑,选择符合学校定位与特点的色彩。“独特性”则是指主色调的选择应突出个性,避免采用与其他高校雷同的色彩。
  (1)建立高校VIS,规范色彩运用
  VIS(Visual Identity System)即视觉识别系统,是SIS(School Identity System,学校识别系统)的重要组成部分。标准色作为高校视觉识别系统的重要组成部分,承载了学校的校园精神与文化内涵。高校通过VIS确定标准色彩、辅助色彩及其使用规范,可以避免因为设计者个人的感性、好恶来选择色彩。同时遵循VIS的色彩规范,还可以增强网站的整体感与统一感。中山大学分别于2010年、2011年推出两版具有不同界面的门户网站,均采用其独特的标准色——绿色(C:100 M:00 Y:100 K:60)作为网站的主色调,严格遵循了学校视觉识别系统色彩应用的规范,个性鲜明且视觉形象统一,传承有序。
  (2)根据自身特点,确立色彩风格
  即使是美的、和谐的色彩风格,如果与高校的特点、印象不符合,也是毫无意义的。当前大多数国内高校并没有没有明确的VIS规范,那么门户网站色彩的运用应该根据高校自身特点,选取适合的色彩方案,从而形成自己独特的色彩风格。只要网站设计者用心思考、善于发现,学校的文理性质、地理位置、校园建筑风格等方面的特点都可以成为学校门户网站色彩方案的来源。如武汉大学门户网站的主色调——孔雀蓝,来源于其标志性建筑老图书馆琉璃瓦的色彩;北京航天航空大学门户网站的主色调——天空蓝,取意于翱翔蓝天;北京林业大学门户网站的主色调——森林绿,来源于自然和谐的森林色彩。
  2.辅助色、对比色的运用
  网站界面中的色彩从来不是孤立存在的,总是由某种内在的关系联系着各种色彩,组成一个完整的整体。只要有不同色彩并存时,色彩与色彩之间就会在色相、明度、纯度、冷暖上具有差别,形成衬托和对比,从而使得网站视觉界面丰富多彩[3]。
  当确定主色调,接下来就需要考虑如何选择与之适应的辅助色、点缀色。主色与辅助色、对比色、点缀色的搭配,便是配色方案。笔者认为高校门户网站的视觉界面不同于广告创意,是一种阅读媒体,应避免采取强烈视觉冲击的配色方案。在确定网站的主色调之后,应当利用色彩与色彩之在色相、明度、纯度、冷暖上的差别,运用统一、对比、调和等手法,使网站页面色彩运用达到“大面积协调、小面积对比”的视觉效果,避免“花哨”、“单调”两种极端色彩方案的出现。
  (1)运用辅助色丰富网站色彩层次
  网站的辅助色,顾名思义是相对于主色而存在,并对主色起到衬托、辅助的作用。要使网站色彩丰富且富有层次,辅助色的巧妙运用是必不可少的。根据辅助色与主色在色相环上的位置不同,一般我们将其对比关系分为同类色对比、类似色对比、中差色对比、对比色对比、互补色对比等。不同的对比关系决定了网站色彩的协调程度,合适的辅助色选取应当考虑对比与统一的均衡。
  主色调与辅助色为同类色对比时,其特点是色彩统一,但给人的感觉是单调与凄冷,缺乏视觉冲击力,笔者所调查的高校门户网站色彩运用情况大多数属于此类。如果设计者选择同类色的配色方案,那么可以在主色与辅助色的明度、纯度上拉开距离,加强对比,以减轻网站单调乏味的感觉。主色调与辅助色为类似色对比时,其特点是色调调和,对比清晰。主色调与辅助色为中差色对比时,其特点是色彩丰富、活泼、明快,且易统一。设计者采用类似色、中差色的配色方案时,在界面色彩上可较为容易地取得统一与对比的均衡。主色调与辅助色为对比色对比时,其特点是对比强烈,富有动感。主色调与辅助色为互补色对比时,其特点是对比最为强烈,视觉冲击力最强,统一性最低。设计者采用对比色、互补色配色方案时,在界面色彩上不易达到协调,可通过降低辅助色的明度、纯度,或减少辅助色视觉面积等方式,以弱化主色与辅助色在色相属性上的对比程度,进行调和处理。
  此外,属于“无彩色”的灰色与黑色也可作为辅助色,与不同的主色调搭配都会取得较好的视觉效果,运用得当可以提升网站界面的品味。美国的哈佛大学和普林斯顿大学门户网站的主色调分别为红色与橙色,但均采用了黑色与灰色作为网站的辅助色,由于黑色与灰色的加入,使得网站配色更加沉稳与大气。
  (2)运用点缀色活跃网站色彩氛围
  网站的点缀色,也被称之为点睛色,在网站界面中起到活跃画面、画龙点睛的作用。当网站界面色彩沉闷、单调时,点缀少许色彩鲜艳的对比色就会使网站界面变得生动起来。在网站界面中点缀色使用的面积不宜过大或过小,面积过大会破坏网站整体色调的统一,面积过小则淹没在主色与辅助色之中,不能发挥活跃画面的作用。对比色可以应用在网站的Logo、名称、图标等面积不大且需要突出的部位。为避免网站色彩过于繁杂,降低色彩对信息主体的影响,可以将同种类型的点缀色区域通过统一的手法进行系列化处理。如设计者可在整个网站界面都使用同种颜色与规格的“more”、“list”图标,使得点缀色重复并有规律地出现在网站界面之中。
  点缀色的使用尽可能避免与补色背景直接叠加在一起,如绿底上面放置红色图标。两种色彩对比过于强烈容易产生“晕光”现象,视觉呈现效果较差。设计者如果一定要在补色背景上使用对比色,可以运用分离色(如白色、黑色、灰色)进行描边,作调和处理,从而避免“晕光”现象的出现[4]。
  3.色彩数量设定   网站的色彩数量主要指网站框架中所使用色彩的数量,不包括内容使用色彩的数量。通常网站使用的色彩数量过少,网站会显得单调、乏味,使用数量过多,网站则会显得花哨、混乱,一般网站使用的色彩数量最好控制在三种以内,设计者需要为内容色彩预留一定的存在空间。网站使用的色彩数量多少与网站的内容色彩丰富程度有着密切关系。如果网站的内容色彩丰富,那么网站使用的色彩数量尽可能少些;如果网站的内容色彩单调,那么网站使用的色彩数量可以多些,但最多不要超过四种。中央美术学院门户网站的框架色彩非常简单——小面积的浅灰色搭配小面积的橙色,但是网站整体色彩并不显得单调,原因就在于网站中采用了超大规格、色彩丰富的焦点切换图,使得网站色彩丰富且颇具有动感。
  4.文字色彩运用
  即便是在“读图时代”,文字仍然是高校门户网站所提供的最为重要的内容。除文字大小、行间距等因素外,文字色彩、背景色彩也是影响网站文字视觉呈现的重要因素。提高文字色彩的视觉呈现应该从以下两个方面着手:
  (1)避免文字色彩的视觉呈现过弱
  文字色彩的视觉呈现过弱,也就是文字色彩与其所处的背景色彩对比值过低,W3C在WCAG 2.0 Level AA标准中指出其对比值低于4.5:1,将会影响用户特别是有阅读障碍的用户对网站的使用。美国德克萨斯州Stephen F. State大学的劳伦斯卡夫博士的一项测试表明:视觉呈现最好的色彩组合是白底黑字。较暗的文本颜色置于较亮的背景色之上比相反组合具有更高的视觉呈现。如白底黑字的视觉呈现要高于黑底白字[5],因此,深色文字,浅色背景是比较好的选择。网站设计者应当充分关注文字色彩的视觉呈现所带来的问题,网站设计过程中可通过色彩对比度分析软件(Colour Contrast Analyser),检测文字颜色与背景颜色的明度、色相对比情况,避免网站文字色彩视觉呈现过弱。
  (2)避免使用高纯度色彩的文字
  网站色彩运用需要发挥艺术的感性,更要遵循科学的理性。生理学家研究表明:暖色、纯色具有前进的特点,容易引起用户的注意,但同时也会造成人类视觉神经的兴奋,用户长时间阅读高饱和度色彩的文字,容易产生疲劳。因此,高校门户网站中文字色彩的选择应当遵循“舒适性”原则,重视用户访问网站时的视觉舒适性需求。设计者在网站文字色彩运用中尽可能避免采用类似红(#ff0000)、绿(#00ff00)、蓝(#0000ff)等纯色或其它高饱和度色彩的文字,特别应当避免此类色彩在界面中大面积使用。
  5.重视色彩风格的维护
  (1)避免内容色彩破坏网站色彩风格
  网站内容的色彩也是重要的视觉构成元素,密切影响着网站的整体视觉效果。有许多高校门户网站,为突出重点信息,希望引起访客的注意,内容维护人员将文字内容设置为加红加粗显示,甚至是对多条信息连续加红加粗。当所谓的重点太多时,就会形成“重点多了等于没有重点”的尴尬局面。还有些高校门户网站的Banner、Logo色彩运用缺乏基于网站色彩风格的考虑,大面积纯红色的Banner、Logo放置在网站首页的显著位置。以上做法显然没有考虑到网站界面的整体视觉效果,既破坏了网站原有的配色方案,也影响了用户的视觉体验。
  “色彩运用要考虑整体视觉效果”不仅是网站视觉界面设计阶段需要遵循的原则,更是网站维护阶段需要遵循的原则。高校在确立门户网站的配色方案之后,后期维护应当遵循网站既有的配色方案。
  (2)网站改版应当延续色彩风格
  据新浪网改版后对用户满意度调查显示,改版之初用户满意率不会超过40%,因为改版即使是成功的,也在一定程度上破坏了用户长期养成的阅读习惯[6]。网站色彩的风格是经过长时间的积淀形成的,高校门户网站一旦形成较为良好的视觉风格,网站设计者应当采取“长期沿用”的策略,即便是改版,也应当在网站原有色彩方案的基础上采取渐进式修改,使得网站的色彩风格具有延续性,从而在互联网上形成自己独具风格的视觉形象。
  四、总结
  通过对高校门户网站视觉界面色彩应用情况的统计与分析,可以看出国内高校门户网站在色彩应用方面存在需要改进的地方。高校只有将色彩宣传当作一种强有力的战略手段,重视色彩元素在门户网站上的科学合理运用,才能正确传达出学校的特点与内涵,才能够塑造出学校良好的网络视觉形象,才能够策应学校的发展战略。?
  参考文献:
  [1]荣毅虹,王彩霞.基于信息技术战略策应的高校网站首页展示[J].情报理论与实践, 2011(6).
  [2]W3C.WCAG 2_0 Guidelines [EB/OL].http://www.w3.org/TR/2006/WD-WCAG20-20060427/guidelines.html#visual-audio-contrast,2011-12.
  [3]那日图.中国传统视觉元素在网页界面设计中的研究[J].美苑, 2011(6):63-65.
  [4]奥博斯科编辑部.配色设计原理[M].北京:中国青年出版社,2009.
  [5]李艺.高校门户网站界面的人性化设计研究[D].江南大学,2009.
  [6]刘韧.网络媒体版面设计[EB/OL].http://static.chinavisual.com/storage/contents/2003/08/19/7185T20030819115351_ 1.shtml,2011-10.
  (编辑:王晓明)
其他文献
上海闵行区在教育信息化领域勇于探索、不断进取,在数字化学习平台的建设中确定了“为每一个学生提供个性化和无处不在的教育”的核心理念,从学习内容管理系统、学习管理系统、
在疫情防控期间,湖北省无线电管理委员会办公室宜昌市管理处党员干部勇担使命,下沉到各自所属社区,与社区工作人员一同冲锋一线,严防死守,筑牢社区防线,助力打赢疫情防控阻击
以具有雨水回渗系统的浅草沟为研究对象,该浅草沟针对深圳梅坳地区的土壤渗透性差的特点,同时结合建筑垃圾合理利用的思路,将普通浅草沟进行改进,设置了建筑垃圾石块的蓄水层
目的:探讨应用闭合复位并三维支架外固定治疗股骨粗隆间骨折的临床疗效.方法:37例患者入院后均行胫骨结节或股骨髁上外展30°骨牵引,术中在C形臂X光机监测下,行手法闭合
介绍了一种以无线方式实现自动抄表的数据采集系统,给出了系统的总体设计;详细说明了主站、分站的工作原理以及主站和分站之间的通讯方式.