## 1.11 圖標和圖形(Icons and Graphics)
[TOC=3,3]
### 1.11.1 應用圖標(The App Icon)
每個應用都需要一個漂亮的圖標。用戶常常會在看到應用圖標的時候便建立起對應用的第一印象,并以此評判應用的品質、作用以及可靠性。
以下幾點是你在設計應用圖標時應當記住的。當你確定要開始設計時,請參考[App Icon](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html#//apple_ref/doc/uid/TP40006556-CH19-SW1)來獲取更詳細的設計規格與指導。(譯者注:App Icon處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在后續更新中放出,煩請各位耐心等候。)
* 應用圖標是整個應用品牌的重要組成部分。將圖標設計當成一個講述應用背后的故事,以及與用戶建立情感連接的機會。
* 最好的應用圖標是獨特的,整潔的,打動人心的,讓人印象深刻的。
* 一個好的應用圖標應該在不同的背景以及不同的規格下都同樣美觀。為了豐富大尺寸圖標的質感而添加的細節有可能讓圖標在小尺寸時變得不清晰。
### 1.11.2 小圖標(Small Icons)
iOS提供了一系列小的icon,用以代表各種常見任務與操作,它們常用在標簽欄(Tab Bar)、工具欄(Toolbars)與導航欄(Navigation Bar)中。用戶通常都已經了解這些內置圖標的含義了,因此可以盡可能的多使用它們。
[](http://isux.tencent.com/wp-content/uploads/2015/10/2015102117194299.jpg)
如果需要自定義動作或者內容,你也可以設計自定義圖標。設計這些小的線性圖標與設計應用圖標有很大的區別,請參考[Bar Button Icons](https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1)來了解更多內容。(**譯者注:**Bar Button Icons章節處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在后續更新中放出,煩請各位耐心等候)
請注意,你有時候也可以用文字來代替工具欄和導航欄的圖標。 就像iOS的日歷里面,工具欄上便是使用”今天”,”日歷”和”收件箱”來代替圖標進行表意的。
[](http://isux.tencent.com/wp-content/uploads/2015/10/20151021151546839.png)
想要決定在工具欄和導航欄中到底是用圖標還是文字,可以優先考慮一屏中最多會同時出現多少個圖標。同一屏幕中圖標的數量過多可能會讓整個應用看起來難以理解。使用圖標還是文字還取決于屏幕方向是橫向還是縱向,因為水平視圖下通常會擁有更多的空間,可以承載更多的文字。
### 1.11.3 圖形(Graphics)
iOS應用大多數圖形豐富。無論是你需要展示用戶的照片,還是需要創建自定義圖片,以下這些需求都應該遵守:
* **支持****Retina****顯示屏。**確保你應用中的所有圖片資源都提供了高分辨率規格。尤其需要注意的是,iPhone 6 Plus需要提供@3x規格的圖片,而所有其他的高分辨率iOS設備都需要提供@2x規格的圖片。
* **顯示照片或圖片時請使用原始尺寸,并不要將它拉伸到大于****100%****。**你不會希望在你的應用中看到拉伸和變形的圖片。可以讓用戶自己來選擇他們是否想要縮放圖片。
**不要使用從蘋果系列產品中復制的圖形。**這些圖形均受版權保護,而且產品的設計可能會頻繁改變。
**不要將蘋果的應用圖標,圖像或者截圖用于你的設計中。**所有蘋果的設計均受版權保護并且不允許出現在你的UI中,除非它們是由系統直接提供的。
- (1):UI設計基礎
- 1.1 為iOS而設計(Designing for iOS)
- 1.2 iOS應用解析 (iOS App Anatomy)
- 1.3 適應性和布局(Adaptivity and Layout)
- 1.4 啟動與停止(Starting and Stopping)
- 1.5 導航(Navigation)
- 1.6 模態情境(Modal Contexts)
- 1.7 交互性與反饋(Interactivity and Feedback)
- 1.8 動畫(Animation)
- 1.9 品牌推廣(Branding)
- 1.10 顏色與字體(Color and Typography)
- 1.11 圖標和圖形(Icons and Graphics)
- 1.12 術語和措辭(Terminology and Wording)
- 1.13 與iOS的整合(Integrating with iOS)