《网页设计艺术与装修教程01资料》由会员分享，可在线阅读，更多相关《网页设计艺术与装修教程01资料（9页珍藏版）》请在金锄头文库上搜索。
1、第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 目 前电 子 商 务网 络 经 济 随 着 In t e r n e t的普及已经进入到社会生活的方方 面面 无论是政府机关社会团体大专院校 的领导还是企业单位的老总们 上网 建立网 站都是他们的热门话题 尤其是企业上网 利 用网络技术改造传统产业更是今后企业发展 的必由之路 也只有企业上网建立自己的 电子商务站点进行商务活动才会给网络经 济带来实实在在的依托不管各个网站的行 业网站的规模采用的技术有多么大的区 别如何面向客户提供服务发布信息树 立良好的社会形象都是网站要优先考虑的 课题现在我们就以企业网站建设为主线
2、 探讨网站建设与网页装饰装修过程中的共同 要解决的问题 企业上网最重要的功能之一是企业的信 息发布, 它是企业的商务信息交易活动与 In t e r n e t技术的结合也就是利用网络技术 手段服务于企业, 使企业的产品技术服务 等与客户有关的信息传播到社会各界实现 电子商务的信息发布具体地表现为企业网 站的建设与设计使企业信息以网站和网页 为载体在I n t e r n e t 国际互联网上得以传播 通过网站发布的信息大体可分为两个方 面 一方面是具体的实用信息主要是由文 字数据和图形图像组成有些网站还可以 使用动画声音等多媒体技术 , 它们通过网 站本身的栏目设置体现出来比如文字内 容图片
3、动画动态有声影像等 另一方面是广义的信息包括网站的 C I 设计网站主题定位和网民群体的定位以及 网页的制作策划形象包装宣传营销等等 它主要是通过视觉语言来树立网站的社会形 象 从而达到广告宣传的效果 如果说实用信 息的文字数据及图形图像是由业务部门提 供的话 广义信息则是由管理部门提供的 甚 至需要借助广告策划的眼光进行全面的 C I 设 计才可能有一个好的方案 所谓 CI 是广告业的一个术语是英 文 Co r p o r a t e I d e n t i t y的缩写在我国 CI 策划运作往往表现为通过视觉语言的运用 来树立形象 传播信息 从而达到让全社会认 识 了解 接受的目的 在现实
4、生活中通过C I 策划为我们所熟悉的企业和产品比比皆是 如可口可乐公司采用全球统一的标志和色 彩对产品进行统一的包装给广大消费者印 象极为深刻像麦当劳的M标志和一个涂着 红红的嘴唇身穿红白相间条纹衣服的小丑 令人一看便联想到快餐食品等等 一个成功的网站和实体公司一样也 需要整体的形象包装和设计准确的有创 意的 C I 设计对网站的宣传推广有事半功倍 的效果它能使网站迅速地深入人心起到 语言文字所不能及的作用因而网站美术 设计师在网站主题和数据信息图文材料具 备之后需要思考的就是网站的 C I 策划和形 象 设 计 1 . 1 设计网站的标志 如果网站是一个企业投资创办的目的是通过网站来宣传自己
5、的产品进行电子商 返 回 总 目 录 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 务活动那么企业的标志或注册商标往往 可以直接拿来作为网站的标志如果没有现 成的标志使用就需要设计制作一个网站的 标志( l o g o ) 就如同商标一样l o g o是一 个站点特色和内涵的集中体现看见l o g o 就 能让大家联想起站点 标志图形的设计创意来自网站的名称和 内容标志可以是中文英文字母可以 是符号图案可以是动物或者人物等等 比如I BM公司是以英文字母稍加处理作为 标志新浪网是用字母SI NA和一只眼睛作 为标志搜狐网站把它的名字的字体设计得 很有特色同时还配
6、了一个可爱的狐狸的形 象图 1 -1 , 1 -2 , 1 -3 图1 - 1 著名的中文门户网站新浪网www. s i n a , c o m. c n 的标志它的图形创意是一只眼睛稚拙 的笔法线条与文字的工整划一相互对比相映成 趣 图1 - 2 图1 - 3 著名的中文 网站搜狐网站www. s o h u . c o m的标志搜 狐有强大的搜索引擎狐狸象征着它的聪明敏捷 图1 - 4 麦当劳快餐店的形象标 志漫画式的人物造 型使人过目不忘其 市场定位是青少年顾 客用小丑作招 牌很容易引起他们 的兴趣自然在麦当 劳的网站上也少不 了这个滑稽幽默的形象 图1 - 5 牡丹电器集团的网页当然要
7、用公司的牡丹花标志 了这是一个传统手法设计的标志比较贴近 生活贴近大众易为中国老百姓接受 I B M公司的标志, 将I B M 3 个字母作了变形处理, 成为十分简洁富有个性特色的著名商标, 它很 容易在众多的公司标志中脱颖而出 图1 - 6 中国建设银行的各个分行支行的网站都使 用统一的标志与市面上随处可见的建行徽标完 全一样 网站标志设计创意可以从以下几种思路 开 始 ( 1 ) 选用公司有代表性的人物动物 花草可以用它们作为设计的蓝本加以卡 通化和艺术化例如麦当劳的小丑搜狐的 卡通狐狸牡丹集团的牡丹花图1 - 3 1 - 4 , 1 - 5 ( 2 ) 网站有专业性的可以以本专业 有代表
8、性的物品作为标志比如中国建设 银行的铜板标志奔驰汽车的方向盘标志 图 1 -6 , 1 -7 , 1 -8 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 ( 3 ) 最常用和最简单的方式是用自己网站 名称的英文字母作标志采用不同的字体 字母的变形组合可以很容易制作好自己的标 志微软网站的标志就是大家已经十分熟悉 图1 - 8 麦当劳的标志是将字母M加以变形处理而成的 微软公司的标志完全是用字母组合而成的用 字母的组合作企业标志是近年来徽标设计的流 行趋势 图1 - 1 0 I n t e l 公司在其产品和网站上用的是同一个商标,它 只是将字母稍加处理组合而成的
9、虽然很简单 但特意突出的e 字部分却能使人过目不忘 这 主要是字母e 造成了视觉的节奏变化 图1 - 9 1 . 2 选择网站的标准色彩 网站给人的第一印象来自视觉的色彩感 受确定网站的标准色彩是网站建设重要的 一步美术设计将这项工作称为定色调定 调子不同的色彩及色彩的搭配产生不同的 效果它不但关系到网站内容的传达而且 会影响到网上浏览者的情绪这种色彩的心 理效应早就为广告业的设计师们所利用并 以企业的标准色的形式出现于企业形象之 中形成了商业文化的一个重要特点 企业自己的标准色也就是该企业在自 己标志产品及宣传品等方面统一使用的一 个固定的颜色如 I BM 的蔚蓝色可口可 乐的红色已经成为它
10、们的标志和象征我 国的一些大企业也确定了自己的标准色如 中国邮政的绿色联想集团的蓝色希望集 团的蓝色等等这种色彩与这个企业的形象 已经融为一体成为企业的象征, 使人们对它 由熟悉了解而产生信任感和认同感如果将 I BM 改用红色或金黄色将麦当劳的M 标志改为深蓝色我们会有什么感觉呢一 定是惊诧的令人不敢确认图 1 - 1 1 , 1 - 1 2 , 1 - 1 3 , 1 - 1 4 , 1 - 1 5 , 1 - 1 6 , 1 - 1 7 图1 - 7 在奔驰公司的汽车上在奔驰公司 的网站上我们都能看到这个熟悉标志它是 由汽车方向盘抽象化而成的行业特点与艺术设 计的形式美-曲与直的对比完美
11、地结合在一 起是徽标设计的经典之作 的 Mi c r o s o f t 几个黑色字母的组合In t e l 网 站也是将企业的标志直接拿来作网站标志的 它是由这几个字母稍作处理组合而成显得 十分简洁明快图 1 -9 , 1 -1 0 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 图1 - 1 1I B M公司用蔚蓝色作本企业的标准色蔚蓝色是海洋的颜色富于现代气息其 网站以蓝色为主色调I B M公司还将自己的产品以蓝色命名如前几年与国际象 棋大师哈斯帕罗夫对奕的计算机名为更深的蓝本图选自www. i b m. c o m/ 图1 - 1 2 可口可乐公司用红色作
12、本企业的标准色可口可乐公司的红色是与徽标同时出现的 早已为大众熟知标准色也成为公司的无形资产本图选自www. c o c a - c o l a . c o m/ 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 图1 - 1 3 可口可乐公司的网站同样以红色为主色调几乎所有的网页上都出现了这种 标准色这是其中的一页它与豆绿黑白色相互搭配 有种古旧的情调 意在暗示其历史悠久本图选自www. c o c a - c o l a . c o m/ 图1 - 1 4 我国著名的I T企业联想集团以蓝色为标准色它的网站也突出了蓝 色色调本图选自www. l e g e n
13、d . c o m. c n / 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 图1 -1 5由图中看出装饰性的蓝色块插图b a n n e r 的蓝色色调与标准色十分 接近它们共同组成了网站的蓝色系列本图选自www. l e g e n d . c o m. c n / 图1 - 1 6 蓝与白色的对比使网页简洁明快右上角的渐变色更是点晴之笔使 网页生色不少本图选自www. l e g e n d . c o m. c n / 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 网站上使用企业的标准色一方面要能 体现企业形象 另一方面
14、要有自己的特点 便 于与其他公司的网站区分开 一般来说 网站 的标准色彩只能是一种具体应用时可以标 准色为中心利用它的明度变化产生不同的 色彩 标准色彩要广泛运用于网站的标志 标 题 主菜单和背景色块 给人以整体统一的感 觉 其它色彩只是作为对比和衬托 绝不能喧 宾夺主 并不是所有的色彩都适合于作为网页标 准色的网上常见的颜色有绿蓝黄 橙色及黑白灰色红色自身太艳尤 其是在 R GB色彩模式下 红色使上网浏览者 的眼睛容易疲劳不适于大面积的使用只 有一些女性生活主题的站点如化妆品服 装交友站点以粉红色为基调给人以温馨 图1 - 1 7 联想网站用标准色实现了网站风格的统一当然蓝色的明度变化是必要
15、的 它有助于网站色彩的丰富性本图选自www. l e g e n d . c o m. c n / 柔和的印象关于色彩的性格问题我们将 在第 6章详细探讨 色彩是一种十分微妙十分具体的问 题确定色彩的方法有多种最简单的方法 是在 Ad o b e公司的软件P h o t o Sh o p里 点击前景色方框在弹出的拾色器窗口里选 择自定义然后在调色板里选择就可以 了 为了使网站标准色稳定不变最好记 下它的数值方法是在 Ph o t o Sh o p 里 打开 Co l o r Pi c k e r 的窗口选择好所需 的颜色后分别记下右侧 R GB色彩模式的 数值和 1 6进制的 HTML语言的色
16、彩编码 以后使用标准色时直接输入数值由数值 产生色彩在 P a i n t Sh o p P r o 5 . 0 软件 里也可以用同样的方法找到色彩的数值和编 第1 章 网站的形象设计与C I 策划第1 章 网站的形象设计与C I 策划 图1 - 1 9 在P a i n t S h o p P r o 5 . 0 软件里选择颜色并确 定数值图中的r e d 2 5 1 g r e e n 7 7 b l u e 1 4 7为该颜色在RGB色彩模式的数值# F B 4 D 9 3 为该颜色的HT ML代码 图1 - 1 8 在P h o t o s h o p的 Co l o r P i c k e r 里选择颜色并确定数 值 图中的#E 7 2 5 2 5 即为该 颜色的HT ML 代码 码图 1 -1 8 , 1 -1 9 1 . 3 选择网站的标准字体 大家可能都听说过字如其人这句 话意思是说一个人写的笔迹字体能表现出 他自己的性格特点因此我们也可以说字体 是有性格的或者说字体是有表情的这个 道理同样可以用于网站对标准字体的选择 上 中文
