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