網(wǎng)站制作精髓的65條原則

01.內(nèi)容清晰

如果你想成為一名網(wǎng)站設(shè)計(jì)師，正在建設(shè)一個(gè)網(wǎng)站，你應(yīng)該首先考慮網(wǎng)站的內(nèi)容，包括網(wǎng)站的功能和你的用戶需要什么。你的整個(gè)設(shè)計(jì)應(yīng)該圍繞這些方面展開(kāi)。

02. 搶用戶

如果用戶不能快速進(jìn)入你的網(wǎng)站，或者操作不方便，那么網(wǎng)站設(shè)計(jì)就失敗了。不要讓用戶失望并轉(zhuǎn)向競(jìng)爭(zhēng)對(duì)手的網(wǎng)站。

03.優(yōu)化內(nèi)容

內(nèi)容是核心。大約兩年前，一個(gè)企業(yè)網(wǎng)站看起來(lái)像一本廣告手冊(cè)，更糟糕的是，它使用了似乎需要幾個(gè)世紀(jì)才能下載的大量圖片。

香奈兒網(wǎng)站（www.tlkjt.com）在某些方面的設(shè)計(jì)是成功的，但內(nèi)容過(guò)于稀疏，需要很長(zhǎng)時(shí)間才能找到你要找的東西，因此不能算是一個(gè)成功的網(wǎng)站。

04.快速下載

沒(méi)有什么比需要很長(zhǎng)時(shí)間下載的頁(yè)面更糟糕的了。根據(jù)經(jīng)驗(yàn)，標(biāo)準(zhǔn)網(wǎng)頁(yè)不應(yīng)大于60K，并且在56K 調(diào)制解調(diào)器上加載需要30 秒。一些設(shè)計(jì)師說(shuō)網(wǎng)頁(yè)應(yīng)該在15 秒內(nèi)加載。

05.網(wǎng)站升級(jí)

時(shí)刻關(guān)注SEO網(wǎng)站優(yōu)化的運(yùn)行狀況。性能良好的主機(jī)可能會(huì)隨著訪問(wèn)者數(shù)量的增加而運(yùn)行緩慢。但是，如果您不想失去訪問(wèn)者，請(qǐng)務(wù)必仔細(xì)計(jì)劃您的升級(jí)。

06.堅(jiān)持基礎(chǔ)

即使您不懂HTML 語(yǔ)言，您也可以通過(guò)購(gòu)買受版權(quán)保護(hù)的WYSIWYG 網(wǎng)頁(yè)設(shè)計(jì)工具（例如Adobe PageMill 或Microsoft FrontPage Express）來(lái)創(chuàng)建外觀合理的網(wǎng)站。然而，根據(jù)設(shè)計(jì)，這些包雖然不需要HTML，但會(huì)減慢網(wǎng)站速度。

為了成功地設(shè)計(jì)網(wǎng)站，您必須了解HTML 的工作原理。大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師建議網(wǎng)絡(luò)新手應(yīng)該在有關(guān)HTML 的書籍中尋找答案，并使用記事本創(chuàng)建網(wǎng)頁(yè)。

07. 學(xué)習(xí)HTML

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

08.用筆畫出網(wǎng)站的框架

圣人云：筆比刀厲害。在使用電腦之前，用筆畫出一個(gè)網(wǎng)站的框架，顯示所有網(wǎng)頁(yè)之間的相互關(guān)系。計(jì)劃您的用戶將如何在最短的時(shí)間內(nèi)瀏覽您的網(wǎng)站。

09.“你永遠(yuǎn)不會(huì)在計(jì)算機(jī)上找到好的解決方案”。 ——專家指教

10. 網(wǎng)站地圖

許多設(shè)計(jì)師將他們的站點(diǎn)地圖放在網(wǎng)站上，但這種做法弊大于利。絕大多數(shù)互聯(lián)網(wǎng)訪問(wèn)者都在尋找一些特定的信息，他們對(duì)您的網(wǎng)站如何運(yùn)作并不感興趣。如果您認(rèn)為您的站點(diǎn)需要地圖，那么您的導(dǎo)航和工具欄很可能需要改進(jìn)。

11.“睜大眼睛，注意一切。

最好的靈感來(lái)自對(duì)最不相關(guān)事物的觀察。觀察站點(diǎn)的結(jié)構(gòu)和設(shè)計(jì)。了解站點(diǎn)結(jié)構(gòu)的關(guān)鍵元素并確保您的設(shè)計(jì)圍繞站點(diǎn)導(dǎo)航展開(kāi)。 ” —— 專家建議

12. 點(diǎn)擊規(guī)則聽(tīng)說(shuō)過(guò)3 次點(diǎn)擊規(guī)則嗎？對(duì)于小型站點(diǎn)，主頁(yè)上沒(méi)有一條信息需要點(diǎn)擊3 次以上。對(duì)于大型站點(diǎn)，使用導(dǎo)航和工具欄來(lái)改進(jìn)操作。

13.特殊字體的應(yīng)用

盡管您可以在HTML 中使用特殊字體，但無(wú)法預(yù)測(cè)訪問(wèn)者將在他們的計(jì)算機(jī)上看到什么。在您的計(jì)算機(jī)上看起來(lái)不錯(cuò)的頁(yè)面在不同的平臺(tái)上可能看起來(lái)很糟糕。一些網(wǎng)頁(yè)設(shè)計(jì)師喜歡使用定義屬性，這允許您使用特殊字體，但仍然需要一些解決方法，以防您選擇的字體不顯示在訪問(wèn)者的計(jì)算機(jī)上。層疊樣式表(CSS) 可以幫助解決這些問(wèn)題，但只有最新的瀏覽器才支持CSS。

14.“使用現(xiàn)實(shí)方便的命名約定?！?—— 專家建議

15. 檢查拼寫錯(cuò)誤

良好的拼寫是人們生活中的一項(xiàng)重要技能。不幸的是，許多設(shè)計(jì)師缺乏這種技能。確保拼寫正確，并格外注意經(jīng)常容易拼錯(cuò)的拼寫錯(cuò)誤。

16.避免長(zhǎng)文本頁(yè)面

在網(wǎng)站上擁有許多純文本頁(yè)面是乏味的，并且會(huì)浪費(fèi)Web 的潛力。如果您有大量基于文本的文檔，您應(yīng)該將它們以Adobe Acrobat 格式放置，以便您的訪問(wèn)者可以離線閱讀。

17. 不要使用滾動(dòng)條

人們討厭在網(wǎng)上滾動(dòng)。 Trouble 網(wǎng)站(www.Trouble.co.uk) 是一個(gè)典型的設(shè)計(jì)糟糕的網(wǎng)站。它基于浮動(dòng)結(jié)構(gòu)，為了閱讀所有文本，查看者必須使用滾動(dòng)條。

18. 專家最喜歡的網(wǎng)頁(yè)設(shè)計(jì)工具

1.Adobe Photoshop

2.宏觀

media 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ò)誤、傾聽(tīng)其他人的建議和用戶反饋意見(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ǎ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)有帶給瀏覽者多少好處。首次聽(tīng)到鼠標(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è)知名的插件，能夠聽(tīng)到或看到。許多站點(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)品和開(kāi)發(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)容組織
在開(kā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è)公司推來(lái)客http://www.tlkjt.com/

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！