案例分析_圖形介面元素

在文檔中 國際品牌的使用者圖形介面之風格研究 (頁 46-0)

第三章 研究方法與案例分析

第二節 案例分析_圖形介面元素

此章節針對三個系統平台的各個視覺元素分別作該元素的性質分析。並在 最後作出跨系統地分析總結論。

一、 Macintosh OS X

Apple是目前市面上的操作系統中,唯一軟硬體皆自家開發的封閉式系 統,儘管其開發空間與第三方開發廠商進行應用軟體的開發,但仍舊以相當高 的標準在整合第三方應用軟體與自家系統的一致性。

此研究關於該系統平台的資料來源自於Mac OS X 規範,內容詳細記載該 系統之開發原則與設計方向。而他們稱這個版本的介面風格為Aqua,此版本至 今上在使用、並且還在不停的更新與調整當中:

”Aqua is the overall appearance and behavior of Mac OS X. Aqua defines the standard appearance of specific user interface components such as windows, munes, and controls and is also characterized by anti-aliased appearance of text and graphics, showing, transparency, and careful use of color. Aqua delivers standardized consistent behav-iors and promotes clear communication of status through animated no-tifications, visual effects and more. Designing for Aqua compliance will ensure you provide the best possible user experience for your customers.“

截取自Apple Human Interface guidelines

1. 圖像(ICON)分析

(1)應用程式圖像分析

Mac OS X 針對應用程式圖像的規範內容著重於透視形態的定義,根據應 用程式的形態有不一樣的透視,予使用者專注、抑或俯視桌面的感受差異;其 次則是在圖像構成元件的選用,需要能夠明確傳達圖像欲表達的資訊;最後才 是專注於設計精緻度、與系列性等議題。(表3-2)

表3-2:Mac OS X之應用程式圖像規範內容

應用程式與文件使用的圖像透視,就如同該物件擺放在桌子上的視角;至於設 定工具的圖像透視則仿佛物件呈現於使用者正前方的架上。

盡可能的讓圖像所屬的功能明顯,如果該軟體會有輸出檔案,則必須要讓該輸 出檔案與軟體圖像有明顯的連結。 在選用圖像元素時,視情況選擇能夠彰顯或 補述說明功能的元件作為輔助元素,但若物件本身就夠清楚表達,則無需再添 加。

以高品質的標準繪製圖像,採用實際的材質、紋理及光線,盡可能的以擬真、

現實主義的手法來表現,並且讓細節更加精緻。

Dictionary: 包括 牛津字典與日英字 典。

應用程式 應用程式

Hard disk:顯示於桌 面空間,為一檔案群 組。

System Prefer-ences:系統內的所

Stickies: 隨手記錄 工具。

Console:系統Log 閱覽設定工具。

檔案類型 工具程式

iPhoto圖庫:iPho-to的檔案群組捷徑。

Dmg執行檔:安裝 執行封包。

檔案類型 檔案類型

網路工具程式:設定 網路活動帳號等細節 之工具。

活動監視器:監視 電腦運作狀況的工 具

工具程式 工具程式

圖3-1: Mac OS X之應用程式圖像設計結構矩陣

Mac OS X所規範的應用程式圖像主要強調真實質感與造形, 根據圖3-1所 示,Mac的應用程式圖像設計結構中,造形囊括了有機到幾何,材質的部分全 數都屬真實質地的表現方式。而其中依據其圖像所屬類型比對得知:應用程式 的造形較為有機,展現出比較具有人文與自然、且輕鬆的型式;設定工具之造 形偏屬幾何,許多是經過修正的圓形與方形,視覺上予人專業精良的感受,也

比較嚴謹。

(2)工具列與系統圖像分析

系統圖像及工具圖像設計原則上,Mac OS X 仍舊是首重語意上的傳達及 生活中的連結,其次才是設計精緻度、整體性、與對比度的定義(表3-4)。

表3-4: Mac OS X之工具列與系統圖像規範內容

好的工具列圖像,使用較為使用者熟悉的心智模型元件。盡可能的描繪好識 別、實際生活中的元件、以及既有的傳達元件,可以幫助使用者理解、記憶其 功能。

將實際生活中有的實體型式表現於圖像上,對使用者而言將更直接。

工具列圖像通常使用於主要視窗的與文件編輯視窗的上方選單中,並排的情況 下,圖像線條需要清晰、對比明確,並且左右等距、上下齊高。

若圖像會出現於按鈕上,則使用黑色來描繪輪廓,以及少數的透明度(斟酌使 用,以免與disable的系統效果混淆)。

在工具列圖像的部分,經過了規範案例的內容解析以後得知,在工具列圖 像型式沒有功能上特殊的分別,僅有單色與多色之形態的差別,視開發者使用 狀況選擇。因此,本研究挑選了6個工具列功能(多色)、6個按鈕功能(單

色)予以分析比較(表3-5)。

表3-5:Mac OS X之工具列圖像分析樣本

刪除工具 設定為垃圾郵件

收取郵件 設定

備忘錄 編寫郵件

插入各式形狀色塊 列印指令

鎖定 所有設定的檢閱器

調色盤 上傳、分享

圖3-2: Mac OS X 之工具列圖像設計結構矩陣

Mac OS X所規範的工具列圖像重視明確的語意以及圖像的精緻度,而經 由圖3-2所示,Mac OS X 的工具列圖像造形圓潤方正各半,多色與單色型式的 的使用狀況與所屬的應用程式有關聯,工具形態、系統層級的指令多使用單色

按鈕;另外,功能語意較複雜的工具列則使用多色圖像的比例較高,以表現應 用程式中功能豐富的指令按鈕。本研究推斷,從這類小型圖像沒有過分突出的 風格與精神可以看出,在這類圖像上,Mac OS X將重心放在訊息的傳達,企 圖減低裝飾性以保留訊息的傳達,別於應用程式的形態。

2. 字體(Font)分析

以人道主義為基礎的字體構成、且選擇閱讀性佳的字體,並且在字體的細 節處理尚帶有古羅馬字體中線條粗細變化的特質,意味著Mac OSX期望帶給使 用者舒適的資訊呈現。另外,亦藉著字體線條的不等寬來表現出非機械、類似 手寫、且人文的氣息等等。

表3-6: Mac OS X之字型分析_Lucida Grande

樣式 無襯線字體

Vox-ATypl分類 現代 > 直線系 > 人道主義

設計者 Charles Bigelow & Kris Holmes 所屬公司 Blgelow & Holmes

用法說明 除了Mac OSX以外,上有許多網站使用該字體為預設字 體,如Facebook和許多phpBB論壇等。

三要件程度 適度性偏高、辨識度偏高、灰色調中等 3. 色彩(Color)分析

在Mac OS X的系統環境中,透過其基本元件所呈現出來的色彩相當簡 單,以灰色金屬為基底,再搭配各式圖像、或色彩;而滑鼠按下的焦點、或開 關效果的表示,則是利用藍色表示。圖X是透過該系統原件中所擷取出來的色 彩,系統環境中元件多以此兩色系作延伸搭配。

圖3-3: 擷取自Mac OS X元件之色彩

透過色彩分析(圖3-4)可以理解,Macintosh OS X所使用的色彩不多,

該系統以較高明度的兩個色彩為主軸,呈現出俐落與清新的感受;其中大部分 使用灰色(MacColor.1),能夠將介面裝飾對使用者的干擾降到最低,聚焦於 功能與操作上。

圖3-4: Mac OS X之色彩分析

4. 操作元件(Component)分析

選擇Macintosh OS X系統中較為常用的操作元件,作為分析對象,在該設 計規範中所定義的內容著重於各個元件的行為定義,以及其互動方式,幫助設 計者在使用時,能夠選擇適當的元件,提高使用者的使用效率。以下表3-7為該 系統最常使用之操作元件的視覺描述:

表3-7:Macintosh OS X之操作元件描述

操作元件 視覺描述

Toolbar Controls 灰色、類金屬的塊面為基底,具有以凹與凸的實體 狀態,來製造選項被選取的暗示,圖像亦以陰刻或 陽刻的方式呈現。

Toolbar Controls

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等、

金屬材質

操作元件 視覺描述

Command Button 立體按鈕,仍舊是灰色基底,當滑鼠按下時,按鈕 呈現寶藍色,並且立體效果加重,以明確暗示使用 者以按下。

Command Button

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等

Scope Button 為帶有髮絲的金屬塊為底,字體與選取按鈕框皆有 明確的立體效果。

Scope Button

4.a3 立體效果高、4.b3 形狀圓潤、、金屬材質 Radio button 在沒有被選取時,是淺灰色、裝飾性弱的圓形按

鈕;選取後則變成藍色、立體效果比較明確的凸 出。

Radio button

4.a2 立體效果中、4.b3 形狀圓潤

Checkboxes 在沒有被選取時,為淺灰色的R角矩形,選取後變 為藍色。

Checkboxes

4.a2 立體效果中、4.b2 形狀中等

Segment Control 灰色金屬,在同一個塊狀上分為數個區塊,以線條 區隔開來,單選的選項中,被選中的選項顏色較其 他的深。

Segment Control

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等、

操作元件 視覺描述

Action Menu 灰色金屬按鈕,微立體型式,下拉式三角形與圖象 皆有凹刻效果。

Action Menu

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等、

金屬材質

Progress 灰色金屬的凹面向下,以藍色玻璃似液狀比擬為已 完成部分。

Progress

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等 Tab view 以明確的灰色金屬按鈕之凹、凸來比喻頁面的開

狀態。

Tab view

4.a3 立體效果高、4.b2 形狀中等、4.b5 觸覺中等、

金屬材質

統整以上操作元件的敘述,作橫向的統合如表3-8 所示,可以明顯地得知 Macintosh OS X 的操作元件多採立體效果明確的設計,去達成affordance與訊 息傳達之目的,至於外型形態則較為中庸、去裝飾性,研判Macintosh OS X所 希望帶給使用者的是明確的操作,但不至於搶風頭的圖形介面設計。

材質的部分,Macintosh OS X大量地使用消光金屬鋁材質,如同其產品外 觀一樣。金屬給人的感覺相對較為冰冷,但該設計以消光的方式處理,以取得 平衡。另外,該系統以灰黑白的方式處理消光金屬鋁材質,有效地降低介面的 裝飾性。

統整操作元件的分析,該系統的造形與材質同樣的表現出俐落、少裝飾的 低調感,但相對的也較為理性、生硬。

表3-8:Macintosh OS X操作元件整體分析

二、 Android Ice Cream Sandwich

此系統平台從2009年上市至今,已歷經了3次版本的大躍進,來到4.0 Ice Cream Sandwich,Google公司於2012年Android所公佈的Android Design規範 網頁,針對Ice Cream Sandwich開發條件予開發者參考。內容記載了該系統的 主要風格名稱、主題等,期望藉由精神傳達到溝通識別的效果。其設計風格名 為Holo Design:

”Themes are Android's mechanism for applying a consistent style to an app or activity. The style specifies the visual properties of the

elements that make up your user interface, such as color, height, pad-ding and font size. To promote greater cohesion between all apps on

elements that make up your user interface, such as color, height, pad-ding and font size. To promote greater cohesion between all apps on

在文檔中 國際品牌的使用者圖形介面之風格研究 (頁 46-0)