网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接……,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?阿捷这里谈一些心得,希望对你有所启发。

首先我们先来了解一些色彩的基本知识:

1、颜色是因为光的折射而产生的。

2、红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000),白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3、颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。

4、任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。

我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。

●非彩色的搭配

黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

●彩色的搭配

色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

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

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

二、色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色——是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色——介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色——也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色——具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色——是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色——具有洁白,明快,纯真,清洁的感受。

黑色——具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色——具有中庸,平凡,温和,谦让,中立和高雅的感觉。

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

●网页色彩搭配的原理

1、色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。

2、色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。

3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4、色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程

随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

●网页色彩搭配的技巧

文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色(在Photoshop 里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在Photoshop 里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)

4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。

在网页配色中,忌讳的是:

1、不要将所有颜色都用到,尽量控制在三种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

我就是s5s5

個人資料:
  昵稱:s5s5
  國家:中華人民共和國
  生日:一九八二年一月
  性別:男
  民族:漢
  身高:一米七二

一點感想:
  我是兩千年開始上網的,一開始就迷上了網頁制作。爲此參加了三次高考,經不斷努力上了湖北省孝感學院物理系物理學專業。從高中起就想找個MM,但一直沒找到!請郁悶的一件事,可能是性子問題吧,要不就是不會談戀愛吧,反正是沒有MM
  “s5s5=愛死我.愛死我”是我的昵稱,打CS,在網上注冊我都希望用這個ID。愛死我也不是希望人人都愛死我,但我希望我愛的人她可以愛死我。
  雖然……但我…
  目前來說,沒談過戀愛,是不成功的男人。

设计网站65条原则[转自foxsdesign.com]

设计网站中有哪些关键技巧?有哪些陷阱?在这里,世界上一流的网站设计专家,让你共享他们的秘密,告诉你:使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

  01 明确内容
  如果你想成为一个网站设计者,并正想建一个网站的话,首先应该考虑网站的内容,包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。

  02 抓住用户
  如果用户不能够迅速地进入你的网站,或操作不便捷,网站设计就是失败的。不要让用户失望而转向你的对手的网站。

  03 优化内容
内容是核心。大约在两年以前,企业网站就像一本广告册子,更槽糕的是,网站使用了大量的图片,似乎要几个世纪才能下载完。
  Chanels网站(www.channels.co.uk)在设计的某些方面是成功的,但是内容太贪乏,并且要花很长时间才能找到所要的东西,因此不能算是一个成功的网站。

  04 快速下载
  没有什么比要花很长时间下载页面更槽糕的了。作为一条经验,一个标准的网页应不大于60K,通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。

  05 网站升级
  时刻注意网站的运行状况。性能很好的主机随着访问人数的增加,可能会运行缓慢。但是,如果你不想失去访问者的话,一定要仔细计划好你的升级计划。   

06 坚持基本原则
  即使你不懂HTML语言,你只需购买一个有版权的所见即所得的网页设计工具,如Adobe PageMill 或 Microsoft FrontPage Express,就可以创建一个看起来很合理的网站。但是,在设计时,这些软件包虽然不需要HTML,却使网站速度下降。
  为了成功地设计网站,你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案,用Notepad制作网页。

  07 学习HTML
  用HTML设计网站,可以控制设计的整个过程。但是,如果你仅仅是网站设计的新手,你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中,HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式,以便你在把网站发送到Web之前,预览你的网站。

  08 用笔画一个网站的框架
  圣人云:笔比剑更强大。在用计算机之前,用笔画一个网站的框架,显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。

  09 “在计算机上永远也找不到好的方案”。 ——专家忠告

  10 网站地图
  许多设计者把他们的网站地图放在网站上,这种做法,却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息,他们对于你的网站是如何工作的,并没有兴趣。如果你觉得你的网站需要地图,那很可能是需要改进你的导航和工具条。

  11 “睁大你的眼睛,留意所有的事情。对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素,确保你的设计是围绕站点浏览进行的。”    ——专家忠告

  12 点击规则
  听说过3次点击规则吗?对于小型网站,在你的主页上,没有任何一条信息,需要点击次数超过3次的。对于大型网站,使用导航和工具条来改善操作。

  13 特殊字体的应用
  虽然你可以在你的HTML中使用特殊的字体,但是,你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面,在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性,这虽然允许你使用特殊的字体,但是仍需要一些变通的方法,以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题,但是只有最新版的浏览器才支持CSS。

  14 “使用切合实际的简便的命名规则。”    ——专家忠告

  15 检查错别字
  好的拼写是人们一生中重要的技能。但是遗憾的是,许多设计者都缺少这种技能。确保你拼写正确,并且格外注意平常容易误写的错别字。

  16 避免长文本页面
  在一个站点上有许多只有文本的页面,是令人乏味的,且也浪费Web的潜力。如果你有大量的基于文本的文档,应当以Adobe Acrobat格式的文件形式来放置,以便你的访问者能离线阅读。

  17 不要使用卷滚条
  人们厌恶在网上使用卷滚条。Trouble网站(www.Trouble.co.uk)是一个典型的设计很差的网站。它基于一个浮动的架构,为了阅读所有的文本,浏览者不得不使用卷滚条。

  18 专家最喜爱的Web设计工具
  1.Adobe Photoshop
  2.Macromedia Flash
  3.Adobe Illustrator
  4.Adobe ImageRead
  5.Dreamweaver
  6.Macromedia Fireworks
  7. Allaire Homesites
  8.Microsoft Notepad
  9. Macromedia Director
  10. Lightwave
  11. Macromedia Freehand
  12.其它:Adobe Acrobat Exchange,Allaire ColdFusion,BBEdit,HTML Validator等。

  19 网站介绍
  你应当有一个很清晰的网站介绍,告诉访问者你的网站能够提供些什么,以便访问者能找到想要的东西。但是,许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息,这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。

  20 “网站一旦发布,网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。” ——专家忠告

  21 闪烁让人头痛
  通过使用标识可以吸引访问者对你的主页特殊部分的注意,但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站,就少用此方法。

  22 背景颜色
  背景颜色也会产生一些问题,可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本,另外还应当坚持使用通用字体。

  23 向前和向后按钮
  应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条,使浏览者能够从每一页上访问网站的任何部分。

  24 “坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习。”    ——专家忠告

  25 点击记数器
  不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务,而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义,它们很容易被做假,浏览者也不想看广告。如果你显示你的网站是多么受欢迎,你最好提供一个链接,显示访问日志。

  26 不要用框架
  与记数器一样,框架在网页上越来越流行。在大多数网站上,在屏幕的左边有一个框架。但是设计者立刻就发现,在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是,搜索引擎常常被框架混淆,从而不能列出你的网站。

  27 去掉图像
  在浏览器中即使去掉了图像功能,也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者,还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字,而不是图像来满足访问者的需要。

  28 重复使用图像
  一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时,在网页上多次使用同样的图像是一个好的方法,并且一旦它们被装入,以后重新载入就会很快

  29 避免使用过大的图像
  不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。

  30 “避免使用炫耀的技巧。”    ——专家忠告

  31 选择使用Flash动画
  许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源,使网站的操作变得很困难,因此,应该给用户一个跳过使用Flash动画的选择。

  32 尽量少使用Flash插件
  虽然许多Web设计者认为Flash功能很强大,并且Netscape5.0将支持Flash,在使用时不必再下载任何插件。   但是,最好还是取消使用Flash做各接口的想法。   33 让用户先预览小图像   如果不得不放置大的图像在网站上,就最好使用Thumbnails软件,把图像的缩小版本的预览效果显示出来,这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。

  34 动画与内容应有机结合
  确保动画和内容有关联。它们应和网页浑然一体,而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。

  35 慎用声音
  声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢,同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣,但是多次以后肯定会很烦人。使用声音前,应该仔细考虑声音将会给你带来什么。

  36 少用Java 和AxtiveX
  在网页上应尽量少使用Java 和AxtiveX。因为并不是每一种浏览器都需要使用它,只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题,过分地使用Java,会使Mac崩溃。

  37 设计成功的网站
  www.bmw.co.uk   ——内容和关联性很好
  www.yugop.com   ——图形下载很快
  www.comicrelief.org.uk   ——设计简单明了
  www.dreamcast-europe.com   www.newsunlimited.co.uk   www.newbeetle.com   www.swoon.com   www.viaduct.co.uk

  38 慎用插件
  在Web设计中,如果依赖于一些特别的插件,会减少网站的吸引力。如果访问者没有所要求的插件,将不得不到其它站点去下载,这样访问者有可能就不会返回了。

  39 使用著名的插件
  如果网站上有声音或视频,要保证使用者通过使用某个知名的插件,能够听到或看到。许多站点使用QuickTime、RealPlay和 Shockwave插件。因为,许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件。

  40 使用先进技术
  跟上新的技术。Web技术的进步绝不会停止,所以应花一些时间来研究新产品和开发技术。

  41 自己创建图像和声音
  使用你自己创建的或从某个商业网站上下载的图像和声音。在制作商业网站时,应该花足够的资金来创建图形,以增强公司的宣传。
   ——专家忠告  

  43 平台的兼容性
  要为用户着想,必须最少在一台PC 和一台Mac机上测试你的网站,看看兼容性如何。

  44 用软件分析工具找错
  使用软件分析工具检查HTML。软件分析工具Doctor HTML能够帮助检查HTML中的任何问题。如果你有许多网页需要检查,可选用软件分析工具。在网址www.weblint.org/validation.html中,你能够找到更多有效的HTML工具。

  45 避免错误链接
  网站中可能与其它一些有用的站点作了链接。但是,如果在你的网页上有链接,一定要经常检查它们,保证链接有效。链接的网站可能很多,但不要链接到与你的内容无关的网站上。

  46 给观众成熟的东西
  如果网站没有完成,就不要发送到Web上。所有好的网站都是在幕后完成之后再发布的。

  47 在搜索引擎上登记网站
  任何一个人发现你的网站的机会都很少,除非你把你的网站在主要的搜索引擎上进行登记。

  48 设计一个留言板
  浏览者愿意把时间花在好的网站上,所以最好有一个留言本,这能激励访问者再次回到你的网站,还有助于扩充网站内容。

  49 测试网站
  在你的网站正式发布之前,必须进行有用的测试。在设计网站时要使用最新的软件,但是不要忘了人们并不会使用最新的浏览器,所以要照顾到以前的浏览器。在上载网站时还要测试所有的链接和导航工具条。

  50 “尽你所能反复测试所设计的网站,直到你不能发现新的东西为止。”    ——专家忠告

  51 演示即将发布的网站
  在网站正式运行之前,让人演示它。演示中人们会告诉你所设计的网站是否容易使用。

  52 动画点缀
  网页上的动画最多只用一个。

  53 “倾斜的按钮看起来不会太好,最好不要使用。” ——专家忠告   
54 内容组织
  在开始创建新的网页前,仔细考虑网站内容的组织。决定好想让访问者浏览的内容,然后设计导航系统。

  55 “空白万岁”
  注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页,即使有足够的空间,在设计时也应该避免使用。

  56 “利用空白去吸引注意力。为了吸引眼球,Web设计者使用各种方法,比如:闪烁、旋转等,但是利用空白会吸引更多的注意力。” ——专家忠告

   57 图像压缩
  为了保持小的图像,可以使用类似GIF向导的程序,它能自动对图像进行压缩。
  先声明图像的大小
  在图像显示之前最好能详细说明图像大小属性,可以在IMG标签中保存这个属性。这可以使网页显得很流畅,因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

  58 设计失败的网站
  www.boo.com
  ——在它上面找一件T恤衫要花一个小时;
  ——给顾客承诺的服务太多,但真正实现的太少;
  ——二年以前的设计水平,忽视了顾客的需要;
  www.miniheroes.co.uk
  ——不吸引人,主页太雷同
  www.saturn.com
  ——设计太差
  www.e13.com.
  ——没有新意
  www.song.com.
  ——导航不知所云

  59 图像大小属性,可以在IMG标签中保存这个属性。这可以使网页显得很流畅,因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

  60 用户注册
  如果能知道谁浏览了网站以及是怎样浏览网站的,那么就能得到大量有用的信息。但是,要求访问者在浏览网站之前进行注册,这样做是要冒风险的,因为这将赶走一批不愿意注册的人。获得信息的另一种方法是进行有奖竞猜或金钱奖励,让用户能主动填一些信息反馈表。

  61 使网站具有交互功能
  在网站上提供一些回答问题的工具,使得访问者能从网站上获得交互的信息。

  62 图片更新
  尽可能经常更换网站上的图片,人们更愿意点击的是图片而不是文本。

  63 在网站上提供游戏
  游戏是很好的交互工具,它是使访问者能再次光顾网站的好方法。

  64 挑选工具软件
  仔细选择Web设计工具。保证使用自己最想要的、自我感觉最好的软件。

  65 使用最新版本的软件
  尽量使用Web设计软件的最新版本,还应当能被授权进行免费或便宜的升级。

视频教学制作 Camtasia Studio

在经典老是看到那些老大们做出视频的教学FLASH,很是眼红~~~自己也想弄,可是老是不知道用得什么东东!
  今天又以经典里转圈圈,转着转着发现了制作的方法。说来也很惭愧,自己老是在坛里泡,今天在页子上转一转,就发现这东东了
  先生们,女士们,让我们欢迎 Camtasia Studio!!! 点击进入
英文版下载
汉化补丁

国外网站设计入门网站大观[转]

网站设计工业近年百花齐放,入门网站Design Portal也特别多,以下介绍一些有名的。

http://www.k10k.net
kaliber1000,是最有名的portal,其号称"设计师的午餐盒",是很多人每天必去的地方。目前该网站正在重整,但其享负盛名,不能不介绍。

http://www.linkdup.com
Linkdup至今已出至第34期,每期会介绍十多个网站。其评选严谨,能入榜的比属上品。

http://www.8minus8.com
版面简洁,网站收藏量不算多。

http://www.experimental.ro/front/index.php
设计出色,新闻也很update。

http://www.australianinfront.com.au
一个极具影响力的澳洲网站,宗旨是发扬本地创作的精神。

http://www.shadowness.com
一个带有photoshop/3D Max/Flash等教程的入门网站。

http://www.designiskinky.net
以报道各知名网页的最新动态为主。知名度很高。

http://www.pixelsurgeon.com
pixelsurgeon除了有新闻外,也有设计师的采访,甚至有电影/书籍/漫画/音乐等的review。他们有几位华人设计师。我旧的头像里的中文字就是出自pixelsurgeon。

http://www.halfproject.com
100%菲律宾制造是他们的口号。这个网站的制作出奇的好,非常有特色。而内容方面也比同类网站充实。

http://www.kiiroi.nu
kiiroi是早期成名的,尽来较为沉寂。

http://www.surfstation.lu
也是早期成名的。splash page随机的载上一些名设计师给他们做的封面。

http://www.shift.jp.org
shift杂志的全球影响力决不亚于其他网站。它除了经常更新的splash shockwave page,其他设计实在不敢恭维。但它拥有庞大的database,收录了无数东瀛及世界各地的出色设计。而他们出道甚早,可以说是design portal的开山鼻祖。

http://www.ultrashock.com
主办人为美国的Patrick Miko和比利时的Peter(www.nrg.be)。这个网站主力提供Flash的资讯/高级教程和高级源文件。讨论区是你见过最酷的vbb,里面的版主都是成名人物。而整个网站从设计者到会员大多是顶尖高手(除了我),所以水准极高。boos在那里混了很久,得益良多。

http://www.deformat.de
来自德国,连结了大小设计网站无数。deformat最大的优点是将各类型分门别类,介绍的很详细。

http://www.pixellamer.com
内容包括业界新闻,墙纸,连结等。值得一看。

http://www.infourm.com
inforum于数月前问世,规模较少但水准极高。inforum由forum制作,而fourm的成员包括:
www.Fourm.com
www.Natzke.com
www.Miniml.com
www.Soundofdesign.com
www.Gridplane.com
单看这幕后班底就知道infourm的厉害。miniml.com带起的pixel font潮流,估计还会流行几年。

http://www.h73.com
HSE7EN3的名气不亚于其竞争对手。去年此网站被Quorporation收购,重新整顿后很有大型网站的风格。无奈一直钟情的旧版h73,在新站里已找不到一点痕迹。今天发现h73这个URL重新运作,特来推荐。

http://www.threeoh.com
聞名一時的threeoh重整之後﹐這兩天又重見天日。目前網站內容不多﹐不少連結仍未做好。但憑他的實力估計能在短期內回復昔日光彩﹐請大家拭目以待。

http://www.db-db.com
人做的!