第二章 文獻探討 第一節 全球資訊網
近年來資訊科技的高度發展和普及之後，伴隨而來的是與生活緊密結合的資 訊化社會。資訊科技的發展既深又廣，滲透了生活、娛樂、經濟、學習等各個層 面，帶動了寬頻網路的普及發展，也產生了新的溝通方式及消費模式，創造更多 的刺激與需求，網際網路的出現改變了傳播既有的固定型態，更是打破了傳統傳 播媒體的迷失。
網際網路最初的目的是為了人們方便擷取資訊而生，起初的用途也止於研究 機構、軍事及學術教育單位，而網際網路的發展從 1991 年美國國家科技基金會 正式宣布開放網際網路，提供商業用途之後，網際網路才演變成近日所見的網路 型態。根據行政院研考會 95 年數位落差調查結果顯示，國內民眾上網率與上網 人口均創下歷年新高。台灣網路資訊中心網路使用調查也指出，截至 2006 年 7 月為止，共有 1538 萬人曾上網，從民國 2002 年至今更是逐年增加。由此發現，
上網不再只是少數人的權利，而是大眾必須具備的一項重要能力。根據資策會推 廣處 FIND，2007 年針對消費者網路使用行為調查結果發現，消費者逐漸將時間 花費從傳統媒體轉向網際網路，各個年齡層對於網際網路的需求也有上升的趨 勢。網際網路所衍生出來的生活型態加上消費行為的改變之下，網際網路躍升為 重要的傳播媒體之ㄧ，已經成為繼報紙、廣播、雜誌與電視四大傳媒之後的第五 大媒體（Morris and Ogan,1996），在網際網路高度發展及競爭之下，網際網路已 經成為生活中不可或缺的一個重要腳色。
壹、網站設計
網頁和網站一詞常為人所混淆，透過瀏覽器在全球資訊網上所看到的畫面即 是所謂的網頁，設計者將網頁設計好並讓彼此相連結，使瀏覽者可以連結到各個 網頁觀看其內容，這樣的網頁架構就是網站，而網站則是網頁的集合（施威銘，
術館式設計屬於造型導向（Form-based），以圖形介面或隱喻（Metaphor）為主，
因此較偏重色彩、創意或氣氛的營造。
Daniel(2000)提出網站設計可視為內容(content)、視覺呈現(visual appearance) 及使用性(usability)三個部份。Newman ＆ Landay (2000)則是將網站設計概分為 三個領域，分別是導覽(navigation)、資訊(information)及視覺(visual)設計領域。
導覽(navigation)設計主要是建構及規劃出一個完整的組織架構，讓使用者能迅速 且方便的找到其所要資訊；資訊(information)設計之目的為使網站的內容豐富多 樣化，且能清楚傳達其所呈現之資訊；視覺(visual)設計則為視覺要素(如色彩、
影像、文字或編排等)在網頁設計中的配置呈現，除了使畫面更具吸引力外，更 可讓網站的資訊呈現更為清楚、易理解(Newman & Landay, 2000)，其中以 Newman ＆ Landay 所提出之網站設計領域構面所包含之範圍較完整，如下圖。
圖 2-1：網站設計三大構面（Newman & Landay, 2000）
網站是網頁的集合，除了探究網站的整體之外，還需對網站的網頁架構深入 了解。翁康容（2005）綜合專家學者論點並指出，網頁設計的作業大致可分為兩 部分，一為網頁呈現的方式，另一部份則為瀏覽路徑的分析。在網頁呈現方式的 研究中，多位研究者以網頁中常出現的網頁要素作為分析的自變數分析網頁在使 用感受上與使用績效上的影響 (Galitz, 1997; Pearson & Schaik, 2003)。Stover ＆ Zink（1996）認為，網頁設計必須著重在提高網路使用者視覺上的興趣與直覺性 的溝通方式，網頁的呈現受到螢幕大小及解析度的限制，設計時除了要營造畫面
表2-1：網站設計分類表 Veen（1997），
網頁呈現的設計方式。
圖書館式
（Library）
美術館式
（Gallery）
Daniel（2000），
網站設計的結構。
內容 (content)
視覺呈現 (visual appearance)
使用性 (usability)
Newman ＆ Landay (2000)，
網站設計領域。
資訊 (information)
視覺 (visual)
導覽 (navigation) 翁康容（2005），
網頁設計的進行方式。
網頁呈現方式 瀏覽路徑分析
藉由表2-1可知，從不同的構面切入，網站設計的分類也略有差異，但在這 差異之中仍可發現，網站設計主要還是以內容資訊、視覺呈現、導覽三大方向所 構成。網站設計的分工細節繁多，良好的網站設計過程需要經驗豐富的設計者，
而在此所指的經驗豐富並非設計者的設計經驗，而是網站使用者的經驗，也就是 設計者本身需具備多年網路使用的經驗，在執行網站設計時，才能從使用者角度 來設計。而網站設計的最終目的是讓使用者在瀏覽後對網站的整體產生認同感，
進而提升企業的網路形象，並增加網站使用者及再造訪率（陳珮瑩，2005），所 以網頁設計需建立在使用者的經驗上，因此設計者在設計網站時應進一步考量視 覺設計因素，進而提升網站整體的形象。
貳、網站性質
一、網站性質分類
經過數年發展，網際網路已成許多活動的場所之一，依訴求的對象不同，而 產生不同性質的網站。李俊宏(1996)將網站類型分為個人特色、教育研究、
機關組織、商業團體、網路服務。Powell（2000）將網站類型分為商業、資訊、
購物網站、企業網站、社團網站。歐上晉（2003）整理多位學者對於網站的分類 標準，依網站建置依不同屬性可區分為政府與教育網站、商業與企業網站、入口 網站、購物網站及社群與個人網站五大類別。綜合以上研究者提出的網站性質分 類整理之後得到表2-2網站性質分類表，根據其他學者提出的網站性質分類而整 理出網站依其性質分類可概分為八大類：商業性企業網站、入口網站、社群團體 網站、個人網站、政府機關網站、學術性教育網站、購物網站、其他。
1.商業性企業網站：主要在說服使用者購買商品、服務顧客、建立形象，以 企業的形像及服務品質為主要考量。
2.入口網站：提供各種服務並匯集各式各樣的資訊。
3.社群團體網站：聚集相同嗜好與興趣的人，達到人際互動的溝通效果。
4.個人網站：依個人喜好將欲傳達的資訊藉由網站傳遞。
5.政府機關網站：由政府機關所設置的網站，提供政府相關訊息，提供便民 服務等。
6.學術性教育網站：由學校或教育團體所設置的網站，大多以文字訊息為 主，提供學校簡介、行政業務、師生服務等功能。
7.購物網站：提供各樣商品相關資訊，具有直接達成交易的網路機制。
8.其他：無法被歸在上述七類之中的網站。
其中可以發現商業性企業網站融入了企業形象，相較其他性質的網站更具有 進一步深入剖析的價值。
表2-2：網站性質分類表 研究者 李俊宏
(1996)
Powell (2000)
莊錦昌
（2001）
張依真
（2002）
歐上晉
（2003）
商業團體 商業網站 商業性 企業網站 商業與 企業網站 個人特色 入口網站 個人首頁 入口網站 入口網站 機關組織 社群網站 學術性 社團網站 社群與個人 教育研究 個人網站 購物網站 購物網站
網路服務 資訊網站 政府與
教育網站 娛樂網站
網站分類
藝術網站
二、企業網站
網站性質分類中，企業網站代表一個企業的形象，所以在任何一個動態模 式、多媒體效果等使用前，都必須思考是否符合企業的形象，企業網站必須要靈 活機動且具有時效性，在網頁的視覺表現上更要能結合企業品牌識別及行業特性 進行網站創意設計，達到審美性、國際化等條件（陳玉玲，2004），而網站的不 同意象風格有助於樹立企業所要呈現的不同形象（莊錦昌，2001），所以企業網 站相較於其他網站更具有研究的價值。
企業網站除了建置比例高之外，在視覺方面也有較多樣化發展及風格的展 現。許峻誠（2001）在網頁風格與視覺要素對於設計評價影響之研究中，以企業 網站作為研究樣本，其中金融業、軟體業、通訊業及電子業四類研究樣本，其風 格表現多集中在框架色塊訊息型、理性圖文規矩型與多文字訊息型。這也顯示出 這四類企業類別樣本大多採用框架型網頁的設計方式。所以本研究也根據資策會 2006 年大型企業對外建置網站報告與研究者的研究結果，以企業網站中的金融 業、資訊電子業，其首頁設計為框架型的方式作為本研究樣本，探討其設計要素 與使用者意象產生之間的關係。
圖 2-2：2006 年台灣大型企業對外網站建置現況—行業別
（資料來源：http://mic.iii.org.tw/intelligence/）
「首頁」扮演著整體網站的窗口，其最重要的功能在於讓瀏覽者瞭解所在網 站之位置與功能(Nielsen, 2000)。而首頁通常是指進入網站後看到的第一頁，也 就是開啟網站後最先呈現於螢幕上之畫面。使用者可藉由片頭首頁上的各種文 字、圖像、動畫等訊息說明，來瞭解網站所提供的內容及各種服務項目，以便進
第二節 網頁設計相關研究
壹、網頁設計風格
風格是指藝術上獨特的格調，或是某一時期流行的一種藝術形式。就網站設 計而言，它是匯集網頁頁面視覺要素的統一外觀，用於傳遞文化訊息，不僅幫助 瀏覽者記憶及解讀網站，更能使網站樹立自身的形象。網站之所以受到使用者喜 愛的原因，大多在於各自具備獨特的風格與視覺美感，網站的風格與美感並非只 是在網頁上配置吸引人的圖片，而是網頁頁面所傳達出的整體性且獨特的企業形 象（陳珮瑩，2005）。網頁視覺編排的呈現是網站給使用者的最直接印象，如何 讓習慣於快速瀏覽的使用者受到吸引而停留是相當重要的，因此網頁必須具備獨 特性的視覺風格（Nielsen, 2000）。
風格的呈現是必須經過縝密的流程規劃，在確立設計策略；決定網頁主題之 後，透過網頁元素來實現網頁佈局與視覺效果，最後完成表現圖形，這就是設計 者的作業流程及內容，透過這樣的設計流程得以表現出網頁的風格，更加確立網 頁的形象，其中，確定網頁的外觀風格（Look ＆ Feel）很大程度上是由網頁佈 局（Layout）和視覺效果（Visual Effect）決定（崔美善，2007）。
圖 2-3：設計的六個標準流程圖（崔美善，2007）
李星宏（2002）認為版面編排在網頁視覺設計中是極為重要的一部份，除了 能夠吸引使用者注意並引起點選動機外，更具有降低認知負荷，且能幫助理解而 便於記憶的功能。曾惠民（2003）也表示一個好的網頁要能呈現出一致而令人賞 心悅目的環境，不單是網站使用的色彩、圖像、導覽系統、應用程式、資訊安排 等元素彼此緊密地結合而已，還需讓使用者感受到網站所提供的整體氣氛。因此 在設定網站的風格之時，網頁設計者應思考的不是個別圖像或顏色的選擇，而是
Strategy Theme Elements Look ＆ Feel Layout
Visual Effect
貳、網頁設計要素
一、網頁設計要素相關研究
網頁視覺構成要素是扮演資訊與使用者溝通的重要角色（王開立，2000）。
黃朝盟與趙美慧（2002）指出，藉由視覺要素的應用設計與呈現，使得在螢幕上 可以傳達特定的譬喻、形象及概念，而這些元素的應用不只是考量網頁的視覺美 觀性，更是使用者對網站整體經驗感受的基礎。
網站是由許多的網頁所組成，網頁是由許多元素所組成，網頁設計除了背景 (background)、排版(layout)、標誌(logo)、導覽(navigation)、標題(heading)、圖像 (graphics)及文字(type)等基本構成要素外，也會隨著網頁主題而有不同要素的產 生及不同程度的應用。各個研究者針對網頁設計構成要素作探討時，因為研究主 題不同，而對於網頁構成要素的歸納有著些許差異存在，對於多位研究者所提出 的網站設計要素整理如下：
馮淑萍(2000），針對企業形象網頁的設計要素進行探討，最後提出網站視 覺設計需考量：編排設計、企業形象、圖像、色彩、操作性、文字、符號等七個 設計元素，其中以編排及企業形象是影響網頁設計最重要的元素。
莊錦昌(2001），於網頁介面使用性之探討與意象研究中，提出影響網頁介 面使用性的構成要素有：主題種類、超連結種類、超連結點配置、背景、背景明 暗、背景色彩、版面留白量、內文編排等八種構成元素。
表2-3：型態要素類目表 形態要素 類目
主題種類 1.文字 2.圖像家文字
超連結種類 1.文字 2.圖像 3.圖像加文字 4.文字加說明 超連結點配置 1.規則性 2.不規則性
背景 1.單色 2.底紋 3.淡色圖像
背景明暗 1.淺色系 2.深色系 3.中間調（原色）
背景色彩 1.藍 2.洋紅 3.黃 4.無色彩
版面留白量 1.30％以下 2.31％~60％3.61％以上
許峻誠（2001），在探討網頁風格認知及視覺要素使用的現象，並了解企業 屬性與設計風格之間的關係中，提出影響受測者對首頁設計風格辨識的依據有：
訊息呈現形式、構成要素的使用、色彩、情感意象、使用感受、技術問題、網站 類比等。其中「使用感受」、「技術問題」是傳統平面設計所不用考慮的，也是 網頁設計師應特別注意之處。並且設計師進行首頁設計時，依網站設立目的而擬 定適當之視覺化策略是重要的。
管倖生、林彥呈（2002），以感性工學的程序，建構網頁設計系統。導入使 用者的感性概念，探討何種網頁型態要素及感性語彙會影響使用者操作上的認 知。其研究將網頁構成要素分為：圖文比例、留白量、版面編排、框架、超連結 型式、顏色量、背景色彩。其中又以圖文比例及版面編排兩設計要素對使用者認 知影響最大。
表2-4：型態要素類目表 形態要素 類目
圖文比例 1.大於 3：1 2.3：1~1：1 3.1：1 4.1：1~1：3 5.小於 1：3 留白量 1.0~20％2.20~40％3.40~60％
版面編排 1.二欄 2.三欄 3.多欄 框架 1.上下 2.左右 3.混合
超連結形式 1.純文字 2.文字加指標 3.圖像加文字 顏色量 1.少於四色 2.4 色至 7 色 3.多於 7 色 背景顏色 1.冷色系 2.暖色系 3.中性色
（資料來源：管倖生、林彥呈，2002）
張依真（2002），在片頭動畫首頁構成要素中歸納多位學者而提出首頁設計 要素應包含：文字、圖形、呈現效果、超連結點、版面編排等五點。在版面編排 方面則認為，適當的將要素配置、編排使之具有視覺美感，有助於增進使用者對 於內容的理解，產生最佳訴求效果。
曾惠民（2003），Pixel Style網站設計元素對使用者意象影響研究中，針對 Pixel Style網站表現方式，並參考其他研究者所設計要素與型態要素類目表，提 出Pixel Style網頁型態分析表，如表2-3。
表2-5：型態要素類目表 設計要素項目 類目
A.圖文比例 1.大於 3：1 2.3：1~1：1 3.1：1 B.組成元素 1.平面 2.立體
C.主色調 1.冷色系 2.暖色系 3.中性色 4.灰色系 D.色彩數量 1.五色以下 2.六至十色 3.十一色以上 E.投影 1.無 2.垂直投影 3.斜投影
F.透視角度 1.90 度及 0 度 2.15 度 3.27.5 度 4.30 度 5.45 度 G.超連結形式 1.圖片為主 2.文字為主 3.圖片加文字
H.背景 1.單一底色 2.滿版圖片 3.連續圖案 4.材質底紋 I.留白量 1.20％以下 2.20~40％ 3.40~60％
（資料來源：曾惠民，2003）
洪育修（2006），於電腦繪圖軟體討論區之網頁版面構成與使用者認知風格 關係之研究中，綜合諸位學者觀點提出網頁版面構成因子可分為：留白、頁面分 割、文字、圖像、前景與背景之對比、主題分類劃分、文章標題、色彩、動畫及 動態元件、圖文相對位置。
崔美善（2007）在Web Layout Design 中將Layout和Visual Effect兩要素細分 如下：
表 2-6：Layout 和 Visual Effect 的細分要素 網頁佈局 Layout
結構 Structure 型態 Shape 排版 Arrangement
單一結構 普通型態 平均
獨特型態 比例
實驗型態 強調
統一 對比 方向 置中
頂部導覽 左側導覽 右側導覽 底部導覽
視點
續表：2-6 Layout 和 Visual Effect 的細分要素 複合結構
頂部導覽+頁面分割
．左側框架
．右側框架
．左右兩側框架
．水平分割
．垂直分割
．其他
左側導覽+頁面分割
．頂部框架
．底部框架 固定區域
．運用固定區域
．運用與整個網頁搭 配的固定區域
視覺效果 Visual Effect
圖形 Graphic 色彩 Color 動態效果 Dynamic 隱喻 Metaphor 平面圖形 色彩可視化 交互式選單 隱喻表現
故事型 腳本 單一色
按形容詞分類的 色彩
色彩體系 字體
插圖 圖形符號 照片 頁面分割 半立體圖形 立體圖形 實驗圖形
實驗字體 複合圖形合成效 果
不同的服務選單 色彩
多重色彩搭配
策略化的技巧
（資料來源：崔美善，2007）
歸納學者們對於網頁設計要素的分類，如表2-7所示。除了上述在網頁中常 看到的設計要素之外，多位學者更對於版面編排此要素認為是影響研究的一個重 要變項。編排方式的不同造就了不同的版式格局，版式格局是其他設計要素的一 個架構，沒有架構，這些設計要素的配置便失去了依據；格局的不同也帶出不同 的心理層面感受，所以編排對於設計來說常常是影響整體視覺呈現的一項重要因 素。
表2-7：網頁設計構成要素彙整
研究者 網頁設計構成要素
馮淑萍(2000） 編排設計、企業形象、圖像、色彩、操作性、文字、
符號
莊錦昌(2001） 主題種類、超連結種類、超連結點配置、背景、背 景明暗、背景色彩、版面留白量、內文編排
管倖生、林彥呈（2002） 圖文比例、留白量、版面編排、框架、超連結型式、
顏色量、背景色彩
張依真（2002） 文字、圖形、呈現效果、超連結點、版面編排 曾惠民（2003） 圖文比例、組成元素、主色調、色彩數量、投影、
透視角度、超連結形式、背景、留白量
洪育修（2006） 留白、頁面分割、文字、圖像、前景與背景之對比、
主題分類劃分、文章標題、色彩、動畫及動態元件、
圖文相對位置
表2-8：網頁設計構成要素比較表 研究者
馮淑萍 (2000）
莊錦昌 (2001）
管倖生、
林彥呈
（2002）
張依真
（2002）
曾惠民
（2003）
洪育修
（2006）
文字 圖文比例 文字 圖文比例 文字
圖像 圖形 圖像
背景色彩 背景色彩 背景 超連結種
類
超連結型
式 超連結點 超連結形 式
色彩 顏色量 色彩數量 色彩
編排設計 版面編排 版面編排 圖文相對
位置 版面留白
量 留白量 留白量 留白
操作性 主題種類 框架 呈現效果 透視角度 主題分類 劃分
企業形象 背景 主色調 頁面分割
符號 背景明暗 組成元素 前景與背
景之對比 超連結點
配置 投影 動畫及動
態元件
網頁設計構成要素
文章標題
本 研 究 也 將 依 據 這 些 研 究 所 提 供 的 資 訊 ， 參 考 表 2-7 、 表 2-8 與 莊 錦 昌
（2001）、管倖生、林彥呈（2002）、曾惠民（2003）與崔美善（2007）所建立 的型態要素類目表，建構屬於本研究框架型網頁的型態要素類目表，如表2-9框 架型網頁設計要素類目表，以供後續實驗的進行。
表2-9：框架型網頁設計要素類目表
設計要素 類目
頂部導覽+
頁面分割
1.左側框架 2.右側框架 3.左右兩側框架 4.水平分割 5.垂直分割 6.其他 A 結構 複合結構
左側導覽+
頁面分割
7.頂部框架 8.底部框架
B 整體架構 1.分欄式架構
2.區塊式架構
3.分欄及區塊式架構並用 版面規劃
（Layout）
C 版面欄位 1.二欄
2.三欄 3.四欄 4.多欄
D 輔助線使用 1.有使用輔助線
2.無使用輔助線
E 頁面分割 1.垂直優先分割
2.水平優先分割
F 超連結形式 1.純文字
2.圖像加文字 3.圖像為主
G 圖文比例 1.大於 3:1
2.3:1~1:1 3.1:1 4.1:1~1:3 5.小於 1:3
H 留白量 1.0~20%
2.20~40%
3.40~60%
I 背景色彩 1.冷色系
2.暖色系 3.中性色 視覺效果（Visual
Effect）
J.色彩數量 1.四色以下
2.四到七色
二、網頁設計要素名詞解釋
根據文獻探討結果，網頁設計要素以「版面編排」、「超連結形式」、「圖文比 例」、「留白量」、「背景色彩」、「色彩數量」為多位研究者所採納，本研究主軸為 框架型網頁的意象探討，故加入「網頁結構」、「整體架構」、「輔助線使用」、「頁 面分割」四項類目，以了解此類目對於框架型網頁的意象影響為何。針對上述框 架型網頁設計要素類目表之類目做名詞詳細解釋及界定其範圍，分述如下：
（一）結構：框架型網頁以導覽列輔以頁面分割作為基本的編排方式，而在 此種導覽列結構中又以複合結構的「頂部導覽+頁面分割」及「左側導覽+頁面 分割」為最常見，本研究又將此要素分為八項類目，分別為「左側框架」、「右側 框架」、「左右兩側框架」、「水平分割」、「垂直分割」、「其他」、「頂部框架」、「底 部框架」。
（二）整體架構：網頁頁面整體架構以「欄位式的編排方式」（橫向）、「區 塊式的編排方式」（以區為單位）或「分欄及區塊式架構混合並用」的方式來呈 現，依其特定架構可以規範其訊息的編排而達到視覺搜尋的效率。
（三）版面編排：網頁頁面以劃分欄位的多寡作為訊息區隔的配置方式，主 要分為「二欄」、「三欄」、「四欄」、「多欄」四種類目。
（四）輔助線使用：網頁頁面以實線或虛線將頁面分隔成數個區塊呈現格狀 的樣貌，依此格狀區塊來編排網頁內容，使其有秩序可依循，分為「有使用輔助 線」或「無使用輔助線」二類目。
（五）頁面分割：框架型網頁有著導覽列作為特徵依據，導覽列的位置使得 網頁頁面的切割方向有所不同，一般以導覽列置於上方為水平優先分割；導覽列 置於左方為垂直優先分割，故分為「水平優先分割」「垂直優先分割」二類目。
（六）超連結形式：依超連結顯示種類以及網頁畫面中採用最多的形式，分 為「純文字」、「圖像加文字」、「圖像為主」三種類目。其中「純文字」是指 網頁的超連結形式大都以文字表現為居多；「圖像加文字」則是指網頁畫面中超 連結的形式以圖片和文字採用方式的數量相當；「圖像為主」指網頁的超連結形 式呈現是以圖片為居多。
「3:1~1:1」、「1:1」、「1:1~1:3」、「小於 1:3」五種類目。
（八）留白量：設計師進行網頁設計時，常會依其版面考量及整體表現感覺 而給以不同程度的版面留白量。本研究將版面留白此設計要素納入考量，探討是 否會影響使用者對於網頁的觀感，因此將其分為「0%~20%」、「20%~40%」及
「40%~60%」三種不同程度的類目。
（九）背景顏色：以網頁整體畫面所呈現色調為主，分別為「冷色系」、「暖 色系」、「中性色」三種類目。其中「冷色系」包含藍綠、藍、籃紫、紫等色；
「暖色系」包含紅、紅橙、橙黃、黃等色；「中性色」為白、黑及灰色。
（十）色彩數量：此色彩數量指色彩是網頁畫面中所被採用的顏色數量，屬 於RGB的混色，以混色的顏色作為每一個顏色，即視覺上所看到的顏色。分別以
「四色以下」、「四至七色」、「七色以上」三種類目來探討。
參、框架型網頁相關文獻
網頁設計的概念與一般平面設計相似，都是在既定的版面中將元素做最適當 的配置，以呈現最佳的視覺效果。而網頁設計的方式及編排手法繁多，不少研究 者已將網頁的呈現作歸納分類並探討其特質，框架型網頁便是其中一種。框架廣 義來說是包含 HTML 編輯中使用的結構框架和基於色彩或頁面分割的視覺功能 框架兩類。本研究僅從視覺呈現的角度切入，來探討框架型網頁的呈現方式及表 現，並從網站的使用性（usability）、視覺呈現及格線原理的應用三個面向，來探 討框架型網頁的編排設計方式。
一、以網站使用性角度切入
根據 ISO 9241 IT 系統所指的使用性包含有效、效率及滿意，具備此三項能 力可使得使用者在獨特的環境中達到期望的目的。相對於網站方面來說，使用性 是指使用者在瀏覽網路時，察覺到導覽列的容易使用或達成購買的行為。所以網 站的使用性，可以說是一種對於使用者介面容易使用程度評估的品質特性，網站
對於一個成功的網站而言，使用性是其中最重要地一項因素。使用性對於網 站設計而言，其目的就是吸引並留住網路瀏覽者停留在商業或非商業的網站。較 差的介面設計往往導致使用者對於任務表現的能力降低，特別在速度及正確性方 面。
Schaik ＆ Ling（2001）從使用性觀點切入，指出網站中影響使用性的一項 重要觀點就是導覽列（navigation），其中，支持這種導覽列的結構就是 yellow fever 及框架。yellow fever 是網頁編輯中的一種慣用手法，將有顏色的條狀區塊至於 頁面左方，它的主要功能在於放置導覽列的連結；框架是指將頁面分割成兩個區 塊，一個區塊是用來放置導覽列，另ㄧ個則是安排內容。當使用者瀏覽其他頁面 時，導覽列連結仍在原位置，不因點選其它頁面而變動。
導覽列是處理關於使用者如何在一個網站中從一個頁面移動到另一個頁面
（Gerald，2002），從文獻中檢索中發現一致性的答案，就是使用者可以很容易 的在網站中從一個頁面到另一個頁面去找尋他們所需要的訊息，對於使用者來 說，讓所有有效的選項容易被接受使用最重要的。網站的使用者不必花費很多時 間便可以清楚且容易地去了解網站中每個頁面的何去何從。
框架的編排設計，多位研究者已經提出建議，對於畫面的建構應以有組織的 方式編排而得以提升視覺的搜尋能力而提高網站整體的使用性。根據 Marcus
（1997）所提出的觀點，要達到畫面完善的編排設計有三項最基本的原則：（1）
使用格線配置的構成方式；（2）將畫面的編排設計標準化；（3）群化相關的項目。
設計者也試圖對於框架的編排設計方式依上述原則去執行，使得使用框架編排設 計完成的網站在使用性上面具有較正面的影響。除此之外，開啟框架的瀏覽器也 能支持開啟部分畫面的導覽列問題，這是因為框架功能允許網站瀏覽者可以看 見，並獨立與網頁中的部份區塊做互動的動作而不互相干擾。所以這也容許設計 者提供導覽列功能控制其中一個框架不會因點選而改變位置或畫面，甚至另ㄧ個 已經變換畫面，導覽列的框架仍於原來的位置。
在框架相關的研究中，在多位研究者的研究中指出導覽列的位置可以配置於 畫面的上、下、左、右，然而位置位於介面左上方能最快被發現，關於框架的編 排，多位研究者建議在版面上應以有組織的方式去建構，而增進視覺搜尋能力達 到較佳的使用能力（Pearson ＆ Schaik, 2003）。Nielson（ 2000）指出讓網站瀏
素就是畫面的編排設計，所以林林總總都必須回歸到視覺呈現的觀點。
圖 2-4：導覽列的使用－健保局網頁
（圖片來源：http://www.nhi.gov.tw/）
圖 2-5：導覽列的使用－匯豐銀行首頁
（圖片來源：http://www.hsbc.com.tw/tw /chinese/common/security.htm）
二、以視覺呈現角度切入
許俊誠（2001）在網頁風格與視覺要素對於設計評價影響之研究中，將企業 網站首頁以集群方式依風格來分類，共分為六種型式，包含多文字訊息型、框架 色塊訊息型、理性規矩圖文型、自由圓弧編排型、場景卡通型、影像插畫型，多 文字型、框架色塊訊息型與理性規矩圖文型其編排方式都是以規矩的分割版面，
再將設計要素依分割空間填入。
陳妙媛（2004）以構圖類型為分群基準，將資訊與設計學群的網頁，由專家 將網頁樣本依其構圖關係的相似程度共同討論後分為六種類型，如下：背景型、
影像型、圖文型、文字型、框架型、空間型。其中框架型的採用比例達三成，相 較於其他五種型式是最高的。對於框架型的定義為：以畫面的水平或垂直框架分 割為主要構圖方法，特徵是畫面上方有橫幅標題，下方則以直的欄位分割畫面，
有單欄至三欄，以雙欄為最多。簡化構圖後，框架型構圖的網頁主要以似於回字 形的矩行分割畫面，下方以縱式切成單欄置多欄。共有三種典型，ㄇ形、ㄏ形和 工形，框架型的構圖設計明顯偏重於畫面上方及兩側。
圖 2-7：框架型網頁構圖類型（陳妙媛，2004）
梁景紅（2006）則於網頁設計關鍵中指出，現今大部份網站框架都是由分欄 式架構與區塊架構此兩種基礎架構演化而來的，根據訊息需求，網頁排版主要劃 分出兩種基礎架構，一種是分欄式架構，另一種是區塊式架構。分欄式架構是用 直式劃分模式，把頁面訊息分為幾欄；區塊式架構是利用輔助線、圖形、色彩等，
把頁面分割成若干區塊。
圖 2-8：區塊架構－apple 網頁 圖 2-9：區塊架構－phoenix 網頁
（圖片來源：http://www.apple.
com.tw/）
（圖片來源：http://www.phoenix.com/en/
Home/default.htm）
圖 2-10：分欄式架構－麗臺科技網頁 圖 2-11：分欄式架構－adobe 網頁
（圖片來源：http://www.leadtek.
com.tw/）
（圖片來源：http://www.adobe.com/）
矢野（2007）於設計美學中提到，網頁的基本結構大致可分為三項，一是跳 到各小項目首頁的全區導覽（global navigation）；二是在各個小項目中移動的區 域導覽（local navigation）；三是各個小項目中的文字、圖案等內容。而大部分網 站設計可分為兩種：「倒 L 型」，將網頁分成上、下兩區，並在左右其中一邊加 上導覽列；「上方選單型」，將畫面上方安排成導覽區，下面作為內容呈現區。區 塊式的版面設計運用「格線系統」與「區塊劃分」的方式來進行，其中 A 型是
圖 2-12：倒 L 型網頁設計（矢野，2007）
圖 2-13：上方選單型網頁設計（矢野，2007）
崔美善（2007）在 Web Layout Design 中依據內容結構和導覽結構的複雜程 度，將網頁的佈局結構分為單一結構和複合結構兩類；依據導覽列排列順序將導 覽列結構分為置中、頂部、左側、右側及底部五類。
表2-10：網頁佈局（Layout）分類表 網頁佈局（Layout）
置中 頂部導覽 左側導覽 右側導覽 單一結構
底部導覽
頂部導覽+
頁面分割
．左側框架
．右側框架
．左右兩側框架
．水平分割
．垂直分割
．其他 左側導覽+
頁面分割
．頂部框架
．底部框架 固定區域 ．運用固定區域
．運用與整個網頁搭 結構
（Structure）
複合結構
配的固定區域
（資料來源：崔美善，2007）
其中，單一結構的最大特點在於主頁和子頁的網頁佈局結構幾乎完全相同，
網站使用者熟悉了主頁的導覽方式之後，能夠很容易地使用其他頁面。隨著網站 資訊越來越豐富，單一結構的網站已經不多見，因為單一結構所能提供的網站資 訊量不夠大，這種網站可以分為提供單一外觀風格的網站，透過造型要素的表現 技巧，突出視覺效果以及網頁佈局，但注重網頁外觀風格的網站。所以單一結構 並不是表現在資訊的單一性上，而是要求網頁設計師更多地注意網頁元素的協調 與均衡。
隨著網頁內容的結構化，內容的類型、深度、體系等的複合結構要求導覽方 式具有複合性，對於這種表現導覽結構的方式而言，大致可分為四種，其中以「頂 部導覽+頁面分割」、「左側導覽+頁面分割」兩種符合本研究所描述的框架型網 頁，描述特色如下（崔美善，2007）：
1、頂部導覽+頁面分割
網站導覽列設於頂部，第二、三層選單的站內導覽位於下方的網頁佈局結 構，位於頂部的網站導覽對下方內容區域造成的影響是最小的，便於調整網站導 覽和內容區域的比重，內容性質取向和功能複雜多樣的網頁佈局較易採用。
（1）頂部導覽+左側框架： （2）頂部導覽+右側框架：
圖 2-14：頂部導覽+左側框架 範例
（圖片來源：
http://www.intermajor.co.kr/）
圖 2-15：頂部導覽+右側框架 範例
（圖片來源：
http://www.delta.com.tw/ch/index.asp）
（3）頂部導覽+左右兩側框架： （4）頂部導覽+水平分割：
圖 2-16：頂部導覽+左右兩側框架 範例
（圖片來源：
圖 2-17：頂部導覽+水平分割 範例
（圖片來源：
http://www.jaguarusa.com/us/en/home.htm）
（5）頂部導覽+垂直分割： （6）頂部導覽+其他：
圖 2-18：頂部導覽+垂直分割 範例
（圖片來源：
http://www.espnstar.com/football/football_index .html）
圖 2-19：頂部導覽+其他 範例
（圖片來源：
http://club.lego.com/eng/）
2、左側導覽+頁面分割
左側導覽和頁面分割的複合結構中，網站導覽列位於左側，第二、三層選單 的站內導覽置於右側的下方或上方，導覽結構的層次非常清晰，使用性強，在內 容量不太的情況下，這種特點使頁面產生了更加豐富及充實的效果。
（1）左側導覽+頂部框架： （2）左側導覽+底部框架：
圖 2-20：左側導覽+頂部框架 範例 圖 2-21：左側導覽+底部框架 範例
框架型網頁主要包含導覽列的支持並輔以頁面的分割，而導覽列又以置於左 側及頂部居多，網站實例中以頂部導覽+頁面分割的框架編排方式為較多。由上 述相關文獻發現，從網站使用性及網頁視覺設計兩大觀點切入之後，框架型的網 頁不論是以使用性為考量，或是以視覺設計觀點出發，框架型網頁的應用範圍都 相當廣泛。綜合以上研究者所提出之論點，對於框架型網頁，本研究採用陳妙媛
（2004）以構圖觀點切入的框架型構圖方式；與許峻誠（2001）以風格與視覺要 素作分類其中的兩類（框架色塊訊息型、理性規矩圖文型），此種表現方式統稱 為框架型網頁。
這裡所指框架包含 HTML 編輯中使用的結構框架和基於色彩或頁面分割的 視覺功能框架兩類。對於 HTML 編輯使用的框架可稱之為「框架結構」；基於色 彩的框架視覺效果稱之為「色彩框架」；對於段落劃分和資訊功能區分的框架視 覺效果稱為「功能框架」（崔美善，2007）。
三、格線原理（grids）的應用
框架型網頁以分割頁面作為配置設計要素的特色，與平面設計中所提及的格 線原理概念相同，都是在既定的版面中將空間做適當的規劃。各設計要素彼此之 間具有默契，並以線條來劃分版面而填入各個設計要素；也可在版面之中，將設 計要素依水平或垂直的方向做排列動作，即使沒有肉眼可見的線條來區隔版面空 間，但仍可以發現設計要素依一定的方向做排列，使其整體看來類似格狀的版面 編排方式作呈現。
格線原理的應用不論是在廣告設計、海報設計、包裝設計、報紙等方面都是 很常見的，而設計者在開始從事設計之前，必須先建立版面的格線佈局，可以使 得整體的設計較為嚴謹，更能掌握各個設計要素的組合形式，使整體設計的呈現 更佳完善。格線在版面中的腳色猶如版面的整體架構，方便設計者將設計要素組 合編排，但此格線的應用並非固定的，而是一個參考的依據，具有彈性的調整功 能，而能使版面的編排具有條理性而符合視覺的美感。
由此可知，框架型網頁與格線原理的概念相似，但框架型網頁礙於以網頁的 形式呈現，受限於軟體或技術方面，所以實際的框架型網頁在突破框架的編排方 面較一般的平面設計困難，所以這也是框架型網頁所需要再深入討論的另一項議
第三節 感性工學
壹、感性工學概述
情感方面的設計已受到學術及企業界的注意，主要把顧客情感的需求加入設 計要素中，使得顧客達到情感面的滿意。對於情感方面的設計主要在於如何勾勒 出顧客主觀的印象，而這就是所謂的感性（Jiao, Zhang, and Helander, 2006）。產 品的意象在使用者喜好及產品的選擇方面，通常扮演著一個重要的腳色。而使用 者的觀念一般來說是由兩大群組所組成，包含消費者及設計者。然而消費者對於 產品意象的觀點和設計者著重於產品的元素或特質是截然不同的，消費者在選擇 產品時主要是依據對於產品意象的感知，而設計者再設計產品則是考慮到產品物 質方面的元素及本身特質(Matsubara and Nagamachi, 1997)。此外，消費者對於產 品意象的感知比較難以被精確的描述，從設計的觀點來看待消費者的需求，最好 的方式就是將產品的元素與消費者對於產品的感知作連結(Aitken, Childerhouse and Towill, 2003)，消費者導向的技術已經被發展而可以幫助設計者設計出具有 需求性的產品。特別是感性工學，已經發展成為將消費者對於產品的感覺意象轉 換成設計元素的一項技術。已經成功的在產品設計中廣泛地被應用，而去探索消 費者感覺與產品設計元素之間的關係（Lai, Lin, Yeh and Wei, 2006)。
「感性」（Kansei）是一個由日文直接轉用的用語。在日文的用語中代表著
「感知」、「感覺」、「印象」以及某種情緒的呈現。也就是一種將人們對於產品的 感覺「轉變」或是「對應」到設計師在考量產品設計時的「設計要素」的一種方 法或是系統性的程序模式。「感性工學」是一種人因探討的技術，主要是針對人 類心理感知層次因素的探究，尤其重要的是被應用於消費者導向產品的設計開發 之上。
日本學者長町三生，基於消者導向的觀念，為新產品的開發發展出一套人因 消費者導向的新技術，稱之為「感性工學」（Kansei Engineering），「感性」的 日文原義為「對於某一個產品所產生的心理感覺與意象」。而感性工學的目的便 是將消費者的感覺與意象轉化在新的產品上，亦即感性工學之定義：「將消費者 對於產品所產生的感覺或意象予以轉化成設計要素之技術」(Nagamachi，1995)。
尋找出這個感性量與工學中所使用的物理量之間的高元函數關係，作為工程發展 時的基礎（蔡明錡，2000）。
Nagamachi（1995）指出感性工學是一種根據消費者的感受與需求的技術，
有關感性工學的所探討的議題方向有以下四點：
1、如何透過人因及心理的角度去探討消費者對產品的感覺。
2、如何透過消費者的感性來找出產品的設計特徵。
3、如何建立一套人因技術的感性工學。
4、如何隨著社會的變遷以及群眾的偏好來改變系統。
對於上述四點方向Nagamachi提出解釋，關於第一點，運用語意差異法來作 為評量消費者感性的量測工具。第二點，是透過調查或實驗設計，來建立感性語 彙與設計特徵之間的關聯。第三點，是應用電腦技術來建立感性工學的系統架 構，並透過介面操作給予實際的應用。第四點，則必須根據新的感性趨勢，輸入 新的感性語彙來修正系統中的資料，以保持更新。
Matsubara ＆ Nagamachi（1997）將感性工學系統歸納為兩種形式：
1、消費者決策輔助系統：消費者可透過感性語彙的輸入來得到產品之設計 提案，亦即前向式推論之感性工學系統。
2、設計師決策輔助系統：設計師能夠在電腦上繪製粗略的草圖並讓電腦來 辨識其感性訴求，稱為逆向式推論之感性工學系統，且結合此二系統之電 腦化系統定能成為設計師與消費者之有效決策輔助工具。
貳、感性工學分類
日本學者長町三生(1995)將感性工學歸納為三種類型：
1、感性工學一類：類型劃分(Category Classification)
主要乃是進行一連串概念的延伸和展開。由一個主要的概念，利用樹狀圖層 層解析，分出數個次概念，直到發展出設計細節（莊錦昌，2001）。而主題的設 定及概念的延伸均是有經驗的研發專案小組，利用層次推論的方法，建立如樹狀 的相關圖，以得到設計的細節部分。透過這些對產品建構的重新設計與規劃，來 表現特定的感性訴求。區分的層級數並沒有規範，直到能夠得到細部設計的詳細 說明為主（曾惠民，2003）。
2、感性工學二類：感性工學電腦系統(Kansei Engineering System)
利用專家系統、類神經網路模式等現有的電腦技術，將消費者的感性意象轉 換為設計細部要素的電腦化系統後，即可進行物理量與感性量之間的轉譯工作，
利用專家系統建構感覺和設計元素的知識庫，並聯結感覺和設計元素的對應關 係。感性工學系統可以應用於兩方面：
（1）消費者輔助系統：將消費者的感性需求轉化為產品設計要素，以進行 開發設計。
（2）設計師決策輔助系統：將設計師的設計提案轉化為感性評估，所確定 是否符合所欲達成之意象。
3、感性工學三類：感性工學模式化(Kansei Engineering Model)
這套模式可從感性語彙中得到人因方面的結果，利用數學模式來表達感性用 語和設計元素問的關係。
綜合以上描述可將感性工學定義歸納為，感性工學是將消費者所具有的感覺 轉變成物理特性的產品設計要素而加以實現的科學。它是以使用者的情感反應與 認知作為分析研究的基礎，透過統計分析及電腦技術的運作，建構出符合使用者
第四節 意象測定基礎與方法
壹、意象的定義
意象的英文為「Image」，而中文對意象卻有很多解釋與翻譯，例如：意象、
印象、形象等，牛津英文辭典對意象解釋為某物的心理呈現，不是由直接的知覺，
而是藉由記憶或想像；一種心理圖像或印象、想法、概念。意象在辭典裡指的是 心境、容貌與心中呈現的形象，從心理學的觀點來看，意象是感覺經驗的心理表 象，是指將外在的事物編碼轉化後儲存長期記憶中的表象（張春興，2003）。所 以，意象是感覺的一種現象，透過五官感覺引發起的一種心理層面感覺。
意象並非恆久不變，它會隨著社會文化、感覺經驗、價值判斷等的改變，而 有所調整，也就是說意象是一種意識活動，人類之所以察覺到某一事物的意象，
主要是透過感知系統而得，感知的過程，就如同訊息的傳遞，個人的知識與經驗 在這一方面扮演著相當重要的角色（黃美菁，2000）。
以設計的活動來看，「意」即是設計者概念的運用，屬於產品的語言；而「象」
為產品呈現的具體風格（梅宜冬，2004）。
貳、意象測定的理論基礎
意象是產品在貨架上表達給消費者的第一印象，即消費者對影像產生的刺激 後，把心理層面之感受賦予一種認知特質的評價，而每個人都有其獨特的方式，
來組織整理他的經驗和所接收的訊息，然後反應出來，造就了不同的審美觀（黃 堅厚，1992），而心理層面的審美觀是難以數據化的，所以需要測定意象的理論 來做為後續研究的依據。
黃心湘（2004）整理出共感覺與投射法，作為測定意象的論基礎。共感覺
﹙synesthesia﹚乃所謂的「共通感覺」，是指人們在感覺方面常有的一種現象。
當我們某項感官接受刺激時，會獲得另一感官在接受刺激時所產生的感覺（比如 我們看到某種顏色，常可能有溫暖的感覺，而在看到另一顏色確有寒冷的感覺），
共感覺也有可能是心理和生理因素互相影響所產生的共鳴現象。
投射法是1938 年Lawrence K. Frank 氏所創，主要是根據佛洛依德「心理分 析」的理論為依據所編製出來的，該理論主要強調人格結構大部分是潛意識，個 人很難憑著意識去說明自己，需藉由心理學上用來衡量人格的投射方法，用一些 刺激情境陳列於受測者，令他表示反應，並獲得受測者本身獨特人格組織所加之 於該刺激情境的意義，此方法的測驗情境又可分為五類：
1、聯想法：使受測者說出因某種刺激所引起的聯想。
2、構造法：使受測者編造或創造一些東西。
3、完成法：使受測者完成某種材料。
4、選擇或排列法：受測者接受一些刺激之後，依某項原則進行選擇或予以 排列。
5、表露法：使受測者利用某種媒介自由的表露他的心理狀態。
楊清田（2001）於文獻探討中發現許多學者用來測驗消費者意象的語彙形容 詞來自於Osgood。而Osgood提出的形容詞蒐集方法有兩種：
1、聯想法：對於所提出的概念，蒐集從多數的受測者其第一印象的語彙。
2、文獻調查法：從辭典或是與該概念的相關文章中抽取出語彙方式。
參、意象研究相關文獻
關於意象的研究，乃是以感性工學的觀點切入，將使用者心理層面的感受予 以數據化，感性工學可以將感性需求具體轉化成為設計要素的規範，並將使用者 感受和需求量化。因此，在設計者與使用者之間有了一定的標準可以做為依循。
感性工學早期最常應用在產品設計中，隨者設計潮流的演變，以使用者為導向的 設計理念越來越被重視，也使得設計者在設計同時，還須站在使用者的角度設 想，達到適用於使用者需求的標準。因此越來越多的設計類型都以意象作為設計 的評估，網頁設計方面關於網頁色彩、網頁風格設計、網頁編輯方面等也有不少
黃涵貞（2006）在高齡者對網頁色彩配色之感覺意象及喜好度研究中，藉由 文獻探討了解高齡者的視覺機能與色彩相關的問題。再透過語意差異法（Method of Semantic Differential）來進行意象的調查，依據專家所配出的22種不同的網頁 色彩配色樣本，測試高齡者對其網頁色彩會有何種感覺意象；並對哪些類型的配 色有高度的喜好，以及不同性別是否會有認知差異。最後將高齡者視覺意象的認 知整理出來，提供設計師提供後續在執行網頁色彩配色設計時，更客觀與詳細的 參酌依據。
曾惠民（2003）在Pixel Style網站設計元素對使用者意象影響之研究中指出，
網站除了須具備豐富的資訊外，良好的視覺設計也是不容忽略的。Pixel Style網 站的風格有別於一般的網站設計，其所應用的設計元素除了不同於一般網站之 外，更是對使用者意象有關鍵性的影響，此研究以感性工學的理論為研究基礎，
透過Pixel Style網頁設計元素的分析探討，了解使用者對Pixel Style網頁的意象影 響。
管倖生、林彥呈（2002），以感性工學的程序，建構網頁設計系統。導入使 用者的感性概念，探討何種網頁型態要素及感性語彙會影響使用者操作上的認 知。藉此提出網頁型態要素與感性語彙之間的關連性。
莊錦昌（2001）在網頁介面使用性之探討與意象之研究中，鑒於網頁的應用 在溝通與連結上並沒有具體明確的研究準則以玆參考規範，導致眾多的設計在介 面的使用性上問題繁多，造成使用者的不便。因此本研究期望能從文獻的歸納整 理、使用者現況調查及使用網頁編輯軟體製作的新網頁作為實驗工具，以找出一 些在全球資訊網中增進使用者操作效率與效能的介面設計準則。並融入感性語彙 的意象分析，建立不同意象風格的網站首頁，以提供設計師針對不同行業類型的 網站設計時的參考依據。這些研究結果將會有助於改善在全球資訊網(WWW，
World Wide Web)上之人與電腦互動的績效。
表2-11：網頁意象相關研究整理
研究者 目的 理論基礎與方法 結果
黃涵貞（2006） 了 解 高 齡 者 的 視 覺 機 能 與 色 彩 相 關的問題。
感性工學 語意差異法
將 高 齡 者 視 覺 意 象 的 認 知 整 理 出 來，提供設計師執 行 網 頁 色 彩 配 色 設計時，更客觀與 詳細的參酌依據。
曾惠民（2003） 了 解 使 用 者 對 Pixel Style網頁的 意象影響。
感性工學 語意差異法
建立預測準則，提 出 預 測 語 彙 複 回 歸方程式。
管 倖 生 、 林 彥 呈
（2002）
了 解 何 種 網 頁 型 態 要 素 及 感 性 語 彙 會 影 響 使 用 者 操作上的認知。
感性工學 語意差異法
提 出 網 頁 型 態 要 素 與 感 性 語 彙 之 間的關連性
莊錦昌（2001） 找 出 在 全 球 資 訊 網中，增進使用者 操 作 效 率 與 效 能 的介面設計準則。
感性工學 語意差異法
提 供 設 計 師 針 對 不 同 行 業 類 型 的 網 站 設 計 時 的 參 考依據
許多研究者參閱電腦雜誌、流行雜誌及相關文獻，擷取適合網頁意象相關形 容詞語彙，將收集到的形容詞語彙經過詞性轉換，進行相反詞配對。但每位研究 者所取得的形容詞語彙眾多且不一致，經過焦點團體篩選之後，仍有數十組適用 於網頁的形容詞語彙，而本研究著重於建構適合框架型網頁的形容詞語彙。為避 免選取失當，本研究即根據文獻調查結果，提出形容詞語彙初步選取結果。
針對框架型網頁找出適合的語彙，採用管倖生、林彥呈（2000）網頁要素對 感性認知影響所得到30組形容詞語彙；莊錦昌（2001）在網頁介面使用性之探討 與意象之研究中，所得到30組形容詞語彙；曾惠民（2003）Pixel Style網站設 計元素對使用者意象影響研究，提出50組形容詞語彙；Huang（2006）Web performance scale，提出11組形容詞語彙，結合四位研究者所提出的形容詞語 彙共121組，初步剔除重複及相似的形容詞語彙，剩下42組形容詞，成為本研究 形容詞初步篩選結果。
第五節 文獻小結
從文獻中發現，使用性是網站設計中最重要的一個環節，而其目的是讓使用 者在瀏覽後對網站的整體性產生認同感，進而提升企業的網路形象，並增加網站 使用者及再造訪率。所以網頁設計除了需要建立在使用者的經驗上，還應進一步 考量視覺設計因素，進而提升網站整體的形象。
使用性是以方便使用者瀏覽網站而設計出來的良好使用者介面，使用者介面 是在網頁編排的基礎上所策劃，而網頁編排則是以資訊架構為標準而確立。所 以，必須有效地對透過資訊架構系統化、內容的妥善配置、導覽系統、資訊順序 等進行視覺化處理，並以能夠簡單快速地向網站使用者傳遞資訊的網頁編排結構 為基礎，而提供使用性很強的使用者介面。框架型網頁的設計方式依據了使用性 的原則，採用導覽列的設置，並將頁面分割以作為網頁設計要素的安排，使得網 站使用者可以清楚地了解網站整體架構且容易使用，可以不必花很多的時間去了 解網站架構才能搜尋到所需要的資訊內容。相較於其他網頁設計方式來說，從使 用性的觀點來看，框架型的編排設計方式確實得以讓網站使用者依其使用經驗，
在此種編排方式的網頁中更容易使用，網站也達到快速且有效率地傳遞訊息的功 能，所以設計者在思考網頁編排設計方式的同時，也可以此作為設計範本的考量。
網路依訴求的不同，而分類方式也不盡相同，整理歸納多位研究者分類方式 後，對於網站性質的分類本研究將其分為八類：商業性企業網站、入口網站、社 群團體網站、個人網站、政府機關網站、學術性教育網站、購物網站、其他。其 中，商業性企業網站主要在說服使用購買商品、服務顧客、建立形象，以企業的 形像及服務品質為主要考量，網站內容會依其訴求而塑造不同的意象風格；又以
「首頁」為要，對於整體而言比較具有深入討論的價值。
網頁整體是由各個要素所組成，網頁視覺構成要素是扮演資訊與使用者溝通 的重要角色，藉由視覺要素的應用設計與呈現，使得在螢幕上可以傳達特定的譬 喻、形象及概念。而這些元素的應用不只是考量網頁的視覺美觀性，更是使用者 對網站整體經驗感受的基礎。所以本研究也針對框架型網頁的構成要素進行探 討，從文獻中初步擬定框架型網頁設計要素類目表，以供後續研究進行。
框架型網頁的使用在網頁設計中普遍地被使用，設計者以垂直、水平、格狀 的架構將設計要素依經驗法則配置於其中，但不同的配置方式也產生了不同的心 理感受，所以將設計者的經驗法則配合使用者心裡層面的感受，藉由感性工學的 觀點可以將意象的感覺與設計要素之間建立法則，以作為設計者日後設計的相關 依據，可以更有效率的設計出符合使用者心裡層面感受的網頁。
雖然網站使用者喜歡瀏覽使用性強、方便檢索的網頁，但網站空有使用性強 的功能卻缺乏視覺的刺激是不夠的，還必須透過視覺上的刺激來吸引網站使用者 增加停留時間，能夠讓使用者再一次地造訪網站。所以除了網站本身具備的使用 性特色之外，設計者還必須利用多樣的設計要素增加視覺的效果，凸顯出獨創性 及差異性，讓使用者在視覺效果及網站功能的雙重取向達到滿意，以符合使用者 對於網站的期望。網頁視覺編排的呈現是網站給使用者最直接的感受，如何讓習 慣於快速瀏覽的使用者受到吸引而停留是相當重要的，因此網頁必須具備獨特性 的視覺風格，所以設計者賦予網頁依其訴求而有特定風格便成為了值得再深入的 問題。
