1. 視覺設計
Winnie Chiang @田中園
2011/12/06

2. 視覺設計的重要性
吸引使用者
改善使用性
取悅使用者

3. 建立視覺結構的三種方式
分組 (Grouping)
階層 (Hierarchy) • 何謂視覺結構?
建立視覺通道來協助使用
對齊 (Alignment) 者通過讀者的設計。

4. 分組
目的
• 減尐複雜度並協助使用者解讀讀者的設計。
方式
• 透過相近(proximity)來傳達，也可透過對比、
對齊和其他視覺提示予以加強。

5. 階層
目的
• 建立設計中的閱讀順序。
方式
• 視覺元素或突出的分組要先檢視，可藉由操
縱位置和大小來造成突出。

6. 對齊
目的
• 讓設計更容易被了解也更有用。
方式
• 類似的畫面使用一致的對齊方式。

7. 色彩
區別
• 區別許多視覺元素，例如：導覽列、列表標題、
分段控制。
強調
• 強調某些資訊、工作或畫面上的主要動作。
分類
• 注意：以色彩分類需確認每種色彩是否有意義。

8. 字體
 Web Design is 95% Typography
 Apps are even more on Typography
參考來源：網路與行動軟體字型與排版應用 (朱其明 2011/04/23)

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

10. 圖像
定義：類似實物上的物體
圖像設計原則
• 直接
• 一般
• 一致
• 有傳達力

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

12. 設計索引標籤圖示其他訣竅
 圖示使用看起來相等的大小 (圓>方)
 永遠在索引標籤中顯示圖示，不要留下空白
的空間，不要使用文字或任意的形狀。
 在圖示和其標籤間提供合適的空間。5mm
 使用字首大寫來顯示標籤。

13. 圖示的其它應用環境
 啟動畫面
 列表檢視
• 目的：使用圖示傳達基本資訊或概念
 細節檢視
• 目的：使用圖示表示動作或狀態指示
• 優點：節省空間並讓應用程式在視覺上更吸引人。

14. 總結
 視覺設計應在概念階段就要考慮。
 應用程式的各視覺元素(色彩、字型、圖像
和版面等)應一起搭配運作。