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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容