| 中文資訊科技應用 | 首頁 | 前頁 | 交流 | 搜尋 | 地圖 |
|
網頁一方面需要如其他印刷品一般，得符合平面設計的普遍原則；但網頁也有不同於其他印刷品的特點，它存在於瀏覽者瀏覽（停留在一網頁上）與連結（離開一網頁而到另一網頁去）之間，如何令瀏覽者瀏覽而非連結他去，成為網頁設計的根本要求。
網頁一方面是內容的平面組織，另方面網頁又是頁與頁之間的互動安排，因此，網頁設計必須能針對網頁的平面特點，與互動特點，設計出風格。
|
清晰
|
一貫與變易
|
|
|
版面
|
1. 一目了然 Overall graphic organization： 網頁應能讓瀏覽者在第一瞬間了解網頁的基本結構、網頁的主要內容等。 |
2. 貫切始終 Consistency： 各網頁的版面及風格宜一貫，方便瀏覽者理解網頁各部分的內容。 |
|
瀏覽
|
3. 引人入勝 Navigation： 網頁與其他平面印刷最關鍵的分別在於「超連結」(hyperlink)，如何清晰地導引瀏覽者，例如怎樣單擊到下一頁，或怎樣回到主頁等，是網頁設計最重要的考量處。 |
4. 異曲同工 Variation： 在同一網頁內，同一功能可同時以不同方法達致；例如，網頁上方設一導向列可供瀏覽者回到首頁，網頁下方又有導向列，網頁上亦有一個回到首頁之按鈕等。 |
1. 千萬不要剝奪瀏覽者對視窗行為的控制權。有些網頁強逼瀏覽者觀看過一段 flash 動畫片段之後才能跳進下一頁；有些網頁限制了視窗的大小，不容許瀏覽者調整；有些網頁迫令系統自動 BOOKMARK；有些網頁竟然會霸佔全個熒幕，硬要瀏覽者只看該網頁，而不能同時兼顧其他視窗中的工作（如 http://www.ssc.edu.hk/）。對那些霸道得離譜的設計，瀏覽者自會關掉該等網頁，此後永不再訪。
2. 網頁內各種元素，不宜擠滿網頁、也不應太多（例如那些毫不動聽的低質數碼音樂、擾人的 POP-UP 視窗）、不要太花（雪花飄飄的無聊背景；上下左右無定向地移動、四處飄浮如鬼魅，或旨在令人暈倒的閃動文字與圖象，如 http://www.cabletv.com.hk/）。總之，凡沒必要的，都應丟掉。
3. 能用文字表達，便不要用其他媒介（如圖象）表達（如 http://www.fed.cuhk.edu.hk/chi/index_iechi.html）。原因有二：一、使用圖象或其他媒介，網頁體積必然比只用文字大得多；二、搜索引擎尋找網頁，只搜尋網頁內容上的文字，如用圖象代替文字，或把文字放在 SCRIPT 之內，搜索引擎看不出其中的文字，便不會把有關網頁列為搜尋的結果了。
4. 不要用無助表達或突出內容的技術，不要只為了炫耀技術而用技術，以免徒增下載與換頁的時間，如 Flash 和 Java 之屬。Flash 和 Java 都是很先進的技術，有助達成很複雜的互動效果，但如果只用來作首頁，或用來做超連結，則殺雞不必用上這些牛刀，Flash 可以用文字代替，Java 可以用簡單的 Javascript 或 Animated Gif 代替（如 http://www.hku.hk/education/）。
5. 切勿於一整頁之內都沒有至少一個回到上頁或主頁的連結。近年流行在網站上加入「網站地圖 Site Map」，也是很好的做法。
6. 連結要清楚顯示。不要把連結的顏色設定成與網頁背景同色或相近顏色，否則瀏覽者不能或不易察覺連結所在，是相當愚蠢的配色設計；把連結設計得飄忽不定、或隱或現的（如 http://www.kanandlau.com），更是等而下之了。
7. 連結網站內網頁 (internal link)，與連結網站外網頁 (external link)，二者要分清楚。一般連結到網站內網頁，會用回原本的視窗，連結到網站外的網頁，會以新視窗顯示；又或例如利用 CSS 把站外連結以另一種風格顯示，參見：http://www.w3.org/TR/REC-CSS1 中就 external link 的簡單示例。唯其中大忌，乃是幾乎把所有連結－－不論站內站外－－都在新視窗中顯示（如 http://bmf.hkcampus.net/），結果必然導致瀏覽者的系統負荷過重，隨時當機。
8. 網頁技術（更準確地說，是 HTML 技術）有其規格與標準，宜盡量符合；除非必要，否則不要多用不合標準的技術；同時，也不要用過於先進，還在試驗中的前衛技術。有些人完全不懂使用網頁軟件，只得無奈地用 MS Word 把 Word 文件另存成網頁檔，這類網頁檔所用的便不是標準的網頁技術規格，而且體積比正常的大得多，這種 MS Word 轉換方法只是權宜之計，如果懂得用網頁軟件編寫網頁，還是不用為佳。
9. 盡量以 CSS 顯示網頁的外觀；尤其要避免用 FONT 標記控制文字顏色、字體、大小等外觀，這是庸手的做法。
10. 所有檔案名稱，不要有中文和空格，並且盡量不用英文大寫；此外，檔名愈短、愈易記，也愈好。
總而言之，不霸道（第 1 項）、 不多餘（第 2-4 項）、不愚蠢（第 5-7 項）、不離標準（第 8-10 項），便是良好的網頁設計風格。只不過，網上所見，霸道者不少，離標準者固多，愚蠢及多餘者更俯拾即是。
1. 不少人反對用框架 (frame)。因為，當運用框架的時候，一個視窗得同時顯示三個或上的網頁，然而，瀏覽器的設計，規定一個視窗只能顯示一個網址；換言之，瀏覽器遇到運用框架的網站時，必然不能正常顯示（即全部顯示）所有網頁的網址。這對瀏覽者要記下網址，或儲存網頁，都容易做成混亂。可是，框架方便瀏覽，尤其有助開發網上自學資源，作用未可完全抹殺。
2. 也有人認為網頁不宜太長，致瀏覽時捲動過多，太長的網頁應分成多個較短網頁，以不必捲動便可全部顯示為宜；然而，太細分也不便於瀏覽者貯存網址及網頁，維護也較麻煩。不過，首頁 (HomePage) 則應當一目了然，不必瀏覽者捲動。
3. 也有人認為網頁文字不宜太多，應該多加圖象或圖示，令版面更加活潑。這點還要看網頁的作用，如果網頁是商用或純粹為吸引瀏覽者瀏覽，則趣味可能最重要；如果是教育或資訊用的網站，重點還是內容，趣味只是提高動機的手段，遠非目的。
WEB STYLE GUIDE, 2nd edition
非常全面而且免費的網頁設計指引，大量實際網站為示例，非看不可；例如，其中討論四種首頁的模式 (FOUR BASIC HOMEPAGE SCHEMES)，以及編製首頁要注意的方方面面。此網站內容已以書本形式出版，售價為美金
14 至 20 元不等。
http://www.webstyleguide.com/index.html
http://info.med.yale.edu/caim/manual/contents.html
Design
IBM 公司對技術產品的設計理念 (design of technology products)
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/561
The Encyclopedia of Educational Technology
提供了大量教育科技的資料，而且不斷增加課題，其中的 Message Design、Using Color、Visualization、Navigation、Accessibility、Visual
Design 及 Multimedia Development 等節，集中介紹設計風格的原則。
http://coe.sdsu.edu/eet/
Web Design Principles Checklist
http://mason.gmu.edu/~montecin/webdesign.htm
人民網－－網頁的審美需求
http://www.people.com.cn/GB/channel569/20000804/173247.html
Web Pages That Suck
此網刻意示範了網頁設計的反面教材，還選出劣質設計網例。內容既豐富，也有趣。
http://www.webpagesthatsuck.com/
http://www.webpagesthatsuck.com/suckframe.htm
How to make an Annoying Web Page
http://www.users.nac.net/falken/annoying/main.html
Good Design and Practice in Creating your Website
http://www.oucs.ox.ac.uk/coursematerials/webdesign/
http://www.oucs.ox.ac.uk/coursematerials/webdesign/pagedesign.xml
Top Ten Mistakes in Web Design
http://www.useit.com/alertbox/9605.html
100 do's and don'ts, SpiderPro's StyleGuide
http://www.spiderpro.com/pr/prstgm001.html