[转贴]网页制作及基础知识.

jzhihui · 发表于 2005-9-15 10:14

五彩缤纷建网页（3）色彩的象征

也要考虑色彩的象征意义。颜色得配置，可以流露你的心情和喜好，也会暴露你对颜色的驾驭程度。
　　在色彩的运用上，可以根据主页内容的需要和自己的喜好，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

　　暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的刺激如深黄到刺黄色。暗色中间含高亮度的对比，会给人沉着、稳重、深沉的感觉觉，如深红中间是刺红，中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰、纯色与高亮度的对比，给人跳跃舞动的感觉。如黄色与白色的纯色与低亮度的对比，给人轻柔、欢快的感快。如浅蓝色与白色纯色与暗色的对比，给人强硬，不可改变的感觉。

　　以下是部分色彩的象征意义

　　1．色调

　　暖色调。即红色、橙色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情的氛围。

　　冷色调。即青色、绿色、紫色等色彩的搭配，可使主页呈现宁静、清凉、高雅的氛围。

　　对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

　　2．色素

　　1)　色环

　　我们将色彩按“红->黄->绿->蓝->红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)

　　红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红
　　|___________| |____| |_________| |_________|
　　| | | | 暖色系中性系寒色系中性系

　　2)　色彩的心理感觉

　　不同的颜色会给浏览者不同的心理感受。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。

　　红色：强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，愤怒，热情，活力的感觉
　　
　　橙色：也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
　　
　　黄色：亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给人感觉灿烂辉煌

　　绿色：介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。和金黄、淡白搭配，产生优雅，舒适的气氛。

　　蓝色：永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，能体现柔顺，淡雅，浪漫的气氛，给人感觉平静、理智

　　紫色：女孩子最喜欢这种色，给人神秘、压迫的感觉

　　黑色：具有深沉，神秘，寂静，悲哀，压抑的感受

　　白色：具有洁白，明快，纯真，清洁的感受

　　灰色：具有中庸，平凡，温和，谦让，中立和高雅的感觉

　　黑、白色：不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有时感觉庄严肃穆。白色有时感觉无尽希望，有时却感觉恐惧和悲哀。

jzhihui · 发表于 2005-9-15 10:16

五彩缤纷建网页（4）背景与字体的搭配经验

BGCOLOR=“＃f1fafa”　file://做正文的背景色好，淡雅

BGCOLOR=“＃E8FFE8” file://做标题的背景色好，与上面的颜色搭配很协调这两种颜色可以配黑字或FONT COLOR=“＃800080”

bgcolor=“＃E8E8FF”　file://做正文的背景色好，字体配黑色较好

bgcolor=“＃8080C0”　file://上配黄色白色字体较好

bgcolor=“＃E8D098” file://上搭配浅蓝色或蓝色字体较好

bgcolor=“＃EFEFDA” file://上搭配浅蓝色或红色字体较好

bgcolor=“＃F2F1D7”//配黑字素雅,红字醒目

bgcolor=“＃336699” file://配白字做标题较好

bgcolor=“＃6699CC”和bgcolor=“＃479AC7”和bgcolor=“＃66CCCC"和bgcolor=“＃00B271”和bgcolor=“＃B45B3E”配白字都较好看//可做标题

bgcolor=“＃FBF8EA"和bgcolor=“＃D5F3F4"和bgcolor=“＃D7FFF0"和bgcolor=“＃F0DAD2"和bgcolor=“＃DDF3FF"配黑字都较好看 file://一般做正文以上配色方案都比较淡雅。

浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果。

jzhihui · 发表于 2005-9-15 10:18

五彩缤纷建网页（5）网页色彩配色软件

1．ColorWiz (国外)

　　超媒体置标语言（HTML）是一种用于编写Internet WWW网页文件的语言，随着HTML的不断发展，可以使用的"标记"（"tags"）越来越多，大大地增强了网页设计者的创造能力。随着HTML3.0版本的出现，现在网页设计者已经能够任意改变网页中文本和图象信息的色彩，可以指定字符颜色、背景颜色，以及访问链接、活动链接等部分的颜色。但是，在HTML语言格式中，颜色是由六位十六进制字符代码来确定的，例如：
<body bgcolor="#00000"TEXT="#00FF00"LINK="#0000FF" VLINK="00AA00"ALINK="#FF9933">
在语句中的六位十六进制字符代码分别指定了不同对象的红、绿、蓝三种色素的值，例如："#00FF00"指定了网页中字符的颜色为绿色。但是，这种十六进制代码格式很不直观，并非“所见即所得”，不能显示出颜色的实际效果。
　　
　　ColorWiz软件是由Game Tool Technologies公司开发的网页色彩设计辅助工具。是一个简单实用的网页色彩设计工具，提供“所见即所得”的方式编辑颜色，它可以让我们在网页设计中准确地把握色彩的运用，将我们的网页带入一个色彩缤纷的世界中。

　　目前，可以从http://www.gttweb.com站点下载该软件，文件名为cwizi.zip，它包含了运行文件ColorWiz.exe及帮助信息等文件。安装时，可将该压缩软件包还原在硬盘的指定目录中即可。注意，此软件只适合于Win98系统。

2．ColoringBook --- 电脑绘图配色图典(国内)

ColoringBook 界面图

　　这个软件包，可以作为电脑绘图配色的一本图典使用，也可作为学习色彩知识使用，也可一边创作一边查阅。这个软体的配色方案几乎已经囊括了我们日常涉及到的各个方面，按色系、和色相分类，能很容易，方便地找到您所想要的配色方案，每一种配色图案，满足您的不同需要。
　　
　　此软件的主要功能列表：

　　1．由一千多种方式配色图案，按色相和色系分类。
　　2．对于每一种配色图案，有８种观察模式可供选择，便于观察配色的效果。
　　3．可以在配色窗口中动态调整每一种颜色的颜色分量,能满足电脑作图的精度需要。
　　4．对每一个配色图样，用户可以增删对它的描述文本，便于收藏心得体会。
　　5．程序支持总在最上的特性，还可以动态调整配色图案区背景颜色，屏幕分辨率和颜色数。
　　6．支持用户自定义，用户可以加入自己定义的配色到图档库中，同时加入自己的描述语言，可以很方便的将自己的心得体会，储存到数据库中，方便于日后的查询参阅。

jzhihui · 发表于 2005-9-15 10:19

如何打造实用网站？

遨游网络世界实在很简单，只要点选蓝色的超级链接就可以了，大家都知道怎么作。既然三岁小孩都会，那网站的可用性（Web usability）还有什么可讨论的呢？
以下这几点正是我们的答案：
1. 点选连结很简单，但要知道哪些连结值得点可不容易。网页上的说明常常不清不楚的，让网友犹如坠入五里迷雾，不知道应该点哪里才对。

2. 现在网络上互动的技术五花八门，除了传统蓝色的超文件连结标示之外，还有Java以及动态HTML，往往让使用者更加头大。

3. 网络上的导览做得很糟糕，使用者结果会迷失在浩瀚的网络世界里，找不到自己想要的网站。

4. 不论是平面或是旧的媒体格式，网页内容都可以针对这些需求进行最佳化的安排，不过几乎没有什么网页内容能够满足上网者在在线阅读最适化的需求。

5. 电子商务交易的流程并不容易让人了解，而且也不容易完成。

6. 许多网页虽然做得相当亮丽，但是金玉其外败絮其内，使用者反而找不到需要的内容，也没有想要的交易项目。

7. 网友的整体使用体验相当不理想，尽管某些个别项目还算过得去，但是缓慢的下载过程往往令人退避三舍。

　　此外，以下这一点也在在的说明了为何我们需要顾虑到网页的可用性：就目前的情况来说，高达九成的商业网站都相当不实用。如果你想要找到某些数据，那么在一般的网站肯定会找不到，就算能够找到，也要经过一番辛苦奋斗。从以往的经验可以得知，网站的可用性无法一蹴可及，除非项目管理团队在网站设计过程就特别注意网站的可用性，否则结果往往令人失望。

　　如果高达九成的网站可用度都这么差，那么人们为什么还要上网？简单的说，剩下来一成的网站还算不错(甚至于很棒)，网络是一种使用者主导的传播媒介，人们会去自己想要造访的网站—也就是说使用者大多数的时间都是花在好的网站上，并且尽量避免制作粗糙的网站。

　　好消息是，既然大多数的网站都做得不好，那么你只要把网站做得容易使用，以及满足使用者的需求，那么必然能够脱颖而出，吸引庞大的人气。

提升网站使用性的方法

　　在这有几个简单的方法，可以提供给各位大幅提升网站的可用性。这些方法往往会有立竿见影之效，实施之初就会有相当大程度的改变。接下来的效果虽然比较不明显（因为真正的问题在一开始就已获得解决），但是仍然能够稳定的改善网站的可用度。现在网站的可用度至少还可以改善个20倍，因此就算再努力也不为过。

　　我们应该如何衡量网站的可用性呢？各位可以从使用者学习网站使用的速度、找到所需数据的快慢、以及达成订货之类的任务需要多久时间来衡量。如果业者能够把企业内部应用程序的训练预算砍掉一半，或是让客户加速在网站上交易的时间，那么其网站的可用性更是加倍。虽然这并不代表业者能够拿到两倍的订单，但是至少能够在其它的网站当中脱颖而出。

以下是改善网站可用性的步骤：

1. 不管你觉得旧的网站有多烂，在重新设计之前，可以针对旧版使用者做个小型的意见调查，说不定旧版网站里还是有些值得保留的特色。调查当中也能够看出来以前让使用者感到窒碍难行的问题所在，以及使用者对于网站错误的看法，对此有通盘了解之后，再重新设计也会比较容易。

2. 针对竞争对手的网站进行比较性的使用者意见调查。别的公司为了打造网站而耗费巨资，透过使用者意见调查，你可以效仿他们的长处，并且避免犯上和他们同样的错误。

3. 针对使用者进行实际的调查（field study），彻底了解他们工作环境的状况。这个步骤对于专门支持员工或是企业伙伴的企业内部网站或是企业间网站而言尤其重要。你会发现到调查结果和经理人片面告诉你的往往总是会有些出入。不相信吗？想想呆伯特吧。

4. 建立几个不同的设计模型，为了在最短的时间之内测试各种可能性，这些设计应该交由不同的团队来同步进行。并且针对几位使用者进行调查，从中找出最适合你的新设计。

5. 挑出最适合的设计之后，即可进一步开发，先以 HTML 作出几个雏型页面，即可邀请更多的使用者来进行测试，找出这个设计的美中不足之处。

6. 如果预算许可的话，反复多试几次：修补从测试当中发现的问题，进一步开发原型之后再进行测试。你每作一次，网站平均的可用性就可以增加38%。追求尽善尽美的过程是永无止尽的﹔我所有研究过的个案，早在达到完美的使用者接口之前，就已烧光了所有的预算。

7. 当网站建构得差不多，已经具备关键页面以及导航组件时，可以再做一次最后的测试，藉以调整商标、找出错误的讯息、以及调整互动功能的细项问题。虽然在最后的测试阶段已经无法针对最基本的问题进行改变，但是依然可以大幅提升网站的可用性。

8. 推出你刚设计好的网站。与其办个庆功派对，你不如花点心思开始规划下一次改造的设计。搜集使用者意见，分析记录文件，并且搜集其它新设计可用性有关的资料。请记住，网站永远有改善的空间，就算是新的设计也不过是下个设计的原型罢了。

使用者测试

网站可用性的改造工程通常都有使用者测试这一环，进一步的改造工程则有其它的方法可用，让我在此大胆的推荐各位参考我写的『网站可用性改造工程』(Usability Engineering)一书，里头会针对这些方法作更深层的探讨。至于消费者调查则会在接下来的专题当中加以讨论。

基本的使用者测试其实很简单。只要记住三件事件：

1. 测试的对象必须具有代表性，能够反映出你目标观众的看法。除非是企业内部网络，你才可以同侪作为测试对象，否则不要用你的同事或是任何了解这项项目的人。不过就算是企业内部网络，也应该避免以项目团队的成员作为测试对象。

2. 测试的时候，不要只是玩一玩网站接口而已，使用者应该实际执行某些工作：网站上到处点一点当然很简单，真正的考验在于网站是否能够协助使用者解决某些特定的问题。所测试的工作也必须具有代表性。

3. 避免出面干涉，让测试者自行感受，并且畅所欲言。测试的目的并非展现你有多聪明，也不是要协助使用者加速达成任务，而是希望从使用者解决问题的实际体验当中获得宝贵的意见。请记住，使用者从家里或是办公室造访你的网站时，可没有专家坐在旁边。你必须知道在实际状况下，使用者是如何使用你的网站：这表示测试者必须自行体验才行。

如果想要进行更进一步的测试，则可以采取专业的可用性实验室、在国外进行测试管理、或是眼球追踪（eye-tracking）等不同的方法。不过基本的测试方法实在很简单：也就是让具有代表性的测试人员实际处理工作，并且让这些使用者畅所欲言，发表他们实际使用的心得。

这是大家都能够作得到的测试方法，而且大家都应该这么做。如果你漏掉这个重要的步骤就匆匆推出网站，那么根本就是浪费预算，要不了多久你还是得重新设计一遍。

jzhihui · 发表于 2005-9-15 10:23

发完了...大家一起学!:*29*:

http://vip.oot.cn/temp/01/0523%u8700%u5916%u7D2B%u9752.swf

[ Last edited by jzhihui on 2005-11-14 at 18:41 ]

月印千江 · 发表于 2005-9-15 10:59

多谢，多谢！

hd-hur · 发表于 2005-9-15 11:04

这是好贴，所以要顶！！！

cgftzx · 发表于 2005-9-22 17:35

我是新手,我爱这文章!!

wgxiong · 发表于 2005-9-22 21:19

ddddddddddddddd

总是要注册 · 发表于 2005-9-24 18:44

好贴子

明月如来 · 发表于 2012-4-28 20:24

#loveliness#

谢谢楼主！

ruiancl · 发表于 2013-4-1 10:47

		搜索
热搜: macd K线与均线飞狐分时指标共振指标分时橡胶牛股炒股入门