• 沒有找到結果。

初步系統設計-第一階段設計結果

第四章 研究結果與創作

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)所提出的數 種檢驗介面之方法,對初步的系統進行修正與建議。本研究依據各種方法之特 性,選擇以焦點團體法進行。