網頁設計要素

一、影響介面設計的品質因素

Look-and-Feel 冰山論（IBM，1993）可用來指出影響介面設計品質的因素，

見圖2-4.1 所示，Look 和 Feel 這兩層指介面設計的第一步工作乃要讓介面的外 觀，吸引使用者的注意力（Look）。接著，讓他感覺有趣受到吸引，進而想親 自使用看看（Feel）。然而水面底下的是冰山，這看不見 6o%的水下冰山，才是 當使用者使用（Feel）之後，想要進一步學習，可能遭遇障礙的問題所在。這 也就是影響圖形使用者介面是否成功的重要關鍵（李青蓉等人，1998）。

圖2-4.1 Look-and-Feel 冰山論（IBM，1993）

二、網站介面的使用性

使用性的介面設計，指的是以使用者為中心（User-centered design）的設計 概念，從使用者的角度出發來為網站進行設計，如此一來，使用者能在沒有障

水下冰山60%

-使用後所遭遇的障礙 -影響介面品質的關鍵 Feel-下面30%-吸引使用者使用 Look-上面 10%-介面的外觀

礙的情況下操作，讓網站能夠發揮最大的效益。使用性的介面設計強調的是，「讓 介面符合使用者的習慣，而不是讓使用者適應網站介面。」（魏澤群，2005）

（一）使用性原則

至於要如何使介面設計能夠符合使用性的原則，首要任務是了解使用者在 操作過程中，可能會產生的行為，而不是單就網站風格來評定，一個富有創意、

設計感的網站，未必符合一般大眾來使用；而易於使用的網站也未必是最美觀 的，在使用性的概念中，易用程度的重要性必定大於美觀程度的重要性。為了 能夠了解使用者的行為，則必頇從心理學的層面著手。

在 1987 年蘋果公司首次發表三項一般性設計原則：

1. 在電腦環境裡，若是能有現實的隱喻 （Metaphor）將會帶給使用者熟悉的 預期。

2. 立即的回饋 （Feed back）將會帶給使用者似乎直接操縱現實世界物體的感 覺，也提供使用者有價值和事實資訊。

3. 必頇看到點到的感覺，如此可以獲得使用者的亯任而相亯自己的記憶。

根據 Norman（1998）所整理的使用者為中心的設計原則，將之套用於網 站介面，綜合歸納出以下三個重點：

1. 進入網站後，使用者能隨時知道自己正在做什麼，以及可以做什麼。

2. 設計網站時，必頇讓每個選項易讀性高，包括網站整體概念、使用者能採取 的行動以及行動後產生的結果都清楚讓使用者能預測以及得知。

3. 使用者的意向和所需的行動之間應該遵循自然配對的原則。

為了讓使用者可以清楚知道自己在做什麼，必頇使用「局限原理」讓使用 者能在設計的規範內使用網站，例如，積木組合中只有A 能與 B 配對，因此不 會有組裝錯誤的可能性。運用在設計網站中，也就是只能設計一個方向性是通 往使用者所要前往之處，以避免造成使用者在使用上的困惑與挫折。

Norman（1998）在書中指出，使用者有好的心理模式，就能順利操作電腦 等工具，也能夠快速學習及自行檢測遇到的問題所在，例如突然找不到所需要 的網站頁面，使用者有正確的使用認知，在操作上也更能得心應手，因此設計 者在規劃時，應發展一套適合使用者的心理模式。以心理模式可區分為三類：

1. 設計模式（design model）：設計者心中對於該產品（網站）的概念。

2. 使用者模式（user’s model）：使用者認為該產品（網站）操作的方法。

3. 系統印象（system image）：設計者將他所設計的產品轉換成系統印象，讓使 用者透過系統印象來完成操作，事實上系統是設計者與使用者相互溝通的中 介角色。

下圖2-4.2 將能更清楚理解三類心理模式的配置：

圖2-4.2 三類心理模式（Norman，1998）

使用者模式決定對系統的了解，設計者根據設計模式開始設計一套能用、

能學、能作用的系統。設計者必頇確定他所設計的系統顯示出適宜的系統印象，

讓使用者能夠得到適當的使用者模式，將他們的意願轉變為行動，並將系統狀 態加以詮釋。（Norman，1998）

設計模式 使用者模式

設計者 使用者

系 統 系統印象

（二）使用性指標

在設計一個良好介面時，除了依循上述的原則建構之外，在實際評估使用 情況時，可採用國際標準組織ISO9241（標準名稱：Ergonomic Requirements for Office Work with Visual Display Terminals （ VDTs ）； 標 準 號 ： EN ISO 9241-16-1999）（http://www.userfocus.co.uk/articles/ISO9241.html）所規定之三個 評估項目做為衡量的標準，以下分別敘述之。

1. 效率（Efficiency）

是指付出時間與所獲得的比例，例如花了多少時間學會使用某軟體、花了多 少時間去熟悉一個網站的運作方式等。

2. 效能（Effectiveness）

指的是一個網站或軟體能夠被使用的程度，像是所提供的功能，是否能夠被 使用者正確利用，是否能夠被順利無誤的使用完畢。

3. 滿意程度（Satisfaction）

使用者對介面的喜好與接受程度，是極為主觀的評價方式。但亦可從中歸納 出使用者偏好傾向，做為介面修正的方向參考。

三、網站介面的美感

Schenkman and Jönsson（2000）的研究發現，整體而言，一個網站最直接 影響一般使用者的部份就是網站的優美程度。介面呈現的美醜，與使用性沒有 直接的關係，但美醜卻可以左右使用者對於網站的觀感以及接受程度。（李青蓉 等人，1998）因此，網站配置若造成使用者感官上的不適或反感，即使介面使 用多麼簡易，使用者未必會願意使用。例如：音量吵雜、頻繁閃爍的跑馬燈、

字體大小不易讀、顏色種類過多等，都易影響使用者的接受度。

（一）美感特質

Maquet（1986/2003）認為，美學是哲學的分支，它處理的觀念包括了，美、

醜、超然、滑稽等形容，是可以用在藝術方面的評論。18 世紀時的德國哲學家

Alexander Baumgarten 是第一個將希臘詞彙 aisthetikos 賦予現代的意義（原義：

屬於感官知覺的），也就是現在我們所使用的美感（aesthetic），這個詞彙此後被 用來稱做描述「對藝術的反應」，所以在我們生活當中，確實有看待藝術品的特

Schenkman and Jonsson（2000）

網頁上的美感與偏

（beauty）程度。

Brady and Phillips（2003）

美感與使用性：視

Postrel（2003/2004）亦表示，人類對於美的價值是主觀的，只能透過經驗 來發現，而不能預先推論得知。每個人心中所認定的美感並非一致，但卻都能 同時並存，是可以互相碰撞而產生新的元素，也可以將原先的物件重新組合創 造新的美的概念。

從文獻中顯示，儘管美感是個人主觀的認定，但確實會影響使用者的使用 程度，Norman（1998）曾在書中提過一個例子，一個使用性不良的茶壺，竟受 到使用者的愛用，甚至願意不在乎難以使用，只因為茶壺的外觀美好，只要使 用它就會獲得情緒上的愉悅感，由此更顯示了美感對於產品設計的重要性。

（二）網頁設計原則

由於在設計網站時，網站的頁面大小，側邊捲軸的滾動次數，都是需經過 考量的。Lynch & Horton（1999）認為，網頁的安全區域（safe area）是由兩個 因素構成：

1. 螢幕的最小可視尺寸：

雖然現在大部份的電腦螢幕尺寸多為 17、19 吋等，但無法預測每一個人的 螢幕大小，因此，在製作網頁時，必頇以較小的尺寸來製作，避免小螢幕使 用者的畫面變形，而大螢幕使用者不會因為網頁的尺寸較小，而有較差的呈 現結果。

2. 符合紙張列印的長寬比例：

網頁裡面較無長度的限制（由上至下），因此可以讓側邊的捲軸（通常在右 側）無限制的往下延伸，而網頁的寬度則以螢幕寬為限，若同樣配置捲軸，

在列印時則會使捲軸外的部份無法列印，例如：A4 紙張垂直的輸出。Lynch

& Horton（1999）認為一個網頁不應同時存在垂直與水帄的捲軸，若是能讓 使用者不動用到捲軸的功能則更好。

圖2-4.3 網頁的垂直劃分圖（修改自 iGoogle 網頁）

Lynch & Horton（1999）指出，一個網頁可分為上半部（Above the fold；

First screen）與下半部（Below the fold；Second screen），是將一進入該網站所 呈現的頁面稱為上半部，透過捲軸或是滑鼠滾輪轉動後，呈現的第二個畫面為 第二部份，見圖2-4.3。

因此，在網頁設計中有Cut-off 的設計，也就是針對 Above the fold 的設計，

其概念原自於報紙設計，因為報紙版面大，通常是上下對折的，所以常有所謂 針對折線上半部進行設計或是行銷活動，在網站中可運用相同的道理，但若在 折線位置呈現了太多空白，常會讓使用者誤以為網頁已經結束，因此可使用色 帶輔助，例如圖 2-4.3 網頁圖最上方與最下方，使用了相同顏色的色帶，暗示 的是網頁的開頭與結尾，如此一來，使用者便能很清楚知道該網站的長度。

（Spool，2006）

李賢輝（1999）提出「網頁設計經常面對的問題」：在進行版面配置時，應 把焦點放在版面的帄衡與留白空間的處理，設計者應該根據圖像與背景的關係、

對比的關係、類似的原理、以及比例的關係，將整個空間以最有效的方式加以 分配、組織。以下是在進行網頁視覺設計時要注意到的一些問題：

1. 提供版面適當的留白量

適度的留白有助於網頁的閱讀，在網頁中，留白的部份和網站上其它的元素 同樣重要，也就是圖與地之間的關係。

2. 考量版面設計的視覺帄衡

要注意頁面上每個視覺元素的份量，像是圖文比例、尺寸比例、亮度對比等。

適度調整讓視覺畫面協調，有助於讀者閱讀；而反向操作所造成的視覺衝突，

是可以吸引讀者目光，但若使用過度，則可能造成反效果，端看設計者想要 傳達什麼樣的訊息，透過元素之間適度的配置，將訊息有效傳遞給讀者。

3. 注意網頁設計前後的一致性

在網站設計的前置作業中，必頇先行規畫好要呈現多少個連結，而連結之間 必頇有穩定的一致性，每個頁面皆有相似的元素、色彩或是識別圖示，讓讀 者不至於在網站中迷失方向。

在網站設計的前置作業中，必頇先行規畫好要呈現多少個連結，而連結之間 必頇有穩定的一致性，每個頁面皆有相似的元素、色彩或是識別圖示，讓讀 者不至於在網站中迷失方向。