2011.12.06 i phoneux視覺設計

717 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
717
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

2011.12.06 i phoneux視覺設計

  1. 1. 視覺設計Winnie Chiang @田中園 2011/12/06
  2. 2. 視覺設計的重要性吸引使用者改善使用性取悅使用者
  3. 3. 建立視覺結構的三種方式分組 (Grouping)階層 (Hierarchy) • 何謂視覺結構? 建立視覺通道來協助使用對齊 (Alignment) 者通過讀者的設計。
  4. 4. 分組目的 • 減尐複雜度並協助使用者解讀讀者的設計。方式 • 透過相近(proximity)來傳達,也可透過對比、 對齊和其他視覺提示予以加強。
  5. 5. 階層目的 • 建立設計中的閱讀順序。方式 • 視覺元素或突出的分組要先檢視,可藉由操 縱位置和大小來造成突出。
  6. 6. 對齊目的 • 讓設計更容易被了解也更有用。方式 • 類似的畫面使用一致的對齊方式。
  7. 7. 色彩區別 • 區別許多視覺元素,例如:導覽列、列表標題、 分段控制。強調 • 強調某些資訊、工作或畫面上的主要動作。分類 • 注意:以色彩分類需確認每種色彩是否有意義。
  8. 8. 字體  Web Design is 95% Typography  Apps are even more on Typography參考來源:網路與行動軟體字型與排版應用 (朱其明 2011/04/23)
  9. 9. 參考來源:網路與行動軟體字型與排版應用 (朱其明 2011/04/23)
  10. 10. 圖像定義:類似實物上的物體圖像設計原則 • 直接 • 一般 • 一致 • 有傳達力
  11. 11. 索引標籤圖示可使用標準圖示或自行設計自行設計須遵循以下指南: • 使用PNG格式 • 使用有適當透明且沒有陰影的白色 • 使用消除鋸齒(anti-aliasing) • 創作約 30 X 30 px 的圖示
  12. 12. 設計索引標籤圖示其他訣竅 圖示使用看起來相等的大小 (圓>方) 永遠在索引標籤中顯示圖示,不要留下空白 的空間,不要使用文字或任意的形狀。 在圖示和其標籤間提供合適的空間。5mm 使用字首大寫來顯示標籤。
  13. 13. 圖示的其它應用環境 啟動畫面 列表檢視 • 目的:使用圖示傳達基本資訊或概念 細節檢視 • 目的:使用圖示表示動作或狀態指示 • 優點:節省空間並讓應用程式在視覺上更吸引人。
  14. 14. 總結 視覺設計應在概念階段就要考慮。 應用程式的各視覺元素(色彩、字型、圖像 和版面等)應一起搭配運作。

×