我爱电脑技术论坛 » 网站建设 » 网站设计65条原则

tianshiren 发表于 2008-5-2 11:59

网站设计65条原则

网站中有哪些关键技巧？有哪些陷阱？在这里告诉你：使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。 8`%uxFt(O%PH{
6U-d.r%s,}
J6T&Q
01 明确内容 $b6i_}2}%sfh

2X&f?e,D.g2n/K 如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。
*Xa2il-zLL
W'S{ V:sq1c 02 抓住用户
0U'y:^ L&L0l #]k+Vf1y
如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。
&Y\2vL
b 6{
q|"Q7p1xP
03 优化内容 (h ncf8wP$b.e

j^-Y~a(j+I yI` 内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。 Chanels网站（[url]www.channels.co.uk[/url]）在设计的某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算是一个成功的网站。 4M C
{2gn7P)g
.D+_&r Bp7A&Y5W
04 快速下载
1a$c+b8saQO2x;Q/}k G*gC @K9L.br|E
没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。
x/}2P"B`
RdKy,[5A$W:q't 05 网站升级 YbH%O*zwX't8Rn

t._:S(^v.y{ Xg$}Vj 时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。
w C j Sd6cM a
Ujt9IH ECz6r
06 坚持基本原则
\ rnwY[z
p6P&_&T8cS]w 即使你不懂HTML语言，你只需购买一个有版权的所见即所得的网页设计工具，如Adobe PageMill 或 Microsoft FrontPage Express，就可以创建一个看起来很合理的网站。但是，在设计时，这些软件包虽然不需要HTML，却使网站速度下降。 为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。 K\u:X,F b2j

U#Rp!`0DHt 07 学习HTML o:z/g1sO
p Hf@/NHe%QVG*N
用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中，HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在把网站发送到Web之前，预览你的网站。 MPm&Td?U'Q i

0r{$Sa6J"zV 08 用笔画一个网站的框架 G_Ym0`
E
a,R i

S@'Y\J)R#z,t|G 圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。 V$u0m%\Ar9\m3qw
tb
?+@*J
09 “在计算机上永远也找不到好的方案”。 ——专家忠告
9e1slm-N.{N
fpLQj't+GM7~6l*I 10 网站地图
3z/YuJ+kiix&f F[!w0H+v&F
许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的网站需要地图，那很可能是需要改进你的导航和工具条。 -_fI2y-D7i]4k)yuCap;t
F4g0z6Y7Bsd#o@7S
11 “睁大你的眼睛，留意所有的事情。”@!Ku cT#j,BP5k
fL o ug7?QF
“对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素，确保你的设计是围绕站点浏览进行的。” ——专家忠告 t7n.z_N ^e){gk
@|Z#TN/c`"F2vK/_2Y
12 点击规则
'|!V&Mjry3k/p9E ?c)L.f8H^
听说过3次点击规则吗？对于小型网站，在你的主页上，没有任何一条信息，需要点击次数超过3次的。对于大型网站，使用导航和工具条来改善操作。 X O0_Y`]h

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

4}DDD.\;u`T :v/\vA1P4r9q/rf
14 “使用切合实际的简便的命名规则。” ——专家忠告
)l!vFp"f9V$oBG Z6o5pNz
15 检查错别字 |$G(_\;b JA/c

*JO![8p1T E0e 好的拼写是人们一生中重要的技能。但是遗憾的是，许多设计者都缺少这种技能。确保你拼写正确，并且格外注意平常容易误写的错别字。
b/RATGk ?
Se)k6T8_6jZ4PQ 16 避免长文本页面
#cW _1nb:w'j }1Funny
在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费Web的潜力。如果你有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便你的访问者能离线阅读。 NS1e4dV S0S C!S\O
nyR(e!fxc
17 不要使用卷滚条
b&H+`f4Ju
W{l'P
;Z(["U|I1NJ:h+e
f 人们厌恶在网上使用卷滚条。Trouble网站（[url]www.Trouble.co.uk[/url]）是一个典型的设计很差的网站。它基于一个浮动的架构，为了阅读所有的文本，浏览者不得不使用卷滚条。 q0z
O!Su0H/b
#R7YDlb.JYf
18 专家最喜爱的Web设计工具
#o]wG4ksLPOn x5F L'kf,C_
1.Adobe Photoshop
&z-sn;F'H;gC7R'ZA 2.Macromedia Flash1pdk(po X5O se
3.Adobe Illustrator
F["y\Z$g ['P(E 4.Adobe ImageRead
S fdN)_+jo R 5.Dreamweaver
c$Q(@-kT:u5D-G,yq 6.Macromedia Fireworks/_d YQ5Q,Fv} I:O
7. Allaire HomesitesAo)o9{/{
8.Microsoft Notepad
6K&E} q8FR8MF2r 9. Macromedia Director
v[9i8T;Pr 10. Lightwave
CS d:mWqu3n 11. Macromedia Freehand.c6q:|0@Sj mIq
12．其它：Adobe Acrobat Exchange，Allaire ColdFusion,BBEdit,HTML Validator等。 #X)lr"c$ev_

NTi$}!| ~-F\ 19 网站介绍 2d9y$O-P f1lrh
dk~ H2J4["I)^5?4g-`
你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。 fd#jYW]6h
)pCA4M]8YsVAmc#Z
20 “网站一旦发布，网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。” ——专家忠告
&id,p*~"w
g[,TV+bBQ 21 闪烁让人头痛
*s-s;x
Lxqm
~S#o2|,N_ J@ 通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站，就少用此方法。
F+Cs
`1M
^YP9~)]"F UUo3q 22 背景颜色
/D.vWR rb:y qgR{%V,|2se
背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体。
o0{[.H_1V?Z )CI^ E [$\$g\8e
23 向前和向后按钮
6o{H2[|n2ST
+_ Hn#GPyu;^ 应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。 6FN8C1wR{/dGG

GNb-t!p6?!W"l 24 “坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习。” ——专家忠告 8H9]"}#@-_&U?8nm'b
\~w_
~#nPdaBR
25 点击记数器 $Gpfe US#FQ

/@B!M8mq&}zr$P^ 不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务，而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义，它们很容易被做假，浏览者也不想看广告。如果你显示你的网站是多么受欢迎，你最好提供一个链接，显示访问日志。
0[R6pD z"pQ /{ryCb/jh
26 不要用框架 :z([4Z(g.ZD e;wo
t}R SJV/J({7}
与记数器一样，框架在网页上越来越流行。在大多数网站上，在屏幕的左边有一个框架。但是设计者立刻就发现，在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是，搜索引擎常常被框架混淆，从而不能列出你的网站。
(c(b-qw2E:O8rY _8i0g9T%K"l`
27 去掉图像 7V-MS!sX Bw n&^c

:v\#\ q+r;E 在浏览器中即使去掉了图像功能，也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者，还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字，而不是图像来满足访问者的需要。 :sb'N_w+_T`_,o
\3w:TN[7?
28 重复使用图像 :U7`9|(udl

/E_!k Y
} 一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时，在网页上多次使用同样的图像是一个好的方法，并且一旦它们被装入，以后重新载入就会很快。 :iryBW$O
IQ? K4ej-U/Y`$p
29 避免使用过大的图像 [0p r+^,dcB0d

's6Y0E_ [uPj8aLk{ 不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。
0}6n q%s7y;qQ
!N$~j1a V;~ Yk3F 30 “避免使用炫耀的技巧。” ——专家忠告
}9Q [;Q)iH4ZE e
UiwxC(\ 31 选择使用Flash动画
lRV+jua}d&s
7T ~X8_6VKo 许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。 ol'C&N:fgk&O?

XPR-L YP'W'toJ 32 尽量少使用Flash插件 x*S9Aq?k:D(p

wBS2yP0q{ 虽然许多Web设计者认为Flash功能很强大，并且Netscape5.0将支持Flash，在使用时不必再下载任何插件。 但是，最好还是取消使用Flash做各接口的想法。 (?O9Q'h8n|
P6z tJ0sT6M
33 让用户先预览小图像
o&s(fVo
%i`-^5|xC Z~g%d 如果不得不放置大的图像在网站上，就最好使用Thumbnails软件，把图像的缩小版本的预览效果显示出来，这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。
G3ZzvC@zH
%D$IV/N(G"K 34 动画与内容应有机结合
kRo^v.B
N iwp"q5K@W 确保动画和内容有关联。它们应和网页浑然一体，而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。 ]+Dx\8x]}

I ~&Z+K6?1x3B7@ 35 慎用声音
D5]4LH `#p(f:c &L&EZ%o){(C_Y
声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地。因为过多地使用声音会使下载速度很慢，同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣，但是多次以后肯定会很烦人。使用声音前，应该仔细考虑声音将会给你带来什么。
*Uqql bT9L#Na
$T3x8j2T$Yb(I%z 36 少用Java 和AxtiveX S@(t)H,m~8D
$G/so G9g.t]%b
在网页上应尽量少使用Java 和AxtiveX。因为并不是每一种浏览器都需要使用它，只有那些Netscape 和Explorer的早期版本的使用者才需要它。另外Mac在处理Java时也存在问题，过分地使用Java，会使Mac崩溃。
8A"}"H:Z1W1^I$c:n 8k$V)Aa"kJ"q@|:{
37 设计成功的网站 %Z rvSdVTt

Mx~9uU [url]www.bmw.co.uk[/url] ——内容和关联性很好\
'}#?V-yZ7Z0~ [url]www.yugop.com[/url] ——图形下载很快
xko~.Pk8A [url]www.comicrelief.org.uk[/url] ——设计简单明了
5l.t6r6Tzn0I+| [url]www.dreamcast-europe.com[/url]
Ql Y
OO H [url]www.newsunlimited.co.uk[/url]h3V7c5d0g H6g
[url]www.newbeetle.com[/url]
M+hMSB:Y g [url]www.swoon.com[/url]
f5K@H-J [url]www.viaduct.co.uk[/url]^g8}G4zj
-N'gB@b#[bx8T

Q;b)^#n!M%W 38 慎用插件 2FZPoU
/hA X7`&?\0t5G
在Web设计中，如果依赖于一些特别的插件，会减少网站的吸引力。如果访问者没有所要求的插件，将不得不到其它站点去下载，这样访问者有可能就不会返回了。 E:@h1l MT bh

yU*`
n&?^$d 39 使用著名的插件 7Fl'Q5k#}`a&M
+p,BU~0l&k"|
如果网站上有声音或视频，要保证使用者通过使用某个知名的插件，能够听到或看到。许多站点使用QuickTime、RealPlay和 Shockwave插件。因为，许多访问者并不愿意浪费很多时间和金钱去下载可能仅使用一次的插件。g0]'Rn4zrM/qQ

m#PC1yx8E#H}&T:u"R 40 使用先进技术 5X n ?2pJ_
!BT!E b E'c p'e
跟上新的技术。Web技术的进步绝不会停止，所以应花一些时间来研究新产品和开发技术。
7o5i~v9]#aA WQRi*@Zv&b3[ g
41 自己创建图像和声音 T"Q]NT?%^
;_b:C*q5Bg x g%_+V
使用你自己创建的或从某个商业网站上下载的图像和声音。在制作商业网站时，应该花足够的资金来创建图形，以增强公司的宣传。 !NB!UN2s`I/j
[8['fdU M+Au
42 “无论是游戏、图像、动画还是电影，想想你喜欢的设计是怎样的，这将激发你的创作灵感，使你创作出新的和更好的网站。” ——专家忠告 zOG}UC.X

^/|;KG+k7}.F$M^,b
43 平台的兼容性
B2TfX-n3le EM ~;ZM{
要为用户着想，必须最少在一台PC 和一台Mac机上测试你的网站，看看兼容性如何。
QD7H9[pv
d$LglX Y
x'~
aD
44 用软件分析工具找错
e{V"A"KqXa L6lk4|@P-uy2W
使用软件分析工具检查HTML。软件分析工具Doctor HTML能够帮助检查HTML中的任何问题。如果你有许多网页需要检查，可选用软件分析工具。在网址[url]www.weblint.org/validation.html[/url]中，你能够找到更多有效的HTML工具。
?+S2L'dZYe,i5zID
c 4Ft;RLZg2QwL
45 避免错误链接
&`p"E x'LX:l
BV
y9E"S
@)]}Uy izn4c 网站中可能与其它一些有用的站点作了链接。但是，如果在你的网页上有链接，一定要经常检查它们，保证链接有效。链接的网站可能很多，但不要链接到与你的内容无关的网站上。 \0`nKJf0L3@
,Ftem*Z7Bnc z
46 给观众成熟的东西 uuKA%eMX;nr-e
`R I2P W4B|
如果网站没有完成，就不要发送到Web上。所有好的网站都是在幕后完成之后再发布的。

`5Hh+`^;erg%|n P)^qN6r y)H
47 在搜索引擎上登记网站 -kbWlU:k
8S5vEgNm
任何一个人发现你的网站的机会都很少，除非你把你的网站在主要的搜索引擎上进行登记。
8y| F H6q7h(TM N'_)MS-P&FeFBz
48 设计一个留言板
B!~%X$T
~x9VA$c
_
u^ SZ1x}
浏览者愿意把时间花在好的网站上，所以最好有一个留言本，这能激励访问者再次回到你的网站，还有助于扩充网站内容。
_Z&~&n`#rsh
:tJ%spD'R6x%St 49 测试网站 u8O%a%l7k1O-V^

;^0uN&Ed P 在你的网站正式发布之前，必须进行有用的测试。在设计网站时要使用最新的软件，但是不要忘了人们并不会使用最新的浏览器，所以要照顾到以前的浏览器。在上载网站时还要测试所有的链接和导航工具条。
%^CF9L4e;f
7shU_$sM/k*K 50 “尽你所能反复测试所设计的网站，直到你不能发现新的东西为止。” ——专家忠告 Ar'a7[0c~ cw)M

Q S!Vk!Z-d 51 演示即将发布的网站 E(IC t*B
o!l{f
axE[G2o$M0F;`:f
在网站正式运行之前，让人演示它。演示中人们会告诉你所设计的网站是否容易使用。 h p(Vhl\A.}

ao*psKY 52 动画点缀 j^.k_.K;_

x|ta `'c
|#]8V 网页上的动画最多只用一个

@&TaCz9@V1J 7e+Kme,Pm2t
-mz+K1o+pU
53 “倾斜的按钮看起来不会太好，最好不要使用。” ——专家忠告
&kH9u|o k"Rt/FU A;BiZ-u
K)v w*W
ek
54 内容组织 E.h,z:H3e3r;XW'`

dOORg u|8mqT9I2n.N 在开始创建新的网页前，仔细考虑网站内容的组织。决定好想让访问者浏览的内容，然后设计导航系统。 n:g&Z7\gS!qcc
(] Ap3_~:b!J `;L
55 “空白万岁”
tdat'De8v
QW1h;~{|G 注意留空白。不要用图像、文本和不必要的动画GIFs来充斥网页，即使有足够的空间，在设计时也应该避免使用。 -m$?N/zr.L1djG&D
q'encO|Y Vz
56 “利用空白去吸引注意力。为了吸引眼球，Web设计者使用各种方法，比如：闪烁、旋转等，但是利用空白会吸引更多的注意力。” ——专家忠告
"|1ad'@ f&R)| Iv
-Wzv2K,Z)@z0^D 57 图像压缩
"H&sn#[
s7_qI;M'J9o8R f|q3l E!Hr*WO'E!m
为了保持小的图像，可以使用类似GIF向导的程序，它能自动对图像进行压缩。 先声明图像的大小,在图像显示之前最好能详细说明图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。 idp+Iw]j
'F bf#e'L D$J d
58 设计失败的网站 !VZ't8Y }%q z&j!N(D
S
U3d]~I
[url]www.boo.com[/url] ——在它上面找一件T恤衫要花一个小时 [url]www.miniheroes.co.uk[/url] ——不吸引人，主页太雷赘
a)c%X?.Jx:g+BV F,W(bU'hQ
[url]www.saturn.com.[/url] ——设计太差
'~/ksc:cQB v
p7\ MA
[url]www.e13.com.[/url] ——没有新意
%[8OGK$oU
P5Grw!g;DV7A [url]www.song.com.[/url] ——导航不知所云 &W9Jo LpE}

P(x_r"W_A)d8e 59 图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页。
'TK1tmi,|0G%g
,Z_`rNG+J/c 60 用户注册
Us"P_r\ D%x~Z*p

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

gJ*d4f?d V8h'Y 61 使网站具有交互功能 -\w,DF m
KY

4_z1] l_6gX^l 在网站上提供一些回答问题的工具，使得访问者能从网站上获得交互的信息。
YO0rE!Ikn
6pDdP4N2^Ar 62 图片更新 zXx5J8~k1Pd
_a.ip` t
尽可能经常更换网站上的图片，人们更愿意点击的是图片而不是文本。
-d-w
gkhh3[ x&h\t
D4}.W1tSH%wf 63 在网站上提供游戏
:_ ~ Z$dN9E0^@t
q'H+i
.z%_9eq6w9mP+`Ap 游戏是很好的交互工具，它是使访问者能再次光顾网站的好方法。 6\'P#bz#\#p4G5k5j4a
3S-G3]2A3l b"q8x'v
64 挑选工具软件 u~/|kq

9Nb c(F3^`p,qQH 仔细选择Web设计工具。保证使用自己最想要的、自我感觉最好的软件。 m#wD1|W ~7`X

&Jq\B,@ T
D 65 使用最新版本的软件
rNd T&U1p EO
H D"`!S3F 尽量使用Web设计软件的最新版本，还应当能被授权进行免费或便宜的升级

查看完整版本: 网站设计65条原则