企业网站视觉互动设计与品牌传播

文/杨飞飞（南京信息工程大学 传媒艺术学院）

20世纪60年代中期，著名英国“广告教父”大卫·麦肯兹·奥格威（David MacKenzie Ogilvy）首先倡导了“品牌形象”观念，经过三十多年的实践，这一创意策略得到越来越多的工商业和广告界人士的青睐。现在，树立和强化品牌形象仍是许多企业网站创意的立足点，而且这一策略还代表了将来的趋势。

一、整体的风格设计传递企业文化

企业网站的整体风格设计是吸引客户、宣传和传播企业形象和文化的第一步。包括色彩、图形、字体、版式设计等各个方面都在品牌传播过程中有着各自的地位和作用，也对消费者的心理与情感有着不同程度的影响，网站的整体风格要符合企业的精神、气质。

日本花王企业旗下的肌肤护理品牌“碧柔”（图1 http://www.biore.com/）一直以清洁、美丽与健康生活为品牌特点推广他们的系列产品，并以成为最受顾客支持与信赖的品牌为目标。碧柔标志以白、蓝为标准色。白色象征了“清洁的肌肤 ”、蓝色的渐变表现了“对肌肤的温和”。花王大力宣传“洗后不紧绷”作为品牌特色，网站带着微妙颜色的干净的版面设计和一个有组织的移动所营造的平滑质感贴切地传播了“洗后不紧绷”的品牌特点，增强了和消费者之间的关系，具体的表达了公司的人性化。整个设计风格具有现代化，易用和交互性的特点。此外，访问的内容很有个性魅力，网站成功的把购买过程带到了一个虚拟的交互式卖场上，让人们通过亲切熟悉的化妆品柜台展示步骤来进行购买。为了推广品牌及相应的产品，所有的皮肤护理工具都可以从主页通过两个清晰的路径进入。

图1 日本花王企业旗下的肌肤护理品牌“碧柔”

著名的BMW汽车公司的网站（图2 http://www.bmw.com/），公司在网站的视觉设计上制定了极为详尽、统一的CI系统手册。手册从画面框架尺寸、结构、标志应用、色彩设定以及BMW网站独特的字体设计等方面，做了事无巨细的说明。德国人的一丝不苟，从这本网站CI系统设计手册里得到了充分体现。甚至让人认为，这不是一般意义上的网站设计，而是工程设计，设计师更像是工程师。从这些网站设计上我们可以看到，作为一个大型跨国公司，在塑造企业形象上所下的功夫。虽然如此，作为一个多国籍的大型企业，在保持自己的品牌形象的同时，也应该考虑到各个国家、民族独特的文化与市场特征，这样才能设计出更加完美的网站。随着企业国际化的加速，这种考虑变得越来越重要。

据调查，在日本比较成功的中小型网络商店的月销售额已突破400万日元。“佐野屋”网站（图3 http://www.jizake.com/）就是一个成功的品牌塑造案例，他现已成为日本酒类网络商店的佼佼者，商业性的成功使它被各种媒体所介绍，并且在1999年荣获第三届日本电子商务大奖的最优秀网络商店奖。据店主介绍，仅有便利的销售系统与周全的服务是不够的，网站必须持有自己的个性与风格，必须拥有一个独特的网站形象。这个网站有一套CI系统，从网站标志到展开，以及在各个页面上的应用。另外，为了突出表现东方文化的特色，还采用了明清山水画的意境，书法的韵律等等。许多页面大胆地采用黑色，一般来说，网络商店都很忌讳用黑色，因为黑色缺乏信赖感，信赖感的高低往往是网络商店成败的关键因素。但是看了网中的说明便知。其原因是“日本酒是酒窖藏酒，最怕的就是光亮”。从这些细小的部分可以看出他对用户心理的把握。

另一个传统商业家具和纺织品公司J.Robert Scott网站（图4 http://www.jrobertscott.com/）。公司鼓励商业样品陈列室参观与担当商业商品陈列，公司的网站为此设计出创造流动产品的展示，并成功的展现了丰富的产品图像和应用留白提供视觉平衡。轴式单杠作为网页的目标导航，简单而紧凑的版式风格有效的减少了视觉混乱，使界面很直观。商家鼓励访问商品样本陈列室，那是一个非常有趣和实用的商业玻璃陈列橱。这一系列的主题空间图像使访问者能观看到产品处于环境里滚动展示的尺度、施工详图和最终结果。尽管这不算是新颖的创意，但是对家具选择而言，是一个显著而有用的功能，它能够使人们观看到真实的物件。网站像一个小册子样，传达生活的方式、个性等六个明确部分的信息。画廊和产品目录在窗口打开，使得客户清楚地观看到代表公司理念的系统的设计。

法国的“The Vancouver Playhouse剧院网站”，因为定位从传统的戏剧转向更有市场的现代戏剧。剧院的网站也重新进行了整体的风格设计，以符合他们现在的品牌形象。网站运用了明确的视觉结构和经典耐用的颜色，以及符合阅读习惯的排版和内容划分，使得网站既美观又易用。网站导航应用了主流版式，主导航条在页面上方，二级导航在页面左部。主导航由六个栏目组成，之间用精致地细竖线分开。主导航的位置始终不变，浏览者所在栏目的文字以另一种颜色显示，能让浏览者便捷明白的穿梭在各栏目中。页面的文字段落中，使用黄色的字体来突出超级链接，既可突出链接，又可让单调的网页显得活泼。

图5 奥迪（Audi）汽车北美官方网站

在网站的整体风格设计当中，不容忽视的还有导航栏的设计，导航是网站中基础元素之一，引导用户了解到网站的内容结构进而找到所求。作为基础元素，导航看起来简单，但却是网站设计中最复杂繁琐的一部分。独特而清晰的购物导航和指引是一个优秀的销售类网站的设计重点，一个容易误导且没有特点的导航，只会使消费者止步。

奥迪（Audi）汽车北美官方网站（图5 http://www.audi.com）通过精美流畅的购物导航创造具有说服力的浏览体验，来吸引消费者购买汽车。网站的主菜单内容通过车型的名称、价格和购车指南的顺序清晰排列；辅导航提供了“图片”、“360度观看”、“录像”和“下载”这四部分的导航链接。整体的信息结构设计的关键是以浏览者体验为导向来安排菜单内容，把车型菜单放在页面显著位置，这样就可以使大部分的消费者们轻松地进行车型选择，避免了多数人陷入选择枯燥的技术参数的苦恼中了。在每个车型的首页中，页面中有一个关于该车的演示动画电影，通过动画全方位地详细介绍了车的细节。其中还包含了高质量的图片以及有关车型的解说、录像和客户的评价。Flash的动画影片介绍了车型的技术特征、设计和性能优点，同时也鼓励浏览者们去进一步的配置自己理想的汽车或者观看汽车的特性和技术规格。此外，网站有一些特别的内容如“购买评估”板块，可以让消费者了解如何分期购买汽车；“比较”板块，通过客观的数据让消费者把奥迪汽车同其他可比的汽车进行比较。

另一个华盛顿基于DC的酒宴承办的饮食业网站Occasions Caterers（www.occasionscaterers.com）也很有特点，这个风格新颖的网站为顾客提供了清晰独特的导航系统。在主页，有一个像小册子的层解答了有关的问题。标题的图片显著、简洁，页面层清晰且有许多食物照片。活动展示在站点里呈高亮状态，它里面含有对去活动的介绍。导航条信息，能够快速地提供给观众在这里所需的相关信息。信息区能够便捷地访问网站的各部分。页面顶部有下拉式动态导航条，从主页能够访问网站的所有区域。每个部分的下级导航条，都放在左边的文本菜单。此外，网站还为顾客提供一个在线服务列表，对消费者的回复是高效、有利、方便和实用的。

总的来说，网站的整体风格设计需要突出该企业明显的行业特征或品牌优势，确保该企业在经济活动当中的独立性和不可替代性。网站的整体风格设计不仅要传达该企业的经营理念和企业文化，还要以自己特有的视觉符号系统吸引公众的注意力并产生记忆，使消费者对该企业所提供的产品或服务产生最高的品牌忠诚度。

二、多媒体动画创意体现企业精神

尼葛洛庞帝在《数字化生存》中认为多媒体包括文字、声音、图形、图像、动画与视频等。这些诉诸用户不同感官的媒体元素之间可以相互进行信息转换与融合，用户通过多感官刺激获得对作品多维度、多层次、立体化的系统感知。1尼葛洛庞蒂《数字化生存》 胡泳、范海燕译，海口：海南出版社 1996，89、91网站中加入动画元素可以营造出纯静态页面达不到的竞争页面,具有超强的互动性。媒体与动画效果感官性极强，可以生动地将企业的产品、服务、品牌更好第呈现在客户眼前，帮助客户亲身体验，更有利于诚信环境的构建，在突出企业品牌,彰显企业形象和实力上面有着独到的功能。其中虚拟现实技术更能全方位的展示产品的细节。虚拟空间可以创造一种视、听、触多感官体验交融的系统，使潜在客户完全沉浸其中的虚拟现实环境。它在很大程度上扩展了多媒体交互特性带给受众的感官体验。企业要突显企业理念、产品品质，恰当的应用动画与虚拟现实技术非常关键。莫里认为：“计算机媒体不仅提供了某种我们可以访问的空间，而且将我们带到可以将自己的幻想付诸实施的地方。不论幻想本身的内容如何，亲历仿真之境的体验都是令人愉悦的。我们将这种体验称为“沉浸”。1Murray，Janet Horowitz.Hamlet on the Holodeck[M].New York,NY:The Free Press,1997,p98. 布赖斯《多媒体与虚拟现实工程》［M］，史萍等译，中国电影出版社 2000，4、5.

图7 水磨坊旅馆网站

加拿大的一个季刊时尚杂志《The Look》网站设计独特（图6 www.thelookmagazine.ca），他是专为受过良好教育的富有的年龄在25到49岁的城市女性而设计。这个站点的定位时尚，它的界面不同于一般的在线杂志格式，看上去设计很前卫，它的内容被呈现在一个交互式的Flash画面上。在很大程度上，网站内容摘要是一个很大的上翻式目录，当上翻时会占据网页的大部分页面，那样使用户能够容易看到标题，它不仅界面简洁，而且很容易用鼠标操作。到目前为止，这个网站最显著的特点就是整个页面综合了交互式视频广告和评论内容。最吸引浏览者的是整个动画页面加上了即时更新的视频和评论内容。在导航条底部有一个简单的链接跳转按钮，在视频播放时，很方便地提供想要的广告。页面在时尚的色调中反映杂志社的服务宗旨。可以说，网站设计师成功地利用网站的“前卫与高端”艺术特征对企业形象进行了有效地推广。

另一个“水磨坊旅馆网站”（图7 www.vizimalompanzio.hu）是以一张精心制作的名片的形式来介绍一个位于风景秀丽的匈牙利西部的小旅馆。这个网站内容展示很紧凑而雅致，内容简洁却很自如的把旅馆的氛围介绍给了访问者，同时抓住了旅馆的悠久历史和美景这些精髓。主要导航系统与页面主要内容区独立了出来。它被包含在页面顶部的一个分开的区域内。位于各个内容部分的第二层次链接主要是利用了那种文件夹指引片式的导航系统。导航和内容的完全区分让访问这能够体验到旅馆的精华，而不被界面所干扰。网站使用的画面动态展示给丰富的图片带来了很好的平衡，它的真正价值在于它展现了这块地方的氛围，同时又保留一份神秘。网站还采用了虚拟现实技术，360度的展示了全景。其中的背景音乐，声响和动画都在模拟现实生活中的氛围如雨，蜡烛烟，闪烁的火苗和灯光。正如英国视音频专家布赖斯（R.Price）指出：“虚拟现实（VR）的目的与多媒体完全不同，其最主要的目是创建所谓“沉浸”的感觉。一个成功的虚拟现实演示或作品可使观众、听众或游戏操作者产生一种脱离他们所处的现实世界、沉浸在另一种环境中的感觉。这种沉浸的感觉必须是由感觉器官独自产生的，而不是由心理的想象力产生的。虚拟现实的精华在于：可以创造令人信服的感官输入和一个逼真的感觉，这个逼真的感觉是指操作者自身的动作和行为可以以一种现实的、令人信服的方式影响世界。简单地说，我们必须能够与这个虚拟世界交互。”2网站营造的视听空间使得潜在的客户可以在线享受视听震撼带来的愉悦感，在网络视听空间的虚拟环境越来越愉悦并乐趣无穷。

作为企业网站中的多媒体动画创意设计者应该意识到:潜在客户与网站视听空间的和谐统一关键在于“以人为本”的设计与制作,动画、游戏、视频等元素所具有的亲和力能够吸引消费者的关注与参与。以功能和形式协调的设计原则可以平衡功能与形式之间的良好关系,可以避免过分的形式主义或是过分的功能主义。

三、独特的交互体验传播企业的理念

黄鸣奋在 《新媒体与西方数码艺术理论》中论述到“参与者的地位和作用成为艺术理论家所关注的问题。艺术领域最基本的社会角色是创作者、传播者与鉴赏者，他们之间的交互左右了艺术态势与艺术发展。社会角色之间的交互深受媒体的影响。媒体变革不能不对社会角色之间的交互产生深刻影响。电子媒体使个人空间成为公共空间，从而使角色扮演发生变化。”1黄鸣奋《新媒体与西方数码艺术理论》 学林出版社 2009，14.网站交互体验的个性化可以传播企业的精神。在企业网站品牌宣传竞争中，谁的交互体验具有崭新独特的视角和表现，谁就能在吸引客户从而争得先机。而缺乏人性化与平淡无奇的交互设计，必将被淹没在众多企业网站之中。国际上设计发达国家的设计理念既重视科技含量，又强调了人情味，正在向高科技和高情感结合的方向发展。在进行交互设计之前，需要对客户进行细致广泛的信息调查，洞察用户的心理目标、行为和心理习惯。

斯坦福大学的“虚拟戏剧项目”（The Virtual Theater Project）开发出能在良好定义的故事或者即兴表演环境中行动的有才智的自主人物，提供一种多媒体环境。让用户可以在其中扮演创造性角色，包括制片人、剧作家、角色分派导演、布景师、音乐导演及演员等。用户未承担的角色由智能代理填补。2黄鸣奋《新媒体与西方数码艺术理论》 学林出版社 2009，138.在企业网站当中，也可以提供一个虚拟的卖场，让潜在的客户扮演创造性的角色，从而激发他们的购物兴趣。“The Filling Station Miami”网站（www.fillingstationmiami.com）是个介绍迈阿密一新商品房项目的企业网站，其中独特的交互体验、强烈视觉的照片和精简的文字把浏览者尤其是年轻浏览者深深地吸引住了。这个网站设计了一种很有趣的浏览方式，使用了一个特别的导航形式，浏览者通过鼠标滑动或点击，在有限的空间内就相应地滑动变换内容。网站的交互主要集中在客户可以自定义住房的空间并可以体验拥有后的感觉，建造自己的房间(Build Your Unit)内容是非常与众不同的。其内容风格很娱乐休闲。如某一版面里，浏览者无意地得到了网站的“彩蛋”，一个像MTV的Flash动画《The Filling Station Teaser》。在最喜爱栏目中，是一个平常的列表，列出了附近的周边环境，每个场所用两句话描述了地点和路线，并附有照片。网站设计像是一部虚构小说，作者用第一人称叙述了居住于此之后发生的事情，额外的部分包含了独特意想不到的内容。

另一个特色网站“SUM”（www.allsteeloffice.com/sum）介绍了来自Allsteel公司的最新工作座椅，这款座椅完全满足了用户对办公座椅功能上的渴望。网站突出这款座椅的设计，并且娱乐是这个概念身后的导向力。它的满足感通过一个简单、流畅、吸引人的交互方式，在一种新鲜的、消费者导向状态下被呈现出来。对办公室座椅来说怎样才算是一个标准的行销场所，这是一个很有趣的选择。一个相关的平面导航，分为五个主要的部分，遍布了所有场所内容，并达到了让人感觉舒适的平衡，如果没有断开内容和导航的联系，可以在滚动条上点击主导航详述和折叠它。网站为整个场所提供了一个明亮的光线，再加上活泼的艺术线条和有趣的声音，和人们产生交互的感觉。网站通过独特的交互对这个座椅的构造进行了剖析，包括生动的运动中座椅和身体运动的的状态。非常有趣的是产品的吉祥物“Paul”，一个印章竞选活动的重要元素。它作为代表为观众在这个座椅上体验进行服务。它也会提供一些不稳定的状态，呈现出奇异的，舒适的，诱发你微笑的表现。他们是灵动的，有趣的，高记忆力的。他们和独特的音频使用合作的天衣无缝，这令客户在访问网站的过程始终保持心情愉快的。

图9 Freebord滑板网站

“Vitaminwater”是诞生在纽约的健康饮品，有淡淡水果味儿。“Vitaminwater网站”（图8 www.vitaminwater.com）它能够吸引访问者访问站点的每个地方，并且能快速召集访客购买适合每人口味的产品。在主页，两个有详细说明的瓶子是站点的两个主要部分，访问者点击其中任一个进入有关的内容。Vitaminwater被设计成一个形象的、有利于内容传输的动态电子发生器系统，例如，在中午站点介绍要吃少量有营养的食物“保持平衡”，在黎明前的几小时作为残留的药物提供“生效”，然而smartwater区域是静态不动的。每当进入里面部分，在介绍产品时，看起来好像在连续不断的变化，能够使事先复制好说明的文字和动作保持完美的一致。另外smartwater的内容简洁而生动，交互式的瓶子恰恰显现出净化水产品的双重好处和大小实用的便利图表。在瓶子上上下移动鼠标可以改变水位，而且每在一处都会显示一个适当的建议性语句。

运动商品 “Freebord滑板网站”（图9 http://www.freebord.com/）的消费群体主要针对年轻的滑雪、滑板、冲浪爱好者。网站通过独特且恰当的界面展示公司的产品，说服消费者购买他们的产品。网站主体是一幅3D制作的美丽风景，表现的是有纵横交错山脉和一块城市风景的滑雪场地。导航系统非常的有趣，当鼠标在风景上移动时，附近的导航点就会闪现出来，这个视觉线索就会引导浏览者通过有趣的界面来访问每一个内容板块。人们可以通过自己对滑雪场的知识来点击特定的地点，从而获取自己想要的信息，比如，其中的一个“小兔子山”，浏览者就可以在此获取如何掌握滑板的信息；“售票处”，浏览者在此可以定购滑板。网站的内容量虽不多，但是精简的内容却明确地说明了产品，Quicktime, Flash和3D动画的运用使得整个网站有了生机，内容板块之间的过渡显得十分流畅。开发者们有意使文件变得最小，以便保持网站的浏览节奏。虽然大部分的极限运动网站都有背景音乐，但是这个网站没有。而替代音乐的是，开发者们精心制作的增加山顶气氛的环境音效。

从上面的几个例子可以看出，在企业网站的体验式设计中，其人性化、互动参与性得到了前所未有的强调。在体验过程中，最高层面的参与、互动来源于人与产品的情感交流，以及隐藏在网站背后的设计思想的交流。体验式设计重视对客户的感官刺激，加强产品的感知化。在视觉方面，我们需要将产品的不同视角、动态、细节、场景都视图，逼真地呈现在网络用户面前，同时结合虚拟现实技术，使网络用户能够自如地旋转操控广告画面，任意察看不同角度视图，使网络客户的信息需求得到满足；在听觉方面，可以设计不同的音效。网站的体验设计还包括对情境状态的体验，追求和谐的道具、布景，创造感人肺腑的场景，以具有强烈吸引力的主题，产生出丰富的、独特的体验价值。

Packer和Ken将以计算机与互联网为代表的新媒体的特性归纳为 5 项：“综合性：将艺术形式与技术结合的表现形式；交互性：用户直接操作与影响其媒体体验并通过媒体与其他人交流的能力；超媒体：将分离的媒体要素彼此链接起来，创造个人联想的痕迹；沉浸性：进入仿真或三维环境的联想的体验；叙事性：源于上述观念的美学的与形式的策略，导致非线性故事形式与媒体表现。”1Packer,Randall,and Ken Jordan.Multimedia:From Wagner to Virtual Reality[C].Expanded Edition by Randall Packer andKen Jordan.New York and London:W.W.Nortion & Company,2002,pp.XXXV.从上面的例子可以看出，访问者可以通过对网站的整体风格设计、网页的动画交互、视觉设计而尽快熟悉企业精神和文化。企业网站以其独特的互动性、多样性和人性化，彰显出与潜在客户沟通时的无限魅力。对于潜在客户而言，网站访问的过程就是网站所表现的虚拟平台与客户所处的现实时空交互的过程。网站中视觉交互设计与创意要符合企业的文化、理念与精神，利于品牌的传播，其中动画多媒体的技术手段是其支撑的力量，网站的多媒体与动画设计使其表现形式和创意空间都得以拓展，让消费者能从网络视听空间来体会企业所传达的思想。在进行网站创意设计时,只有品牌形象、视觉设计以及互动性设计多个层面相互结合,才能使网站的宣传效果最优化,朔造成功品牌。

[1]〔美]杰夫 卡尔森等著.最佳网页设计——导航.中国轻工业出版社.2001.

[2]〔美]尼科 麦克唐纳编著.什么是网页设计.中国青年出版社.2006.

[3] 余小梅.广告心理学.北京广播学院出版社.2003.

[4]陈刚等著.新媒体与广告.中国轻工业出版社.2002.

[5]肖永亮,江琴.新媒体艺术批评初探.龙全.兼容·和而不同.北京航空航天大学出版社,2009.

[6]王荔.新媒体艺术发展综述.同济大学出版社,2009.