網頁設計與頁面編排原則

《網頁設計與頁面編排原則》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、網頁設計與頁面編排原則(一)、網頁設計經常面對的問題　　原則上，一個HTML網頁頁面的配置，能夠加強作者所企圖表達的概念與目的。頁面上的每一個元素，都會影響讀者對頁面上其他元素的解讀，在看一個頁面時，我們應該把整個組合看做是一個統一的整體，而非許多小單位的集合。在進行版面配置時，應把焦點放在版面的平衡與留白空間的處理，設計者應該根據圖像與背景的關係、對比的關係、類似的原理、以及比例的關係，將整個空間以最有效的方式加以分配、組織。1、版面留白量　　設計者可以很容易地改變背景顏色，因此，當我們提到「空白」時，

2、所指的就是背景顏色，或是所謂圖像與背景的關係的背景部分。在一個頁面的組合中，留白的部分和被置於其上的元素同樣重要。就像樂章中的休止符，讓聽者能據知對音樂達成理解與鑑賞一樣，留白的空間讓頁面有了格式，因此，千萬不要忽略留白的重要性。在早期的HTML版本中，要隨心所欲地安排版面配置還很困難，由於在處理行列與對齊上的技術困難，使得版面常常陷入一種不平衡的局面。你必須考慮到所有的留白，這並不是說你得填滿所有的空白，而是，你必須把這些留白也一起納入考慮，達成頁面的平衡。2、視覺平衡的考量　　在安排頁面上的諸元素時，

3、你應該考慮每個元素之間的視覺比重，這個比重可以由物件的大小、亮度﹝深色物件比淺色物件重﹞、以及紋路或內文的密度。視覺對比也很重要，如果加以有效地運用，對比可以很快地抓住讀者的注意力。但是如果元素之間的對比過大，則容易造成反效果，使整體失去和諧與平衡。另外，視覺上的諧調和對比一樣重要，你必須考慮物件之間大小比例的關係，將每一個元素對其他元素作相對的評估，比如說，一個很大的物件如果跟一個小物件放在一起，它會顯得更大，而影響到整體的平衡。3、對稱式的平衡　　在設計一個HTML頁面時，有許多方法可以達成平衡，其中

4、最簡單的就是那種規規矩矩或是對稱的版面，比如說左右兩半或是上下部分彼此相似，甚至有些設計者把頁面上的每個元素向中央對齊。在某些情況下，這種設計方式可以有不錯的效果，但是通常內文的易讀性就會大大地降低。一般而言，一個對稱式的平衡是屬於靜態的，而無法引導讀者的目光去搜尋頁面上的其他元素。另外還有一種平衡的方式則是非制式且不對稱的。4、不對稱的平衡16網頁設計與頁面編排原則.doc21/06/23andrew　　一個不對稱的頁面結構必須藉由技巧性地安排不同視覺比重的各種元素來達成。例如，一段很長的文字就可以用一

5、個深色的圖形來平衡，一系列的小元素可以用一個大的元素來平衡。其變化的可能性是有很多的。一個不對稱的平衡頁面有時是經由設計者的天賦巧思所設計出來的，有時則是經過仔細的計算。初學者可藉由格線的輔助來設計頁面的平衡。一個不對稱或是非制式的組合方式可以使頁面在視覺上顯得較生動活潑。5、缺乏平衡的問題　　一般而言，一個頁面會出現不平衡的情況，若不是因為技術上的限制，就是因為設計者缺乏慨念。目前軟體的技術已能符合大部分格式設計的要求，因此很快地，設計者就必須為失敗的設計負起全責。有時候設計者的意圖是要製造出一種讓人感

6、到不安、不穩定的感覺，這時一個不平衡的頁面也許就可以適當地傳達出這種概念或感覺，但如果這種不平衡不是出於故意的安排，那麼，這樣一個頁面會讓你的網站功效大打折扣。6、網頁設計前後的一致性　　一般而言，你不會只設計一頁網頁，而是將許多頁面以一個主題為中心相互連結起來，因此，在開始設計時，你必須將整個WWW網站的方案做全盤考量。由於超媒體的便利性，我們都習慣只需用滑鼠輕輕一點，就能從某一頁跳到另一頁，而在這種情形下，視覺上的改變可能會讓讀者認為我們已從一個網站跳到另一個網站，通常我們當然不希望讀者在我們的網站中

7、，從一頁跳到另一頁時產生這種錯覺。因此，你就得在你的頁面之間建立一個統一性，例如使用一個固定的標題圖示、一種特別的版面安排、或是一組特定的色系。記住，在考慮如何讓你的頁面具有一致性時，對這一致性做一點點的變化，會使你的網站更具有視覺趣味，並且使讀者更有興趣去瀏覽它。有時你也許會想要對你的頁面設計作變化，讓它不那麼枯燥無聊，有時你也可能想要建立一個版面規格讓每一頁的內容配置都能保有一致性。7、紙上設計與網頁設計的比較　　在設計WWW時，我們應記住的是，電腦的螢幕通常是寬大於高，這使得我們很難同時在電腦上和紙

8、上作設計，幾年前，有人預言一個無紙的時代即將來臨，但到了今日，看起來我們的用紙量比過去有過之而無不及，無論電腦多麼方便，人們還是習慣把網頁列印出來看，如果你是以水平而非垂直的方向在擴展你的網頁，那就會有些列印上的問題。有些瀏覽器會在列印前先把頁面重新安排過，但是通常這也會破壞所有有趣的頁面設計。因此，你必須了解，有些材料最好是以垂直的格式來表現，這樣比較便於列印。8、使用設計參考格線　　在設計版面時，利用格線來安置物件的位置是