网页标准规范方案
讨论稿
网页标准实施可以帮助：
l 减少标记：较少的代码意味着更快的打开网页，较少的代码也意味着更多的服务器空间。也就需要更少的费用（服务器空间与带宽）。
l 增加内容与表现分离：使用CSS来控制网站的设计。更新与重新设计将更加容易。全站的转变只需要一个风格样式表文件的更新就可以达到。
l 增加可用性：使网站可以最大程度的兼容于各种设备（如：手机，PDA）及不同的浏览器。
l 向前兼容：在未来，运用web 标准的站点可以确保可用性。
l 提升网站的一致性与VI。
一． UE 实现管理流程规范
UE持续的改进以管理流程为基础。
1. 产品、UE/UI、技术的合作与技术实现规定与流程。
此流程适用于产品立项开发过程中的UE与产品合作。.
1.产品立项后，由产品通知UE部门 ，UE按产品需求提交用户模型。帮助产品了解目标用户情况。
2.产品提交产品文档。待双方确认后。UE进行UI优化与产品模型设计。产品模型根据产品的级别进行可用性测试。
3.模型可用性测试交付开发部门，并跟随开发进度进行分模块可用性测试，实时改进。只到产品上线，UE项目结束。文档归档，转存质量管理部。
2. 频道内容部与UE、UI的合作与技术实现规定与流程
频道内容与UE合作的流程如下，由UE收集WEB标准需求，并与各相关部门确定需要统一的元素。
UE与内容合作针对科技频道实施改版，确立统一元素规范。讨论确立后成为标准文档。
针对其它频道的依次进行改版，将元素标准统一，并不断丰富标准。
UE不断优化与丰富UE标准，实现频道内容UE的持续改进。
需要统一的元素见下图。
3. UI元素的管理与存档
UE将对统一的元素与标准进行存档与备案。实现UI原素全站的逐步统一。
二．WEB UE指标
1. 网页响应速度及相应的网页大小
文章页不超过60K. 除首页，其它页面不超过120K。
2. 客户端浏览器：
以最流行的浏览器的最普及版本为标准，同时照顾低版本浏览器，建议采用Internet Explorer 5.0 及以上版本。
三． UI 统一元素的规定
1. 网页的统一元素
1.1 图标的统一
见附图
l 网页的规格统一
各级频道使用760宽度，资讯中心使用1024宽度。
760的优势：能兼顾800*600的分辨率，有利于广告的投放和效果。目前绝大多数门户网站都采用760的宽度。
1.2固定的元素的套用的统一。
1.2.1 文章页（两套：严肃、活泼；）
文章页是频道内容构成的基础，需要完全统一。（颜色、布局、样式完全统一）
| 布局 | 规范 |
| 文章标题字体 | 16px |
| 文章正文字体 | 14px |
| 版权信息 | 12px |
| 字间距 |
|
| 行间距 |
|
| 段间距 |
|
| 图片 | 500px以内 |
1.2.2 频道的二级页
各频道的二级页面分为图库列表页和文章标题列表页，图库列表页和文章列表页完全统一。（布局、样式、元素完全统一，颜色随各频道主色调）
|
| 布局 | 规范 |
| 图片列表 | 1栏 | 图片大小为120*100 |
| 文章标题列表 | 两栏：160-590 | 文章标题列表，文字为14px, 22个字+作者+时间+评论 |
| 广告 |
|
|
1.2.3 频道首页（统一元素和布局，样式和色调可调）
各频道首页按照各频道风格进行设计。页面多屏构成。各屏幕是彼此独立。屏幕分为3栏式和2栏式。
3栏式提供两种布局方式（250-330-160和160-420-160），
2栏式提供两种布局方式（590-160和500-250）
各频道的首页可以自由组合各个独立的屏。每个栏的宽度是固定的，表现的样式也是统一的。
区块之间，间隔为10px
区块宽度与内容
| 区块列宽度 | 标题列表 | |
| 14px | 12px | |
| 250px | —— | 20个字 |
| 330 | 22个字 | 22个字+作者 |
| 160 | —— | 11个字 |
| 420 | 22个字+作者+评论 |
|
| 590 | 22个字+作者+评论+时间 | 20个字*2列 |
| 500 | 22个字+作者+评论+时间 | 11个字*2列 |
1.2.4 图片（统一：尺寸、格式、大小）
提供若干种图片尺寸备选，相同类型应用同样大小图片。
| 图片 | 适用区块 | 宽度 | 高度 |
| 头图 | 250 | 220 |
|
| 横图 | 590 | 590 | 90 |
|
| 760 | 760 | 100 |
| 图文混排 | 160 | 66 | 66 |
| button | 160 | 120 | 60 |
| 图片列表 | 760 | 120 | 100 |
1.2.5 页面统一区域（元素、布局、样式完全统一，颜色随各频道主色调）。
n 导航：完全统一，三行
n 页脚：完全统一
n 合作媒体：完全统一
n 页尾热点排行输出：完全统一（布局、样式完全统一，颜色随各频道主色调）
n 隐藏元素：
1.2.6 广告统一
| 广告样式 | size | 字体 | 字数 | 位置 | 数目 |
| 通栏加文本 |
|
|
|
|
|
| 通栏 | 590*90 |
|
|
|
|
|
| 760*100 |
|
|
|
|
| 文章画中画 |
|
|
|
|
|
| Button |
|
|
|
|
|
| 文本广告 |
|
|
|
|
|
| 矩形广告 |
|
|
|
|
|
| 广告位 |
|
|
|
|
|
2. 产品的UI统一元素。
2.1 图标统一
2.2 提示信息统一
2.3 导航方式统一
2.4 布局的延续
2.5 用户体验的一致性
四． WEB 技术标准
使用CSS布局作表现层和XHTML来做数据与结构，并遵循508条款和其他可访问原则。
1.XHTML的一些规则
l 文件头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
l 所有的IMG标记需要加上ALT属性，说明图像内容。
l 用小写书写所有的标签
l 给所有属性值加引号
l 所有属性都需要值
l 关闭所有的标签
l 用空格和和斜杠关闭空标签
l 不要在注释内容中使用“--”
l 确保使用< 和&表示小于号和与号
2．处理页面中的文字，禁止直接复制粘贴WORD中的文字，应将文字粘贴至记事本后再使用。用户无特殊要求时，一般汉字采用宋体，英文数字采用Arial。处理页面中的表格，禁止直接复制粘贴WORD中的表格，应在网页制作软件中制作表格。
3．系统中所有页面风格要一致（包括文字大小、框架、色彩等），页面的背景色一定要定义。
4．必须使用CSS样式表来定义整个系统的文字风格，字体大小不随浏览器设置而变化。
5． 网页设计时要考虑到不同语言环境的兼容性，正确设置语言属性。
6．在主页中尽量少使用滚动条，网页中禁止出现横向滚动条。
7．所有页面的标题要清晰。应使用当前网页功能分类的说明文字，禁止出现“New Page”或“Untitled Document”字样。
提倡：<title>###</title>（每页有不同的title是必须的）
杜绝：<title> Untitled Document </title>
（此部分dreamweaver自动生成，默认“<title> Untitled Document </title>”）
8．Meta：标准页头Meta写法如下
<meta name="description" content="提供##服务 ，博客信息，互联网免费资源搜集，热门信息资讯">
<meta name="keywords" content="计算机与互联网，博客，博客服务，计算机，互联网，免费资源，媒体">
<meta name="robots" content="all,follow,index">
A、<meta name="description" Content="提供博客服务 ，博客信息，互联网免费资源搜集，热门信息资讯">
表示：是对该网页内容的描述。
B、<meta name="keywords" content="计算机与互联网，博客，博客服务，计算机，互联网，免费资源，媒体">
表示：是和该网页内容相关的关键词，在选择关键词时一定要选择用户常用的一些词。
C、<meta name="robots" Content="all,follow,index">
表示： 是否可以被搜索引擎抓取。All指令：表示所有的页面均可以抓取；INDEX 指令：表示 Robot 可以索引本页； FOLLOW 指令：表示 Robot 可以跟踪本页链接；如果不想被搜索引擎抓取可以选择后面两个参数。 NOINDEX 指令：表示拒绝 Robot 索引本页，但可跟踪该页上的链接； NOFOLLOW 指令：表示拒绝 Robot 跟踪本页链接，但可索引本页。
因为大部分搜索引擎都是通过抓取网页的标题、关键词和内容来方便搜索的，但是不能抓取大部分的动态页面，而且最先抓取的也是网页的标题和关键词，所以要求在博客的页面加入与该站点页面相关的标题、描述和关键词。
9．Body：用css控制
10．Talbe：如果不是必须的，页面最好不要用一个大table再在里面嵌套无数个小table。就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢，另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。
11．不允许重复定义某块内容现象发生，导致页面代码量增大，影响页面速度
例如：
<p><center><font class="font11">
<font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px;font-family:隶书">
标 题</font></font></font><br>你觉得这样的代码看起来感觉怎么样呢？ </center></p>
可以简写成：
<p align=center><font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题<br>
你觉得这样的代码看起来感觉怎么样呢？</font></p>
12．同类单选框要用同一个名字（dreamweaver中会为单选框自动制定不同的名称）
13．动态文字显示区必需分别定制文字的最大和最小显示数量
14．文字输入框内必须有默认提示文字，如：请输入关键字；当鼠标点击输入框时，提示文字消失
写法：<form name=formqb method=post target="_parent">
<input class=formfont name="word" type="text" size="30" value="请输入关键字" onMouseOver="this.focus()" οnblur="if (value ==''){value='请输入关键字'}" onFocus="this.select()" onClick="if(this.value=='请输入关键字')this.value=''">
</form>
15．必须有系统版权信息，且清晰明了。
16．页面间的超级链接必须使用相对路径，保证各超级链接正确无误。
17．排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记。
18．为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 <br> 来人工干预分段。
19．中文使用中文标点，英文使用英文标点，且不同语种的文字之间应该有一个半角空格。
20．“页面大小”定义为页面的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。一个页面大小保持在250K以下为合适。
21．网页制作完成后必须在系统设置的大字体下查看页面元素是否有错位情况。
五． 文件夹、文件名命名规范
1．界面存放文件夹必须清晰，根目录文件只放置index.htm（asp）、login.htm（asp）或default.htm（asp），HTML文件与图形文件应分开存放，各种语言版本的文件也应分开存放。
2．文件夹命名必须采用英文字符，长度一般不超过20个字符。除特殊情况才使用中文拼音，一些常见的文件夹命名如：images(存放图形文件、Flash文件)，style(存放CSS文件)，scripts（存放JavaScript脚本），inc(存放include文件)，link（存放友情链接）,media(存放多媒体文件)等。
3．Html（asp）文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，名称分头和尾两部分，中间用下划线隔开，头的部分表示该文件所在功能大类。
4．同一种大类的文件放在同一文件夹中，以便我们查找、修改、替换等等操作。
5．图片的命名原则：
图片文件的名称也分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。尾部分用来表示图片的具体含义。
放置在页面顶部的广告等长方形的图片或flash取名：Banner
系统的标志性的图片取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的导航链接栏目的图片我们取名：Menu
装饰用的照片我们取名：pic
不带链接表示标题的图片我们取名：Title
依照此原则类推。
六． 页面问题检查
1、所有的页面完成后链接到一起，就相当于一个demo版的网站，首先自己应对其进行UI的测试
1024x778及800x600页面下都检查一下有没有横向滚动条，是否能正常显示
是否能清楚地辨认当前所在页，该页面与其他页面的联系，页面分区各自的功能，能否方便的到达其他相关页面及回首页
是否把IE窗口拉到任意大小都不会有表格撑开，文字换行
页面缩小时横向滚动条拉到右边，右边的内容是否正常显示
链接是否都正确有效，当前页的按钮是否没有链接不可点击
是否所有文字都经过css控制
title是否已有
2、注意与开发人员沟通工作进度，不要发生我还在修改页面，开发不知道，已经把旧的页面开发完成的情况，这样会增加开发的工作量。我们可以根据页面的完成和修改情况，告诉开发哪些先做那些後做。实在有开发完后的修改，也最好不要拿出一个新的页面重新开发，而是提交HTML页面后，告诉开发人员修改了哪些地方，需要的话可以配合其直接修改已有页面。
3、对开发的页面进行UI的把关，检查是否与html效果上有出入，如果有，敦促其修改。还可以将开发出来的页面上的文字量进行增减试验会不会有变化。结果页、文章页、列表页等的版式上要充分考虑可能会有文字很多/很少/没有的情况，或图片很多/很大/没有等情况，不要造成视觉上太突兀。
附录A 网站设计杂谈
1 明确内容
如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。
2 抓住用户
如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向别人的网站。
3 优化内容
内容是核心。丰富的内容和便捷的操作使你的网页更具诱惑力。
4 快速下载
没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。
5 网站升级
时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。
6 用笔画一个网站的框架
圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。
7 "在计算机上永远也找不到好的方案"。 --专家忠告
8 点击规则
听说过3次点击规则吗？对于小型网站，在你的主页上，没有任何一条信息，需要点击次数超过3次的。对于大型网站，使用导航和工具条来改善操作。
9 特殊字体的应用
虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。
10使用切合实际的简便有意义的命名规则。
11 避免长文本页面
在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费Web的潜力。如果你有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便你的访问者能离线阅读。
12 不要使用卷滚条 .
13 网站介绍
你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。
14 "网站一旦发布，网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。" --专家忠告
15 闪烁让人头痛
通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站，就少用此方法。
16 背景颜色
背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用与背景颜色搭配的文本，另外还应当坚持使用通用字体。
17 向前和向后按钮
应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。
18 不要用框架
与记数器一样，框架在网页上越来越流行。在大多数网站上，在屏幕的左边有一个框架。但是设计者立刻就发现，在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是，搜索引擎常常被框架混淆，从而不能列出你的网站。
19 重复使用图像
一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时，在网页上多次使用同样的图像是一个好的方法，并且一旦它们被装入，以后重新载入就会很快。
20 避免使用过大的图像
不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕，而且会影响加载速度。占75%的屏幕宽度是一个好的建议。
21 让用户先预览小图像
如果不得不放置大的图像在网站上，就最好把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。
22 慎用声音
声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢，同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣，但是多次以后肯定会很烦人。使用声音前，应该仔细考虑声音将会给你带来什么。
23 慎用插件
在Web设计中，如果依赖于一些特别的插件，会减少网站的吸引力。如果访问者没有所要求的插件，将不得不到其它站点去下载，这样访问者有可能就不会返回了。
24 平台的兼容性
要为用户着想，必须最少在一台PC 和一台Mac机上测试你的网站，看看兼容性如何。
25 避免错误链接
网站中可能与其它一些有用的站点作了链接。但是，如果在你的网页上有链接，一定要经常检查它们，保证链接有效。链接的网站可能很多，但不要链接到与你的内容无关的网站上。
26 在搜索引擎上登记网站
任何一个人发现你的网站的机会都很少，除非你把你的网站在主要的搜索引擎上进行登记。
27 设计一个留言板
浏览者愿意把时间花在好的网站上，所以最好有一个留言本，这能激励访问者再次回到你的网站，还有助于扩充网站内容。
28 内容组织
在开始创建新的网页前，仔细考虑网站内容的组织。决定好想让访问者浏览的内容，然后设计导航系统。
29 "空白万岁"
注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页，即使有足够的空间，在设计时也应该避免使用。为了吸引眼球，Web设计者使用各种方法，比如：闪烁、旋转等，但是利用空白会吸引更多的注意力。
30 使网站具有交互功能
在网站上提供一些回答问题的工具，使得访问者能从网站上获得交互的信息。
31 图片更新
尽可能经常更换网站上的图片，人们更愿意点击的是图片而不是文本。
附录B 色彩的运用
色彩运用是门学问，它在设计中占的位置到底有多重要？一件设计作品（诸如网页），一般包含三个元素：色彩、图像、文字。这三个元素中，以色彩较为重要。人对色彩是相当敏感，一件设计作品，最先攫取其注意力的，就是作品的颜色，所以我们必须懂得和色彩沟通，了解他们。色彩牵涉的学问很多，包含了美学、光学、心理学和民俗学等等。下面我就心理学等方面发表自己的见解。
1）色彩象征
心理学家指出每一种色彩都具有象征意义，当视觉接触到某种颜色，大脑即会产生联想，例如红色象征热情，于是看见红色便令人心情兴奋；蓝色象征理智，看见蓝色便使人冷静下来。所以我们常常借诸于色彩，勾起一般人心理上的联想，从而达到设计的目的。（下表列出通常颜色的象征事物）
红 血、夕阳、火、热情、危险
橙 晚霞、秋叶、温情、积极
黄 黄金、黄菊、注意、光明
绿 草木、安全、和平、理想、希望
蓝 海洋、蓝天、忧郁、理性
紫 高贵、神秘、优雅
白 纯洁、 素、神圣
黑 夜、死亡、邪恶、严肃
然而，我们也注意到，一种颜色通常不只含有一个象征意义，正如上述的红色，既象征热情，却也象征了危险（消防车即用了红色），所以不同的人，不同的心情，不同的环境，对同一种颜色，也会做出截然不同的反映。这和个人的年龄、性别、职业、他所身处的社会文化及教育背景都有关。中国人对红色和黄色（古代黄帝的黄袍）特别有好感，就多少和中华民族发源于黄土高原有关，和中华民族世代以土地为生有关。所以在选择运用何种色彩时，须得同时考虑作品面向的是那一个社群，以免得出反效果。紫色在西方宗教世界中，是一种代表尊贵的颜色，大主教身穿的教袍便采用了紫色；但在回教国家内，紫色却是一种禁忌的颜色，不能随便乱用。所以我们要千万要留意色彩的潜藏语言。
2）流行色彩
色彩心理不过是其中一个选择条件，还有其他的原因影响着人们对颜色的喜好，因此也左右着我们这些设计者对颜色的选择。另外一个普遍的因素便是潮流。当某个时期，某种颜色成为当时社会上的主流偏好，设计者设计新商品时，便不免会较容易倾向选择那些流行色彩。流行对设计的影响力亦逐步加强。以近年为例，潮流追捧金属色系，一下子，新涌现的产品全部都不得不抹上三分金属色彩。但是，是谁决定哪些是流行色？是该颜色本身吗？不，一些消费者也只是盲目的追求潮流。
以提高商品的吸引力为大前提，顺应潮流用某些色彩，设计者之中，有不少人更可在几种潮流色彩中翻出新意，创作出许多精彩的作品。但值得深思的，是一些盲目跟从潮流，不假思索的设计者，他们的制成品欠缺新意，只求赶上潮流，迎合大众的需要，创作态度极为敷衍；长此下去，整个社会对创作的要求大有可能会不自觉降低，令人忧虑。设计者更应该提高设计档次，引领人们的潮流。
3）意念为体
我认为不仅要注意一些运用色彩的基本技巧，诸如注意冷暖色的对比，色彩分布的平衡，颜色的统一和谐等。那只是雕虫小技。意念却是设计之本，当你面对数以千计的颜色时，那一阵子的兴奋，那一瞬间的眼花缭乱，足以令你完全忘记最初想要表达的是什么象征，真正要突出的是什么。 其实，色彩、图像、文字，全部都只不过是一个设计的外表，一个设计的真正灵魂其实来自设计者的创意。没有意念的色彩设计，无异于一具空有漂亮外表的躯壳，在最初目睹的一刻，或会摄住周围的目光，但观众能否长期记得这个设计，却很成疑问。只有把创作意念融入色彩设计中，整个设计才有灵魂，那些颜色才晓得向观众传情达意。为什么同样是运用那一堆颜料，有些设计可以令人久久难以忘怀，有些却只是过眼云烟？我们应该认真从创作意念出发，而不要把心思全花在卖弄技巧方面。 有些设计，在色彩运用上力求「大胆创新」，「标奇立异」，它推翻了一切色彩的基本定律，在视觉上不错会产生颇为震撼的效果，但我们还是不得不问，这个做法是否必需？设计师并非同艺术家，艺术家是可以全然感性，而设计师在感性之余，却需要有更多的理性。
附录 C 认知心理学与网页设计
"认知"简单的说就是知识的获得和使用，这牵涉到两个层面的问题：一是知识在我们的记忆中是如何贮存的，以及贮存什么的记忆内容问题；一是知识是如何被使用或处理的历程问题。前者强调?quot;心智结构"，后者强调的是"心智历程"。 以上这两个问题就是认知心理学研讨的两大方向，因此「认知心理学」可以定义为：为了解人类行为，而对人类心智历程及结构所作的科学分析。认知心理学的主要理论架构是"信息处理模式"。这个模式视人类为主动的信息处理者，探讨人类凭感官接受信息、贮存信息以及提取、运用信息等不同阶段所发生的事，所以认知心理学也常被称做"信息处理心理学" 。而对于信息，感官记忆可贮存大量的信息，只是若不予注意，信息很快就失去。所以要进一步「注意」，作「图样辨识」，选择须要的感官信号做进一步的处理。一般说来感觉刺激很少的信息很难被记忆，而那些能引起人们很强感觉刺激的信息很容易被人记忆。而现今社会是一个信息爆炸的时代，人们获取信息的方式主要是从Internet获得，在就必定要求在网页的设计上要遵循认知心理学的要求，才可以被人们容易感知。
在网页是设计方面主要遵循以下几点：
l 在版面设计方面：标题宜以包括图像及文字的综合设计表现之，宜居于版面中间位置，并以长方形方式呈现，宜突显于背景50% 为宜，背景色彩纯度过高会造成版面空白量感觉消失。对于连接横列式较长的文字连结点以单排向左对齐为宜，横列式较短的文字连结点以双排位置居中，文字向左对齐为宜，直列式图文连结点，个别间距宜加宽，以利区分，连结点之前用图像或色球来指引或强调，能方便搜寻。重要信息应置于标题之后，
l 首页连结点或内文之前，重要信息可以运用置于前端明显或突出的图像强调，重要信息可以运用不同颜色区块强调。保持固定的版式，求取统一感，方便阅读与搜寻。
l 在背景方面：背景与主体明度对比为 3:1 到 5:1 之间为宜，淡色系列的背景有助于整体和谐，淡色材质背景为佳，能与主题分离之浅色标志或文字背景亦可。
l 在色彩的搭配方面：同版面不宜超过七种纯色，整体色彩的表现做到和谐并能达到视觉平衡，避免类似色调，以致不同类信息之间的区隔不明显，运用小色球或色块能造成集群化的效果，以协助视觉搜寻。 在内部文字的设计方面：每一行文字的长度最好 20 到 30 个中文字﹝40 到 60 个英文字母﹞， 行距与字距已由软件内定。
l 设计者能以段落与段落间空行，及首行缩排方式以辅助阅读，字体大小， 标题以 H1 到 H3 为佳，内文 font size = 3 到 4 级为佳，在同一版面不要多于三种字型，且文字也不要用太多的颜色，易造成视觉的混乱，对选过的文字 ，在颜色上要能与未选过之文字连结点辨别，也要与背景区分。
l 在内容的选择方面：注意一定要与你所选的主题相关，不要把很多无关的内容放到同一张网页上.
l 在链接方面，不要有太多层的链接，容易使人感觉太乱，而找不到所想要的内容。 还有几点关于网页制作的忌讳：
l 避免使用大而无意义的图案，网上的游览者最注重的"速度"。但是许多网页设计者往往忽视了这一点, 为了视觉上的美观在网加插了一些大而无意义的图案背景;使网页的显示速度大大降低。结果可能在你网页的文字内容未显示前,读者已因等的不耐烦离开了。
l 忌闪动字,动画,转球,Java 等，许多人在网页放上这些效果来体现自己的网页设计知识丰富;但这已都是过去式了。加进这些效果没什么困难,到处都有新鲜的,免费的动昼 GIF,Java applets等供人随便下载,早使人见怪不怪。放有这些效果对网页实际上毫无帮助,只会使读者眼花辽乱,消耗电脑记忆体;更甚的,引致对方"当"机 ,以后再也不敢来了。
l 避免有断掉的连接,图案，无论你的网页设计的多好,如果其中有连接失效 (Broken Link),或无法显示的图案(Broken Image),会令人对你网页的印象大打 折扣。
l 忌"正在建造中"，如果你的网页仍在建造中,为何在网上公开? 告诉人们这些又有甚么意义?无论你的理由是甚么,"Under Construction"让人觉得你的网站一定还有问题,长期?quot;Under Construction"更令人感到你对维护网站并不 认真。如果你的意思是"此网页会不断更新",那就应该说清楚。
l 忌过长的网页，Internet的一大进步就是支持超连接,使页与页之间可以用标题,关键字，图案等轻易连接。但是仍有不少网页喜欢将许多资料都包括在单 一的页面上 ,使访客要卷动许多次页面才可以看到所有的内容。这样使网页的重 心难以突出,增加读者阅读上的困难，及可能因为网络速度的问题,使页面无法完整地下载。
扫一扫
2261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
