圖形使用者介面之視覺要素

In document 國際品牌的使用者圖形介面之風格研究 (Page 24-41)

第二章 文獻探討

第四節 圖形使用者介面之視覺要素

從Cummings(2010)所繪製的「圖解使用經驗設計」中,以使用者的知覺 意識分層解析,將使用經驗分為語言、圖形、聲音、動態、資訊設計、介面設 計、互動設計與系統程式等八個層面(圖2-5)。越屬上層之元素,越是使用者知 覺意識高的範疇,亦是能夠直接影響使用經驗的元素。

圖2-5:圖解使用經驗設計(資料來源:uxdesign.com,by Cummings)

延續Cummings(2010)所提出的圖解使用者經驗設計中,圖形使用者介面 設計所討論的範疇囊括了該圖中的文字、視覺設計。即使用者知覺意識較為表 層、且關乎於視覺的部分,亦是將底層複雜的狀況表達予使用者的外觀。

圖形使用者介面的解構,在早期是以WIMP為典範,是由Windows(視 窗)、Icon(圖像)、Menu(選單)、與Pointer(指標)四個字所構成,包括 微軟的Windows系統、Apple MacOS、以及其它以X Window、Linux 系統為基 礎的操作系統皆採用該四元件構成系統互動型式。

林錦全(2004)歸納出介面設計視覺元素包含:文字、圖像、色彩搭配、介 面編排設計四項。關於使用者介面之視覺要素,與網頁介面之視覺要素除了瀏覽 載具、呈現型式之外,兩者有某種程度的相似,因此,本研究除了從使用者介面

之相關文獻切入探究,亦將網頁介面設計的文獻加以討論,擷取其設計要素。以 下表格為本研究針對使用者介面、網頁介面相關學者所定義的視覺要素彙整:

表2-3:使用者、網頁介面設計視覺要素之相關文獻(本研究整理)

學者(年份) 定義

Oman-son(1998)

網頁介面之構成:

導覽(Navigation)、標題(Heading) 、背景(Background)、

排版標誌(Layout)、圖像(Icon)、文字風格(Style) 蔡宜臻(2000) 網頁版面的構成:

單元劃分、畫面構成、文字、圖形、動畫、色彩 馮淑萍(2000) 網頁設計需考量的七大視覺要素:

文字、圖像、符號、色彩、介面編排設計、操作性與企業 形象。

Christi-ne(2002)

網頁版面是由標題、頁面分割、留白與顏色所構成。

莊錦昌(2001) 使用者介面的影響因素:

主題種類、超連結種類、超連結位置配置點、背景、背景 明暗、背景色彩、版面留白量與內文編排。

Thomas

(2001)

頁面邊框、文字、圖形、標題、顏色、影像、前後景的對 比皆為構成網頁的重要因子。

學者(年份) 定義 張惠如 (2003) 網頁版面的構成:

● 頁面分割:如同平面設計中的版面規劃,透過分割可 以將不同的網頁內容分別引用在各個版面中。

● 背景:以風格為基礎,擇一與文字、圖像可搭的背景

● 動畫:因互動而改變呈現狀態,是非必要的元素。

● 文字:除了所有裝飾類元件,語言文字依舊為最基本 的傳達媒介。

● 色彩:以網站個性為基礎,運用色彩來傳達欲傳達的 情緒與感覺,進而影響使用者對網頁的感受。

近年,由於觸控式面板的普及,讓手指直接作為Pointer的型式更為直接、

也因為手持裝置銀幕尺寸的限制,不見得會使用視窗作為單元劃分,歸納統整了 過去WIMP的介面、與現今非視窗型的手持裝置之介面之後,本研究剖析操作介 面之元素,將圖形使用者介面之視覺元素歸納為:字型(Typography)、圖像 (Icon)、色彩(Color)、操作元件(Component)、與介面編排(Layout)五大要件。

接下來,即開始針對圖形使用者介面設計的各個元素做探討,藉由相關文獻 得知如何對風格造成影響、並歸納出該元素所在視覺上所能表現的變因,以作為 實驗參考。其中,前四者偏重於視覺設計之技巧,為本研究的討論範疇;而第五 項介面編排關乎於人類心智模型及人因工程層面居多,因此暫不列為影響視覺風 格及識別的行列中,故僅針對字型、圖像、色彩、操作元件四項做探討。

一、字型

張閩生(1990)指出,文字辨識首重易讀性(Legibility),閱讀者容易瞭

解、美觀又不至於產生疲勞。至於形態的部分,襯線與弧線對於字體來說,是相 當重要的改變條件,襯線可以說是在字型架構又更上一層次的維度,每個字樣

(letterform)所用的弧線與角度所結合起來而形成的整體紋理,皆有所不同,

如圖2-6(Tidwell,2012)。

圖2-6:歐語系字體基本架構

依照VoxAtypl的定義方式,大致將歐語系字體分為三大類型:古典、現 代、書法(Vox,1954)。此種定義方式被提出以後,於1962年正式被 Associa-tion Typographique Internatioal 所認定並且使用,至1967年亦成為British Standard,其內容分別如表2-4所示。

表2-4:Vox-Atypl字型分類 (資料來源:本研究整理)

學者(年份) 定義

古典 Classical 又可分為以人為本、傳統等子項目,字體襯線呈現三角型 式,字體粗細變化對比較為平均,通常亦被稱為”舊風 格”。代表的字體有:Centaur、Garamond、Bulmer等皆為 此類型。

現代 Moderns 興起於工業革命以後,是一種較為簡約且功能導向的字體,

在這類的字型幾何程度通常較高,是經過修飾的字體。例 如:Futura、Gill Sans、Univers等字體。

學者(年份) 定義 書法

Calli-graphic

採用手寫、工藝的方式建立,不論是雕刻或書寫而構成的字 體,風格性較為前二者強烈。例如:Trajan、哥德體、

Mistral、或Banco等字體。

除了襯線與否的決定以外,王明嘉(1997)於其字體挑選工具中列出了選 擇字體的三個主要關鍵為,並且針對數個經典字型做此三個關鍵的程度分析:

1. 適讀性(Readability)以作為內文字體來說,字體的筆劃調整可以增 加閱讀的舒適性,能夠避免因為長篇閱讀而產生疲勞感,另一方面也 不至於因為字體的過分修飾而干擾閱讀。

2. 易讀性(Legibility)每個字母間的形狀大小差異,可以足以達到迅 速辨認不同字母或符號的程度,方能避免字母間的混淆或文句誤讀的 狀況。

3. 灰色調(Hue)不同的字型筆畫會造成不同程度的明暗階調,而字面 上的濃淡輕重則決定了整體版面的性格因素。

而關於載體、文字排列等亦影響文字數字顯示的特徵,在顯示面板中文字 數字密度越低、越平均,則易於辨識;或者藉由排列的方式呈現出群組化,議 有助於辨識(Tullis,1988)。印刷品中,以serif 有襯線的文字作為內文文字 較具有可讀性,原因是襯線能夠對閱讀者產生引導;而圖形使用者介面所使用

的字體,受限於銀幕像素的影響,較難完整呈現serif 襯線的細節,因此大部份 皆使用無襯線sans-serif 的字型,以保留文字美觀。

考慮到適讀性的問題,銀幕字、手機字亦需要作差異化處理,包括「切角 處理」、「增高處理」與「開口加寬處理」。切角是為了在解析度較低的情況 下依舊能夠明確辨字,因此在筆畫交界處作切削處理,以避免筆畫模糊(圖 2-7);增高處理是藉由字體的拉長,將字體的骨架與比例特徵更顯誇張,亦能 夠增加辨識度(圖2-8);而開口加寬處理則是單就字體缺口的地方再加強,主 要還是要加強字體特徵(圖2-9)。

圖2-7:銀幕字的切角處理

圖2-8:銀幕字的增高處理

圖2-9:銀幕字的開口加寬處理

藉由以上文獻中字型的相關探討得知,歐語系字型被劃分為襯線與非襯線 兩大系統,其決定了字型裝飾抑或俐落的個性。除此之外,字型也受文字載 體、及書寫工具的差異而有所不同。如今,在電子產品中的顯示,對文字來 說,亦是一套創新的載具與書寫方式,儘管如此,其依舊以一般文字為基礎,

考慮電子產品銀幕的解析度(Resolution)改良。綜合文字的傳統風味、與新 的載具,激盪出新的字型式樣。

二、圖像

談及圖像的使用及發展,應該追朔自符號學的建立。圖示設計反映出人類 對於事物的認知及理解,並且藉由社會性、人文性等多重概念展現而出;現今 為一個資訊發達的時代,人類溝通亦是透過高度視覺化而建立,圖像語言幫助 跨國的溝通更為順暢(周陟,2010)。Huang et al., (2002)提出在圖形使用 者介面中所使用的圖像應該包含幾項準則及功能:風格形態(Style)、訊息品 質 ( M e s s a g e q u a l i t y ) 、 具 意 義 ( M e a n i n g f u l n e s s ) 、 區 域 性

(Localizability)及象徵性(Metaphor)。

鄭文俊(1999)提到使用圖像的好處:

2. 表達視覺及空間的關係,減低平面及立體物件的差異 3. 節省介面中的空間,以群組的方式排列、組織操作指令

4. 幫助使用者識別、區隔功能,增加搜尋速度,並瞭解介面結構關係 5. 加快操作速度

6. 記憶圖像的速度遠比記憶文字快,能夠幫助記憶

7. 使用者毋需高度的閱讀能力,減輕文盲與老年人口的負擔 8. 加快資訊流通速度,幫助全球化

圖像為縮小的圖片影像,通常以隱喻的方式來比擬介面中的各個單元,其 目的是為了讓使用者容易學習(Preece,1994)。而由於以下原因,加強了圖 像容易為人學習及記憶:

1. 對於代表的單元提供視覺上的提示。

2. 利用形態的表現,加強記憶上的暗示。

3. 清楚地表達該單元與系統之間的關聯。

而張悟非(1992)思考到縮小的圖像,需要透過視覺將訊息傳達予使用 者,最基本的四項要件為:

1. 可識性:訊息可以在短時間內馬上被解讀。

2. 顯著性:與其它訊息之間的區隔明確。

3. 可讀性:圖像或文字的語法結構安排適切。

4. 含義性:即訊息的聚焦、了解程度。

透過以上文獻可以瞭解到圖像之於使用者,是一種功能上的溝通,亦可稱 作是情感上的共鳴。在圖形使用者介面中,既有功能目的、也具有極大的美學

影響力,扮演着極重要的角色。

現出比較精良的精神,另一方面非真實、插畫風格的圖像,個性相 較之下比較溫潤些(如圖2-10)。

2. 工具列圖像:使用於工具列中,表示某些特定的功能執行按鈕,是意 涵最需要被明確表達的圖像。

3. 系統圖像:用於系統顯示狀態的圖像,尺寸較小、語意敘述亦須明 確。其與工具列圖像有比較相似之處,主要差異在顯示的大小與詞性 的不同,工具列圖像屬於動詞、系統圖像則是屬於形容詞。此兩種類 型多半以單色圖像、或是多色正視簡易圖像為主,多色圖像較能表現 出情境,但也由於需要較多的繪製時間,成本較高。由於Tray icon 需要在較小的空間,表現較重要的資訊,因此其設計條件較應用程式

3. 系統圖像:用於系統顯示狀態的圖像,尺寸較小、語意敘述亦須明 確。其與工具列圖像有比較相似之處,主要差異在顯示的大小與詞性 的不同,工具列圖像屬於動詞、系統圖像則是屬於形容詞。此兩種類 型多半以單色圖像、或是多色正視簡易圖像為主,多色圖像較能表現 出情境,但也由於需要較多的繪製時間,成本較高。由於Tray icon 需要在較小的空間,表現較重要的資訊,因此其設計條件較應用程式

In document 國際品牌的使用者圖形介面之風格研究 (Page 24-41)