Your SlideShare is downloading. ×
  • Like
2011.12.06 i phoneux視覺設計
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

2011.12.06 i phoneux視覺設計

  • 498 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
498
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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