智能网站设计

问题所在商业网站设计大都枯燥乏 味，没有活力，不够吸引人。
为什么？
　 可用性专家们最常用的口头禅就是： 一个网站要取得成功光靠前端界面是不 够的；

　 他们联合起来，基本上完全抛弃创新 性网页设计的重要思想；

　 这些专家宣称一套严格的创建网站所 必须遵守的“法规”，而不是他们声称 要提供的“指导方针”；

　 公司对可用性较差的网站设计变得非 常警惕；

　 认为网络只为一小类网站存在的观点 已根生蒂固。毕竟，既然轮子早已存 在，再去发明岂不是多此一举？

　 否定前端界面的重要性将危害到任何 网站的成功。

解决办法：个人兴趣

　 为了使您的网站不再显得保守或模仿 别人的风格，您必须将眼光从商业网站 转移到当今网站设计领军人物的个人网 站上；

　 访问者应该能“感觉”到您的网站。 它不是一个数据库，而是交流的媒介。

　 本讲座的目的在于：

* 讨论设计过程，帮助您设计一个有 价值的网站/界面/服务功能；
* 列举设计中需要注意的事项；
* 讨论图象设计理念，提高网站的视
觉效果；
* 告诉您哪里能够找到更多帮助；
* 帮助您以挑剔的眼光分析网站和互
动服务。

网站设计

我们接下来将讲到：
● 设计过程
● 智能设计
● 需要考虑的重要因素
● 慎用Flash
● 注意事项

设计过程

　 阶段：
* 形成设计思想：在项目开发的初期阶段您需要解决一些非常关键的问题；
* 设计阶段：为您的项目选择合适的
网络技术，收集网站内容；
* 制作阶段：将所收集的内容在一个
综合的网站界面上充分地体现出来；
* 测试和重复设计过程……

关于时间的考虑

在设计和制作互动项目的过程中，任 何事情都需要时间。您需要时间去：
* 了解什么适合于网络；
* 了解什么工具可用来制作网站；
* 完善网站。
　 设计出优秀的网站很不容易！对于大多数人来说不会一次成功，需要付出很大的努力。

明确目的

　 始终考虑到您的网站/互动服务想要 解决的问题；

　 认清问题。您对网站的目的理解越深，越有助于您找到解决问题的方法；

　 选择正确的途径。为什么选择网络？

确定受众

　 您需要确定网站的受众群，并尽可能 地根据他们的喜好决定设计方案；

　 同时您需要了解受众通过什么设备或 工具连接到互联网。

形成设计方案

　 如果您的客户需要突出品牌知名度，那么设计 的目标应该是增强访问者对品牌的印象，使他们 在离开网站时认为客户的品牌要比同类品牌好
（至少和同类相当）；
　 如果您的客户是一个非营利机构，或即使是某商业公司的客户支持部，设计目标应有所不同，即为：保证浏览者能轻松地找到所需要的信息和资源；
　 在设计过程中始终将目标牢记在心，不要过于追求网站的视觉效果。

反复斟酌

　 您不能设计好网站以后交给客户就一走了之；
　 在网站完成以后，您应有办法确定其所吸引的访问者是不是您的目标受众以及他们是否能从网站获得有用的信息；从设计初期开始保持灵活的工作思想；做一个简单的网站原型，在您的工作小组里测试并试用。

网站的另一种内容

客户希望放在网站上的信息并不是唯一 重要的网站内容。访问者不是被控制的观 众，您的网站必须足以吸引他们；

　 他们在花时间浏览网站的同时，希望能 够找到实用的信息或工具，或是漂亮的设 计，或是好玩的游戏，或是能下载的免费 券，或其它一些有趣的网站的链接。

技术不属于网站内容

　 人们总喜欢为网站添加一些不重要的功 能来炫耀自己掌握的最新网络技术；

　 太多不重要的功能会导致访问者很难找 到真正的内容；

　 您所使用的任何一种网络技术都不能偏 离网站的目的。

技术的用途

　 动画、声音、互动性、精心设计的标准 静态图像，这些都能够吸引访问者，并使 您的网站给他们留下深刻印象；

　 如果得当，网络技术可以增强网站 的说服力，或使网站变得更加有趣。

根据受众选择恰当的技术

如果您的受众是技术人员，那么您可以 尽情地运用最新技术和各种插件；

　 如果您的网站面向大众，那么需要使用 比较常见和通用的技术。太前端的技术有 可能使不太熟悉网络的受众产生距离感。

其它关于技术的考虑

　 网速和处理器速度
　 屏幕大小
　 浏览器版本
　 HTML标签方面的问题

慎用Flash

　 如果使用恰当，Macromedia Flash将会是增强 网站吸引力的优秀工具；
　 但不幸的是，它是目前最被滥用的网络技术之一（我们稍候会看到一些例子）。



我最喜欢的网站设计师Curt Cloninger一针见血 地指出： “自Flash产生以来，那些年轻的网站设计师们 就抛弃了友好的用户界面设计，而一头扎入布满 莫名漩涡的沼泽地里。”

隐喻

　 为您的网站或开发项目设定一个总的隐喻；

　 当隐喻渐渐形成以后，您就可以开始设计网站 界面，通过它将信息和内容传递给受众；

　 在设计过程中，隐喻的运用将使受众在浏览网 站时联想到现实世界，给他们亲切感；

　 除了考虑所设定的隐喻能不能最大程度地帮助 受众理解网站内容，还需要注意它是否一直能适 合您的网站。

个性

　 您所提供的服务必须具有自己的身份和 个性才能脱颖而出；

　 您将用哪种方式展现信息或内容？有趣 的、技术型的、时髦的、随意的、还是正 式的？

　 无论您采用哪种方式，请记住持之以 恒。

风格

　 为网站增加味道的最重要的贡献者之一就是网站 的风格，包括页面布局、图片的使用、字体、颜色 等；

　 页面的布局应足够灵活，以便支持网站内容的变 化和不同的媒体类型；

　 利用三维空间的概念：现实世界并不是一个平面；

　 尽量使网站风格和设定的隐喻保持一致。

网站的组织结构

　 大多数人在发现新网站时通常有两个问题：我 能在这个网站找到什么？通过什么途径找到？

　 当组织网站结构时，您会觉得左右为难：一方 面，您希望在页面上尽可能多地显示选项供不同 的浏览者选择，这样他们就可以轻松地找到想要 的信息；而另一方面，您又希望给浏览者一个总 体的网站向导，告诉他们怎样找到重要内容。

　 总的来说，每一屏所显示的主要选项不应超过 六至十个。

引导浏览者

　 为浏览者铺建一条“畅通无阻的道 路”。没有人比设计者更清楚怎样充分地 使用网站；

　 将这条“黄金道路”而不是流水账似的 内容清楚地展现给浏览者；

做一个网站结构树状图，看一看结构是否能够再简洁点，内容是否可以更直观有 力。

收集内容

　 网站制作的下一步就是确定内容的来源。这里的内 容包括文字、图片、视频和声音；

　 当您已收集到一些内容并打算制作或购买更多时， 很重要的一步是要为内容的呈现方式建立一系列标准，包括内容的获得、发布和备份标准。

　 要做成一个内容和风格统一的网站，建立这样的标 准非常重要。应该让所有的工作人员都清楚了解并按 照标准执行；

　 收集内容应该成为工作小组共同的工作。

牢记网站的目标

　 在设计过程中需要始终着重于您希望受 众从网站获得什么，并尽量使浏览您的网 站成为一次愉快的经历；

　 如果您不确定最新的技术是否适合您的 网站，请记住：简单通常是最好的。

创新的过程和图象设计技术

打基础

　 一旦网站的总体隐喻或风格确定以后，页面的 背景就成为其它图片的视觉基础；

　 网站给访问者的感觉是界面友好、高技术、还 是超现实，在很大程度上取决于背景图案；

　 对于背景设计几乎没有任何限制；

　 无损压缩技术可通过如GIF和PNG等图片格式运 用的游程长度编码(run-length-encoding)很好地 压缩有着大片重复颜色或图案的简单图片。

不可低估的文字

　 文字及各种字体是建立网站的强大工具；不要先入为主地认为网站必须基于图片的大量
运用；文字可以被做出很多效果。您可以利用图像工具做特殊字体，实现三维效果，改变文本颜色等等；运用能概括网站内容的关键字，它能吸引访问者的注意；如果您能娴熟地利用文字这一强大的工具，那么最终设计好的网站将非常具有吸引力。

内容的目的

　 对于设计过程中运用的每一张图片或每一个特 殊效果，问问自己：“它能表达什么意思？用它 的目的何在？”如果你发现自己胡乱放置了大量的剪贴画、未标 记或没用的图片，那么停下来，打自己一耳光；页面上的所有内容必须有的放矢，并与网站的 风格保持一致；避免使用无用的装饰性图片，它们除了降低访 问速度以外别无它用。

图片的来源

      制作大型互动网站最大的挑战在于怎样制作能 表达设计者思想的优秀图片；将已有图片和数字插画有机地结合起来可以起 到很好的效果；对网上找到的图片进行再加工用于您的网站；如果有能力，您可以通过Photoshop， Fireworks和数码相机等工具自己制作图片。

图像处理技术

　 如果您打算自己制作图片用于网站，可考虑以 下的图片处理技术来增强网站的视觉效果：
* 阴影
* 斜面和浮雕
* 颜色渐变和光影效果
* 滤镜
* 运动轨迹
* 模糊
* 描边
* 图像翻转

其它技巧

　 用路径创建文本
　 图片上的文字采用遮罩文本
　 利用已有图片进行扣图处理
　 处理线条时使用纹理效果
　 将相似的内容分类
　 运用对比鲜明的颜色形成反差
　 将黑白色和亮色结合可产生意想不到的
效果
　 采用图文并茂的形式

其它设计技巧提示

导航界面

　 导航界面应与已确定的网站隐喻相符；

　 导航界面应尽量“透明”，即：不能阻碍用户 查找信息；

　 它应清楚地显示用户所处的位置，并使用户能 轻松地回到以前访问过的页面；

　 导航界面的文本链接应使用描述性文字；而图 标链接的图片应与目的页面的内容相符。

首页的作用

　 表明网站的目的和主要内容
　 显示主要内容分类
　 说明网站的整体风格
　 使访问者对网站的隐喻有初步印象
　 注意：避免使用不必要的形象页面（splash page，即仅包含图片或flash的页面）。大多数情况下这种首页对访问者了解您的网站不起任何作用。

　 尽量使内容清楚明了；含糊不清的风格 会使您失去许多读者；
　 使用受众熟悉的语言和符号；
　 保持内容和设计风格一致；
　 利用反差；
　 尽量采用整洁的设计风格；
　 记住：互联网是一个动态媒介，同一信息可有多种表现方式；
　 强烈的感官感受可以吸引访问者。

其它提示

　 每周组织两小时的小组会议，讨论项目进展情 况、最近任务、设计和技术问题等等。小组成员 互相讨论问题交流点子；

　 如果有多种设计方案，采用原型评估选择最佳 方案，并听取各小组成员的意见和建议；

　 在为项目编写程序时，采用并发版本控制系统 (Concurrent Versioning System, CVS)解决不 同版本间兼容问题，简化备份工作和模块输出。
本文发布于北京网站建设公司尚品中国http://www.sino-web.net/