視覺設計Winnie Chiang @ 田中園

2011/12/06

視覺設計的重要性

吸引使用者

改善使用性

取悅使用者

建立視覺結構的三種方式

分組 (Grouping)

階層 (Hierarchy)

對齊 (Alignment)

• 何謂視覺結構 ?建立視覺通道來協助使用

者通過讀者的設計。

分組

目的• 減少複雜度並協助使用者解讀讀者的設計。

方式• 透過相近 (proximity) 來傳達，也可透過對

比、對齊和其他視覺提示予以加強。

階層

目的• 建立設計中的閱讀順序。

方式• 視覺元素或突出的分組要先檢視，可藉由操

縱位置和大小來造成突出。

對齊

目的• 讓設計更容易被了解也更有用。

方式• 類似的畫面使用一致的對齊方式。

色彩區別

• 區別許多視覺元素，例如：導覽列、列表標題、分段控制。

強調• 強調某些資訊、工作或畫面上的主要動作。

分類• 注意：以色彩分類需確認每種色彩是否有意義。

字體

Web Design is 95% Typography

Apps are even more on Typography

參考來源：網路與行動軟體字型與排版應用 ( 朱其明 2011/04/23)

參考來源：網路與行動軟體字型與排版應用 ( 朱其明 2011/04/23)

圖像

定義：類似實物上的物體

圖像設計原則• 直接• 一般• 一致• 有傳達力

索引標籤圖示

可使用標準圖示或自行設計

自行設計須遵循以下指南：• 使用 PNG 格式• 使用有適當透明且沒有陰影的白色• 使用消除鋸齒 (anti-aliasing)• 創作約 30 X 30 px 的圖示

設計索引標籤圖示其他訣竅

圖示使用看起來相等的大小 ( 圓 > 方 )

永遠在索引標籤中顯示圖示，不要留下空白

的空間，不要使用文字或任意的形狀。

在圖示和其標籤間提供合適的空間。 5mm

使用字首大寫來顯示標籤。

圖示的其它應用環境

啟動畫面

列表檢視• 目的：使用圖示傳達基本資訊或概念

細節檢視• 目的：使用圖示表示動作或狀態指示• 優點：節省空間並讓應用程式在視覺上更吸引人。

總結

視覺設計應在概念階段就要考慮。

應用程式的各視覺元素 ( 色彩、字型、圖像

和版面等 ) 應一起搭配運作。