5-1 創作理念
本創作研究理念與動機旨在探討，圖像符號應用手機 App 上主選單介面與主 題視覺風格的關係。透過文獻探討與研究方法評估分析綜合後，發現介面設計上風 格統一，是最能提升使用者好感與使用性需求，整理歸納出適合展覽類型 App 之 設計模式以及原則應用在設計創作。本創作選擇以展覽類型 App 為設計的方向，
採使用者中心需求為出發點，進行以不同類型的設計風格的展覽活動 App 主題介 面與主選單介面設計創作。
5-2 主題的擬定
利用 KJ 法分類出，現有展覽 App 類型共有六類 : 分別是科技產業類、藝文類、
食品用品類、交通類、活動導覽類、用品類，因此以這六類設定為創作類型原型。
但展覽的分類太多種，從小尺度至大尺度之間有很多種類，因此將嬰兒用品與 書展歸類為小尺度範圍，接下來旅行或城市則為中間尺度的範圍分類，自行車展與 電腦展具有國際性質的，就屬於大尺度，以這三種作為基礎範圍分類。
表現形式上，嬰兒的使用者是家長，書展使用者是買書的讀者居多，以插畫的 形式來表現親切的氛圍。自行車展與電腦展以向量或幾何的表現手法做設計。而旅 展與設計展則是介於具象寫實與幾何向量之間的表現手法。
擬物化風格的風行，是因為擬物設計，重點就是要讓人們更容易理解與使用，
藉由擬真的風格隱喻事物，由於是模仿實際的物品，讓使用者會更有一份熟悉感、
安全感。而追求乾淨、容易閱讀以及具有客觀性的風格，一般人逐漸稱之為「扁平 化設計」，「扁平化設計」一詞所指的是，拋棄那些已經流行多年的漸變、陰影、高 光等擬真視覺效果，而打造出一種看上去更「平」的界面。風格上書展與嬰幼兒用 品展以擬物化的風格，讓使用者快速進入環境的情境，而電腦展與自行車展則是以
66
比較理性的扁平化風格為主。旅展與設計展則是介於這兩者之間的風格。
在調性的設定上，嬰幼兒用品展與書展是以比較感性的出發點去發想，以塑造 一種人性的情境，讓使用者快速進入介面模式。而自行車展與電腦展皆是比較予人 較為科技感的感覺，所以在初步設定上以比較理性的調性設計。而旅展與設計展是 介於兩者之間是比較中性的色調，在設計上採取一種介於感性與理性的調性搭配。
表 5-1 主題擬定表
(本研究整理)
67
5-3 設計方法與流程
將第二章文獻探討所歸納整理出來的設計原則，與第三章研究方法評估分析所 得到的結果綜合後，發展出適合展覽類型 App 之設計模式以及原則，應用在設計 創作。
以下為歸納之後設計程序 : 1. 依據主題性擬定介面設計風格 :
依據不同的主題定義此介面整體風格、調性、基礎分類、表現形式，並且考慮 到使用者感受與需求。
2. 圖示設計的背景 :
選擇符合使用者特性與主題目標的關鍵字。利用此關鍵字找尋相關資料、圖片 搜集，建立專屬設計師個人資料庫。甚至可為每一個主題介面設定一個故事 性，將此情境故事代入介面。讓使用者在使用這個介面時，也能感同身受，進 入情境內。甚至可結合動態介面動作的互動。
3. 手繪草稿的創作 :
手繪階段是為了確定圖示的造形和整體風格的關係。主要表現外形與元素和主 題樣式。
4. 確定色彩和質感 :
利用我們根據主題所收集的資料，找尋與主題相關聯的要素與轉化，建立此主 題 App 專屬的色彩與質感。
5. 進行外形設計、建立原型 :
利用電腦繪圖進行創作，根據主題設定與手稿確認之後將以上轉化為實體介面 形態。使用的軟體工具有 : Adobe Illustrator 、Adobe Photoshop..等。
建立原型可協助解決設計問題、評估設計和傳達設計想法。包括概念、流程和 互動。這些在套用程式前的原型製作可以加速開發的過程、節省寶貴的時間和 金錢(Ginsburg,2011)。
68 6. 評估分析是否達到整體美感 :
藉由滿意度評估表調查一般使用者，認為介面是否有達到整體美感；是否切合 主題性；是否能夠達到使用者感受上的愉悅性與使用性；圖像符號風格是否有 一致性等。
圖 5-1 創作流程說明圖
5-4 設計創作內容
5-4.1 嬰幼兒用品大展創作過程與作品
1. 創作背景與目的 :
全台最大嬰幼採購節專門為懷孕媽咪、迎接新生兒家庭量身打造的台北嬰幼 兒用品展。展覽活動有抓糖大賽、著色繪畫賽、親子益智互動童樂會、免費 寶貝驚喜袋、舞台活動。
2. 創作流程 :
(1) 主題設定：希望這個介面是溫馨的、活潑的、可愛的。是充滿希望與生 命力，給人既清純又有趣的愉悅感。
(2) 使用者分析：此類型使用者大多是家長、或對嬰幼兒用品有需求的人，
喜歡分享，面對新生兒的影響，容易為可愛的事物感動。
69
(3) 圖示設計的背景：嬰幼兒產品圖片搜集、嬰幼兒、蛋。
(4) 手繪草稿的創作：以插畫作為表現形式，創意發想設定一個嬰兒角色破 蛋出生有誕生與新生之意，利用此主角的各種姿態作為主選單介面中的 圖示設計。
(5) 確定色彩和質感：將收集來的資料加以轉化分析，找尋與主題相關聯性 的色彩與質感，以春天形象的粉色系為主，搭配比較輕快活潑的顏色，
以符合主題形象與調性。
3. 介面設計與創作過程 :
原型設計(一)以粉色基調作為嘗試，而主選單介面則試著以圓盤造形做九面分 割，嘗試比較活潑式的排法。
圖 5-2 嬰幼兒用品大展原型設計(一)
70
原型設計(二)試加深整體背景顏色，不改變原設定可愛人物造形、色彩方向，
並加一個陰影於主角的下面，希望藉由明度對比讓主題介面更突出重點。在主選單 介面上發現圓盤造形太多，過於複雜，因此將選單改為蛋殼造形的主選單。
圖 5-3 嬰幼兒用品大展原型設計(二)
71
原型設計(三)介面背景顏色調深，以增加前景層次感與帶出前景主角顏色，在 主題名稱上試以加上蛋形圖形加以襯托出主題名稱。介面背景上，加上更多的不規 則圓點半透明或透明度不一的亮點細部調整。
圖 5-4 嬰幼兒用品大展原型設計(三)
72 4. 作品呈現 :
介面背景試著調整顏色的角度與比例，將主題介面字放在下方，視覺焦點放置 於整體主題介面的三分之二。在主選單介面上由於白色蛋殼會使選單插畫元素被忽 略，所以把蛋殼造形拿掉，將選單字顏色改為白色，會更讓使用的人使用上更為清 楚明白。加上語系選單，方便使用者切換語系。如圖 5-5。
圖 5-5 嬰幼兒用品大展原型設計(四)
圖 5-6 嬰幼兒用品大展上架之高解析圖示
73
圖 5-7 嬰幼兒用品大展情境圖
74
5-4.2 台北國際旅展創作過程與作品
1. 創作背景與目的 :
亞太地區人氣最高的旅展，同時也是臺灣最大的展銷合一旅遊展--台北國際旅 展(Taipei International Travel Fair, Taipei ITF 2015)。
台北國際旅展提供參觀民眾國內外旅遊新訊、觀光文化交流及住宿、餐券等旅 遊優惠產品外，也辦理旅遊交易會，邀請全球數百位旅行業者（買家）來臺與 參展單位進行業務洽談，提高業界合作機會並增加商業契機；另舉辦旅遊論 壇，針對臺灣現行觀光發展及國際觀光之趨勢，邀請國內外著名講者共同討 論，以提供國內觀光產業新資訊(台北國際旅展，2014)。
2. 創作流程 :
(1) 主題設定：希望這個介面是豐富的、活潑的、有活力的、有世界感的。
(2) 使用者分析：此類型使用者大多是喜好旅行的玩家，喜歡分享，帶著行李 趴趴走遍各地，郵寄各地不同的明信片回到故鄉。
(3) 圖示設計的背景：郵戳造形搜集、地標元素、地球元素、世界著名景點照 片、明信片。
(4) 手繪草稿的創作：創意發想設定每一個主選單介面圖示以 google map 地 標為造形，到過每一個地方就像開啟一個主選單，也有打卡的精神含意在 這裡面。
(5) 確定色彩和質感：利用扁平化的風格做簡化的設計，搭配比較多元的色 彩，以符合主題世界旅行家。
3. 介面設計與創作過程 :
原型設計(一)以設定年輕愛遊玩旅行家與旅行箱為主題，每一個主選單介面的 符號都是運用地標造形去轉換，背景則是利用 google 地圖去襯底，猶如帶世 界旅行箱去遊走各地。如圖 5-8。
75
圖 5-8 台北國際旅展原型設計(一)
原型設計(二)以旅行箱為主體，修正主選單符號設計與加強郵戳標記印象。如 圖 5-9。
圖 5-9 台北國際旅展原型設計(二)
76
原型設計(三)以旅行箱為主體，台北國際旅展以隸書體展現郵戳標記，加入腳 踏車元素在主題上，讓地球下方圓滿，且修正 logo 週圍線條。並移除藍紅相間線 條，使版面更單純化，底色試以 40%、30%、20%、10%灰階底取代彩色背景。
最後選擇以 10%灰階底為背景。如圖 5-10。
圖 5-10 台北國際旅展原型設計(三)以 10%灰為底
77
調整主題介面色彩，改以三大色為主搭配讓介面更為簡潔，並且調整主選單介 面設計。圖 5-11 為白色款，圖 5-12 為藍色款配色。圖 5-13 為淺藍色款配色。
圖 5-11 台北國際旅展原型設計(四)
圖 5-12 台北國際旅展原型設計(五)
78
圖 5-13 台北國際旅展原型設計(六)
79 4. 作品呈現 :
以淺藍色基調為主，並加上語系選單。如圖 5-14。
圖 5-14 台北國際旅展原型設計(七)
圖 5-15 台北國際旅展上架之高解析圖示
80
圖 5-16 台北國際旅展情境圖
81
5-4.3 台北國際電腦展創作過程與作品
1. 創作背景與目的 :
COMPUTEX 在第一屆（1982 年）創辦時，是為當年台灣正在發展中的電 腦（資訊）產業的中小企業而設，讓投入電腦產業的中小企業有機會向國際買主 展露他們的資訊產品，直到第四屆（1984 年）時，當時的台北市電腦商業同業 公會理事長施振榮就決議將本展覽的英文名稱正名為「COMPUTEX Taipei」，
COMPUTEX 在第一屆（1982 年）創辦時，是為當年台灣正在發展中的電 腦（資訊）產業的中小企業而設，讓投入電腦產業的中小企業有機會向國際買主 展露他們的資訊產品，直到第四屆（1984 年）時，當時的台北市電腦商業同業 公會理事長施振榮就決議將本展覽的英文名稱正名為「COMPUTEX Taipei」，