第二章：网页设计——前期准备

常用到的版面布局形式有：
（教材31页） (1)骨骼型（分栏式结构） （2）“国”字型布局结构：页面的顶部和底部各有一个横向的分
栏，中间是竖向分栏，其栏目数为三个以上，通过上下分栏和两侧的竖 分栏形成一个封闭的矩形框，也可以通过一个矩形的边框来形成。这种 结构有一种聚合的力量，使中间的内容更加突出。
网页制作用彩色还是非彩色好呢？根据专业的研究机构表明： 彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下， 彩色页面比完全黑白页面更加吸引人。我们通常的做法是： 主要内容文字用非彩色（黑色），边框、背景、图片用彩色， 这样页面整体不单调，看主要内容也不会眼花。 将色彩按“红→黄→绿→蓝→红”依次过度渐变，就可以 得到一个色彩环。 色环的两端是暖色和冷色，中间是中性色。
现商品的琳琅满目，儿童类网站的活泼、温馨等效果。
● 冷色：如图6–3–1（b）中的绿色、蓝色、蓝紫色等都属于 冷色彩列。冷色一般跟白色调和可以达到一种很好的效果。冷 色一般应用于一些高科技、游戏类网站，主要表达严肃、稳重 等效果。
● 相近色：色环中相邻的三种颜色。如图6–3–1（c） 中的黄绿色、黄色和橘黄色。相近色的搭配给人的视觉 效果很舒适，很自然，所以相近色在网站设计中极为常 用。
色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；
而暖色（如红色）给人的感觉是热烈、火热。冷暖色的巧妙运
用可以让网站产生意想不到的效果。 ● 暖色：如图6–3–1（a）中的黄色、橙色、红色、紫色等都 属于暖色彩列。暖色跟黑色调和可以达到很好的效果。暖色一 般应用于购物类网站、电子商务网站、儿童类网站等，用以体
设计方法：

1）以用与网站名称相关的人物，动物，花草等作为设计的 主体对象，通过抽象、概括、变形等手法，使之艺术化、标 志化，如迪斯尼的米老鼠、搜狐的卡通狐狸等。 2）专业性较强的网站，可以以本专业有代表的物品作为设 计的主体对象。如中国银行的古钱标志、奔驰ห้องสมุดไป่ตู้车的方向盘 标志等。
3) 最常用和最简单的方式，是用网站的英文名称的字体作 为设计的主体对象，用不同的字体、字母的变形及字母的组 合，使之艺术化、标志化。
● 背景色的使用：背景色一般采用素淡清雅的色彩，避免 采用花纹复杂的图片和纯度很高的色彩作为背景色，同时 背景色要与文字的色彩对比强烈一些。
● 色彩的数量：网站用色并不是越多越好，对于初学者来 说，网页用色最好控制在三种色彩以内，通过调整色彩的 各种属性来产生变化。下列色彩组合较易使版面醒目：黑 白，蓝白，黑灰白，蓝黑，紫黄。
第二章：网页设计—— 前期准备
电脑艺术设计 张红 2011-2012学年上学期
第一节、客户需求分析

客户需求
客户的需求往往是多方面的、不确定的，需要去 分析和引导。客户的需求是指通过买卖双方的长 期沟通，对客户购买产品的欲望、用途、功能、 款式进行逐步发掘，将客户心里模糊的认识以精 确的方式描述并展示出来的过程。
● 黄色：黄色是亮度最高的色彩，在高明度下能够保持很强的纯度。 黄色有着太阳般的光辉，因此象征着照亮黑暗的智慧之光；黄色有着 金色的光芒，因此又象征着财富和权利，它是骄傲的色彩。黑色或紫 色的衬托可以使黄色达到力量无限扩大的强度。白色能够吞没黄色锐 利的光芒，淡淡的粉红色可以像美丽的少女一样将黄色这骄傲的王子征服。
① 利用了同类色、临近色、补色之间的关系，相互调和了视觉感觉。
② 白色的框线使各色块之间整齐、规律，加上白色的文字，加强了页面 ③ 渐变调和不同色相、不同色块。 ④ 背景色的统一掌控了全局。
二、排版(网页版式规划）

网页设计中版式规划是最重要也是最关键 的一个步骤，网站的版式规划要根据不同 的行业、不同的主题规划最适合的网页版 式。同时还要考虑到以后用dreamweaver 布局时的方便性。
黑白是最基本和最简单的搭配，白底黑字，黑底白字都非常清晰明了。灰色 是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如 果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
步骤3 三种以上的色彩搭配

一般来说，一个网站的标准色彩不宜超过三种，太多会使人眼花缭乱。 如果超过三个颜色，就要注意搭配技巧，使其看起来不花 如：① 使用纯度较高的颜色，搭配纯度较低、明度较高的颜色，使各 色彩之间比较和谐。 ② 不同色相以及所占不同面积、位置的主次关系，形成有韵律的视觉 音符。 ③ 白色背景衬托前景，效果显得更清爽、明快，整体更统一。
● 点睛色：在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。 ● 背景色：衬托环抱整体的色调，协调、支配整体的作用。
一个页面的色彩角色主要是根据其面积的大小来区别主次关系，达到最终目的的。当 不同的颜色使用的面积相当，这个页面容易呈现枯燥单调之感，而没有局部细节的变 化。当一个页面使用的色彩过多、面积大小用得过于琐碎，这个页面容易出现花哨、 主次不分、没有整体的感觉。

同 字 形 结 构

自由版式
三、定位网站CI形象

CI形象是借用的广告术语。(CI是英文corporate identity的缩写)，意思是通过视觉来统一企业的 形象。企业一般都要通过CI形象的策划来提高知 名度，它是一种营销战略。。一个网站，和实体 公司一样，也需要整体的形象包装和定位准确的、 有创意的CI 设计，这样对网站 的宣传推广有事 半功倍的效果。网站主题和名称定下来之后，需 要思考的就是网站的CI形象设计。网站的CI形象 设计和企 业的CI形象设计的内容相似，主要包括：
客户需求分析的作用：

有助于我们网站内容的组织，设计风格的 确定、页面的设计等。
第二节、网站风格定位

一、色彩
色彩的使用在网页制作中起着非常关键的作用， 网页的色彩是树立网站形象的关键之一，有很 多网站以其成功的色彩搭配令人过目不忘。色 彩总的应用原则应该是“总体协调，局部对比”， 即主页的整体色彩效果应该是和谐的，只有局 部的、小范围的地方可以有一些强烈色彩的对 比。下面来谈谈网页的色彩搭配。
1、网站logo设计 即网标。和商品的商标、企业的标志一样，网标是站点 特色和内涵的集中体现，看见它就让人联想到它所代表 的站点。如新浪网的网标就体现出新浪网的快捷、准确、 精华的特色。 标志图形可以只由中文、英文字母构成，也可以只由 符号、图案（动物、植物、人物、几何）构成，还可以 由文字和图形构成。如：新浪用字母sina和眼睛作为标 志。 标志的设计创意来自网站的名称和内容。
步骤2 色彩的象征感情
● 红色：红色是强有力的色彩，是热烈、冲动的色彩。瑞士画家、理
论家和色彩家约翰· 伊顿教授描绘了受不同色彩刺激的红色。他说： 在深红的底子上，红色平静下来，热度在熄灭着；在蓝绿色底子上， 红色就像炽烈燃烧的火焰；在黄绿色底子上，红色变成一种冒失的、 莽撞的闯入者，激烈而又寻常；在橙色的底子上，红色似乎被郁积着， 暗淡而无生命，好像焦干了似的。
● 橙色：橙色的波长仅次于红色，因此它也具有长波长导致的特征： 使脉搏加速，并有温度升高的感受。橙色是十分活泼的光辉色彩，是 暖色系中最温暖的色彩，它使人们联想到金色的秋天，丰硕的果实， 因此是一种富足的、快乐而幸福的色彩。
橙色稍稍混入黑色或白色，会成为一种稳重、含蓄有明快的暖色，但 混入较多的黑色后，就成为一种烧焦的色彩，橙色中加入较多的白色 会带有一种甜腻的味道。橙色与蓝色的搭配，构成了最响亮、最欢快 的色彩。

横栏式划分

竖栏式划分

国 字 形 结 构
（3） “同”字型布局结构：与国字型结构类似，不同的只是
页面的底部没有横分栏，同样也可采用边框来形成。这种结构由于 没有完全封闭，版面的开放性比国字型结构要好一些。整个版面除 上部的横分栏外，以竖向分栏为主体，兼有平安、稳定和严肃、蓬 勃向上的感觉。
● 灰色：灰色具有柔和、高雅的意象，而且属于中间性格，男女皆能接 受，所以灰色也是永远流行的主要颜色。在许多的高科技产品，尤其是 和金属材料有关的产品，几乎都采用灰色来传达高级、科技的形象。使 用灰色时，大多利用不同的层次变化组合或搭配其他色彩，才不会因过 于单一、沉闷而产生呆板、僵硬的感觉。
提示
● 使用相近色：就是在色带上相邻近的颜色，例如绿色和 蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可 以使网页避免色彩杂乱，易于达到页面的和谐统一。
● 使用互补色：对比色可以突出重点，产生强烈的视觉效 果，通过合理使用对比色能够使网站特色鲜明、重点突出。 在设计时一般以一种颜色为主色调，对比色作为点缀，可 以起到画龙点睛的作用。
（4）自由式结构：看上去没有明显的矩形分割痕迹，给予设计
者一个自由、开放的设计空间，设计者的创意能够得到充分的发挥 和表现，能够设计出更高艺术水平的页面。大多用于网站的导入页， 或者首页。 但自由版式的页面布局要复杂一些，需要利用表格中大小不等的矩 形单元格来进行无缝拼贴，才能形成一个完整的自由图形。
● 互补色：色环中相对的两种色彩。如图6–3–1（d） 中的亮绿色和紫色，另外如红色和绿色，蓝色和橙色等。 互补色调整一下补色的亮度，有时候是一种很好的搭配。 补色在网站设计中用得也极为普遍。
网页色彩的搭配
网页设计中，色彩永远是最重要的一部分。当人们距离显 示屏较远的时候，看到的不是优美的版式或者是美丽的图 片，而是网页的色彩。 ● 使用单色：先选定一种色彩，然后调整透明度或者饱 和度，产生新的色彩，用于网页。这样的页面看起来色彩 统一，有层次感。
网页配色实施步骤

步骤1 确定网站的色调
从视觉角色主次位置把网站色调分为主色调、辅色调、点睛色和背景 色，如图6–3–2所示
● 主色调：页面色彩的主要色调、总趋势，其他配色不能超过该主要色调 的视觉面积（背景白色不一定根据视觉面积决定，可以根据页面的感觉需要）。
● 辅色调：仅次于主色调的视觉面积的辅助色，是烘托主色调、支持主色调、 起到融合主色调效果的辅助色调。



用网站的英文名称的字体作为设计的主体对象，用不同的字体、字母的变
形及字母的组合，使之艺术化、标志化

运动
2. 设计网站的标准色彩

网站给人的第一印象来自视觉的冲击感，确定网站的标准色 彩是相当重要的一步。不同的色彩搭配会产生不同的效果， 并可能影响到访问者的情绪。 “标准色彩”是指能体现网站形象和延伸内涵的色彩。如： IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、 蓝、黄、绿色等。 一般来说，一个网站的标准色彩不宜超过三种，太多会使人 眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主 色块，给人以整体统一的感觉。标准色之外的其它色彩也可 以使用，只是作为点缀和衬托，不能大面积使用，以免影响 整体感。
● 绿色：鲜艳的绿色非常美丽、优雅，特别是纯绿色，是很漂亮的颜色。 绿色很宽容、大度，无论蓝色还是黄色渗入，仍旧十分美丽。黄绿色单纯 、年轻；蓝绿色清秀、豁达。含灰的绿色，也是一种宁静、平和的色彩， 就像暮色中的森林或晨雾中的田野那样
● 蓝色：蓝色是博大的色彩，天空和大海最辽阔的景色都呈蔚蓝色， 无论深蓝色还是淡蓝色，都会使人们联想到无垠的宇宙或流动的大气， 因此，蓝色也是永恒的象征。蓝色是最冷的色，使人们联想到冰川上 的蓝色投影。蓝色在纯净的情况下并不代表感情上的冷漠，它只不过 代表一种平静、理智与纯净而已。真正令人的情感缩到冷酷悲哀的色， 是那些被弄混浊的蓝色。
暗示需求和明确需求
暗示需求就是客户对难点、困难、不满的陈述，明确需 求就是客户对难点、困难、不满的具体陈述。
研究客户需求
1，首先要圈定明确的客户群 只有明确的客户群 才能让 我们很好去研究 2，学会用客户的语言来描绘产品 3，学会理解客户的多重身份 4，了解客户的价值观 5，理解客户需求背后的深层次心理需求 6，像客户一样体验，像客户一样感知他们的生活世界 1）像客户一样看 2）像客户一样用 3）像客户一样想 去体验客户的生活世界，而不是客观世界。只有这样，才 能像有经验的销售那样，能见到什么人说什么话。
● 紫色：通常人们会觉得有很多种紫色，因为红色加少许蓝色或蓝色加 少许红色都会明显地呈现紫色。所以很难确定标准的紫色。约翰· 伊顿对 紫色做过这样的描述：紫色是非知觉的色彩，神秘，给人印象深刻，有 时给人以压迫感，并且因对比的不同，时而富有威胁性，时而又富有鼓 舞性。
● 黑白：黑色与白色是对色彩的最后抽象，代表色彩世界的阴极和阳极。 太极图案就是黑白两色的循环形式来表现宇宙的永恒运动。黑白所具有 的抽象表现力以及神秘感，似乎能超越任何色彩的深度。