第四章 研究結果與創作
4.3 輔助移動系統概念發展結果
4.3.2 初步系統設計-第一階段設計結果
本研究之輔助系統以手機為主要媒體,有一般按鍵式和觸控式兩種,本研究 以觸控式作為研究呈現的媒體。
圖4-10:按鍵式手機 圖4-11:觸控式手機
(2)介面設計與融入易視性、易解性與易用性
將研究所歸納出的功能進行介面配置時,最重要的是使用者為中心的設計思 維,其中又以易視性、易解性與易用性三者為主;不過在此之前,必須要先將研 究結果歸納出的最後六項設計功能做出適當的配置。一般手機的螢幕寬度大致上 有16:9、7:5 和 1:1 等幾種(還有許多特殊比例,本研究不做另外之討論,
以標準化概念而言僅討論較常出現的比例)。
圖4-12:市面上手機的螢幕
而現代新的手機之螢幕比例大多都是採用16:9,除了與電腦和電視具有較 高的連結性和通用性之外,最重要的是16:9 貼近於 Golden Ratio,在視覺的美 感和設計的編排考量上都是較為適當的。因此,本研究之系統的功能配置之面積 為16:9 之比例(實際長寬將隨著機體而調整,但比例維持不動),其中包含了 主畫面介面A、A-1 智慧型招呼、A-2 智慧型大眾運輸資訊讀取、A-3 智慧型車 況即時顯示、A-4 智慧型到站提醒、A-5 智慧型下車訊息傳輸和 A-6 智慧型移動 導航與定位。下圖4-13 為系統架構圖與介面創作的基底配置。
圖4-13:本研究之初步系統架構圖
圖4-14:本研究之系統介面配置與步驟
Step1. A 介面主畫面設計
由於研究目標族群為18-40 之女性使用者,因此在線條、色彩與設計的風格 取向皆以女性的形象為主體,整體而言可區分為色彩計畫與圖像線條兩個重點。
Step1-1 色彩計畫
在色彩計畫上,本研究之系統設計以女性的可愛、優雅、自然和神秘感等色 彩意念為主,使用者可依據自身喜好而進行切換風格的動作。此外,介面是運作 於面板上的平面媒體,所以在色彩計畫上以RGB 色光混色模式來進行配色與混 色,會較貼近於實體應用下的色彩。
在易用性的考量下,整體色彩的搭配宜輕淡、柔和與協調(以配色模式的類 似色配色為主),讓使用者在使用過程中眼睛和情感都處於平和與舒適的狀態。
以下是經由色彩相關研究書籍的資料(Youngjin, 2006;CR & LF 研究所,2005),
所引用出具本研究需求的相關色彩計畫。
(1)可愛(Pretty)
圖4-15:可愛(Pretty)相關色彩計畫(參考 Youngjin, 2006;CR &LF 研究所,2005)
(2)優雅(Elegant)
圖4-16:優雅(Elegant)相關色彩計畫(參考 Youngjin, 2006;CR &LF 研究所,2005)
(3)自然(Natural)
圖4-17:自然(Natural)相關色彩計畫(參考 Youngjin, 2006;CR &LF 研究所,2005)
(4)神秘(Mystery)
圖4-18:神秘(Mystery)相關色彩計畫(參考 Youngjin, 2006;CR &LF 研究所,2005)
Step1-2 圖像線條
手機的面板顯色之豐富性並不如一般電視與電腦螢幕,所以在圖像的考慮上 以向量的方式較為適宜;而且向量式的圖像普遍來說容量較小,對於手機的處理 速度與傳輸效率上,都能夠展示較為快速的功效。
本研究延續前面所提到的可愛(Pretty)、優雅(Elegant)、自然(Natural)和神秘 感(Mystery)等風格進行系統的畫面規劃與設計。下表是結合上述色彩計畫的介面 圖像設計。
(1)可愛(Pretty)
表4-10:可愛(Pretty)風格初步設計
樣式1 基本向量圖像 構成方式 螢幕樣式
可愛 (Pretty)
二方連續 鏡射
(2)優雅(Elegant)
表4-11:優雅(Elegant)風格初步設計
樣式2 基本向量圖像 構成方式 螢幕樣式
優雅 (Elegant)
對角並置
(3)自然(Natural)
表4-12:自然(Natural)初步設計
樣式2 基本向量圖像 構成方式 螢幕樣式
自然 (Natural)
左右並置
(4)神秘(Mystery)
表4-13:神秘(Mystery)初步設計
樣式2 基本向量圖像 構成方式 螢幕樣式
神秘 (Mystery)
上下並置
Step2.六項功能之 Icon 設計
本研究之系統服務設計共有六項功能,分別是A-1 智慧型招呼、A-2 智慧型 大眾運輸資訊讀取、A-3 智慧型車況即時顯示、A-4 智慧型到站提醒、A-5 智慧 型下車訊息傳輸和A-6 智慧型移動導航與定位,按鈕顏色隨風格而變換。
(1) A-1 智慧型招呼功能 Icon
表4-14:A-1 智慧型招呼功能 Icon 設計結果
功能Icon 意象 初步圖像 最後圖像
中文 舉手、呼叫、發聲、
嘴巴、
A-1 智慧型招呼
英文 Intelligent, Call
(2)A-2 智慧型大眾運輸資訊讀取功能 Icon
Intelligent, Loading, Information
(3)A-3 智慧型車況即時顯示功能 Icon
英文 Intelligent, Display, Traffic, Position
(4)A-4 智慧型到站提醒功能 Icon Warning, Arrive
(5)A-5 智慧型下車訊息傳輸功能 Icon
表4-18:A-5 智慧型下車訊息傳輸 Icon 設計結果
功能Icon 意象 初步圖像 最後圖像
中文 鈴聲、按鈴、手指 A-5
智慧型下車訊息 傳輸
英文
Intelligent,Bell Information, Transmission
(6)A-6 智慧型移動導航與定位功能 Icon
表4-19:A-6 智慧型移動導航與定位 Icon
功能Icon 意象 初步圖像 最後圖像
中文 人、定位、地圖 A-6
智慧型移動導航 與定位
英文
Intelligent, Information, Position, GPS
Step3.A1-6 子畫面設計
子畫面的部分延續著Step1.的設計風格,主要是配置功能的位置與顯示區域 的表示,如下表所示(以可愛風格為例,其餘三種風格配置與功能顯示區域皆 同)。
表4-20:A-1 介面之運作配置
A 介面選擇 Icon 進入到A1 介面
表4-21:A-2 介面之運作配置
A 介面選擇 Icon 進入到A2 介面-1
進入到A2 介面-2
表4-22:A-3 介面之運作配置
A 介面選擇 Icon 進入到A3 介面-1
進入到A3 介面-2
表4-23:A-4 介面之運作配置
A 介面選擇 Icon 進入到A4 介面
表4-24:A-5 介面之運作配置
A 介面選擇 Icon 進入到A5 介面
表4-25:A-6 介面之運作配置
A 介面選擇 Icon 進入到A6 介面-1
進入到A6 介面-2
Step.4 進入 Flash 建構系統
在完成系統主畫面介面與子畫面介面後,應用Flash 讓系統產生聯結,完成 系統之建構。以下是在Flash 下的系統建構與操作檢驗。
表4-26:智慧型大眾運輸空間場域移動輔助系統建構(以可愛風格為例) 系統建構與流程檢驗
1.將主畫面與子畫面聯結:運用 Flash 的 Action Script 將各個畫面進行聯結功能。
2.運作各功能之切換:運用 Flash 按鈕與超連結功能將按鍵與對應功能呼應。
3.系統流程檢驗並回到主畫面:本研究找尋數個人員實際運作系統,檢查後沒有流程上的問題。
1.將主畫面與子畫面聯結
3.系統流程檢驗並回到主畫面
2.運作各功能之切換
在建構完成系統後,經實驗運行結果良好,本研究之智慧型大眾運輸空間場 域移動輔助系統於此階段完成初步的設計,後續將應用Nielsen(1993)所提出的數 種檢驗介面之方法,對初步的系統進行修正與建議。本研究依據各種方法之特 性,選擇以焦點團體法進行。