VIDEO
HERE
 

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


文字的運用

  無論是在哪一種版面配置中,文字都同時扮演了內文與網頁上的圖像元素這兩種角色,前面對色彩、圖像對齊等規則的建議,同時也都適用於文字。


文字為設計基本元素

  在一開始學習版面設計時,你最好不要拿有意涵的內文來用在你的版面上,你可試著把文字看做編織紋路,因為在討論網頁設計與排版時,文字的實際內容並不重要。當然,對一個網頁設計來說,經過校對而沒有任何文法或錯字的文字內容是很基本必須的。為了將文字當作一個設計元素來討論,我們要注意文字區塊的形狀與版面安排方式上面。


水平與垂直排列

  無論你是否在網頁中運用了隱藏的格線,你都應該將文字區塊的邊緣跟你的圖形邊框或是網頁上的其他元素對齊。當然有時也會有效果不錯的穿插著的文字,但它必須跟其他元素達到良好的平衡,讓人覺得那是經過特意設計的,而不是一個設計錯誤。HTML 語法中的表格功能,讓網頁設計者更能夠隨意地控制文字的置中或對齊,而注意頁面的規格與文字區塊的寬度之間的關係,也是很重要的。


字型的運用要有統一性

  要有效地使用字型與字體,設立一個規則並切實地遵守。例如,所有的英文書名都使用斜體字,所有的副標題字體都設為四級的大小,諸如此類的用法。這能讓觀眾從文字體裁的式樣,快速地了解網頁的文字內容。


標題字的運用

  如果你用標題或是較大字體的格式來作為對某一頁的快速導覽,那麼觀眾通常就能很快地找到他們要的資訊。HTML 提供了從〈Hl〉〈H6〉的旗標,來控制字體的大小,從一號到六號,其中一號代表最大的字體。所有的瀏覽器都支援這組旗標,不過實際上的字體大小多少會有些出入。另一種製作標題的方式就是用 〈FONT SIZE = 4〉〈/ FONT〉 這組旗標,來設定字體的大小。這種方式在沒有分段符號的情況下較具彈性,而你也可以用它來改變某一行的字體大小。


反鋸齒狀與鋸齒狀的文字

  既然我們所做的設計是用在螢幕上,那就難免會受到螢幕解析度的限制。在大部份個人電腦的標準解析度螢幕上,我們可以清楚地看出組成文字的像素,﹝尤其是有稜角的字,如 W﹞;對於大標題以及斜體字來說,視覺上會造成一定程度的困擾。如使用反鋸齒的文字將能解決這個困擾,不過你必須創造出一個包含這項文字的圖形,並且花費較多的下載時間。

  有時你對視覺表現的要求超出 HTML 所能提供的功能,例如想要讓文字機動性地環繞著圖像、具層次感、或是使用特殊字型等等,這時最好的方法就是把文字轉換成圖像的形式。你可以以一種較低位元的格式儲存你的文字,來減少檔案傳輸所需要的時間。


可讀性的問題

  雖然我們已有許多種方式可以控制格式,但在字型變化的能力上則仍有待努力。由於平台之間相容性的問題,使得我們只能使用平台間某些共同的字型。雖然使用者能設定瀏覽器的預設字型,但是選擇並不多。基本的選擇就是固定字寬﹝即所有的字元都具有一樣的字元空間﹞,以及可變字寬兩種字型。後者較容易閱讀,但前者在行列的設計上有比較好的效果。〈PRE〉這個旗標除了注意到文字中的空白鍵以外,它也是以一種非比例的方式排列。


文章與字型的整合

  ﹝FONTFASE=" "﹞的旗標讓網頁設計者得以直接指定字型,雖然這讓網頁能夠以一種比較有創造性的方式處理格式,但是當所指定的字型只在某些平台上受到支援時,它就會變成無效的設定。這種規格挑戰了 WWW 的跨平台原理,它也為下一代的 WWW 對字型之支援的發展鋪路。據說 Microsoft 將要推出一種方式,能機動地讓 HTML 所指定的字型隨文件一同下載並嵌入。


英文大寫字體的運用

  在打字機的年代,我們對文字的格式並沒有什麼選擇性,因此當我們想要讓某些字看起來格外醒目時,我們通常會用大寫來打這個字的每一個字母。不過現在我們有很多字型可以選擇,我們的確可以使用一些字體來取代使用大寫的方式。

  在聊天室或是電子郵件裡,你若全部使用大寫時,會被認為太過粗魯,也會讓人不易閱讀。我們通常在閱讀時,會快速地從整個字型認出每一個字,進而閱讀整篇文章,而不會一個字母一個字母地去拼出每一個字。當整篇文章都使用大寫時,每個字看起來就會變成一樣的形狀,只是長度不同罷了,這會讓文字的可讀性大大地降低。


瀏覽器與文字

  人們在掃視過許多瀏覽器畫面,只對其中很小的部分加以注意。在網頁之間移動時,也不太可能在每個地方都停下來逐字逐句地讀。閱讀電腦螢幕上的文字要比閱讀紙上的文字困難得多,這是因為眼睛容易緊繃著,而且電腦螢幕的位置也會造成影響。

  一般來說,要閱讀一個以文字為主的網站是不太容易的,因為人們通常並不想花費太多的時間在閱讀一個網站的文件上,因此,保持訊息的簡明,並控制文字的量是很重要的。

  儘量對網頁作適當的格式化安排,並且讓它可以被印出來閱讀。如果你有許多文字資訊,那麼把它們拆成幾頁,用目錄或大綱的形式讓使用者可以依照自己的進度依序閱讀。一般來說,設計一個網頁,其長度最好不要超過螢幕高度的三倍。


運用小字塊

  將一大塊的文字分割成幾個較容易控制的小區塊也是不錯的方式,使用分隔符號、圖形,或是在段與段之間加以分隔,能夠讓人在視覺上稍作休息,再繼續讀下一段文字。一段簡短的文字是要比一大塊沒有間斷的文字要容易閱讀得多。


文字與互動設計

  文字可以運用不同方式來增進互動性,除了超連結功能外,也可以讓觀眾自己輸入資訊,而有不同的體驗。


內文設計要點

﹝一﹞每一行文字的長度

  1. 最好 25 到 35 個中文字
    ﹝50 到 70 個英文字母﹞。

﹝二﹞行距與字距

  1. 行距與字距已由軟體內定。設計者能以段落與段落間空行,及首行縮排方式以輔助閱讀。

﹝三﹞字體大小

  1. 標題以 H1 到 H3 為佳,內文以 font size = 34 級為佳。

﹝四﹞同版面的字型

  1. 三種字型以內。

﹝五﹞文字的顏色

  1. 三種顏色以內。

﹝六﹞已選過的文字

  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)