VIDEO
HERE
 

﹝第 5 講﹞網頁設計與平面編排原則


配合網頁主題的顏色

  在設計一個網頁時,你應該對所有顏色的使用做一個全盤的考慮,而不是只注重個別元素的配色。你應該把背景顏色、每個元素的色彩、內文的顏色、以及超連結選項的顏色﹝包括已連結及未連結過的項目﹞都納入考慮。你應該建立起一個統一的基本色調架構,並且依據此架構來決定每一項元素的配色。

  色彩對於加強你的網頁內容是很重要的,一般而言,我們建立一個網站的目的就是要讓大家來讀它的內容,而大部分的網路使用者都是很快地在網頁與網頁之間點選跳接,不會仔細地每頁都看,這時候,如果你能有效地運用色彩的配置,那麼,無論你的內文是否真的吸引了它們,你都能吸引讀者對你的網頁多看一眼。


色彩過多與不及

  我們生活在一個資訊爆炸的時代,為了避免負荷超載,我們通常會根據自己的標準,從許多垃圾信件中挑出有用的資訊。因此廣告商們早就知道要擅用顏色的效能來吸引人們的注意力並且去讀它們的文案,公司們也知道如何利用色彩來增加文件﹝從年度報表到公開發表簡報﹞的易讀性。

  如果網路上的所有網頁都只有文字而沒有色彩,那麼我們就很難去分辨這一頁和那一頁有何不同。一個只有黑白兩色,而且在文字的大小和圖形上都了無變化的網頁,會讓讀者讀內文時要邊讀邊想,決定這是不是一個有用的資訊。

  一個只有純文字的文件很明顯地會佔用較少的磁碟空間,因此也能增加網路傳輸的速度,讀者的閱讀也不會被圖像所干擾,而能把焦點都集中在內文上。雖然不使用圖形會使文件的內容看來更加精簡,但是完全不使用顏色也有一些危險,人們通常期望一個 WWW 網站能夠圖文並茂,這對於讀者是否會停留在這個網站並且仔細地閱讀它的內容是個決定性的因素,就算是一小點的顏色,對一個以純文字為主的網頁,都能大大地增加它的可讀性。

  太多的顏色比顏色不足還糟糕,許多設計學生在顏色的使用上經常喜歡用很多顏色,就像剛引進許多字型技術時的情形一樣,當一個學生發現電腦可以一次將二十個不同的字體放在同一頁上面時,他們就會興奮地試驗各種做法,直到有一天他們發現電腦的這種對字體的容納性並不能讓設計效果變得更好為止。同樣的原則也適用於繪圖軟體用在網頁設計上。許多人想盡可能將很多色彩組合在一起,把繽紛的背景放在網頁上,但是要注意背景顏色也應和內文及圖形相互協調、搭配。


使用限量的色塊

  選擇一個色系,這其中可以包含和諧色與對比色,但要限制你用在網頁上的顏色數量。要確保每一種元素要能夠共同創造出一種色調的統一,有一種辦法是選擇在色盤中屬於同範圍的顏色。

  台灣大學 首頁使用色盤中屬於同範圍的顏色,使整體有統一感。
  ※﹝首頁範例


複雜色塊的掌控

  有許多的網站會為了某些理由而使用很多種顏色,在這種情形下,調和主色和其他顏色之間的關係就非常重要。

  有一種評量用色的方式就是往後站一點,然後從一段距離以外來看這個畫面,看看那一個顏色首先映入你的眼簾?這些顏色會讓你有任何緊張或是視覺矛盾的感覺嗎?所有的顏色使否得到同樣的注意?在圖形或背景中使用五彩繽紛的色彩,通常會破壞掉和諧的感覺,一系列使用了很多種色彩的寫實影像就應該由某些共同的顏色來把它們串聯起來。


顏色的對比

  在考慮要用什麼顏色、以及把這個顏色放在那裡時,你應該要注意到這個顏色對它周圍的色塊以及與它重疊的元素有什麼影響,有些網頁設計者在使用一個背景顏色或圖形前,並沒有仔細地考慮過它與內文和圖像的關係,大致上而言,背景顏色應該要盡量打淡一點,不要讓所有的目光都集中到它身上而使得網頁的內容黯然失色,在文字和背景圖案間也要有適當的對比,這樣文字才能具有易讀性。

  在背景和前景之間的適當對比可以藉由將深色與淺色元素之間的差異值最大化來達成。在考慮到對比時,色彩的反差也是很重要的。如果將整個頁面轉換成灰階模式,有許多紅紅綠綠的色彩將會變成同樣的顏色而無法分辨,雖然在彩色頁面上他們看起來具有很高的反差,但對許多色盲的人來說,他們並無法分辨這兩種顏色,所以,當你在設計中使用這些顏色時,也要考慮到這個問題。

  美國雪城大學 首頁使用很多顏色,但是主要的紅色把整體統一起來。
  ※﹝首頁範例


色彩的變化

  為了有助於瀏覽者了解網頁的內容與主題事件,有效地對網頁作變化是很重要的。如果特別以某些變化來標示某些項目,那麼瀏覽者就很容易抓到整個網頁的主題。報紙也常常利用標題的字型與字體的變化,來標示出每篇報導的相對重要性。

  變化可以被有效地應用在文字及圖像上,例如,Netscape 的瀏覽器就將超連結文字的字型做了預設的變化,並且標示出已連結與未連結的項目。這個瀏覽器的設計者事實上就是以實際應用為考量,讓人們可以分辨出接下來要點選什麼,他們將圖像設計的原則應用到超連結選項之重要性的處理上。

  超聯結選項並不是網頁上唯一需要被標示出來的項目。你也許會想要將你的標題做不同於文字的處理,並且把主要的圖像和附加的圖像區分開來。


網頁系統化

  當你在設計網頁時,你必須要了解︰人們大部分都是從首頁開始看,雖然這並非絕對。因此,通常在最高層的網頁,也就是被視為首頁的那一頁,就必須包含了對這個網站內容、主題的整體概述,這一頁必須在設計上具有吸引力,並且包含能表達你的意圖的重要資訊。一般來說,放在越上面的東西越重要,所以,在設計時要注意,讓你的頁面內容資訊顯得比頁首豐富。

  雖然大部分的人都會從首頁開始看,你最好還是不要完全依據這個假設來設計網頁。很多人都會把一些自己覺得有趣的網站的網址寄給朋友,而這些網址並不一定是指向你的首頁。一個普遍的錯誤是,你常常會放上一個「回上頁」或「回主畫面」的按鈕,但其實瀏覽者也許並沒有看過你的網站結構中的前一頁。


使用背景的要點
﹝一﹞背景與主體的關係

  1. 背景與主體明度對比為 3:1 到 5:1 之間為宜。

﹝二﹞背景的色彩

  1. 淡色系列的背景有助於整體和諧。

﹝三﹞背景的材質機能

  1. 淡色材質背景為佳,能與主題分離之淺色標誌或文字背景亦可。

  美國白宮 使用淡色信紙材質為背景。
  ※﹝首頁範例

 

Webmaster: Dr. Hsien-Hui Lee
E-MAIL: hsienlee@ms4.hinet.net
Address: Department of Theatre, 1 Roosevelt Road, Section 4,
Taipei, TAIWAN, Republic of China
Telephone: 886-2-2363-0231 ext 3644;  
FAX: 886-2-2369-1350
(Last Update: Dec 15, 1999)