1、VI（Visual Identity）理念在网络课程界面设计中的应用【摘要】本文在平面设计 VI 理念的基 础上，提出了网络课程界面 VI 设计概念，探讨了网络课程界面VI 设计具体 应用的要点。通过一个实际网络课程相关界面设计效果的实现，认为将 VI 理念在网络课程界面设计中的应用是可行的，是 获得主 题鲜明、形式与内容 统一、整体性强、富有特色的网络课程界面的有效途径，值 得推广。【关键词】VI 理念，网络课程，界面设计，网 络课程界面 VI 设计【Summary】This text design the concept after putting forward network cour
2、se interface VI on the basis of planar design VI idea,discuss the concrete main point of application of VI design in network course interface.Through the realization of relevant interfaces of a real network course,think that application of VI idea feasible in network course interface design,is an ef
3、fective way to obtain theme distinctness,unification of the form and content, strong globality,characteristic network course interface,worth popularizing.【Keywords】VI idea,Network course,design of the interface,VI design of Network course interface由于 Internet 互联网技术在全球的飞速发展和普及，通过 Web 网站进行信息发布和交流的模式，已
4、经逐渐成为了当今人们学习、工作、生活的重要方式。而在 Internet 信息交换共享的平台上，构成 Web 网站的无数张网页，已经成了我们上网必须面对的一个重要媒介。网络课程属于 Web 网站的一种。网络课程首先是课程，其次具有网络的特点，是通过网络表现的某门学科的教学内容及实施的教学活动的总和。网页是网络课程的重要组成部分。一个主题鲜明、形式与内容统一、整体性强、富有特色的网页界面首先可以更好地吸引学习者的注意力，促进学习者更好地完成学习目标任务。其次网页界面除了信息交换共享的作用外，还应该具有在 Internet 上展示该教育网站或课程形象和宣传广告的作用。因此，我们提出网络课程界面 VI
5、（Visual Identity 视觉识别）设计概念，并通过实际网络课程相关界面的制作进行应用。希望对致力于网络课程界面视觉效果的开发设计者有所帮助。一、概念在进入具体的研究前，先对 VI（Visual Identity 视觉识别）设计概念及相关知识作一简单的说明。并明确提出网络课程界面 VI 设计的概念并阐述其意义。1 VI（ Visual Identity 视觉识别）VI 是 CI 系统中的重要组成部分。CI（Corporate Identity System）是企业识别系统即CIS 的简称。是将企业的经营理念和个性特征，通过统一的视觉识别和行为规范系统，加以整合传达，使社会公众产生一致的
6、认同感和价值观，从而达成建立鲜明的企业形象和品牌形象，提高产品的市场竞争力，创造企业最佳经营环境的一种现代企业经营战略。CI 由三大部分构成，即：MI （Mind Identity）理念识别，BI（Behavior Identity）活动识别和 VI（Visual Identity ）视觉识别。VI 即 Visual Identity，通译为视觉识别，简称 VI。VI 是 MI 具体化、形象化的外层设计，是 CI 的表现层，直接联系着社会公众。是 CI 系统中最具有传播力和感染力的层面。权威调查显示，日常生活中人们所感知的外部信息，有 83%是通过视觉通道到达人们心智的。也就是说，视觉是人们接
7、受外部信息的最重要和最主要的通道。 3“是一种在企业经营理念、战略范围和经营目标的支配下，运用视觉传达方法，通过企业识别的符号来展示企业独特形象的设计系统。 ”企业形象的视觉识别，是将非可视化内容转化为静态的视觉识别符号，以丰富多样的应用形式，在最为广泛的层面上，进行最直接的传播。设计科学、实施有利的视觉识别，是传播企事业经营理念、建立企事业知名度、塑造企事业形象的快速便捷之途。VI 设计要多视角、全方位地反映企业的经营理念，需要遵循以下基本原则，即：风格的统一性、强化视觉冲击、符合审美规律、严格管理、强调人性化、增强民族个性、尊重民族风俗及可实施性的原则。因为视觉识别系统是企业形象的直接传达
8、系统，所以又被称为“企业的脸” 。2 网络课程界面 VI 设计概念的提出网络课程界面 VI 设计主要是两方面内容：一是应该充分认识到提高网络课程界面设计质量的重要性；二是将 VI 理念与网络课程界面设计相结合，充分应用 VI 设计原则来具体指导网络课程界面的设计工作。由于网络课程界面设计质量的优劣，可能直接影响学习者的情绪和学习效果，还可能直接影响其网站形象和效益。因此，借鉴 VI 理念，将其应用到网络课程界面设计领域中，对提高网络课程界面设计质量应该具有重要的实际意义。首先，VI 作为 CI（Corporate Identity System）企业识别系统中的重要组成部分，上世纪 50 年代
9、就在美国得到全面推广。数十年来，在英国、德国、日本等发达国家中也得到了广泛的认同。特别是近年来国内一些大公司和企事业的应用实践，都证明了 VI 设计是一种塑造和展示企事业良好形象，提高企业及其产品知名度的一种强有力的手段。其次，网页与传统媒体一样都是一种表现设计创意的载体。既然 VI 设计理念在传统的媒体上，用视觉表现手段可以成功地展现一个企事业的经营内涵和外在形象。那么，我们将 VI 经过数十年实践检验的设计理念应用到网络课程界面设计领域中的思路应该是正确的、有益的。而且，这样的做法对提高网络课程界面视觉设计质量应该是一条切实有效的途径。二、VI 理念在网络课程界面设计中的应用1 传统 VI
10、 的作用在传统的 CI 系统中，VI 的作用是以一个企业或者团体的名称、标志、标准字体、标准色等设计元素为核心，将这些企业团体的经营理念、精神文化、服务内容等信息用具体的视觉识别符号表现出来，塑造出一种有强烈感染力、良好的和独特的整体视觉形象。2 传统 VI 的设计要点VI 理念的具体实施要点，蕴含在基本要素系统设计和应用要素系统设计两大部分之中。我们首先要完成基本要素设计，基本要素设计是指对企业团体的名称、标志、标准字体、标准色、象征图案、宣传口号的视觉设计，以及这些元素之间的组合应用设计。其次才是应用要素设计。而且，应用要素设计是对基本要素设计结果的综合和扩展应用，其应用范畴是：广告媒体、
11、宣传品、产品包装、办公用品、交通工具视觉形象、企业外部和内部的环境设计、企业员工的服装服饰设计、产品陈列展示设计等方面。应用要素设计的作用就是把基本要素设计成果有效地应用到这些信息传播媒体上，利用视觉符号的统一化、系统化来加强视觉亲和力，有效地传达企业团体的精神内涵，展示企业形象，提高企业的知名度。最终系统地完成整个 VI 设计工作。而现在网络课程界面设计给 VI 设计又提供了新的应用平台。3 网络课程界面设计元素的特点要在网络课程界面设计中引入 VI 设计理念，分析了解其设计元素的特点是必要的。网页作为一种新型的传媒载体，除了具有传统大众传媒的共性外，它已经突破了所有传统媒体设计元素的概念，
12、它集成了包括文字、图片、音频、视频、版面编排、色彩处理、静态和动态、文件格式、页面尺寸、模板框架、表格菜单、导航控制、悬停按钮、Java 特效、网页编程技术、超级链接等众多的设计元素。这些设计元素涵盖了视觉、听觉、技术的层面。其中影响网络课程界面视觉效果的原因，除视觉设计元素的作用外，软件技术方面的因素也很重要。例如：网页的页面尺寸具有随浏览器窗口分辨率的不同而变化的特点，这种情况有可能会造成网页版面结构的变形；网页文件存贮容量的大小和网络传输速率的快慢，对网络课程主界面视觉显示效果也有很大影响，比如：网页使用了较大的图片文件，还没等到图片显示，学习者就可能放弃这次浏览选择，根本就谈不上网页视
13、觉效果的展示和教学目的的实现；另外，如果学习者使用不同的浏览器，如 Internet Explorer 和 Netscape Navigator都可能影响到网络课程界面视觉显示的效果。在进行网络课程界面设计时，这些因素都要综合考虑。因此，在网络课程界面设计中我们能够操纵的设计元素虽然多，但可以看到，针对音频、文件格式、软件技术这类设计元素，VI 设计的施展空间就不大。所以，要将 VI 设计手段完全照搬到网络课程界面设计中来也是不现实的，应该区别对待。对于视觉设计元素尽量应用 VI 理念去处理，对于技术层面的设计元素虽不能直接进行 VI 设计，也应该考虑到 VI 的统一化、系统化原则，总之，不能
14、对网站的整体视觉效果造成损害。4 VI 在网络课程界面设计中的应用要点按照改善网络课程界面设计效果的目的，根据网页设计元素的特点，我们认为 VI 理念应重点集中在统一网页视觉识别元素方面，也就是网络课程的标志设计、标准字体设计、标准色处理、导航栏方面。因为这几方面是影响网络课程界面视觉效果的最主要的因素，也最能够体现出 VI 设计所强调的在整体统一的基础上突出个性的理念，表现出网页的亲和力、冲击力和美感。1） 标志标志（LOGO ） ，是一种图形符号，是具有传达信息功能、具有视觉美感的特殊图形符号。人们通过标志可以获得某种信息，并能获得精神上的满足。作为一种图形符号，是把企事业和商品的名称形象
15、化。而富有个性的形象是企业和商品的重要特征。具有信息传达功能和视觉识别功能。标志可以分为文字、图形、文字与图形结合三种。文字样式的标志：是以文字进行组合的标志。图形样式的标志：一般是以具象的图形或抽象的图形来体现的。具象的图形适用于表现内容、产品或服务较为单纯的事物，所选取的形象应具有一定的代表性与稳定性。如肯德基的人像标志。抽象的图形通常是用来比喻或意喻某一企业和品牌的理念。如耐克的标志。图文结合的标志：有时是以文字构成图形，但更多地是把文字隐藏在图形之中，突出图形的视觉效果。标志的设计可以存在一个识别系列，也就是说，我们设计一个样本标志，然后针对应用的不同情况，对样本标志进行适当的颜色或者
16、形态上的变化，由此产生的一系列的标志就组成了标志识别系列。但系列设计完成确定后和样本标志一样，也不能随意改变。标志是网络课程的特色和内涵的集中体现，是表现个性的设计元素。我们使用标志的目的是让学习者识别、喜欢并记住这个网络课程网站。因此，标志的设计创意应该来自网络课程的名称和内容。设计中应注意简洁清晰、结构紧凑、色彩单纯明快，以最少的色彩表现最多的象征意义，还要注意和标准色的结合。在网络课程界面中，一个优秀的标志设计能形成一个视觉中心，起到画龙点睛的作用，并且有可能产生极大的亲和力，其重要性是不容忽视的。网络课程标志是优秀网页应该具备的基本设计元素，是视觉识别设计的重点之一。我在电视编导与节目
17、制作网络课程中所设计的标志属于第三种图文结合的标志。首先，以“电视编导与节目制作”这几个字水平排列成为标志主体，其中使用综艺体字体，取电视彩条信号的八种颜色（#FFFFFF #FFFF00 #00FFFF #00FF00 #FF00FF #FF0000 #0000FF #000000） ，也就是本网络课程界面 VI 设计中的标准色,水平排列作为标志色彩，再配以投影加强其立体效果。考虑到“目”字也可取“镜头”之意人眼是人用来看世界的镜头，而一位优秀的编导更应该具有一双慧眼，所以在设计上把水平排列的彩色“目”字用镜头图像替代，而投影中的“目”字还使用文字显示，最终形成一个体现网络课程内容，具有一定
18、象征性，又不失识别性的样本标志。并在此基础上形成一个标志识别系列。2） 标准色网络课程界面色彩模式是 RGB，也就是光学三原色，使用的是加色法。我国古代把黑、白、玄（偏红的黑）称为色，把青、黄、赤称为彩，合称色彩。现代色彩学，也可以说是西洋色彩学也把色彩分为两大类：无彩色系和有彩色系。有彩色系有三个基本特征：色相、纯度、明度，在色彩学上也称色彩的三要素、三属性或三特征。色相：色相是指色彩的相貌，确切地说是依波长来划分色光的相貌。可见色光因波长的不同，给眼睛的色彩感觉也不同，每种波长色光的被感觉就是一种色相。纯度：纯度是指色光波长的单纯程度，也有称之为艳度、彩度、鲜度或饱和度。明度：明度是指色彩
19、的明亮程度，对光源色来说可以称光度；对物体色来说，除了称明度之外，还可称亮度、深浅程度等。观看色彩时，由于受到色彩的视觉刺激，而在思维方面产生对生活经验和环境事物的联想，这就是色彩的心理感觉。色彩有冷暖感。色彩的冷暖感被称为色性。红、黄、橙等色相给人的视觉刺激强，使人联想到暖烘烘的太阳、火光，感到温暖，所以称为暖色。青色、蓝色使人联想到天空、河流、阴天，感到寒冷，所以称为冷色。色彩有兴奋感与沉静感。凡明度高、纯度高的色调又属偏红、橙的暖色系，均有兴奋感；凡明度低、纯度低，又属偏蓝、青的冷色系，具有沉静感。色彩有膨胀感与收缩感。同一面积、同一背景的物体，由于色彩不同，给人造成大小不同的视觉效果。
20、凡明度高的，看起来面积大些，有膨胀的感觉；凡明度低的色彩看起来面积小些，有收缩的感觉。色彩有前进感与后退感。暖色和明色给人以前进的感觉；冷色和暗色给人以后退的感觉。色彩有轻重感。高明度的色彩给人以轻的感觉；低明度的色彩给人以重的感觉。色彩是人类视觉最敏感的东西，色彩所产生的视觉冲击力也最强。而且，色彩除了是表现亲和力的设计元素外还兼具有协调统一界面整体效果的作用。因此，在传统的 VI设计理念中将标准色作为企业形象塑造的有力工具来使用，可见色彩之重要。标准色是企业经过特别设计选定的代表企业形象的特殊颜色，广泛用于标志识别、广告、包装、服饰、建筑等应用项目中，使消费者产生固定的意识，在纷杂的信息竞
21、争中起到吸引消费者目光焦点的作用。一些色彩和企业形象紧密相联，在消费者心中已深深定位，如“可乐红” ， “柯达黄” ， “富士绿”等。应用 VI 设计理念指导网络课程页面的色彩设计，其原则：一是遵循 VI 对色彩协调统一的处理原则，选用能表达网络课程主题和内涵色彩作为标准色，并根据色彩的“总体协调、局部对比”的对比调和原理，以色彩的色相、纯度、明度三要素中的一种或后两种为调和基础，改变其余的两种或一种要素产生色彩的对比效果的手法，使页面产生既统一，又有一定变化的舒适感觉。二是尽量使用标准色作为网页的主色调，因标准色本身已经具备了色彩的协调统一和与网络课程主题和内涵相吻合的功能，这样做应该可以收
22、到事半功倍的效果。三是谨慎使用大面积的太强烈的色彩对比，太强烈的刺激已失去了美感，在文字与背景色之间不用太弱的色彩对比，太弱的色彩对比让人难以分辨“是非” 。电视画面是丰富多彩的，其中都是由五彩缤纷的色彩来呈现给大家的。彩条信号是我们平时在电视中所常见的。所以，在电视编导与节目制作网络课程中，我未用单一色作为标准色，而是借鉴了电视彩条信号，以其中的八种颜色（#FFFFFF #FFFF00 #00FFFF #00FF00 #FF00FF #FF0000 #0000FF #000000）此网络课程的标准色。这样，比较能体现该课程的特点。同时该八种色彩还分别被使用为网站内页的内容背景颜色，在变化中见
23、统一，在统一中又有变化。3） 导航栏导航栏的设计，是影响网络课程界面设计效果的又一个重要因素。这部分内容涉及文字、图片、表格、导航区等设计元素的排列布局问题，以及相关文字、色彩和形式的设计。需要注意设计的人性化。通常安排在页面顶部或左上角的最佳视觉区域；其次，要简洁明确。避免太多的链接、按钮以及不合理的内容布局；按照其内容的主次和内在联系进行分类，避免过长的文字和过大的图片；最后应该按照 VI 设计原则，对整个网络课程的所有页面之间导航栏，采用协调一致的风格，既是视觉识别系统整体性的要求，又可以保证学习者在浏览过程中不至于迷失方向。这种一致性体现在一致的结构层次、设计形式、色彩安排，甚至版面位
24、置。只有严谨一致的设计风格才可能充分传达完整的设计理念和明确的教学信息内容，达到教学目的。电视编导与节目制作网络课程的导航栏设计是根据其标准色而来。网络课程的首页和各内页的头部均为展示课程形象的动画，这些动画是以电视彩条信号（标准色）为背景的。电视彩条信号有八种颜色组成，考虑到该课程正好有七项内容导航及一个“首页”导航构成主导航，所以分别将每个导航与彩条信号的一种颜色相对应，从而形成了与此网络课程相配的水平排列，成长方形的主导航栏，位于头部的下方，与头部动画画面相连。导航栏中使用是中文幼圆字体。该字体和标志（标准字）中的综艺体都是黑体的变体。黑体是受西方无衬线字体的影响，于 20 世纪初在日本
25、诞生的印刷字体。其字形略同于宋体，但笔画粗细均匀而且没有宋体的装饰性笔型，因此显得庄重醒目并富于现代感。圆体、综艺体这类字体字形结构更趋于几何化并有鲜明的风格特征，大多适用于广告展示而不宜排印正文。4） 标准字体标准字体又称连字或组合字体，就是把两个以上文字铸成一组组合字体，是经过装饰、变化、加工而成的新的字体。在某种程度摆脱了字形和笔划的约束。经过注册后，同标志一起成为受到法律保护的文化艺术财产。在 VI 中，企业或产品的名称，均应特别设计标准专用字体，除了出现在内文中必须使用统一的印刷字体外，原则上不得使用非专用化的通用字体。通过创意设计，结合企业的性质和经营理念，形成风格独特、个性突出的
26、组合整体。有时也可以代替标志成为企业象征。我们首先来谈一下标准字所应具备的基本特征。识别性是标准字总的特征。由于标准字代表着特定的网络课程形象，所以，必须具备独特的整体风格和鲜明的个性特征，以使它所代表的网络课程从众多的可比较对象中脱颖而出，令人过目不忘。易识性是标准字的基本特征。标准字是整个网络课程的缩影之一，应当具备容易识别记忆的特征，使人能够过目不忘，产生永久记忆，充分发挥标准字的标识作用，而不应设计得过于繁复，让人半天看不懂表达的是什么意思，失去了标准字的标识作用。造型性是标准字的关键特征。造型性与识别性的易识性是互相关联的，具备独特优美造型的标准字能够产生更好的识别性和易识性。应当根
27、据网络课程的性质和学习者来设计相应适宜的造型，使得字体造型大方合理，同时也应避免过分夸张和古怪的字体造型，以免引起学习者的反感和不理解。系列性是标准字设计的应用性特征。标准字一般可以结合标志和标准色广泛应用于各种场合，因此要求标准字应当具备一系列的相同风格，具有良好的延展性，以适用于各种场合。接下来我们简单谈一下标准字的具体设计步骤。首先确定好 VI 的总体风格后，找到与不同字体类型、字体颜色及组合形式的内在联系后便可以确定字体的基本造型了。接下来是修正常见的视觉误差。大家都知道，汉字通常是方块形的，但在实际的视觉效果中，略长些的汉字看起来比规整的方块形更为美观。这是因为汉字的间架结构上下顶格
28、者多，左右只有部分笔画支持，而且横多竖少的笔画也增强了汉字的高度感。因此按照同样大小的方块写出来的字，看起来很可能是参差不齐、大小不一的。经过修正后，标准字的设计就基本成形了。然后可以在其中根据企业理念结合相关图形或直接将文字图形化。电视编导与节目制作这门网络课程的标准字和标志的设计是一样的。实际上就是将标准字作为了网站的标志，并形成系列。三、电视编导与节目制作网络课程相关界面设计前面对网络课程界面 VI 设计相关要素进行了阐述，下面就以网络课程电视编导与节目制作的相关界面设计为例，谈谈网络课程界面 VI 设计是怎样在网络课程界面设计中具体应用的。进入我所设计的电视编导与节目制作网络课程前，是
29、此网络课程的形象页。略过形象页，看到的是主导航页，点击各个导航链接，会进入内页；再点击各子导航，则可以进入相关内容页面，进行学习活动。1 形象页因为所设计的是一个有关电视的教育网站，我在设计形象页的时候，首先想到了以一段用 flash 软件设计制作，象征电视的动态画面来体现网站主题。同时将前面提到的标志（标准字） 、标准色应用其中，明确树立网站形象。学习者进入网络课程学习，首先进入该形象页。动画开始是模拟电视机的黑白雪花画面，接着，从屏幕右端依此进入象征电视彩条信号的，同时也是该网络课程的标准色的八个彩色条，当八个彩色条全部进入屏幕后，从左边第一个白色条起，依次翻转显示出由许多错落有致的电视节
30、目画面组成的背景。最后，背景画面渐隐，以网络课程全称制作的标准字（标志）做主题渐出，定格于画面中，明确了网络课程形象，突出网站的主题思想。定格画面中，在样本标志的基础上，又添加了标准色循环渐变的动画，使画面具有动感，形成视觉焦点，吸引学习者注意力，加深其对标志（标准字）的印象。同时，标志（标准字）下有“Enter” ，点击即可进入课程主导航页（该形象页未设置“skip”即跳过按钮，因为整个过程不到半分钟，所以考虑不需要设置跳过按钮。这样既不会影响学习者的情绪，反而通过对五彩缤纷的画面的观看，能增加他们学习该课程的兴趣） 。2 主导航页（首页）主导航页是用户在进入网络课程时接触到的第一个与内容相
31、关的页面。进入该页，首先映入眼帘的是使用 flash 制作，占据屏幕上半部分的循环动画。该动画的出现画面正是前面形象页的结尾画面，也就是本课程的标志（标准字） ，醒目起眼，画面具有连贯性。接着，标志渐隐，又出现黑白雪花和八个彩色条依次翻转画面。跟形象页不同的是，每个彩色条翻转后，其背后是一张张独立的电视节目画面。该 Flash 动画不断循环，当八个彩色条全部出现在画面上时，就与下方的主导航栏构成了统一的整体，或者说主导航栏是上方八个彩条的延伸。每一个导航链接用一个彩色条块代表，既贯彻了该网站的标准色，又体现了电视的特色，展现了网站主题。该导航栏是网络课程界面 VI 设计的一个基本要素，在后面的
32、内页中被统一使用，使整个网站具有整体性，且主题鲜明，富有特色。该动画画面与下面的内容部分在设计上是按照 1：1 比例分割的，但在制作时，又有意将内容部分向上增加了一个导航栏的高度，来满足人们的视觉平衡。下半部分内容使用的白色背景是和导航栏中第一个白色导航条相贯通的，以此来达到视觉上和谐的效果，同时变通的使用和强调了标准色。学习者根据自身情况和需要，点击导航栏上的相应导航条链接，进入课程的各相关内页。3 主导航页面所链接的相关内页内页的风格和主导航页面保持一致，只是在画面构图分割比例上有所不同。并且所有由导航页面所链接的相关内页的界面设计都保持一致统一，只是下方内容背景颜色和具体内容不同。各内页的头部均使用主导航页头部大小的一半，然后下置主导航栏，主导航栏下面又分别根据内容不同设置次一级导航链接。这样使页面的大部分空间可以放置相关内容。内页头部画面以网络课程的标准色作为背景，以标志（标准字）标识系列中的白色黑边无投影的设计作为静态标题，动画效果减少，仅仅是有白色线条随机闪动效果出现。这样就不显得过于花哨，从而使学习者把浏览重点放在下部的各相关内容上。七个相关导航链接页面（除了首页）的教学内容，分别以标准色（除了白色之外）中的七种颜色为背景色，跟主导航页一样，各背景色都与其相对应的彩色导航条相连，呈现在学习者眼前。形成了该课程较有特色的、富于整体感和主题鲜明的导航系统。
