iOS 8人機交互指南(11)

前一篇:iOS 8人機交互指南(10)

11. 圖標與圖形(Icons and Graphics)

11.1 App 圖標(The App Icon)

Every app needs a beautiful app icon. It’s not unusual for people to base their initial opinions about your app’s quality, purpose, and reliability solely on the look of your app icon.

每一款 app 都需要一個漂亮的 app 圖標。一種很常見的現象是,用戶很可能僅僅因為 app 圖標的好看程度而建立起對 app 的品質、用途、可靠性的初始認識。

iOS 自帶 app 的圖標

Here are a few of the things you should keep in mind as you think about your app icon. When you’re ready to start creating it, see App Icon for detailed guidance and specifications.

1. The app icon is an important part of your app’s brand. Approach the design as an opportunity to tell your app’s story and build an emotional connection with users.

2. The best app icons are unique, uncluttered, engaging, and memorable.

3. An app icon needs to look good at many different sizes and on different backgrounds. Details that might enrich an icon at large sizes can make it look muddy at small sizes.

在設計 app 圖標時,有幾件事情要牢記。當你準備開始創建圖標時,在 App Icon 一節可以看到更多細節的指導和規范。

1. app 圖標是 app 品牌的重要組成。將圖標的設計過程當成是講述 app 故事的機會,與用戶建立起情感的紐帶。

2. 最佳 app 圖標應該是獨一無二、整齊、迷人和令人難忘的。

3. app 圖標在多種尺寸和不同背景下均應有很好的表現。在大尺寸下,細節可能會豐富圖標的表現力,但在小尺寸下會顯得模糊。

11.2 欄圖標(Bar Icons)

iOS provides a lot of small icons—representing common tasks and types of content—for use in tab bars, toolbars, and navigation bars. It’s a good idea to use the built-in icons as much as possible because users already know what they mean.

iOS 提供了許多小圖標,對應于常見任務和內容類型,它們可用于標簽欄、工具欄、導航欄。盡可能使用內置圖標是比較好的方式,因為這樣用戶很容易理解圖標的含義。

iOS 內置圖標

If you need to represent custom actions or content types you can create custom bar icons. Designing these small, streamlined icons is very different from designing an app icon. If you need to create custom bar icons, see Bar Button Icons to learn how.

如果需要表達自定義操作或內容類型,可以創建自定義欄圖標。設計這些小的流線型圖標與設計 app 圖標的方式非常不同。如果需要創建自定義欄圖標,參見 Bar Button Icons 一節。

文字式圖標

(注意:可以在導航欄或者工具欄使用文字來代替圖標表達條目。例如,日歷 app 的工具欄上使用“Today(今天)”、“Calenders(日歷)”、“Inbox(收件箱)”來代替圖標)

To help you decide whether to use text or icons in the navigation bar or toolbar in your app, consider how many icons are visible onscreen at one time. Too many icons on a screen can make an app seem difficult to decode. Also, note that this decision might be different depending on the horizontal environment, because a horizontally regular environment tends to have more room for text in bars.

在 app 的導航欄或工具欄上是使用文本還是圖標,可以考慮一下可見的屏幕上一次可顯示多少圖標。一個屏幕上出現太多圖標會讓 app 看上去很難解析。同時,注意使用文本還是圖標可能依賴于水平環境,因為水平常規環境傾向于為欄上的文本留出更多空間。

11.3 圖形(Graphics)

iOS apps tend to be graphically rich. Whether you’re displaying users’ photos or creating custom artwork, here are a few guidelines you should follow.

iOS app 傾向于采用豐富的圖形。無論是顯示用戶照片還是創建自定義的插畫,這里有一些應該遵循的指導原則。

Support the Retina display. Make sure that you supply high resolution assets for all artwork and graphics in your app. In particular, supply @3x assets for iPhone 6 Plus and @2x assets for all other high-resolution iOS devices.

Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your app to look skewed or too large. Let users choose whether they want to zoom images in or out.

Don’t use images that replicate Apple products in your designs. These symbols are copyrighted, and product designs can change frequently.

Don't use Apple app icons, images, or screenshots in your designs. Apple designs are copyrighted and can’t appear in your UI unless they are provided by the system.

支持 Retina 顯示屏。確保能夠為 app 中所有插畫和圖形提供高分辨率的支持。特別地,支持 iPhone 6 Plus 的 3 倍顯示和所有其他高分辨率 iOS 設備的 2 倍顯示。

在原始屏幕寬高比的情況下顯示照片和圖形,也不要放大超過 100%。你一定不希望 app 中的插畫或圖形看上去歪曲或太大。讓用戶選擇是否想放大或縮小圖片。

不要在設計中使用復制蘋果產品的圖片。這些象征或符號是具有版權的,產品設計可以頻繁改變。

不要在設計中使用蘋果 app 圖標、圖片或截屏。蘋果的設計是蘋果公司版權所有的,除非由系統提供,否則不能出現在你的 UI 中。

英文原文鏈接

后一篇:iOS 8人機交互指南(12)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容