网页设计的基本原则

上一篇 / 下一篇 2007-07-09 14:40:18 / 个人分类：计算机相关

查看( 66 ) / 评论( 0 ) / 评分( 0 / 0 )

网页设计的基本原则

推荐指数：热 ★★★

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

"_LOziF|0

01.明确内容SupeSite/X-Space官方站0K,?p[2[5c"L
　　如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。

02.抓住用户SupeSite/X-Space官方站Scp @:pF9Y
　　如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。

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

D5|2j,[1vs| r004.快速下载
%o0K@-L8]N0　　没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。

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

.^J|+pJ/@006.坚持基本原则
8Ff{\|ab2Dg0　　即使你不懂HTML语言，你只需购买一个有版权的所见即所得的网页设计工具，如Adobe PageMill或MicrosoftFrontPage Express，就可以创建一个看起来很合理的网站。但是，在设计时，这些软件包虽然不需要HTML，却使网站速度下降。
(yq6hpe)s1G0　　为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。SupeSite/X-Space官方站#BG X-c`"a ~

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

j$Qf%Hb` g008.用笔画一个网站的框架
hi-YW/f9|&v0　　圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。

!Gq"h*u0f&s0lx1p009.网站地图SupeSite/X-Space官方站'HKo&[9e3o$z
　　许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的网站需要地图，那很可能是需要改进你的导航和工具条。
;r6UIM%l;[0　　
10.特殊字体的应用SupeSite/X-Space官方站X(F"\a!}7{"`
　　虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。

11.检查错别字
　　好的拼写是人们一生中重要的技能。但是遗憾的是，许多设计者都缺少这种技能。确保你拼写正确，并且格外注意平常容易误写的错别字。
1iO1Sy y2vD8r!l0
)\dC }\,}6n012.避免长文本页面SupeSite/X-Space官方站EJ*`-F7h)k
　　在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费Web的潜力。如果你有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便你的访问者能离线阅读。
Kn aE@4?0　　
]ht/q&vg;x!FQ JQ013.专家最喜爱的Web设计工具
?w,_1f| y%C!tN4w0　　1.Adobe PhotoshopSupeSite/X-Space官方站'yzg{8sL)Z
　　2.Macromedia Flash
CS(SJ7nYK0　　3.Adobe Illustrator SupeSite/X-Space官方站V4QPA0Oj2R
　　4.Adobe ImageRead
　　5.Dreamweaver
　　6.Macromedia FireworksSupeSite/X-Space官方站.G%hF6j(BC$h
　　7. Allaire Homesites
　　8.Microsoft Notepad
]6GmT/n@0　　9. Macromedia Director
1IL|5v8y2c@a0　　10. Lightwave
　　11. Macromedia Freehand
bUEO;}-a4v0　　12．其它：Adobe Acrobat Exchange，Allaire ColdFusion,BBEdit,HTML Validator等。

3ZJ2b@{'Fe(ETW014.网站介绍
$r7tZ*\3[m1u0　　你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。 SupeSite/X-Space官方站 T3u7HqA
　　SupeSite/X-Space官方站 wZbZ;m
15.闪烁让人头痛SupeSite/X-Space官方站1iz q0fw&R
　　通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站，就少用此方法。

16.背景颜色
e^]%e7wp1Ut_V0　　背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体。SupeSite/X-Space官方站*h5~ U!F;aJQ

"D_eUJV T5z017.向前和向后按钮
　　应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。
q0P6[?^5uwuC0　　
"O{.[)ux'LqZ!AHn018.点击记数器
　　不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务，而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义，它们很容易被做假，浏览者也不想看广告。如果你显示你的网站是多么受欢迎，你最好提供一个链接，显示访问日志。SupeSite/X-Space官方站d3D7E-AY3KW

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

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

21.重复使用图像
:h}kANa,CS0　　一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时，在网页上多次使用同样的图像是一个好的方法，并且一旦它们被装入，以后重新载入就会很快。SupeSite/X-Space官方站OQ'Y [rs

22.避免使用过大的图像
　　不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。SupeSite/X-Space官方站@4Dj%v+s

R h't5J8a Si0^023.选择使用Flash动画SupeSite/X-Space官方站?y v\`:?!g
　　许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。

;VGy Q\/rC024.尽量少使用Flash插件SupeSite/X-Space官方站*|5gs%Vf.A,Z
　　虽然许多Web设计者认为Flash功能很强大，并且Netscape5.0将支持Flash，在使用时不必再下载任何插件。
　　但是，最好还是取消使用Flash做各接口的想法。SupeSite/X-Space官方站3`e8~ SA

kdS\4o'@P$`025.让用户先预览小图像　
xm-j ku{4cZ0如果不得不放置大的图像在网站上，就最好使用Thumbnails软件，把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。SupeSite/X-Space官方站0X~Bn xK

Qz"h"Uv,TvX%N4J2]026.动画与内容应有机结合
'W#S&mr*]-w2H0　　确保动画和内容有关联。它们应和网页浑然一体，而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。SupeSite/X-Space官方站bL m#G%t*f

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

F*d!I&j-R9X,C028.少用Java和AxtiveX
F0rX+|"TV7v0　　在网页上应尽量少使用Java和AxtiveX。因为并不是每一种浏览器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题，过分地使用Java，会使Mac崩溃。

29.设计成功的网站
1^wX#k8P0　　www.bmw.co.uk　　——内容和关联性很好SupeSite/X-Space官方站6wbh+X\%B.M
　　www.yugop.com　　——图形下载很快
Q!U\jQ0　　www.comicrelief.org.uk　　——设计简单明了
　　www.dreamcast-europe.com　　www.newsunlimited.co.ukSupeSite/X-Space官方站m:~#]f"O!o)\
　　www.newbeetle.com
!_4J \8Z'I} MA0　　www.swoon.com　　www.viaduct.co.uk

30.慎用插件SupeSite/X-Space官方站4u_YK*@v"M
　　在Web设计中，如果依赖于一些特别的插件，会减少网站的吸引力。如果访问者没有所要求的插件，将不得不到其它站点去下载，这样访问者有可能就不会返回了。SupeSite/X-Space官方站D^5D7kM0k

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

32.使用先进技术SupeSite/X-Space官方站Rt0J/?L;C}
　　跟上新的技术。Web技术的进步绝不会停止，所以应花一些时间来研究新产品和开发技术。
hWiN9iuo t[b0　　
%Iy4gN]/^c @;C033.平台的兼容性
　　要为用户着想，必须最少在一台PC和一台Mac机上测试你的网站，看看兼容性如何。
　　SupeSite/X-Space官方站9U5GrP5~0R@
34.用软件分析工具找错
yIq[I!G3^F0　　使用软件分析工具检查HTML。软件分析工具Doctor HTML能够帮助检查HTML中的任何问题。如果你有许多网页需要检查，可选用软件分析工具。在网址www.weblint.org/validation.html中，你能够找到更多有效的HTML工具。

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

36.给观众成熟的东西SupeSite/X-Space官方站^8M-gU%T
　　如果网站没有完成，就不要发送到Web上。所有好的网站都是在幕后完成之后再发布的。

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

/L#`:D is.Xp$i038.设计一个留言板
:DZ;y9tG3gIZ0　　浏览者愿意把时间花在好的网站上，所以最好有一个留言本，这能激励访问者再次回到你的网站，还有助于扩充网站内容。

0~uC"[ }D@039.测试网站
-p2n'k"G1~-q9{b0　　在你的网站正式发布之前，必须进行有用的测试。在设计网站时要使用最新的软件，但是不要忘了人们并不会使用最新的浏览器，所以要照顾到以前的浏览器。在上载网站时还要测试所有的链接和导航工具条。SupeSite/X-Space官方站JFba^mI

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

3F*sC&X7_,ogB041.动画点缀
\n3rX"Kt8N1y2d0　　网页上的动画最多只用一个。

42.慎用按钮
^ODS.i\UY|1h0　　“倾斜的按钮看起来不会太好，最好不要使用。”——专家忠告
y:i.oz:T`&XKB eC4eq0　SupeSite/X-Space官方站Qs0tzYv
43.内容组织SupeSite/X-Space官方站gV$DO@Y m
　　在开始创建新的网页前，仔细考虑网站内容的组织。决定好想让访问者浏览的内容，然后设计导航系统。

44.“空白万岁”SupeSite/X-Space官方站*dQD.^0je
　　注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页，即使有足够的空间，在设计时也应该避免使用。

!o;@gsR[!}-a045.“利用空白去吸引注意力
　　为了吸引眼球，Web设计者使用各种方法，比如：闪烁、旋转等，但是利用空白会吸引更多的注意力。”——专家忠告

/R5`"J;mX}046.图像压缩SupeSite/X-Space官方站n%j%W XV
　　为了保持小的图像，可以使用类似GIF向导的程序，它能自动对图像进行压缩。SupeSite/X-Space官方站vWM)|!N-Q;N
　　先声明图像的大小
　　在图像显示之前最好能详细说明图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

4{!d$]J5L047.设计失败的网站SupeSite/X-Space官方站5pQ4i~X,Q
　　www.boo.com
TF(B!P@,M\z0　　——在它上面找一件T恤衫要花一个小时；
T'b.j!f M F&?mhT0　　——给顾客承诺的服务太多，但真正实现的太少；SupeSite/X-Space官方站-AwS*l7~|/E
　　——二年以前的设计水平，忽视了顾客的需要；
va,ua)eFST)C%N0　　www.miniheroes.co.uk
7Y.CBdl1j;UIg"}0　　——不吸引人，主页太雷同SupeSite/X-Space官方站7ft9| F7zj
　　www.saturn.com
:G*`{fLD2Et!{6j!~0　　——设计太差SupeSite/X-Space官方站9as z%wl6Q#E
　　www.e13.com.SupeSite/X-Space官方站t[[:M;s!`D
　　——没有新意SupeSite/X-Space官方站[U+? \L
　　www.song.com.
　　——导航不知所云

4\L/ig/t*tu.y#P k048.图像大小属性
　　可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。

3{(vskM!T$~N049.用户注册
!o'W(];J4T2}.x0　　如果能知道谁浏览了网站以及是怎样浏览网站的，那么就能得到大量有用的信息。但是，要求访问者在浏览网站之前进行注册，这样做是要冒风险的，因为这将赶走一批不愿意注册的人。获得信息的另一种方法是进行有奖竞猜或金钱奖励，让用户能主动填一些信息反馈表。

50.使网站具有交互功能
3f7tUn@5\0iS0　　在网站上提供一些回答问题的工具，使得访问者能从网站上获得交互的信息。

51.图片更新
#[ q9MX]"}O-S'{;U0　　尽可能经常更换网站上的图片，人们更愿意点击的是图片而不是文本

52.在网站上提供游戏
!RId}NX0　　游戏是很好的交互工具，它是使访问者能再次光顾网站的好方法。

L\`L*Af`bl!T053.挑选工具软件
v mS"l o_\,]0　　仔细选择Web设计工具。保证使用自己最想要的、自我感觉最好的软件

s)U'Y0h#]aJ054.使用最新版本的软件
　　尽量使用Web设计软件的最新版本，还应当能被授权进行免费或便宜的升级.