網站設計的內涵

本節分兩部份來了解網站設計的內涵，第一個是網站設計的結構與組成份 子、方向或面向，第二個是網站設計的重點與設計網站需要注意的事項。

壹、網站設計的結構

網站是由一個以上的網頁所組成，因此網站設計是包含著網頁設計，因此要 深入了解網站設計的內涵，也就是要了解何謂網頁設計，所以我們知道網站設計 與網頁設計是一體的兩面。

郭彥均（2004）在其研究中將網頁的介面構成元素分為八大類：主題與風格、

版面架構、導覽、功能呈現（按鈕）方式、內容呈現方式、色彩搭配、聲音效果 與互動支持功能。

網站設計包括三大類別，分別為導覽（navigation）、資訊（information）和視覺

（visual）設計。導覽設計主要是規劃完整及正確的網站架構，讓使用者方便使用 且可以迅速找到所需的資訊；資訊設計的目的是為了豐富網站的內容，並經過整 合後能清楚地傳達給使用者；視覺設計則是運用視覺要素，如色彩、影像、文字 等，使畫面更具有吸引力(Newman & Landay, 2000)。

網站設計，通常包括介面設計、資訊設計與視覺設計這個三部份(高蓁瑩，

2003)，說明如下：1. 介面設計：包含導覽系統、連結、功能性。介面設計是網站 設計最重要的一環，帶領使用者在網站上來回每個網頁，使用網站上的各項電子 服務。2. 資訊設計：包含資訊內容、資訊架構設計。使用者造訪網站的主要目的

就是為了得到資訊內容，不論是文字內容或其他多媒體數位內容。而資訊架構設

9.沿用首頁的風格，導覽設計(navigation design)也要沿用首頁的特色，就網站 而言，呈現效果的一致性也會連帶影響操作使用上的一致性。

魏澤群（2005）提出了十個關於網站設計的方向：1.以使用者為中心的介面設

黃小紋（2008）在探討網站設計時，有包含「訊息內涵」與「功能及工具」，

從上述的文獻中，發現「網站的導覽設計」在許多的文獻中都有提及，還有 網站的版面多媒體設計：包含版面、文字、色彩、動畫等，也是網站的組成成份 之一。

貳、網站設計的重點與注意事項

在認識了網站設計的結構之後，接著就要實際的去設計網站，那麼在設計網 站時，有那些是要特別注意的事項，有那些重點是我們一定要放入網站設計中，

有那些設計上的錯誤是要小心避免，所以就進行以下的相關文獻探究。

Robin Willians(2006)，認為網路的內容應該永保新鮮，一如每天早上的咖啡。

發現與更新錯誤都不是網站更新的唯一要務，重點是網站內容的即時與豐富。許 多網站提供「最新訊息」區塊，以連結到網站的最新消息，有些網站在首頁用容 易察覺的設計變更或是文案更新讓造訪者知道網站有所更新。另一種技術是在首 頁上放置修訂時間簽章，譬如「最後修訂於 2006 年 11 月 28 日」。不論是個人或是 其它網站，持續更新、修訂以及在網站存放各種新舊檔案，都有助吸於引網友再 次造訪。

此外他還認為網站設計有四個基本法則，對齊、相近、重複與對比。1.對齊 (alignment)：選定基準，也就是選定一個對齊的基準，然後套用到整個頁面。2.相 近(proximity)：指的是當元件位置非常靠近的時候所發展出來的關係，網頁上經常 會看到有些元件無端地被孤立，有些元件卻不恰當地彼此關聯，應該是屬性相同 的元件被緊密的結合，訊息可以顯得更加有條理而更容易閱讀。3.重複(repetition)：

在整個網站規劃中，重複某些特定的元件，藉由它們把其他不同的部份聯繫在一 起。網站裡的每一個頁面都應該看起來屬於同一個網站，而也就是重複這個法則 讓這件事情發生。4.對比(contrast)：就是把我們的雙眼吸引到頁面上。充滿對比的 元件在頁面上引導人們的雙眼，創造出資訊的層級，並且讓人能在資訊的洪流中，

一眼就能找到所需要的訊息。

另外他覺得，在界面與導覽方面。不同瀏覽器有時會讓同一個頁面看起來不 一樣，一定要用不同的瀏覽器檢視做好的網頁，看它們如何被呈現。如果必須重 新安排網頁元件或是重寫程式碼來讓網頁在不的瀏覽器正常呈現，那就動手去做 這些調整吧。還有，如果在逛一個網站時，很輕鬆地找到路，也可以隨時從任何 一頁回到首頁，這個導覽就設計的很成功。相反地，如果造訪的網站在外觀呈現 和內架構上模糊不清，讓人在網站裡迷了路，那這個導覽是個爛設計。如果網頁 很長需要一直往下捲動才能看到下面的內容，那麼最好是在頁面的最頂端和最底 部都放上導覽系統，網頁的頂端可放上圖像或是比較花俏的導覽系統，而在頁面 的底部放置簡單的文字連結版本。

網站設計的五大重點：「文字」(Text & Typography)、「色彩」(Color)、「結構」

(Composition)、「圖形」(Figure)、「版面配置」(layout)(境祐司,2011)。

第一個「文字」部份：1. 所謂適當的文字大小，會依整體外觀而有所差異。

2. 3 行以上的文章一定要設定行距。3.給人壓迫感的長篇文章必須適度分割。4.單 行字數過多時將不利閱讀。5.中文字較多的文章需指定字距。6.標題是讀者第一眼 見到的重要資訊。7.以視覺設計提昇訴求力。8.少了圖片說明就算不上是報導照片 9.不顯雜亂的文繞圖編排關鍵。10.提昇易讀性的裝飾。

第二個「色彩」部份：1.要知道有的顏色看來愉快有的則否。2.色彩感覺是主 觀的。每個人的藍色都不同。3.螢幕色彩是由光線形成而不是印刷油墨。4.色調（色 彩的調性）可用 3 屬性的高低強弱來調整。5.色彩有重量。配色不順利時可試著 減輕顏色的重量。6.決定了背景，再導出主要色彩 7.想分割內文時，可為各段落套 用不同色彩。8.要為頁面整體添加重量感時，可使用漸層色。9.想呈現高級感時，

就要修正照片色調。10.基調色彩需要自然環境與時間來孕育靈感。

第三個「結構」部份：1.結構設計要從繪製草圖開始。2.草圖的繪製重「量」

不重質。3.必須徹底理解結構元素中無法分解的最小單位。4.決定範圍大小並提高 彈性。5.建立出如投影片般的頁面瀏覽順序。6.以建築物的邏輯來結構網頁。7.以 構思連續劇的方式來結構網頁。8.手風琴式的元素變化。9.元素較多時，採取縱向 結構（Portrait mode）。10.元素較少時，採取橫向結構（Landscape mode）

第四個「圖形」部份：1.以「類型（type）」的觀點來理解頁面元素。2.要展現 震撼力時就要突破「類型」。3.運用「類型」時，必須先製作「雛型」。4.以均衡的 黃金比例矩形為基礎。5.從單一基本元素拓展成複雜的形狀。6.圖示不該使用文字。

7.不論大小，圖還是直覺易理解最好。8.簡易圖樣之美始於對稱性。9.活用 LOGO 時，需注意周圍的色彩和資訊密度。10.增添心理上的附加價值。

第五個「版面配置」部份：1.從在方格紙上配置元素開始。2.賦予元素先後順 序後再加以配置。3.用新的元素取代舊的元素。4.時時謹記元素皆包含於方框（box）

中 5.製作什麼都沒有的「空」資訊。6.想像浮在游泳池水面上的四方形墊子 7.將資 訊群組化以統整出資訊塊。8.格線系統配置的優美與否，由流向線決定。9.想提升 視覺效果，就旋轉元素。10.將各元素當成面板來組織頁面。

此外，根據 Badre 的研究指出，雖然網頁中的色彩具有幫助組織資訊與集中注 意力的功能，但為了避免造成使用者在處理資訊上的壓力，同一版面的顏色不要 超過 7 種(Badre,2002)。

資訊架構學(2003)中提到，無論使用者有沒有注意，他們總是會帶一堆問題來 到網站。用戶問題的答案在哪裡？答案通常是放在網站的深處，可能會包含在實

際內容中。使用者來到學校首頁時，最常問的問題。1.這是那裡？2.我怎麼找資料？

網站上有什麼？3.我知道我要找什麼，問題是怎麼搜尋？4.除了網站之外，其它和 學校連繫的方式為何？5.學校最近有什麼新鮮事？6.現在有什麼新鮮事？7.這些學 校的人有作什麼不錯的網頁嗎？8.我怎麼回首頁，或者重新開始？9.我知道我要找 什麼，我該怎麼瀏覽？網站上有什麼？10.網站有什麼輔助說明？或者學校可以給 我什麼協助嗎？11.我知道我想要什麼(以前來過)，我可以直接跳進去嗎？網站上有 什麼可取的呢？作者認為這其中，包含了組織系統、搜尋系統、導覽系統等。

網路使用者的主動性很強（魏澤群，2007），盡可能不要強迫使用者進行一些 功能性的操作，底下有一些常見的錯誤設計，1.強迫使用者觀看 flash 動畫或多媒 體影音，未提供跳過或關閉功能。2.網頁操作流程中無法回到上一步或選擇放棄。

3.必須點選廣告連結才能看到內容。4.無法取消網站訊息的訂閱(如電子報)。5.改版 後強迫使用者學習新的介面使用方式。同時在網站的介面設計方面，他提出了幾 點能讓網站更容易使用的原則：

一、功能性

(一)讓網站功能單純化，必要時，才增加新功能。

(二)依使用族群不同，提供客製化的功能組合。

(三)功能模組化，讓使用者可以自行選擇所需的功能。

二、直接的設計

(一)能快就不要慢，不要放一些會使用網站載入速度變慢的動畫。

(二)如果網頁上的空間夠，就要將網站的功能放上去，不要隱藏起來。

(三)網站的文字使用容易理解的文字，不要用「哈拉一下」，代替「聊天室」。 三、介面設計一致性：

(一)視覺上的一致性。

(二)重要元件的一致性。

(三)網頁的內容要適度的分類與切割，但不要超過九個區塊。

四、圖像比文字更容易記憶，適當的圖形能讓網頁更容易理解。

五、導覽設計四個要件：

(一)目前的位置，如頁面標題或網站的 logo。

(二)回去的路，如路徑列或樹狀選單。

(三)可以往那裡走，如分區導覽。

(四)迷路時可以問誰，如內容搜尋或常問題。

此外，黃小紋（2008）同時也認為在資訊科技的領域中，人機介面乃是使用者

此外，黃小紋（2008）同時也認為在資訊科技的領域中，人機介面乃是使用者