• 課程教材總目錄﹝CONTENT﹞
• ﹝第 5 講﹞內容
• 版面編排整體效果
• 配合網頁主題的顏色
• 適合內容的繪圖
• 色彩的意義與選擇
• 文字的運用

版面編排整體效果

　　原則上，一個 HTML 網頁頁面的配置，能夠加強作者所企圖表達的概念與目的。頁面上的每一個元素，都會影響讀者對頁面上其他元素的解讀，在看一個頁面時，我們應該把整個組合看做是一個統一的整體，而非許多小單位的集合。在進行版面配置時，應把焦點放在版面的平衡與留白空間的處理，設計者應該根據圖像與背景的關係、對比的關係、類似的原理、以及比例的關係，將整個空間以最有效的方式加以分配、組織。

　　設計者要改變背景顏色是很容易的事，因此，當我們提到「空白」時，所指的就是背景顏色，或是所謂圖像與背景的關係的背景部分。在一個頁面的組合中，留白的部分和被置於其上的元素同樣重要。就像樂章中的休止符，能將音樂分成段落，幫聽者容易理解音樂進而欣賞一樣。留白的空間讓頁面有了格式，凸顯版面重要部份，因此，千萬不要忽略留白的重要性。在早期的 HTML 版本中，要隨心所欲地安排版面配置還很困難，由於在處理行列與對齊上的技術困難，使得版面常常陷入一種不平衡的局面。你必須考慮到所有的留白，這並不是說你得填滿所有的空白，而是，你必須把這些留白也一起納入考慮，達成頁面的平衡。

　　賓夕凡尼亞大學 首頁是個留白量適當的範例。
　　※﹝首頁範例﹞

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

　　在設計一個頁面時，有許多方法可以達成平衡，其中最簡單的就是那種規規矩矩或是對稱的版面，比如說左右兩半或是上下部分彼此相似，甚至有些設計者把頁面上的每個元素向中央對齊。在某些情況下，這種設計方式可以有不錯的效果，但是通常內文的易讀性就會大大地降低。一般而言，一個對稱式的平衡是屬於靜態的，而無法引導讀者的目光去搜尋頁面上的其他元素。另外還有一種平衡的方式則是非制式且不對稱的。

　　史密森印地安博物館 首頁是個對稱式平衡的範例。
　　※﹝首頁範例﹞

　　一個不對稱的頁面結構必須藉由技巧性地安排不同視覺比重的各種元素來達成。例如，一段很長的文字就可以用一個深色的圖形來平衡，一系列的小元素可以用一個大的元素來平衡。其變化的可能性是有很多的。一個不對稱的平衡頁面有時是經由設計者的天賦巧思所設計出來的，有時則是經過仔細的計算。初學者可藉由格線的輔助來設計頁面的平衡。一個不對稱或是非制式的組合方式可以使頁面在視覺上顯得較生動活潑。

　　MCA Kid's Playroom 首頁是個不對稱式平衡的範例。
　　※﹝首頁範例﹞

　　一般而言，一個頁面會出現不平衡的情況，若不是因為技術上的限制，就是因為設計者缺乏慨念。目前軟體的技術已能符合大部分格式設計的要求，因此很快地，設計者就必須為失敗的設計負起全責。有時候設計者的意圖是要製造出一種讓人感到不安、不穩定的感覺，這時一個不平衡的頁面也許就可以適當地傳達出這種概念或感覺，但如果這種不平衡不是出於故意的安排，那麼，這樣一個頁面會讓你的網站功效大打折扣。

　　台灣大學生活資訊食物篇 網頁是個不平衡的範例。
　　※﹝網頁範例﹞

　　一般而言，你不會只設計一頁網頁，而是將許多頁面以一個主題為中心相互連結起來，因此，在開始設計時，你必須將整個 WWW 網站的方案做全盤考量。由於超媒體的便利性，我們都習慣只需用滑鼠輕輕一點，就能從某一頁跳到另一頁，而在這種情形下，視覺上的改變可能會讓讀者認為我們已從一個網站跳到另一個網站，通常我們當然不希望讀者在我們的網站中，從一頁跳到另一頁時產生這種錯覺。因此，你就得在你的頁面之間建立一個統一性，例如使用一個固定的標題圖示、一種特別的版面安排、或是一組特定的色系。

　　記住，在考慮如何讓你的頁面具有一致性時，對這一致性做一點點的變化，會使你的網站更具有視覺趣味，並且使讀者更有興趣去瀏覽它。有時你也許會想要對你的頁面設計作變化，讓它不那麼枯燥無聊，有時你也可能想要建立一個版面規格讓每一頁的內容配置都能保有一致性。

　　李天祿布袋戲文物館 網頁使用一個固定的標題圖示呈現網頁設計前後的一致性。
　　※﹝前頁範例﹞
　　※﹝後頁範例﹞

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

　　在設計版面時，利用格線來安置物件的位置是一個蠻不錯的建議。格線就像是隱形的路標，有助於在網站的頁面中建立組織化的單元。許多的桌面排版軟體中都附有標線以便於物件的對齊，有些編寫網頁的工具也會提供這類的工具，但一般的文書編輯器則沒有。在這種情況下，你可以為你的頁面畫一個草圖，一但你決定了所依據的格線，你就可以用這個架構去對齊你的圖像與文字，讓你的頁面達到平衡。

　　HTML 的表格﹝table﹞和分割頁框﹝frame﹞的功能，則可以讓你在頁面上定義出不同的區塊，這使你只需更新有改變的元素即可，而不用每次都重新修改一整頁。

　　有些人可能會覺得使用格線會讓畫面的整體設計變得單調無趣，但其實如果運用得當的話，並不會如此。一但你建立了網頁的架構，你就可以在這個格線架構下衍生出許多種安排物件的方式，並且每頁之間在元素排列上的變化是非常重要的。一個元素可以佔據一個或兩個、甚至更多個區域，文字也可以放在一塊本來被拿來放圖像的區塊，你可以為一個網站準備兩個或以上的格線，然後依照每一頁的內容做不同的應用，通常當一個網站中使用多個格線模式時，是為了要在頁面轉換之間，創造出視覺上的韻律感。

　　賽先生和藝小姐 首頁利用表格的格線來安置物件的位置。
　　※﹝首頁範例﹞

　　在完成了一個頁面的編寫之後，用瀏覽器開啟它，往後站一步來看。不要讀內文的文字，把你的眼睛閉上幾秒鐘，然後打開，看著你的網頁。頁面上的哪個部分最吸引你的眼光？你目光的下一個目標又是哪裡？試著去追溯你的眼睛瀏覽整個頁面的軌跡。

　　作為一個設計者，也許你會有些偏見，所以你可以找別人來幫你看看你的焦點與瀏覽路徑是否適當。如果你的焦點在顏色對比、大小、密度或是色值上太過強勢，那麼讀者的目光就會很難從上面移開，而其他的部份就會被認為是不重要的。但如果頁面上的所有元素看起來都差不多，那麼讀者就很容易被搞糊塗，不知道該從哪裡看起，也不知道下一步要看哪一項。無論如何，不管設計者是否是有意識地考慮到讀者的目光，你都要記得，目光瀏覽的路徑，也會影響到讀者對這個網頁的滿意度與閱讀經驗。

﹝一﹞標題的呈現方式

1. 標題宜以包括圖像及文字的綜合設計表現之。
2. 台灣地區使用者喜歡色彩較豐富的標題。
3. 標題宜居於版面中間位置，並以長方形方式呈現。
4. 標題宜突顯於背景之上。

　　YAHOO 首頁標題居於版面中間位置，並以長方形方式呈現。
　　※﹝首頁範例﹞

﹝二﹞版面的留白的呈現方式

1. 版面留白量以 50% 為宜。
2. 背景色彩純度過高會造成版面空白量感覺消失。

　　Communication Arts 於一九九七年的首頁版面留白量佔 50%。
　　※﹝首頁範例﹞

﹝三﹞連結點的呈現方式

1. 橫列式較長的文字連結點以單欄位，向左對齊的呈現方式為宜。
2. 橫列式較短的文字連結點以雙欄位，位置居中的呈現方式為宜；文字則向左對齊為宜。
3. 直列式的圖文連結點，它們之間距宜加寬，以利區分。
4. 連結點之前用小圖像或小色球以指引強調連結的功能，能方便讀者搜尋。