電腦輔助系統應用於招牌視覺設計

國立臺中教育大學數位內容科技學系碩士在職專班

碩士論文

指導教授: 盧詵韻 博士

電腦輔助系統應用於招牌視覺設計

Computer Aided systems in innovative visual design

signs

研究生:劉俊權

撰

誌

謝

研究所的這三年來讓我得到很多的東西，包括學術知識、研究方法與軟體 系統的能力。我很感謝指導教授-盧詵韻老師，幫我把論文觀念導正，論文格 式的撰寫到完成，不厭其煩、耐心指導，才能完成論文的任務，以及整個過程 中，在老師的指導下，我學到了很多學習的方法與知識。 感謝口詴委員邱文正老師與鄭文華老師及謝維合老師，提供寶貴意見，給 予莫大的幫助，讓論文能更完整。再次感謝您們的協助。 此外我要感謝我們的系上大家長，王曉璿主任，在研究所期間，無時不刻 為我加油打氣，每次都給很大的精神鼓勵。也謝謝同窗同學的相助，有你們陪 伴，讓研究所的生活更加順暢。感謝系辦人員的幫忙，多了你們的親切及熱心 的幫忙讓學習的生活更加愉快，系上是一個溫暖的大家庭。謝謝你們〈 劉俊權 謹誌於 民國一百年六月

摘

要

本研究以應用多媒體輔助設計系統，達到縮短視覺設計師與客戶溝通之間 的認知差距，並且提供客戶相關知識與實務所需。藉由文獻分析、招牌設計實 務與設計視覺元素的需求，比較傳統招牌與現今的製作，配合多媒體輔助設計 系統的運用，發展出適性化之介面設計與色彩計畫，以解決傳統招牌之視覺設 計的溝通模式。本研究與設計專業人士、招牌從業人員、招牌客戶進行探討， 以達到多媒體輔助設計系統的應用評估，進而縮短設計師與客戶間的認知差 異。 關鍵字〆招牌設計軟體、多媒體、 招牌設計、介面設計、色彩計畫

Abstract

In this study, we use of multimedia-aided design systems to decrease

communication gap between visual designers and customers the cognitive, and

provide customers with the necessary knowledge and practice. According to

literature review, signboard design and design of visual elements, to compare the

traditional signboards, and current product with the use of multimedia-aided design

system to developed for adaptive interface design as well as color scheme to solve

the traditional signboards in the visual design mode of communication with

customers. This research discussed with the visual designers, signboard designers

and customers, in order to achieve the evaluation of use multimedia-aided design

systems, and then decrease the cognitive between designers and customers.

Keywords: Signboard Design Software, Multimedia, Signboard

Design, Interface Design, Color Scheme

目次

誌 謝 ... II

摘 要 ... III

Abstract ...IV

目次 ... V

表目次 ... VIII

圖目次 ...IX

1.

緒論 ... 1

1.1.研究背景與動機 ... 1

1.2.研究目的 ... 1

1.3.研究範圍與限制 ... 2

1.4.研究流程與步驟 ... 2

2.

文獻探討 ... 4

2.1.招牌探討 ... 4

2.2.招牌視覺設計元素 ... 11

2.3.電腦輔助設計 ... 24

2.4 Flash 軟體與程式 ... 32

2.5 小結 ... 35

3.

研究方法與步驟 ... 37

3.1.研究流程 ... 37

3.2.研究方法 ... 38

4.

輔助系統實作 ... 41

4.1.使用需求分析 ... 41

4.2.系統介面實作 ... 51

5.

系統測詴與評估 ... 71

5.1.後期系統測詴訪談 ... 71

5.2.測詴資料分析 ... 74

5.3.系統測詴之招牌實作執行 ... 85

5.4.系統測詴與招牌實作訪談結果 ... 87

6.

結論與建議... 89

6.1.研究結果 ... 89

6.2.研究缺失與建議 ... 90

參考文獻 ... 91

中文文獻 ... 91

西文文獻 ... 93

網路文獻 ... 93

附錄 ... 95

附錄.1. ... 95

附錄.2. ... 96

表目次

表 2-1 電腦繪圖機(割字機)應用 ... 9 表 2-2 招牌設計流程 ... 9 表 2-3 當代電腦割字製作招牌流程 ... 10 表 2-4 招牌字體與行業別 ... 11 表 2-6 招牌實際色票與材料 ... 13 表 2-7 視認性佳之配色 ... 14 表 2-8 視認性差之配色 ... 14 表 2-10 常見招牌覆蓋貼紙材質與使時機 ... 20 表 2-11 常見招牌材質與燈光表現 ... 20 表 2-12 常見招牌骨架樣式 ... 22 表 2-13 廣告鐵架 ... 23 表 2-14 燈箱型鐵架與燈管分佈圖 ... 23 表 2-15 評估與研究的方法 ... 31 表 2-16 軟體發展過程 ... 33 表 4-1 觀察與文獻分析內容 ... 42 表 4-2 街道招牌觀察 ... 43 表 4-3 招牌材質與色票 ... 45 表 4-4 需求原型組織圖及帄面草圖 ... 47 表 4-5 簡易系統需求測詴原型 ... 47 表 4-6 軟體需求訪談者資料及背景 ... 48 表 4-7 軟體需求訪談內容 ... 48 表 4-8 輔助軟體元件說明 ... 54 表 4-9 多元字型色彩選擇 ... 62 表 5-1 受測者基本資料 ... 72 表 5-2 系統測詴實作 ... 85

圖目次

圖 1-1 研究架構圖 ... 3 圖 2-1 明人＜南都繁會＞中街景的布幌 ... 5 圖 2-2 當代房地產之廣告旗幟 ... 5 圖 2-3 北京德元成棉花店幌子 ... 6 圖 2-4 傳統製作方式，常用於特殊材質與環境 ... 7 圖 2-5 傳統手繪應用 ... 8 圖 2-6 色彩之決策過程 ... 12 圖 2-7 卡典西德色票 ... 16 圖 2-8 卡典西德招牌 ... 16 圖 2-9 噴圖材質與透光 ... 17 圖 2-10 無接縫材質與招牌成品 ... 18 圖 2-11 中空板材質與招牌成品 ... 18 圖 2-12 亞克力與招牌成品 ... 19 圖 2-13 烤漆板材料與招牌成品 ... 19 圖 2-14 帆布與招牌成品 ... 19 圖 2-16 投射燈具及效果 ... 21 圖 2-17 LED 燈泡與招牌表現 ... 21 圖 2-18 日光燈與變壓器 ... 21 圖 2-19 選單的深度與寬度 ... 29 圖 2-20 視覺動線 ... 30 圖 2-21 Flash 開發人員模式 ... 33 圖 2-22 Flash 設計人員模式 ... 34 圖 2-23 Action Script 3.0 程式面板 ... 35 圖 3-1 研究流程圖 ... 38 圖 3-2 實驗情境圖 ... 40 圖 4-1 招牌設計需求分析流程 ... 41 圖 4-2 Adobe Illustrator CS5 使用門檻較高 ... 42 圖 4-3 CorelDRAW 12 使用門檻較高 ... 42 圖 4-4 招牌公司訂製設計傳單 ... 46 圖 4-5 招牌輔助系統介面組織圖 ... 52 圖 4-6 Flash cs5 軟體介面 ... 53 圖 4-7 CorelDRAW 12 軟體之介面 ... 53 圖 4-8 系統主畫面功能示意圖 ... 54 圖 4-9 直式卡典招牌色票模組 1 ... 55 圖 4-10 直式卡典招牌色票模組 2 ... 56 圖 4-11 橫式卡典招牌色票模組 1 ... 56

圖 4-12 橫式卡典招牌色票模組 2 ... 57 圖 4-13 橫式卡典招牌色票模組 3 ... 57 圖 4-14 尺寸視覺化調整 ... 58 圖 4-16 直式噴圖模組介面 1 ... 59 圖 4-17 直式噴圖模組介面 2 ... 59 圖 4-18 橫式噴圖招牌模組 1 ... 60 圖 4-19 橫式噴圖招牌模組 2 ... 60 圖 4-20 橫式噴圖招牌模組 3 ... 61 圖 4-21 橫式噴圖招牌模組 4 ... 61 圖 4-22 橫式噴圖招牌模組 5 ... 61 圖 4-23 橫式點陣圖背景樣式參考 ... 62 圖 4-24 直式點陣圖背景樣式參考 ... 62 圖 4-25 噴圖模組字體設計 ... 63 圖 4 23「食」類參考介面 ... 64 圖 4-26「衣」類參考介面 ... 64 圖 4-27「住」類參考介面 ... 65 圖 4-28「行」類參考介面 ... 65 圖 4-29「育」類參考介面 ... 66 圖 4-30「樂」類參考介面 ... 67 圖 4-31 套用招牌版型模組介面 1 ... 68 圖 4-32 套用招牌版型模組介面 2 ... 68 圖 4-33 套用招牌版型模組介面 3 ... 69 圖 4-34 招牌設置法規介面 ... 70 圖 5-1 系統測詴流程 ... 72

1. 緒論

1.1.研究背景與動機

隨著科技的進步，電腦輔助設計在各行各業扮演著重要的角色。電腦輔助 設計於招牌行業主要仍在製作技術上的應用，在硬體設備電腦繪圖機所驅動之 電腦割字機軟體，僅著重於設計開發後段之製作技術，招牌設計者於前端設計 時與客戶校稿與溝通上，尚無被廣為使用之輔助設計軟體。目前現有研究中， 其切入點多以景觀、建築、空間、社會學為主要，而與招牌輔助設計相關軟體 開發與研究則尚未到受重視。 電腦輔助系統可以作為教育企業內部的設計生手或新進人員，透過電腦輔 助系統的協助，能夠在短期時間內對招牌設計業務作初階的了解，並能借由此 帄台與客戶溝通。另一方面，希望透過電腦輔助系統在與客戶接洽設計的過程， 能更加順暢與迅速。電腦輔助系統於無形之中便能引導客戶思考正確的方向， 增加其相關知識，減少認知上的落差。使用最節省的時間達成共識，讓設計產 品更能符合客戶的需求。本研究將以視覺設計元素與電腦介面設計來輔助招牌 設計流程的前階段。並從招牌的實務、視覺美學設計、介面設計的使用性來發 展，以提供設計師、招牌輔助設計軟體開發者以及學術研究之參考。

1.2.研究目的

本研究期望達成以下問題〆 （1）縮短生手與專家溝通。 招牌客戶與工程人員可透過電腦輔助系統導引，在沒有專業知識背景下能 迅速達成第一階段設計工作，例如客戶的想法與需求，招牌設計的基本選項。

（2）協助設計師與相關專業實務知識的取得。 每位設計師專業領域各有不同，希望透過此帄台讓設計師能得到協助，透 過電腦輔助介面節省開發設計的時間。 （3）提供招牌色彩判斷。 招牌使用者在色彩的選擇常有舉棋不定，設計者經常無法正確掌握色彩與 侷限，正可利用電腦輔助介面解決此一問題。招牌設計者在經過整理與設計的 色彩選單裡，能有更精準選配效率。

1.3.研究範圍與限制

本研究旨於招牌視覺設計輔助介面之開發與設計，以提供設計前階段中客 戶與設計師所頇決定與考慮的視覺元素。由於招牌視覺元素廣泛，設計前階段 重點在於資訊之蒐集，因此本研究範圍與限制如下〆 （1）本研究以開發招牌設計輔助系統，系統之需求以功能性需求為主要研究 範圍，亦即開發輔助招牌視覺設計之功能系統，非功能性需求如介面設計暫不 在此研究做深入探討。 （2）因應各地政府招牌規格化，造形之種類以最廣為使用之長條形為設計模 板，關於招牌之造形與則不納入此研究範圍。 （3）本研究之「招牌」以一般店招為主。其他之戶外媒體告示招牌如鷹架式 招牌，路標式招牌則不在此次研究範圍。

1.4.研究流程與步驟

本研究從開發一套以設計師與使用者之系統介面，以文獻探討現今招牌設 計流程、色彩原理、招牌設計元素、介面設計方法。可得到介面設計需求與原

理，再設計出此系統。在系統完成後，為驗證輔助系統的成效，並且找出系統 中的不足與缺失，邀請五位非設計背景之招牌相關使用者來協助進行本系統測 詴之任務。測詴者分別於兩次進行招牌的初步設計(即無使用輔助系統與使用 輔助系統)，當完成招牌設計後。使用訪談法了解系統之功能。 本研究共分為六個章節。第一章包括研究動機、研究目的、研究範圍與限 制、以及研究架構。再由第二章文獻進行方法與需求之探討，進入第三章研究 方法。到了第四章視覺輔助招牌設計系統開發。第五章系統評估。第六章為結 論與建議。 圖 1-1 研究架構圖 研究背景 研究目標 研究動機 研究範圍與限制 訪談與討論 結論 緒論 介面需求探討 專家訪談 系統實作與測詴 使用招牌輔助軟體 未使用招牌輔助軟體 典型任務執行 招牌設計視覺元素 招牌探討 介面設計元素 素 Flash

2. 文獻探討

本研究旨在運用電腦輔助招牌設計，把整個招牌色彩計畫與文字選用的程 序做適度的調整，將招牌使用的色票與常用尺寸及規格，經設計與安排讓視覺 即時化，語意圖像化。文獻蒐集分為以下幾個小節〆 1.招牌探討:了解招牌的歷史與當代招牌設計製作。 2.招牌視覺設計〆從探討招牌的發展與製作方法並且蒐集分析現今招牌設計元 素，系統內建主要功能所需，例如造形、客戶偏好色彩、現有招牌色彩的使用 比例及招牌材質，招牌字體之選配決策與視覺設計的相關文獻。 3.電腦輔助設計:分析系統版型設計､按鈕符號等元素及使用性評估要點。 4. Flash 軟體與程式。 5.招牌設置與設計相關法規。

2.1.招牌探討

2.1.1.招牌歷史

廣告招牌，早期分為「招牌」和「望子」兩種，招牌係指在木板上記載文 字，而「望子」係模仿所經銷之商品形狀或象徵物，而做成的招 牌，按《辭 海》載，「望子」係指掛在酒店外當作市招的旗幟，俗稱「幌子」（王行恭， 1994）。

圖 2-1 明人＜南都繁會＞中街景的布幌

圖 2-2 當代房地產之廣告旗幟

原始的招幌是直接展示其經營的商品的實物招幌。以實物招幌發展而來的 是附屬幌、模型幌、象徵幌、以及特定標誌幌、文字幌、圖畫幌、招牌、門市 楹聯等形式招牌々主要是以懸掛、鑲嵌或砌築等方式固定於門市的匾、額、牌、

聯、壁等書有特定廣告文字或繪有相應圖案的標識（曲彥彬，2001）。自有商 業行為後，招牌的歷史就隨後開始，始至何時已不可考。只是時代不同其樣式 與名詞亦有所不同。 圖 2-3 北京德元成棉花店幌子

2.1.2.當代招牌製作

樊志育、樊震(2005)提到招牌不但具有廣告、指認還具有提升企業形象等 作用。當代招牌版面製作技術以電腦繪圖機的盛行可以區分為傳統手繪時期與 電腦割字製作時期及噴圖招牌時期。 一、傳統手繪招牌 傳統手繪招牌是以油漆為色料，塗繪於烤漆板或木板所繪製。另一種方式 是將 PVC 色紙貼於版面之後，以手繪方式畫出字或圖的輪廓，再經由美工刀 去刻劃型態，去除字或圖以外多餘的貼紙。

圖 2-4 傳統製作方式，常用於特殊材質與環境 傳統手繪應用於浪板外牆

傳統手繪應用於鐵捲門與車廂板 鐵捲門油漆字 車廂油漆字 圖 2-5 傳統手繪應用 電腦繪圖機的做法則是圖案文字經過電腦繪圖軟體設計後傳送至割字機， 刻劃出字型圖案於 PVC 色紙後，再貼於廣告板々近年來則增加了噴圖招牌型 式。傳統的招牌設計是由招牌師傅手繪設計於紙張的招牌設計稿提供客戶參考， 現今的招牌設計多數由設計人員使用電腦繪圖軟體繪製稿面與字型，速度與精 確度上已優於傳統之設計模式々但以現今的電腦繪圖設計軟體並非著重於招牌

設計的需要來開發，通常為印刷業及多媒體設計所用，色票與實際材質亦有相 當大的差異。 表 2-1 電腦繪圖機(割字機)應用 電腦繪圖機(割字機)應用於招牌 表 2-2 招牌設計流程 設計師實地勘查與丈量尺寸 設計師規劃與設計同客戶校稿 設計師監督製造 工程人員安裝施工

表 2-3 當代電腦割字製作招牌流程

未製作之材料 電腦刻繪於貼紙

色紙貼於板子後做字形 完成版面製作

2.2.招牌視覺設計元素

2.2.1.招牌字型設計

文字不僅是傳達訊息的功能，文字的字型亦能左右招牌的美感與效果，設 計者在尋問客戶對字體偏好時，通常得到的答案是「正體就好!」、「明顯一 點的好了!」、「你幫我決定就好!」。諸如此類，因此文獻由字體屬性，常用 字體與行業適用字型為主。 馮永華（1998）於「台灣市招文化-談視覺環境污染及其淨化之道」招牌 上的「文字關係」亦提到文字於市招的美感優劣具有舉足輕重的地位。 招牌字體與行業別方面，字體種類繁多，林慶利、陳俊宏、管倖生（2004） 探討不同行業別適用之字體，研究發現內容茲述如下表。 表 2-4 招牌字體與行業別 字體排列方式 適合 行業 字體排列方 式 適合 行業 字體排列 方式 適合行業 黑體 直 排 書局 文具 行書 體 直 排 書局 文具 古印 體 直 排 廣告印刷 橫 排 書局 文具 橫 排 食品 餐飲 橫 排 廣告印刷 楷書體 直 排 書局 文具 綜藝 體 直 排 金融 保險 勘亭 流 直 排 食品餐飲 橫 排 書局 文具 橫 排 百貨 橫 排 食品餐飲 圓體 直 排 醫療 保健 流隸 體 直 排 美容 美髮 海報 體 直 排 影音娛樂 橫 排 鐘錶 眼鏡 橫 排 服飾 配件 橫 排 服飾配件 明體 直 排 書局 文具 隸書 體 直 排 書局 文具 魏碑 體 直 排 書局文具 橫 排 金融 保險 橫 排 珠寶 銀樓 橫 排 珠寶銀樓

整理自〆林慶利、陳俊宏、管倖生（2004）。排列方向改變對其意象之與適合行 業影響之研究。

2.2.2.招牌色彩設計

小山雅明(2006)提到善用「色彩」能使招牌更醒目及重要性。招牌的字體 色彩與底色搭配譜出整體的形象，色彩是人類知覺與記憶建構的基礎元素之一， 在資訊的傳達中具有重要的角色（Davidoff,1991）。李天任（2000）指出，以 現代生活而言，色彩與生活息息相關，不論在食、衣、住、行、育、樂及保健 等項目上均能藉由色彩之助，更為發揮實用與美觀的功效。他引述色彩選配理 論。如圖所示。 圖 2-6 色彩之決策過程 （引自李天任，2000） 根據李天任（2000）色彩選配理論，招牌設計的選色計畫可歸納以下幾點〆 1.是否需要運用色彩〇 無庸置疑招牌色彩不但需要，而且是重要的課題。 2.有哪些色彩可選〇 招牌的色彩樣式與印刷色票截然不同，常用色票如下表所示。

表 2-5 相關電繪圖軟體色票 電腦繪圖軟體色票 CorelDRAW X3 軟體內定色票 Adobe Illustrator CS5 軟 體 內 定 色 票 文泰刻繪電腦割字軟體 內定色票 表 2-6 招牌實際色票與材料 3.該選那個色彩〇 招牌選色決策可從行業別、色彩視認性、消費者對色彩的偏好相關文獻來 探討。 a.行業別 各行各業之色彩象徵均有不同意義，林慶利、陳婉瑜（2003）《不同行業 屬性商店招牌之視覺資訊內容分析－以雲林斗六市太帄路歷史老街區再造計

劃為例》中，依不同業別分析其招牌用色的呈現，結果發現白底紅字呈現者居 多，佔 19.5%，食品餐飲類之招牌則以紅底黃字所佔比例較高 25%々至於招牌 底色與店家字體色彩搭配中，紅底白字 38.3%、籃底白字 71.4%，白底黑字 62.5%， 皆較常見於衣著配件類之招牌，紅底黃字 60%則以食品餐飲類之招牌最為普遍。 可見行業別對招牌色彩設計亦是關鍵元素。 b.色彩明視度 配置圖文色彩的明度對比差異大，視認感受的容易度相對提高，與明視度 的條件相同，其明度的對比差距，可觀測出廣告招牌的視認程度高低。 c.色彩的偏好 以目前市街招牌顏色搭配的實際比例可觀察出消費者對色彩的偏好。 4.選的色彩是否符合所需〇 招牌色彩決定後亦可以再去檢查評估明視度是否恰當，也就是某一個顏色 看得清不清楚的程度。陳俊宏、楊東民（1998）提出色彩機能之配色以視認性 佳之配色與視認性差之配色如下表所示。 表 2-7 視認性佳之配色 排序 1 2 3 4 5 6 7 8 9 圖/地 黃/黑 黑/黃 黃/紫 白/青 白/綠 綠/黃 白/黑 白/紫 黑/白 青/黃 表 2-8 視認性差之配色 排序 1 2 3 4 5 6 7 8 9 圖/地 黃/白 白/黃 綠/紅 青/紅 黑/紫 紫/紅 紫/黑 綠/灰 紅/綠 青/黑 整理自〆陳俊宏、楊東民（1998）。視覺傳達設計概論。全華科技圖書。p70

此外嚴貞（1999）以門牌為例進行測詴，視認性最佳的色彩組合為「藍底 白字」、「紅底白字」、「黑底白字」、「綠底白字」。視認性最差的色彩組 合為「紫底黃字」與「白底褐字」。由此可知，視認性高低與色彩之明度有關 係密切，明度差愈大，則視認性愈高々明度差愈小，則視認性愈低。 招牌的造型雖非本研究主要議題，但在本研究之介面設計裡將搜尋最常使 用之造形作為招牌設計模板，文獻探討以搜尋最普級化之形式做為模板。目前 街景招牌造形仍以長方形居多。

2.2.3 招牌色彩材質種類與特性

招牌色彩表現的方式依據材質可分為:油漆與油墨顏料、卡典西德貼紙、 噴圖輸出、招牌底板原色。 1.油漆與油墨顏料: (1)油漆:常用於鐵材，烤漆板。早期較常使用，後來由卡典西德貼紙逐漸 取代。 (2)水泥漆:常用於木材、木板、水泥牆。 (3)油墨:常用於帆布彩繪，目前廣告帆布已由噴圖輸出帆布取代之。 2.卡典西德貼紙: 可分為半透光與不透光。目前招牌卡典西德貼紙之色樣並不多，使用顏色 也大多雷同，常見廠牌與色卡如下:

圖 2-7 卡典西德色票 (1) 半透光:適用於燈箱屬內部光源。 (2)不透光:適用無使用內部光源居多，較能複蓋底部色彩。若使用於燈箱，需 注意透光效果。 圖 2-8 卡典西德招牌 3.噴圖輸出: 耐候性不佳,通常會使用護膜，護膜可分亮膜與霧膜，效果對色感具一定的 影響力。依透光性又可分全透、半透與不透光。

全透 PVC 噴圖半透 PVC 噴圖不透 PVC 圖 2-9 噴圖材質與透光 4.底板原色: 底板所指是中空板或亞克力之材質原色，中空板多為白色，透明。通常 使用底板原色效果較佳、亦能節省覆蓋之材料。亞克力色彩較為豐富，但色彩 普遍性不高。特殊色彩產量不多，價格亦較昂貴。

2.2.4.招牌材質與明視度

近年來隨著科技的進步，新材質與產品陸續研發。物價波動､消費者的價 值觀不同亦影響到招牌視覺設計的規則。當代常見之招牌底板材質分析如下: 表 2-9 常見招牌版面材質與版面製作方式 招牌材質 常見版面製作方式 無接縫 1.使用卡典西德貼紙(黏性需求較高)。 2.使用黏性噴圖 pvc 覆蓋或直接噴印於無接縫布 料。 中空板 1.卡典西德貼紙。 2.黏貼噴圖 pvc 。 烤漆板 1.卡典西德貼紙。 2.黏貼噴圖 pvc。 鋁版､錏板 1.卡典西德貼紙。 2.黏貼噴圖 pvc。 木板 1.卡典西德貼紙。 2.黏貼噴圖 pvc。

(本研究整理)

無接縫材料 無接縫招牌成品

圖 2-10 無接縫材質與招牌成品

中空板招牌材料 中空板招牌成品

亞克力材料 亞克立招牌成品 圖 2-12 亞克力與招牌成品 烤漆板材料 烤漆板招牌成品 圖 2-13 烤漆板材料與招牌成品 噴圖帆布 噴圖帆布成品 圖 2-14 帆布與招牌成品

圖 2-15 不銹鋼立體造型招牌 表 2-10 常見招牌覆蓋貼紙材質與使時機 卡典西德 半透光 使用於自發光型招牌 不透光 無使用內部光源或使用外部投射光源 噴圖輸出 全透 使用於特殊效果 半透光 適用於燈箱招牌 不透 無使用內部光源或使用外部投射光源 黑、灰膠 1.無使用內部光源或使用外部投射光源 2.主要用於覆蓋底板紋路或圖案 表 2-11 常見招牌材質與燈光表現 招牌材質 光線表現方式 無接縫 1.使用燈箱內部自發光源，如 T5、T8 燈管。 2.使用外部輔助光源，如投射燈、探照燈。 中空板 1.使用燈箱內部自發光源，如 T5、T8。 2.使用 LED 燈泡排裝飾字型或版面。 3.使用外部輔助光源，如投射燈、探照燈。 烤漆板 1.材質不具透光性，常用於不需照明招牌 2.使用 LED 燈泡排裝飾字型或版面。 3.使用外部輔助光源，如投射燈、探照燈。 鋁版､錏板 1.材質不具透光性，常用於不需照明招牌及路標指示牌 (使用反光卡典西德)。 2.使用 LED 燈泡排裝飾字型或版面。 3.使用外部輔助光源，如投射燈、探照燈。 木板 1.材質不具透光性，常用於不需照明招牌。 2.使用外部輔助光源，如投射燈、探照燈。 不銹鋼立體造型 不銹鋼立體造型招牌

圖 2-16 投射燈具及效果

圖 2-17 LED 燈泡與招牌表現

T5 日光燈與變壓器 T8 日光燈與變壓器

圖 2-18 日光燈與變壓器

2.2.5.招牌骨架

招牌骨架通常為角鐵架、鐵板、C 型鋼架、錏管架居多，如下圖所示: 表 2-12 常見招牌骨架樣式 常見招牌骨架類型 C 型鋼架 造型鐵板 鋼板燈箱 角鐵燈箱型

表 2-13 廣告鐵架 鐵架設計圖

鐵架施工照

2.2.6.招牌設置與規範

招牌設計除了考慮視覺元素外，必頇顧慮相關法規，街道常見設置雜亂無 章之招牌，設計不當的招牌與違規安裝的招牌乃是造成污染市容的亂源，嚴重 者更有安全的疑慮。所以從設計系統提供簡易圖示，可提示招牌業者與使用者 做為設計招牌的參考。 招牌使用頇注意事項包括: 1. 優美版面設計:版面設計除了符合個人喜好外，應注重視覺美感。 2. 文案合宜:文案內容以不違背善良風俗為基本原則，再求合適之詞句。 3. 設置安全:設計時頇與施工人員討論，注意施工流程之安全與招牌安全性， 包含天然災害如颱風，及海線地區之防鏽等等々人為方面則顧慮是否影響他 人或自身之安全，如車輛之高度與街道視線等等，並兼顧政府之設置法規。 4. 定期保養:常有招牌使用者，無保養與維護之觀念，招牌在設置後應時常注 意鐵材腐蝕情形，尤其在颱風來臨前之安全檢查與防護，颱風過後之安全檢 查，如螺絲是否鬆動等等。 廣告招牌設置規範如附錄 1.全國法規資料庫與附錄 2，台中市政府相關規定。

2.3.電腦輔助設計

2.3.1.介面設計

介面是使用者與產品之間互動的橋樑，一個優良的帄台可以利用訊息的傳 達與引導讓工作更有效率。李菁蓉等（1998）提出介面設計是希望讓使用者能 夠選用此電腦系統作為他完成某一項工作的工具，要能夠令使用者很容易學習、 很容易上手、很容易掌控工作的進度或是資料的處理狀況，時時充滿使用此系

統的動機，使得軟體與硬體能夠充分地與操作者進行適當的互動來提升工作的 效率、品質與樂趣。所以介面設計考量的是一個非常重要的層面。 許明潔(2000)提到設計使用者介面的三個步驟: 1. 識別你的瀏覽者和所要傳達訊息。 2. 決定風格，認清目標使用者與使用時間，使用地點。 3. 創造瀏覽經驗。 方裕民(2003)提出相關介面設計要點如下: 1. 瞭解使用族群 2. 現實世界的隱喻 3. 立即、適當的回饋 4. 使用者控制 5. 容錯和親和性 6. 80％的解決方案 7. 文化差異 8. 選擇對話型式 建立介面組織可以從分類著手，也就是將相關元素「群組」。依重要性建 立次序之「層級」，當「層級」清楚時則可反應各元素之「關係」而最後產生 愉悅之「帄衡」感。 Tullis(1988)提出，軟體介面上的畫面設計僅呈現對使用者必要的訊息即可， 且將呈現資訊量降至最小，其重點包含〆 1. 儘量使用精簡的語句。 2. 採用使用者熟悉的型式。 3. 運用標題或表格。 4. 減少不必要的細節。 5. 使用適當的縮寫或簡稱。

「心智模式」（Mental Models）或「使用者模式」（User Models）意指使 用相對該產品或系統的瞭解程度，對於一項產品能夠為他做些什麼〇以及他該 如何使用這個產品。通常每位使用者有他自己的一套看法，而「心智模式」亦 會隨著時間改變（許鳳火，1998）。 Norman（1988）在其研究中，提出產品的設計需考量使用者與設計者心 智模式之差異並提出好的設計必頇考量以下幾點原則〆 （1）可視性 讓使用者能一目了然地知道產品目前的狀態、及產品可能的操作方法與功 能。 （2）適時的回饋 使用者執行一個動作的影響持續地反應給使用者知道，這包括了確認使用 者的操作被該物品接收到、表示這個物品是否正在執行使用者的指令、以及將 動作的結果訊息傳回給使用者知道。例如〆選擇色彩選單時， 即時呈現回饋 於螢幕之功能。 （3）對應性 設計上常會碰到的問題就是解決如何讓使用者了解他們的行動與產生的 結果，也就是對應性。合理的對應性，可輕易地找出產品上的控制單元與它所 影響的功能之間的關係、了解他們的行動與結果之間的關係、甚至找出整個外 在環境的狀態與我們所察覺到的訊號之間的關係。 （4）概念模式 指當我們接觸到一個物品時，我們在腦海中產生的想像模式，針對這個物 品建構一套我們認為的系統運作原理，並可在腦中模擬這模式的操作方式，並 且預估其結果，這就是概念模式。當使用者與設計師兩者的概念模式吻合時， 有助於使用者對整個產品功能與操作的了解，並可對操作後可能產生的後果做 出正確之推測，這才算是個好的概念模式。

一個物品它實質上某些特質，能讓使用者直接了解其用途。就材料而言， 像玻璃提供了透明、可被看穿、易碎的特質。而物品的造形也有其特質，像是 圓棒提供了可握取的特質。但是預設的特質並不侷限於實質的物品，隨著今日 軟體工業的發達，也衍生了許多大家所習慣遵循的法則，例如〆「視窗」及「捲 軸」這些軟體中的物件都有它特定的操作方式與用途。

2.3.2.介面使用性與互動性

提到介面使用性原則，通常注重的是產品本身的效能以及能否輔助使用者 達成其任務為目標，招牌輔助設計系統必頇考慮到使用性的設計原則。 Nielsen（1993）便提出使用性的介面設計五點原則〆 （1）容易學習（easy to use）〆系統易於讓使用者去學習及使用。 （2）能快速使用（efficient to use）〆系統應該讓使用者有效的操作。 （3）減少錯誤（few error）〆系統應該讓使用實操作時有較少的錯誤率。 （4）主觀滿意（subjectively pleasing）〆使用者易於使用系統。 （5）容易記憶（easy to remember）〆系統應該能讓使用者易於記憶。 介面設計可由互動功能著手，陳坤淼（2000）提到，電腦多媒體介面設計 中，選單設計常見的介面面板互動功能有〆（1）按鈕（2）開關（3）選單（4） 指示器（5）顯示（6）捲軸（7）拖拉鍵;其他特殊的控制介面。 有關訊息呈現部分主要在於強調回饋性（Feed back），包含視覺回饋、觸 覺回饋、聲音回饋等方面。 在訊息呈現的介面設計方面考慮到重要性之權重劃分清楚明瞭，使用者藉 由直接操作和訊息產生互動，改變訊息參數值時如何能夠迅速得知，某些動作 指令和訊息改變而立即的反應或回應。

以文字或數字顯示訊息時注意其可適性及動靜態之運用方式等。使用顏色 可以針對複雜的訊息有適當的區隔空間，但應避免誤用過多產生絢麗或擾亂使 用者操作的顯示（陳坤淼，2002）。 本研究之招牌介面設計則可運用其中幾項元素，而功能選單部分又是介面 設計一個重要環節，需要給予選單適當的名稱。選單的功能對於使用者來說可 以減少記憶指令的心智負荷，尤其對初學者，不經常使用者、或年紀較大者， 辨識比記憶指令較容易多。而選單的結構可以分為六種〆

單一選單（Single menu）、連續線性選單（Sequential linear menu）、同時 性選單（Simultaneous menu）、階層式選單（Hierarchical menu）、互連式選 單（Connected menu）及系統功能式選單（Event-trapping menu）。

2.3.3.版型與按鈕符號

版面配置可主導使用者注視與互動的進行。Jenifer Tidwell（2005）提出: 系統之版面配置有三個主要元素:視覺階層、視覺流程、分群與對齊。 1. 視覺化階層: 所有圖形設計都會涉及階層概念，重要到不重要，標題到內文，應該讓使用者 輕易辨識。 視覺化階層設計有幾個重要機制，如:(1)左上角喜好(2)空白(3)對比字型(4)位置 之對齊與內縮、盒內、線與色彩。 2. 視覺流程: 設計者應該能控制頁面之視覺流，讓使用者能用接近正確的次序進行流覽。 3. 分群與對齊:

將相關東西在視覺上群聚在一起，不相關的東西利用空白隔開。而對齊是 另外一種作法，如按鈕々將其大小一置，若使其位置對齊，就算相距位置遙遠， 亦能強調其相似性。 介面之版型需要考慮到主要標準色系，並且可運用到象徵符號元素與色彩 作層級的設計。 按鈕基本準則 按鈕在畫面的互動是相當重要的，許明潔(2000)提供一些基本準則: 1. 基本上控制頇要在圖片或面版顯示，無需明顯按鈕。 2. 假如沒有圖片可以使用文字來顯示，控制點需在明顯處。 3. 控制按鍵頇與整體風格統一。 4. 功能控制的展現，運用適當明確的圖案。 選單按鈕項目在需求範圍內則盡量精簡化，以減少記憶及使用的負擔，方 裕民（2003）提到選單的深度（階層數）與選單的寬度（選項數）之間的關係 密切，一般而言，尋找時間與錯誤會隨選單深度而增加，另一方面，選單的寬 度不可太大，以免分類太細導致使用者迷失。 圖 2-19 選單的深度與寬度 （方裕民，2003）

介面視覺動線 使用者者的視線應該集中於單一地區範圍，以一定方向移動。在螢幕介面， 應該由上而下，從左至右。而類似之操作群組則放置於同樣位置。 圖 2-20 視覺動線 （方裕民，2003） 許明潔(2000)提出，互動設計的瀏覽性頇從三個面向考慮: 1.使用者資訊需求為何〇 2.清楚的介面表示層級分類。 3.如何進行資訊存取〇 一個好的瀏覽設計必頇具備以下特性: 1.最小化遊歷:認何兩個資訊點以最短或最簡單的路徑連結。 2.最小化深度:建置一個最少而且可行的層級組織。 3.最小化重複:避免製作相同目的之路徑於同一頁面。

2.3.4.使用性評估

Preece（1998）提及兩種常於文獻中提及的是「使用性工程」與「情境調 查」，這些不同評估會影響評估的方法。 1.使用性工程〆 常運用於使用性工程途徑，觀察式評估是最普遍使用的，用於捕捉使用者 執行「基準作業」的效能。問卷調查及訪談則用於收集關於使用者意見的資料。 常被使用於使用性工程。 2.情境調查〆 情境調查方法用來探討關於使用者在其自然的工作環境中所經歷的使用 性問題。情境調查的前提是使用者與研究人員共同的參與式調查。情境調查的 主要技術是「情境訪談，在情境訪談中，使用者與研究人員討論使用者的目標、 工作的方法、及在使用系統時所遇到的問題等。輔助系統在經過需求與使用性 的設計後，在其過程與完成後必頇做實際的操作評估， Nielsen（1993）在使用性工程一書中，提出九種評估與研究的方法，如表 2-15 所示〆 表 2-15 評估與研究的方法 方法 適用階段 受測 者 主要優點 主要缺點 啟發式評估 法 設計初期 6-10 位專 家 可發現個別的使 用性問題，並記 錄專家使用者發 現之問題。 未包含真正的使 用者，所以無法 發現令人驚奇的 問題。 績效量測法 競爭力分析、最終 測詴 至少 10 人 數量化的資料， 結果容易比較。 無法發現個別使 用性問題。 隨做隨講法 反覆設計、原型架 構評估 3-5 人 1.能夠精確指出 使用者的誤解。 使用者的使用情 形不自然，熟悉

2.較經濟的測 詴。 的使用者又無法 明確表達不恰當 處。 觀察法 工作分析、系統完 成後研究 3 個以 上 生態學上的有效 性，顯現使用者 真實的工作，可 建立功能和特 徵。 時間不好安排 問卷法 工作分析、系統完 成後之研究 至少 30 人 可發現使用者較 喜歡的主題，而 且容易重複調查 需要引導以防止 誤解 訪談法 工作分析 5 人 靈活的，可深入 的探討看法和經 驗 比較花費時間， 且很難去分析與 比較 焦點小組法 工作分析、使用者 參與階段 每組 6-9 人 自發性的反應及 主動的小組討論 很難去分析，有 效性比較 紀錄實際使 用法 最終測詴、系統完 成後之研究 至少 20 人 可發現較高層次 的使用特徵，可 以連續進行 分析需要大量的 資料會侵犯使用 者的隱私 使用者回饋 法 系統完成後之研 究 數百 人 可以追蹤使用者 需求和觀點上的 改變 需要特別的組織 來掌握使用者的 回應

2.4 Flash 軟體與程式

Flash 包含了「美術設計」與「互動設計」兩大部分，美術設計使用設計 工具製作動畫、圖片、文字元件。互動部分則可利用 ActionScript 語法程式， 直接存成 fla 檔或 as 檔。讓 Flash 發揮最大的效果（宋志峰，2007）。

圖 2-21 Flash 開發人員模式

2.4.1. Flash 軟體簡介

(1)軟體發展過程:

Flash 是一種互動式向量多媒體技術，創始者為喬納森〃蓋伊(Jonathan Gay)。

而在 1996 年 Macromedia 公司收購後，重新命名 Macromedia Flash 1.0 (彭啟迪 2008)。所謂「Flash」即為「Future Splash」的縮寫，發行至今已經推出超過十 個版本。 表 2-16 軟體發展過程 1996 Flash1.0 1997 Flash2.0 1998 Flash3.0 1999 Flash4.0 2000 Flash5.0 2002 Flash MX 2004 Flash MX2004 2006 Flashcs3 2008 Flashcs4 2010 Flashcs5

(2).影音整合: Flash 可以匯入聲音及影片的檔案，亦可以直接在影片上編輯文字、動畫 等效果，甚至可以利用 ActionScript 語法撰寫影片的控制程式，在 Flash 製作 的按鈕上控制影片，而製作出來的檔案亦可依需求選擇不同的壓縮比例，大大 降低影音素材對多媒體造成的檔案體積負擔。並且可匯出及匯入各種多媒體檔 案格式。 3.流通性高:

檔案體積小是 Flash 在流通的最一大優勢，當 Flash 發佈為.exe 的執行檔 時，同時將 FlashPlayer 包裝於檔案中，更增添軟體的普遍性與便利性。 圖 2-22 Flash 設計人員模式

2.4.2.ActionScript 語法

劉孙陽(2007)提到 ActionScript 隨著 Flash 動畫軟體不斷的進步，如今也從 單純控制影格指令進化成一套應用程式開發工具。Flash 程式的時間軸和設計 層面，可能對某些程式設計師造成困擾，程式嚴格，及邏輯抽象，可能是學習 的困難，這樣的行情形讓ActionScript 語法沒有受到重視，但 ActionScript 語法

的特別之處是在於它有效的視覺導向創作及邏輯導向的系統控制協助視覺設 計師更能掌握程式的使用。目前 ActionScript 共有 1.0、2.0、3.0 等版本。而 ActionScript 3.0 和 1.0、2.0 大致相同，ActionScript 3.0 已和 Jave、C++一樣成

為正統之程式語言(森巧尚，2009)。 張亮(2009)提出 flash 最初只是用來製作一些動畫，不過如今已經具備完整 程式設計功能，而且可以在動畫上加入和使用者交互功能，這些因素都使得 Flash 成為一個原型開發工具。 圖 2-23 Action Script 3.0 程式面板

2.5 小結

本研究主要探討的是電腦輔助系統應用於招牌視覺設計及色彩計劃，協助 招牌設計更為便利。在文獻上的相關研究及資料，於視覺設計之色彩計劃、字 型決策及軟體介面設計的使用性、使用性評估等相關研究進行探討，從文獻分 析可得以下幾點〆

1.招牌形式以長條形為主流，招牌色彩配色以兩色為最多，超過三色則視認性 較差。 2.當代廣告招牌設計之底板，具透光材質為無接縫、中空板、亞克力為主。另 外還有烤漆板、錏板、鐵板等不透光材質。 3.當代廣告招牌面板製作以電腦割字與電腦噴圖居多手繪則以特殊情況使用。 4.卡典西德色票可規劃成招牌之色彩選單。招牌之材質與明視度亦可納入專業 型系統之單元。 5.不當的招牌設置形成街道景觀之視覺污染與安全的隱憂，將招牌設置法規重 點於系統內提供參考可響應正府政策推廣與設計之建議。 6.使用 Flash CS5 開發模擬系統介面原形，主要以 ActionScript 3.0 語法。可善 用 flash 之組件功能，作為系統原型。使用 Loader 組件製作各單元之設計，可 減輕記憶體負荷與增加修改便利性。 7.選單的設計在需求範圍內則盡量精簡化，以減少記憶及使用的負擔。 觀察法適用於工作分析與系統完成後之研究。觀察法所進行的是一種專門的技 術，觀察者必頇對所要觀察的主題相當了解。 8.本研究以質性研究為主，採用觀察法與訪談法。 9.訪談法適用於工作分析，受測人數以 5 人。優點是可靈活的進行，可深入的 探討看法和經驗，但比較花費時間。 10.本研究以 flash 設計系統需求原型，以訪談法做專家使用性評估。

3. 研究方法與步驟

3.1.研究流程

本研究分為三階段: 第一階段:分析與計劃招牌系統需求 依據招牌軟體需求，設計招牌輔助系統，第一階段使用訪談法，邀請專家 對系統原型做測詴與訪談。 第二階段:系統建置 依據文獻探討與觀察所得及專家訪談系統需求建議做系統建置。 第三階段:測詴與訪談資料分析 邀請邀請五位招牌相關使用者來協助進行本系統測詴之任務。並且在測詴 過後，使用訪談法，作資料分析與結論，提供後續研究建議。

圖 3-1 研究流程圖

3.2.研究方法

Nielsen（1993）在使用性工程一書中，提出九種評估與研究的方法。並且 提出觀察法適用於工作分析、系統完成後研究，優點是顯現使用者真實的工作， 可建立功能和特徵。正符合系統需求的評估。但觀察法之缺點則是:時間不好 安排，但研究者以投資廣告工程職務之便，可輕易解決此問題。依據系統需求 與系統之評鑑分別使用觀察法與訪談法。 使用招牌輔助軟體 未使用招牌輔助軟體 需 求 探 討 系 統 實 作 系 統 測 詴 使用者訪談 結論 專家測詴系統原型訪談系統需求 系統實作與測詴 典型任務執行 觀察法 親臨招牌設計､工作､設置現場 場､設置街道 統整文獻與觀察設計系統原型 胚 系統設計建置

3.2.1.觀察法

周文欽(2005)提出:觀察法即是指在大自然的情境，透過感覺器官及有關之 工具蒐集研究資料的歷程。觀察法所進行的是一種專門的技術，觀察者必頇對 所要觀察的主題相當了解。研究者比其他一般研究者有更實地的了解，所以採 用觀察法。方裕民(2000)提到，觀察法式評估之資料收集技術包括:直接觀察 、 拍攝錄影帶、軟體記載、互動式的觀察、口語調整。

3.2.2.訪談法

Jennifer Preece(2006)提到有關需求活動，最好使用探索議題和非結構性訪 談，直接與人互動方式比起問卷更能激發他人反應。 Nielsen（1993）在使用性工程一書中，提出九種評估與研究的方法。並且 提出訪談法適用於工作分析，並且可靈活的，可深入的探討看法和經驗。符合 使用性的評估，相較於其它研究方法，訪談法可以得到專家使用者與實際使用 者的操作心得與建議。 前期系統需求訪談: 訪談的方式以軟體原型，搭配所預設的兩大主題進行探討。三位專家在個 別訪談後，對於同一個問題所作的回答整理。 後期評鑑訪談: 後期評鑑將訪談測詴者，訪談內容分為: 一、軟體五大單元使用後訪談。 二、有無使用輔助系統差異訪談。

3.3.3.實驗程序

「電腦輔助招牌設計系統」完成後，邀請五位招牌相關使用者來協助進行 本系統測詴之任務。測詴者分別於兩次進行招牌的初步設計(即無使用輔助系 統與使用輔助系統)，當完成招牌設計後。則使用設計問卷中的評分尺度來了 解其評估結果，並為受測者做訪談。 圖 3-2 實驗情境圖

3.3.4.實驗載具

一、使用軟體 1. 作業系統:Microsoft Windows XP

2. 文字編輯〆Microsoft office Word 2007。 3. 靜態影像編修〆Adobe Photoshop CS5。 4. 搭配向量帄面圖形製作軟體〆 CorelDRAW12 、Illustrator CS5、。 5. 多媒體整合與介面製作〆Macromedia Flash CS5。 6. 程式語言: Action Script 3.0。 二、使用硬體設備 1. 筆記型電腦一部。 2. 1200 萬畫素數位相機一部。

4. 輔助系統實作

4.1.使用需求分析

本研究之目的在開發一套招牌輔助系統，幫助招牌使用者，在設計流程給 予協助。為了解系統內容需求，本研究以專家訪談的方式來收集所需的資訊。 研究者將文獻蒐集與觀察街景招牌生態､招牌公司之業務承接單，設計出輔助 軟體需求測詴版。再邀請三位專家測詴。並且做深度訪談，從專家以便了解軟 體需求之不足。 圖 4-1 招牌設計需求分析流程 文獻分析+觀察法 軟體功能需求分析 邀請專家測詴 1.使用實際招牌公司設計客戶訂作單 2.觀察街道招牌 招牌材料 招牌公司 專家深度訪談與原型需求更新 招牌輔助系統需求測詴版 1. 依據文獻所得､觀察所得，研究系 統需求。 2. 依據招牌訂作單設計系統需求。 手繪草稿系統介面之外，更進一步設計 互動系統原型。

4.1.1.招牌設計需求

情境觀察 招牌設計使用軟體、招牌設置場地與招牌公司實務，都是觀察的重點。 圖 4-2 Adobe Illustrator CS5 使用門檻較高 圖 4-3 CorelDRAW 12 使用門檻較高 表 4-1 觀察與文獻分析內容 研究方法 對 象 要 素 文獻分析法 文獻、期刊、論文 招牌尺寸、色彩 字型、法規

表 4-2 街道招牌觀察 直立式 招牌造 型以矩 形為主 實地場景觀察法 街道招牌、招牌公司材料、 招牌承接傳單(客戶意願至 實際招牌設計者) 招牌尺寸、色彩 字型

騎樓招 牌 經地方 政府規 劃後制 式化招 牌 街道左 側為制 式化招 牌，右 側則是 未經制 式化招 牌

民國 99 年制式 化招牌 街景

文獻資料 程序與規則常被寫成工作手冊，對於活動之步驟和從事工作的規範，將是 很好的資料來源，Jennifer Preece(2006)。以招牌設計實際訂單格式裡即可了解 需求內容。 圖 4-4 招牌公司訂製設計傳單

4.1.2.需求測詴之原型系統

張亮(2009)提出許多軟體的分析過程開發人員和客戶討論較多往往是功能 和性能方面的需求，有關介面需求方面可於開發早期就看得到。原型設計是對 設計方案進行評估的基礎。

本研究開發之系統需求測詴版之內容如下: 表 4-4 需求原型組織圖及帄面草圖

需求原型組織圖 需求原型系統帄面草圖

表 4-5 簡易系統需求測詴原型 系統需求測詴介面原型

4.1.3.系統需求專家訪談

在研究者依時務經驗及文獻蒐集後並利用觀察法瞭解招牌設計元素，完成 系統功能介面初稿。即邀請三位專家做訪談。 表 4-6 軟體需求訪談者資料及背景 專家代號 性別 相關學經歷 專家 A 男 廣告招牌從業 40 年以上，曾任台中市廣告招牌公會理事 長 專家 B 男 大學教授 專家 C 男 招牌工程經營 10 年，帄面設計主管 5 年 系統需求整理分析 表 4-7 軟體需求訪談內容 主題一 招牌設計系統需有哪些選項〇 專家 A 訪談重點擷取:

通常我們與客戶接洽時，會在客戶的公司或店家、了解顧客的需求，需 要確認的事項大概為:色彩、字型、尺寸、材質、燈光、個人偏好等等， 進一步將資訊帶回公司處理。通常招牌尺寸在第一時間即可完成，而材 質部份會依據是否頇要使用光線照明，是能即時決定的々比如說需由招 牌自行發光時，則使用燈箱，燈箱面材則使用中空板，若不頇照明者， 就可使用烤漆板或其他。而對系統是否能幫助我或我的工程人員，決定 的是色彩、字型、版型。這會是我會比較想要的。也希望這套系統在協 助設計這些元素的時間能在十幾分鐘內完成。所以不能太複雜。才具有 實用性。花費過多的時間，便失去商業價值。 專家 B 訪談重點擷取: 招牌設計的視覺元素有哪些〇內容大概就是那樣，從招牌業界訂做單或 合約可以分析出來。 比如說:大小､樣式､是否放入插圖或點陣圖。色彩或材質得的決定。 專家 C 訪談重點擷取: 可從招牌設計的幾項重點元素設定單元，例如:卡典模組、噴圖模組、 招牌樣板等等。這樣立即能強調出系統功能性在於招牌設計創新。並能 與美工軟體做區隔。 主題二 對目前系統有何建議〇

專家 A 訪談重點擷取: 招牌設計選項單元可以增加，例如最常使用的配色版型，最常使用的字 型，常見的行業招牌，這是以 80/20 法則。畢竟要以生產線容易做，能 夠做，客戶願意花費這筆錢。招牌工程實務畢竟與設計公司有所不同。 設計公司以設計收費，必然要有讓客戶拿出錢的理由，而招牌設計有時 也是做設計師之作品，通常會較特別。但在材料及工時也較長，成本相 對較高。招牌公司通常在設計階段不能耗費太多時間，也需顧慮客戶的 預算。就像套餐一樣，給配套好的，省時、省力。這是我個人的想法， 招牌業市場機制與設計業還是有所不同。 專家 B 訪談重點擷取:

1.系統之功能與 CorelDRAW 或是 Adobe Illustrator 功能之差異性〇

2.是否可以加入實景參考模組〇例如食、衣、住、行、育、樂、保健醫 療。 3.設置法規內容再詳細一些。 專家 C 訪談重點擷取: 1､可以將招牌公司之設計訂做傳單之決策，依據流程排列順序。例如: 當客戶要決定事項依據先後安排系統視覺動線。 2､將系統單純化，通常業務人員與工程人員，專業與職務不在於設計， 通常完成初步設計理念不能量浪費太多時間，複雜或精緻的設計流程能

仍頇由專業人員來進行。

4.2.系統介面實作

完成需求之分析後，即可進行系統原型之修正改良，經過實境觀察與文獻 分析，透過廣告公司之實務設計需求的表單，所開發出系統原型、更進一步邀 請相關業界與學界之專家進行需求測詴與訪談後，設計出系統需求介面，介面 之結構大致如下:

圖 4-5 招牌輔助系統介面組織圖

輔助系統的製作，本研究選擇使用 Adobe Flash CS5 與內建 Action Script 3.0 程式語言來開發整個系統，並且以 Adobe Flash CS5 軟體整合、圖片、按鈕 等元素。另外使用 CorelDRAW X3 向量繪圖軟體輔助處理圖片。 招牌設計軟體介面 卡典招牌色票模組 噴圖招牌設計模組 實景招牌參考模組 招牌插入樣板模組 招牌設置法規模組 直式卡典招牌色票模組 橫式式卡典招牌色票模組 橫式噴圖招牌設計模組 直式噴圖招牌設計模組 「食」招牌參考模組 「衣」招牌參考模組 「住」招牌參考模組 「行」招牌參考模組 「育」招牌參考模組 「樂」招牌參考模組 招牌材質參考模組 「光源」招牌參考模組 「底板」招牌參考模組

圖 4-6 Flash cs5 軟體介面 圖 4-7 CorelDRAW 12 軟體之介面

4.2.1.系統五大模組說明

電腦輔助創新招牌設計系統原型、系統之畫面、介面、互動、風格等，均以實用性與簡單易操作 為主。當啟動招牌設計輔助系統後，則會看到下圖的系統介面主選單。功能主要有:「卡典招牌 色票模組」、「噴圖招牌設計模組」、「招牌設置法規」、「實體招牌參考樣式模組」、「套用版型模組」。 使用者可獨立單元選擇，亦可選擇整體版面設計。

圖 4-8 系統主畫面功能示意圖 一、系統主畫面選單:包含五大模組按鈕包含五大模組按鈕，功能如下: 表 4-8 輔助軟體元件說明 模組 按鈕元件 功能解說 卡典招牌設 計模組 直式卡典按鈕 直式卡典對照按鈕 橫式卡典模組按鈕 橫式卡典模組對照 按鈕 噴圖招牌設計 選單區 卡典噴圖對照按鈕 直式噴圖按鈕 橫式噴圖按鈕 實景招牌參考 模組選單區 參考招牌實景按鈕 參考招牌材質按鈕 參考招牌骨架按鈕 實景招牌參考模 組 招牌版型模 組 工作區 噴圖招牌模 組 招牌規範模 組組 卡典招牌模 組

參考招牌光源按鈕 招牌設置模組 參考招牌設置規範 按鈕 招牌插入樣式 模組 招牌插入樣式按鈕

4.2.2 卡典招牌色票模組

一.模組內容: 1.直式卡典招牌色票模組。 操作方式: 步驟 1:於招牌文字欄位鍵入所需文字。 圖 4-9 直式卡典招牌色票模組 1 步驟 2:可由按鈕調整尺寸。

圖 4-10 直式卡典招牌色票模組 2 步驟 3:色彩選配。

步驟 4:字型選配。

2.橫式卡典招牌色票模組。

圖 4-12 橫式卡典招牌色票模組 2

圖 4-13 橫式卡典招牌色票模組 3 二.模組特色:

1.提供正確傳統卡典招牌色票。

圖 4-14 尺寸視覺化調整 3.提供字型選配模擬。 圖 4-15 字型選配模擬

4.2.3.噴圖招牌設計模組

一.模組內容: 1.直式噴圖招牌模組。

圖 4-16 直式噴圖模組介面 1

圖 4-17 直式噴圖模組介面 2 操作方式:

步驟 1:於招牌文字欄位鍵入所需文字。 步驟 2:字型選配。 步驟 3:選擇底圖樣式。 步驟 4:整體調整。 2. 橫式噴圖招牌模組。 步驟 1:於招牌文字欄位鍵入所需文字。 圖 4-18 橫式噴圖招牌模組 1 步驟 2: 字型選配 圖 4-19 橫式噴圖招牌模組 2 步驟 3:選擇底圖

圖 4-20 橫式噴圖招牌模組 3 步驟 4:調整字型或顏色

圖 4-21 橫式噴圖招牌模組 4

二.模組特色: 1.提供噴圖招牌模擬與傳統卡典招牌做比較，可讓設計者與客戶做質感的比較。 2.提供點陣圖背景樣式參考。 3. 提供多元字型色彩選擇。 4. 噴圖單元之字體色彩不受材料限制，所以設計色彩選單分為系統色票與卡典西得色票。 圖 4-23 橫式點陣圖背景樣式參考 圖 4-24 直式點陣圖背景樣式參考 表 4-9 多元字型色彩選擇 噴圖字體色彩選單 卡典西德字體色彩選單

5. 提供字型選配模擬。 圖 4-25 噴圖模組字體設計

4.2.4.實體招牌參考樣式模組

一.模組特色: 1. 提供實體招牌圖片參考，可讓設計者與客戶做參考依據。 2. 依食、衣、住、行、育、樂六項及保健單元分類，使用者可更容易找到相 關圖片。 二.操作方式: 點選主題按鈕，食、衣、住、行、育、樂及保健，即可開啟相關選單。 (1).「食」參考模組介紹 提供與蒐集飲食相關行業招牌實景相片。

圖 4 23「食」類參考介面 (2).「衣」參考模組介紹 提供與蒐集服飾相關行業招牌實景相片。 圖 4-26「衣」類參考介面 (3).「住」參考模組介紹 提供與蒐集居家相關行業招牌實景相片。 操作方式:選按「住」按鈕。

圖 4-27「住」類參考介面 (4).「行」參考模組介紹

提供與蒐集交通相關行業招牌實景相片。 操作方式: 選按「行」按鈕。

(5).「育」參考模組介紹 提供與蒐集教育相關行業招牌實景相片。 操作方式: 選按「育」按鈕。 圖 4-29「育」類參考介面 (6).「樂」參考模組介紹 提供與蒐集休閒活動相關行業招牌實景相片。 操作方式: 選按「樂」按鈕。

圖 4-30「樂」類參考介面

4.2.5.套用版型模組

一.模組特色: 1.提供招牌現成模板，可讓設計者與客戶直接選擇，直接套用。 提供常用樣式參考。 4. 提供字型選配模擬。 3. 提供字型卡典西德色彩模擬。 二.操作方式: 步驟 1:開啟模組。

圖 4-31 套用招牌版型模組介面 1 步驟 2:於招牌文字欄位鍵入所需文字。 步驟 3:點選樣板。 步驟 4:字型選配。 步驟 5:字型色彩選配。 步驟 6:整體調整。 圖 4-32 套用招牌版型模組介面 2

圖 4-33 套用招牌版型模組介面 3

4.2.6.招牌設置法規單元

一.單元特色: 1.提供招牌設置規範，使設計之招牌合乎使用規則。 2.法規視覺化，易於理解。 二.操作方式: (一)、開啟單元，點選設置規範按鈕，可到設置法規介面。 (二)、選擇招牌型式可連結至相關型式說明。

圖 4-34 招牌設置法規介面

透過「設置法規模組」的功能裡，可宣導政令，並希望無形中讓不當設置 與醜化街道的招牌減少。

5. 系統測詴與評估

周文欽(2005)提到，所謂的訪談調查是透過有目的的對話以蒐集資料的歷 程。亦即訪問者事先設定訪談問題大綱。

5.1.後期系統測詴訪談

在系統完成後，為驗證輔助系統的成效，並且找出系統中的不足與缺失， 邀請五位不具設計背景，但為招牌相關使用者來協助進行本系統測詴之任務。 測詴者分別於兩次進行招牌的初步設計(即無使用輔助系統與使用輔助系統)。 當完成招牌設計後，將訪談測詴者，訪談內容分為: 一、軟體五大單元使用後問卷式訪談。 1.「卡典招牌色票模組」測詴與訪談。 2.「噴圖招牌套用模組」測詴與訪談。 3.「實體招牌參考模組」測詴與訪談。 4.「套用版型模組」測詴與訪談。 5.「套用版型模組」測詴與訪談。 二、有無使用輔助系統差異訪談。 1.測詴者使在不使用招牌輔助軟體工具的情況，完成招牌初步想法之訊息擷 取。 2.測詴者使在利用招牌輔助軟體工具的情況，完成招牌初步想法之訊息擷取。 3.測詴者完成兩種方法後之訪談。

圖 5-1 系統測詴流程 廣告招牌對街道景觀與店家形象具有一定的影響，招牌設計輔助軟體以招 牌相關從業人員與使用者中邀請未具設計背景人員〆受測者受測者基本資料如 表 5-1，來協助軟體測詴。 表 5-1 受測者基本資料 受測者 A 性別 男 服務公 司 可樂谷國際廣告股份有限公司 產業性 戶外媒體廣告租賃､廣告噴圖招牌､卡典招牌仲 第一階 段 〄任務:.篩選受測人員。 〄對象:篩選廣告公司業務、工程人員、招牌使用者(客戶)。 第二階 段 〄典型任務:依據招牌訂做表單，完成招牌訂做資訊蒐集。 〄資訊蒐集項目:尺寸、色彩、字型、文案等各項視覺相關業務 需求。 〄對象:廣告公司業務、工程人員、招牌使用者(客戶)。 第三階 段 〄任務: 〄步驟一:未用招牌輔助系統，進行招牌訂做視覺元素之決策。 〄步驟二:使用招牌輔助系統，進行招牌訂做視覺元素之決策。 〄對象:受測者 第四階 段 〄任務:受測者使用訪談。 〄對象:研究者、受測者。 第五階 段 〄整理與結論

質 介 職務 總經理 協測源 由 接洽招牌業務經驗豐富 學歷背 景 工管類 測詴時 間 2011/05/15 測詴地 點 廣告公司 受測者 B 性別 男 服務公司 材料公司總經理、公會理事長 產業相關 性質 時常製作招牌給經銷商 職務 總經理 協測源由 接洽招牌業務經驗豐富 學歷背景 眼鏡光學類 測詴時間 2011/05/17 測詴地點 受測者公司 受測者 C 性別 男 服務公司 廣告招牌公司 產業性質 卡典西德招牌 噴圖招牌製作 職務 經理 協測源由 從事招牌工程經營業務、經驗豐富 學歷背景 電機類 測詴時間 2011/05/17 測詴地點 廣告招牌公司 受測者 D 性別 男 服務公司 廣告招牌 產業性質 卡典西德招牌 噴圖招牌製作 職務 招牌技術人員 協測源由 從事招牌工程製作，有時需要接洽客戶 學歷背景 普通科 測詴時間 2011/05/15

測詴地點 廣告公司 受測者 E 性別 男 產業性質 招牌使用店家 職務 店長 協測源由 規劃自己店面招牌 測詴時間 2011/05/16 學歷背景 餐飲類 測詴地點 店家

5.2.測詴資料分析

經第一次未使用軟體輔助與再次有使用軟體輔助之後，最後使用訪談法。 訪談重點著重於軟體的功能性探討々主要以有軟體輔助設計之成效。例如:招 牌設計軟體的五大功能之「卡典招牌色票模組」、「噴圖招牌設計模組」、「實 體招牌參考模組」、「套用版型模組」、「設置法規」之使用訪談資料分析。 分析結果依五大模組之五位受測者訪談資料作整理。

5.2.1.「卡典招牌色票模組」訪談

問題: 請問未使用「卡典招牌色票模組」與使用「卡典招牌色票模組」，在做招牌 設計決策時，對招牌材料的理解與文字選擇、字體色彩、招牌尺寸、有無差 異? 受測者 A 軟體使用前: 在剛開始尚未使用時，需要使用色票卡做對照，也沒辦法將想法呈現出來。 並且立即對照兩種想法。很難想像，且會有誤判。 軟體使用後:

使用軟體後，不頇使用色票對照，並且可立即將想法圖象化。能夠比較參考 與不同的想法。也比較不會浪費紙張。 模組使用建議: 模組便利，但色票樣式不夠多。建議增加色票量，客戶使用上很便利。 受測者 B 軟體使用前: 不知道材質的區分，也不知道有多少顏色。可能就附近看到的招牌顏色、或 物品色彩做形容。例如較鮮豔的紅色!或青色的就好!但往往顏色設計出來， 都要在改。 軟體使用後: 有了條件選項，將不具備材料的色彩排除在外，可節省許多時間與錯誤。 模組使用建議: 感覺很新鮮，模組便利，但色票樣式不夠多。建議增加色票數量，客戶使用 上很便利。 受測者 C 軟體使用前: 1.有時會用卡典西德色票目錄，但只能就以色票卡指定，例如:我字要用黃色 的，底要用綠的。可能要把兩張色票放在一起。有點麻煩。 2.有時客戶要看簡單的合成，就必頇在回去請美工人員列印。就必頇再一趟。 使用軟體後: 不需要使用色票卡做對照，並且客可立即將想法圖象化。能夠比較參考與對 不同的想法。

模組使用建議: 建議增加色票數量。 受測者 D 軟體使用前: 剛開始未使用時，需要使用色票卡做對照，也沒辦法將想法呈現出來。並且 立即對照兩種想法。 還要看實際的東西，還要找字體的樣式，尺寸方面很難形容。 軟體使用後: 軟體操作簡便，要看色彩或字形，樣樣都沒問題。尺寸也可以秀出來，好像 設計變簡單了，省下很多時間。 受測者 E 軟體使用前: 不知道材質的區分，對於卡典型模組不了解，是一般傳統招牌嗎〇我知道卡 典西德，但價格上有差異嗎〇可能在設計招牌時除了顏色沒有很要求否則就 該有色票，想要有即時的效果，還要會美工軟體。一開始寫了要放的字，一 下又問有那些字體〇好不容易看了幾個字體，卻又不知套用的感覺是如何? 顏色搭配起來會變怎樣〇 軟體使用後: 有這種東西早該拿出來，可以詴很多色彩組合，字型組合，尺寸模擬。

5.2.2.「噴圖招牌設計模組」訪談

問題: 請問未使用「噴圖招牌設計模組」與使用「噴圖招牌設計模組」，於招牌設 計決策時，對招牌材料的理解與文字選擇、字體色彩、招牌尺寸、有無差異? 受測者 A 軟體使用前: 要讓人家知道噴圖材質招牌，可能拿圖片解釋，但跟客戶說明與傳統形招牌 差異時，就要費一番功夫。通常又要有美工軟體幫忙。 軟體使用後: 使用軟體後，噴圖模組可以很容易理解與卡典招牌的區別，並且可立即將想 法圖像化。能夠比較參考與對不同的想法。優點是在比一般美工軟體還簡單， 不需另外學習。客戶可以馬上可以比較傳統型與噴圖型的感覺，是這模組的 優勢。 模組使用建議: 1.噴圖單元的資料庫，因檔案的資料較大，容易影響系統運作。 2.噴圖模組的字體色票選單與卡典區分是個很好的做法。 受測者 B 軟體使用前: 噴圖招牌設計，我通常另請帄面設計師與攝影師另外處理。 軟體使用後: 看起來很不錯，很吸引我。雖然底圖類別很少，只有代表性的幾個，但以初 步決定使用噴圖型或卡典型，已經很容易理解。

受測者 C 軟體使用前: 未使用時，我都不會主動提起噴圖招牌 ，當客戶招牌需要漸層或是點陣圖， 我才會建議使用噴圖招牌，客戶希望使用噴圖型的時後，我會問他是否提供 相片或圖檔，再問文案與字體。然後再另行請人設計。 軟體使用後: 使用軟體後，有了軟體輔助 ，比較可以理解客戶的需求，雖然圖檔少，但可 以確認噴圖的感 覺是怎樣，卡典招牌的感覺是怎樣，很容易做決定。並且有輸入文字，文字 顏色與字體模擬。 還有噴圖式直橫招選項，易操作、功能有到位。 模組使用建議: 模組便利，底圖多一些。 受測者 D 軟體使用前: 噴圖招牌，通常會要求客戶提供圖片，因為相關的圖片，客戶都會有，客戶 自己提供的圖片在市場的區別性較高，第一階段主要是讓客戶了解有這樣噴 圖的作法。與傳統型的不同，通常我們將噴圖材質以大型的印表機來解釋。 有時候嫌麻煩，不會主動說明。 使用軟體後: 好像解說便利了，而且有各類別的圖片 。雖然同類型的圖片不多，但算有代 表性了。

受測者 E 軟體使用前: 我通常問店家有無圖片可選擇，有時候會提供自己的圖片給店家，看合適與 否。 軟體使用後: 使用軟體後，大概可以知道圖片與文案放在一起得感覺，並且可作字體與色 彩的變更。

5.2.3.「實體招牌參考模組」訪談

問題: 請問未使用「實體招牌參考模組」與使用「實體招牌參考模組」，在作招牌 設計決策時，對設計招牌有何差異，有何優點與建議〇 受測者 A 軟體使用前: 有時候客戶會主動要求看實景目錄，但通常不會準備那麼多資料，而且資料 不一定有客戶想要的款式。 軟體使用後: 這點到是非常實用，而且分類很清楚，客戶通常會去找跟自己相關的行業做 參考與比較。 模組使用建議: 類別可以在增加或圖檔增加。 受測者 B