網(wǎng)站設(shè)計(jì)要怎么設(shè)計(jì)?

網(wǎng)站制作精華65條原則
01.明確內(nèi)容
如果你想成為一個(gè)網(wǎng)站設(shè)計(jì)者，并正想建一個(gè)網(wǎng)站的話，首先應(yīng)該考慮網(wǎng)站的內(nèi)容，包括網(wǎng)站功能和你的用戶需要什么。你的整個(gè)設(shè)計(jì)都應(yīng)該圍繞這些方面來(lái)進(jìn)行。

02.抓住用戶
如果用戶不能夠迅速地進(jìn)入你的網(wǎng)站，或操作不便捷，網(wǎng)站設(shè)計(jì)就是失敗的。不要讓用戶失望而轉(zhuǎn)向你的對(duì)手的網(wǎng)站。

03.優(yōu)化內(nèi)容
內(nèi)容是核心。大約在兩年以前，企業(yè)網(wǎng)站就像一本廣告冊(cè)子，更槽糕的是，網(wǎng)站使用了大量的圖片，似乎要幾個(gè)世紀(jì)才能下載完。
Chanels網(wǎng)站（xjjufeng.cn）在設(shè)計(jì)的某些方面是成功的，但是內(nèi)容太貪乏，并且要花很長(zhǎng)時(shí)間才能找到所要的東西，因此不能算是一個(gè)成功的網(wǎng)站。

04.快速下載
沒(méi)有什么比要花很長(zhǎng)時(shí)間下載頁(yè)面更槽糕的了。作為一條經(jīng)驗(yàn)，一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)應(yīng)不大于60K，通過(guò)56K調(diào)制解調(diào)器加載花30秒的時(shí)間。有的設(shè)計(jì)者說(shuō)網(wǎng)頁(yè)加載應(yīng)在15秒內(nèi)。

05.網(wǎng)站升級(jí)
時(shí)刻注意seo網(wǎng)站優(yōu)化的運(yùn)行狀況。性能很好的主機(jī)隨著訪問(wèn)人數(shù)的增加，可能會(huì)運(yùn)行緩慢。但是，如果你不想失去訪問(wèn)者的話，一定要仔細(xì)計(jì)劃好你的升級(jí)計(jì)劃。

06.堅(jiān)持基本原則
即使你不懂HTML語(yǔ)言，你只需購(gòu)買一個(gè)有版權(quán)的所見(jiàn)即所得的網(wǎng)頁(yè)設(shè)計(jì)工具，如Adobe PageMill或Microsoft FrontPage Express，就可以創(chuàng)建一個(gè)看起來(lái)很合理的網(wǎng)站。但是，在設(shè)計(jì)時(shí)，這些軟件包雖然不需要HTML，卻使網(wǎng)站速度下降。
為了成功地設(shè)計(jì)網(wǎng)站，你必須理解HTML是如何工作的。大多數(shù)的網(wǎng)站設(shè)計(jì)者建議網(wǎng)絡(luò)新手應(yīng)從有關(guān)HTML的書中去尋找答案，用Notepad制作網(wǎng)頁(yè)。

07.學(xué)習(xí)HTML
用HTML設(shè)計(jì)網(wǎng)站，可以控制設(shè)計(jì)的整個(gè)過(guò)程。但是，如果你僅僅是網(wǎng)站設(shè)計(jì)的新手，你應(yīng)該尋找一個(gè)允許修改HTML的軟件包。HomeSite4是一個(gè)很好的Web設(shè)計(jì)工具。在設(shè)計(jì)過(guò)程中，HomeSite4能幫助你學(xué)習(xí)HTML。它還允許你切換到所見(jiàn)即所得的模式，以便你在把網(wǎng)站發(fā)送到Web之前，預(yù)覽你的網(wǎng)站。

08.用筆畫一個(gè)網(wǎng)站的框架
圣人云：筆比劍更強(qiáng)大。在用計(jì)算機(jī)之前，用筆畫一個(gè)網(wǎng)站的框架，顯示出所有網(wǎng)頁(yè)的相互關(guān)系。計(jì)劃好你的用戶如何以最少的時(shí)間瀏覽你的網(wǎng)站。

09.“在計(jì)算機(jī)上永遠(yuǎn)也找不到好的方案”。——專家忠告

10.網(wǎng)站地圖
許多設(shè)計(jì)者把他們的網(wǎng)站地圖放在網(wǎng)站上，這種做法，卻是弊大于利。絕大部分的訪問(wèn)者上網(wǎng)是尋找一些特別的信息，他們對(duì)于你的網(wǎng)站是如何工作的，并沒(méi)有興趣。如果你覺(jué)得你的網(wǎng)站需要地圖，那很可能是需要改進(jìn)你的導(dǎo)航和工具條。

11.“睜大你的眼睛，留意所有的事情。
對(duì)最不相關(guān)的東西的觀察可以得到最好的靈感。觀察一個(gè)站點(diǎn)的結(jié)構(gòu)和設(shè)計(jì)。理解站點(diǎn)結(jié)構(gòu)的關(guān)鍵元素，確保你的設(shè)計(jì)是圍繞站點(diǎn)瀏覽進(jìn)行的。” ——專家忠告

12.點(diǎn)擊規(guī)則 聽說(shuō)過(guò)3次點(diǎn)擊規(guī)則嗎？對(duì)于小型網(wǎng)站，在你的主頁(yè)上，沒(méi)有任何一條信息，需要點(diǎn)擊次數(shù)超過(guò)3次的。對(duì)于大型網(wǎng)站，使用導(dǎo)航和工具條來(lái)改善操作。

13.特殊字體的應(yīng)用
雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預(yù)測(cè)你的訪問(wèn)者在他們的計(jì)算機(jī)上將看到什么。在你的計(jì)算機(jī)里看起來(lái)相當(dāng)好的頁(yè)面，在另一個(gè)不同的平臺(tái)上看起來(lái)可能非常糟糕。一些網(wǎng)站設(shè)計(jì)員喜歡使用來(lái)定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問(wèn)者的計(jì)算機(jī)上不能顯示。級(jí)聯(lián)風(fēng)格表CSS有助于解決這些問(wèn)題，但是只有最新版的瀏覽器才支持CSS。

14.“使用切合實(shí)際的簡(jiǎn)便的命名規(guī)則。” ——專家忠告

15.檢查錯(cuò)別字
好的拼寫是人們一生中重要的技能。但是遺憾的是，許多設(shè)計(jì)者都缺少這種技能。確保你拼寫正確，并且格外注意平常容易誤寫的錯(cuò)別字。

16.避免長(zhǎng)文本頁(yè)面
在一個(gè)站點(diǎn)上有許多只有文本的頁(yè)面，是令人乏味的，且也浪費(fèi)Web的潛力。如果你有大量的基于文本的文檔，應(yīng)當(dāng)以Adobe Acrobat格式的文件形式來(lái)放置，以便你的訪問(wèn)者能離線閱讀。

17.不要使用卷滾條
人們厭惡在網(wǎng)上使用卷滾條。Trouble網(wǎng)站（www.Trouble.co.uk）是一個(gè)典型的設(shè)計(jì)很差的網(wǎng)站。它基于一個(gè)浮動(dòng)的架構(gòu)，為了閱讀所有的文本，瀏覽者不得不使用卷滾條。

18.專家最喜愛(ài)的Web設(shè)計(jì)工具
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,HTMLValidator等。

19.網(wǎng)站介紹
你應(yīng)當(dāng)有一個(gè)很清晰的網(wǎng)站介紹，告訴訪問(wèn)者你的網(wǎng)站能夠提供些什么，以便訪問(wèn)者能找到想要的東西。但是，許多設(shè)計(jì)者都沒(méi)有這樣做。有效的導(dǎo)航條和搜索工具使人們很容易找到有用的信息，這對(duì)訪問(wèn)者很重要。告訴訪問(wèn)者你所提供的正是他們想要的信息。

20.“網(wǎng)站一旦發(fā)布，網(wǎng)站設(shè)計(jì)的優(yōu)點(diǎn)和缺陷全都公布于世。
沒(méi)有什么法使你能夠比從自己的錯(cuò)誤、傾聽其他人的建議和用戶反饋意見(jiàn)中學(xué)到多的東西。”——專家忠告

21.閃爍讓人頭痛
通過(guò)使用標(biāo)識(shí)可以吸引訪問(wèn)者對(duì)你的主頁(yè)特殊部分的注意，但這也讓你的訪問(wèn)者頭痛。如果你想使訪問(wèn)者再次光顧你的網(wǎng)站，就少用此方法。

22.背景顏色
背景顏色也會(huì)產(chǎn)生一些問(wèn)題，可能會(huì)使網(wǎng)頁(yè)難于閱讀。你應(yīng)當(dāng)堅(jiān)持使用白色的背景和黑色的文本，另外還應(yīng)當(dāng)堅(jiān)持使用通用字體。

23.向前和向后按鈕
應(yīng)當(dāng)避免強(qiáng)迫用戶使用向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁(yè)同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠從每一頁(yè)上訪問(wèn)網(wǎng)站的任何部分。
24.“堅(jiān)持你的信念。嚴(yán)格遵守各種規(guī)則。避免想當(dāng)然。絕不停止學(xué)習(xí)” ——專家忠告

25.點(diǎn)擊記數(shù)器
不要輕易考慮在你的網(wǎng)站上放置一個(gè)醒目的點(diǎn)擊記數(shù)器。你設(shè)計(jì)網(wǎng)站是為了給訪問(wèn)者提供服務(wù)，而不是推銷你自己認(rèn)為重要的東西。大多數(shù)瀏覽者認(rèn)為計(jì)數(shù)器毫無(wú)意義，它們很容易被做假，瀏覽者也不想看廣告。如果你顯示你的網(wǎng)站是多么受歡迎，你最好提供一個(gè)鏈接，顯示訪問(wèn)日志。

26.不要用框架
與記數(shù)器一樣，框架在網(wǎng)頁(yè)上越來(lái)越流行。在大多數(shù)網(wǎng)站上，在屏幕的左邊有一個(gè)框架。但是設(shè)計(jì)者立刻就發(fā)現(xiàn)，在使用框架時(shí)產(chǎn)生了許多的問(wèn)題。使用框架時(shí)如果沒(méi)有17英寸的顯示屏幾乎不可能顯示整個(gè)網(wǎng)站?？蚣芤彩沟镁W(wǎng)站內(nèi)個(gè)人主頁(yè)不能夠成為書簽。也許更重要的是，搜索引擎常常被框架混淆，從而不能列出你的網(wǎng)站。

27.去掉圖像
在瀏覽器中即使去掉了圖像功能，也要保證訪問(wèn)者能夠在你的網(wǎng)站上獲得滿意的效果。對(duì)于那些使用ISDN連接并且關(guān)掉了圖像功能的訪問(wèn)者，還能獲得好的網(wǎng)頁(yè)加載性能?？梢酝ㄟ^(guò)在網(wǎng)頁(yè)底部提供另外的鏈接和使用替代文字，而不是圖像來(lái)滿足訪問(wèn)者的需要。

28.重復(fù)使用圖像
一些網(wǎng)站由于使用大量不重復(fù)的圖像而錯(cuò)過(guò)了使用更好的技巧的機(jī)會(huì)。在創(chuàng)建商標(biāo)時(shí)，在網(wǎng)頁(yè)上多次使用同樣的圖像是一個(gè)好的方法，并且一旦它們被裝入，以后重新載入就會(huì)很快。

29.避免使用過(guò)大的圖像
不要使用橫跨整個(gè)屏幕的圖像。避免訪問(wèn)者向右滾動(dòng)屏幕。占75%的屏幕寬度是一個(gè)好的建議。

30.“避免使用炫耀的技巧。” ——專家忠告
31.選擇使用Flash動(dòng)畫
許多使用比較慢的計(jì)算機(jī)的訪問(wèn)者發(fā)現(xiàn)動(dòng)畫圖標(biāo)很容易耗盡系統(tǒng)資源，使網(wǎng)站的操作變得很困難，因此，應(yīng)該給用戶一個(gè)跳過(guò)使用Flash動(dòng)畫的選擇。

32.盡量少使用Flash插件
雖然許多Web設(shè)計(jì)者認(rèn)為Flash功能很強(qiáng)大，并且Netscape5.0將支持Flash，在使用時(shí)不必再下載任何插件。
但是，最好還是取消使用Flash做各接口的想法。

33.讓用戶先預(yù)覽小圖像
如果不得不放置大的圖像在網(wǎng)站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預(yù)覽效果顯示出來(lái)，這樣用戶就不必浪費(fèi)金錢和時(shí)間去下載他們根本不想看的大圖像。

34.動(dòng)畫與內(nèi)容應(yīng)有機(jī)結(jié)合
確保動(dòng)畫和內(nèi)容有關(guān)聯(lián)。它們應(yīng)和網(wǎng)頁(yè)渾然一體，而不是干巴巴的。動(dòng)畫并不只是Macromedia Director等制作的東西的簡(jiǎn)單堆積。

35.慎用聲音
聲音的運(yùn)用也應(yīng)得到警惕。內(nèi)聯(lián)聲音是網(wǎng)頁(yè)設(shè)計(jì)者的另一個(gè)禁地。因?yàn)檫^(guò)多地使用聲音會(huì)使下載速度很慢，同時(shí)并沒(méi)有帶給瀏覽者多少好處。首次聽到鼠標(biāo)發(fā)出聲音可能會(huì)很有趣，但是多次以后肯定會(huì)很煩人。使用聲音前，應(yīng)該仔細(xì)考慮聲音將會(huì)給你帶來(lái)什么。

36.少用Java和AxtiveX
在網(wǎng)頁(yè)上應(yīng)盡量少使用Java和AxtiveX。因?yàn)椴⒉皇敲恳环N瀏覽器都需要使用它，只有那些Netscape和Explorer的早期版本的使用者才需要它。另外Mac在處理Java時(shí)也存在問(wèn)題，過(guò)分地使用Java，會(huì)使Mac崩潰。

37.設(shè)計(jì)成功的網(wǎng)站
www.emju.com
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設(shè)計(jì)中，如果依賴于一些特別的插件，會(huì)減少網(wǎng)站的吸引力。如果訪問(wèn)者沒(méi)有所要求的插件，將不得不到其它站點(diǎn)去下載，這樣訪問(wèn)者有可能就不會(huì)返回了。

39.使用著名的插件
如果網(wǎng)站上有聲音或視頻，要保證使用者通過(guò)使用某個(gè)知名的插件，能夠聽到或看到。許多站點(diǎn)使用QuickTime、RealPlay和Shockwave插件。因?yàn)椋S多訪問(wèn)者并不愿意浪費(fèi)很多時(shí)間和金錢去下載可能僅使用一次的插件。

40.使用先進(jìn)技術(shù)
跟上新的技術(shù)。Web技術(shù)的進(jìn)步絕不會(huì)停止，所以應(yīng)花一些時(shí)間來(lái)研究新產(chǎn)品和開發(fā)技術(shù)。

41.自己創(chuàng)建圖像和聲音
使用你自己創(chuàng)建的或從某個(gè)商業(yè)網(wǎng)站上下載的圖像和聲音。在制作商業(yè)網(wǎng)站時(shí)，應(yīng)該花足夠的資金來(lái)創(chuàng)建圖形，以增強(qiáng)公司的宣傳。——專家忠告

43.平臺(tái)的兼容性
要為用戶著想，必須最少在一臺(tái)PC和一臺(tái)Mac機(jī)上測(cè)試你的網(wǎng)站，看看兼容性如何。

44.用軟件分析工具找錯(cuò)
使用軟件分析工具檢查HTML。軟件分析工具Doctor HTML能夠幫助檢查HTML中的任何問(wèn)題。如果你有許多網(wǎng)頁(yè)需要檢查，可選用軟件分析工具。在網(wǎng)址www.weblint.org/validation.html中，你能夠找到更多有效的HTML工具。

45.避免錯(cuò)誤鏈接
網(wǎng)站中可能與其它一些有用的站點(diǎn)作了鏈接。但是，如果在你的網(wǎng)頁(yè)上有鏈接，一定要經(jīng)常檢查它們，保證鏈接有效。鏈接的網(wǎng)站可能很多，但不要鏈接到與你的內(nèi)容無(wú)關(guān)的網(wǎng)站上。

46.給觀眾成熟的東西
如果網(wǎng)站沒(méi)有完成，就不要發(fā)送到Web上。所有好的網(wǎng)站都是在幕后完成之后再發(fā)布的。

47.在搜索引擎上登記網(wǎng)站
任何一個(gè)人發(fā)現(xiàn)你的網(wǎng)站的機(jī)會(huì)都很少，除非你把你的網(wǎng)站在主要的搜索引擎上進(jìn)行登記。

48.設(shè)計(jì)一個(gè)留言板
瀏覽者愿意把時(shí)間花在好的網(wǎng)站上，所以最好有一個(gè)留言本，這能激勵(lì)訪問(wèn)者再次回到你的網(wǎng)站，還有助于擴(kuò)充網(wǎng)站內(nèi)容。

49.測(cè)試網(wǎng)站
在你的網(wǎng)站正式發(fā)布之前，必須進(jìn)行有用的測(cè)試。在設(shè)計(jì)網(wǎng)站時(shí)要使用最新的軟件，但是不要忘了人們并不會(huì)使用最新的瀏覽器，所以要照顧到以前的瀏覽器。在上載網(wǎng)站時(shí)還要測(cè)試所有的鏈接和導(dǎo)航工具條。

50.“盡你所能反復(fù)測(cè)試所設(shè)計(jì)的網(wǎng)站，直到你不能發(fā)現(xiàn)新的東西為止”——專家忠告

51.演示即將發(fā)布的網(wǎng)站
在網(wǎng)站正式運(yùn)行之前，讓人演示它。演示中人們會(huì)告訴你所設(shè)計(jì)的網(wǎng)站是否容易使用。

52.動(dòng)畫點(diǎn)綴 網(wǎng)頁(yè)上的動(dòng)畫最多只用一個(gè)。

53.“傾斜的按鈕看起來(lái)不會(huì)太好，最好不要使用。”——專家忠告

54.內(nèi)容組織
在開始創(chuàng)建新的網(wǎng)頁(yè)前，仔細(xì)考慮網(wǎng)站內(nèi)容的組織。決定好想讓訪問(wèn)者瀏覽的內(nèi)容，然后設(shè)計(jì)導(dǎo)航系統(tǒng)。

55.“空白萬(wàn)歲”
注意留空白。不要用圖像、文本和不必要的動(dòng)畫GIFs來(lái)充斥網(wǎng)頁(yè)，即使有足夠的空間，在設(shè)計(jì)時(shí)也應(yīng)該避免使用。

56.“利用空白去吸引注意力。
為了吸引眼球，Web設(shè)計(jì)者使用各種方法， 比如：閃爍、旋轉(zhuǎn)等，但是利用空白會(huì)吸引更多的注意力。”——專家忠告

57.圖像壓縮
為了保持小的圖像，可以使用類似GIF向?qū)У某绦?，它能自?dòng)對(duì)圖像進(jìn)行壓縮。先聲明圖像的大小
在圖像顯示之前最好能詳細(xì)說(shuō)明圖像大小屬性，可以在IMG標(biāo)簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因?yàn)闉g覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。

58.設(shè)計(jì)失敗的網(wǎng)站

——在它上面找一件T恤衫要花一個(gè)小時(shí)；
——給顧客承諾的服務(wù)太多，但真正實(shí)現(xiàn)的太少；
——二年以前的設(shè)計(jì)水平，忽視了顧客的需要；
——不吸引人，主頁(yè)太雷同

——設(shè)計(jì)太差
.
——沒(méi)有新意
——導(dǎo)航不知所云

59.圖像大小屬性 可以在IMG標(biāo)簽中保存這個(gè)屬性。這可以使網(wǎng)頁(yè)顯得很流暢，因?yàn)闉g覽器可以在圖像被下載之前在屏幕上顯示整個(gè)網(wǎng)頁(yè)。

60.用戶注冊(cè)
如果能知道誰(shuí)瀏覽了網(wǎng)站以及是怎樣瀏覽網(wǎng)站的，那么就能得到大量有用的信息。但是，要求訪問(wèn)者在瀏覽網(wǎng)站之前進(jìn)行注冊(cè)，這樣做是要冒風(fēng)險(xiǎn)的，因?yàn)檫@將趕走一批不愿意注冊(cè)的人。獲得信息的另一種方法是進(jìn)行有獎(jiǎng)競(jìng)猜或金錢獎(jiǎng)勵(lì)，讓用戶能主動(dòng)填一些信息反饋表。
61.使網(wǎng)站具有交互功能 在網(wǎng)站上提供一些回答問(wèn)題的工具，使得訪問(wèn)者能從網(wǎng)站上獲得交互的信息。

62.圖片更新
盡可能經(jīng)常更換網(wǎng)站上的圖片，人們更愿意點(diǎn)擊的是圖片而不是文本。

63.在網(wǎng)站上提供游戲
游戲是很好的交互工具，它是使訪問(wèn)者能再次光顧網(wǎng)站的好方法。

64.挑選工具軟件
仔細(xì)選擇Web設(shè)計(jì)工具。保證使用自己最想要的、自我感覺(jué)最好的軟件。

65.使用最新版本的軟件
盡量使用Web設(shè)計(jì)軟件的最新版本。
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國(guó)http://xjjufeng.cn/