[译]《iOS Human Interface Guidelines》——Template Icons

模板图标

你为栏或者主屏幕快捷操作创建的自定义图标也称为模板图标或者图像,因为iOS将其用于产生当你app运行时你看到的图标。

iOS定义了很多标准的小图标,比如刷新、动作、添加和喜欢。你应该尽可能地使用这些按钮和图标来代表你app中的标准任务。(查看Toolbar and Navigation Bar ButtonsTab Bar Icons来学习更多关于你可以在栏中使用的标准按钮和图标的内容。)

如果你的app包含了不能被标准图标代表的任务或模式——或者如果标准图标与你的app风格不协调——你可以设计你自己的小图标。在高层面上,你应该以这样的图标为目标:

  • 简单合理。太多的细节会让图标显得草率或者难以辨认。
  • 不会很容易被误认为系统提供的图标之一。用户应该能够一眼区分你的自定义图标和标准图标。
  • 易于理解并且广泛接受。尽量创建一个大部分用户都能正确理解且没有用户会觉得被冒犯的符号。

IMPORTANT
确保不要在你的设计中使用复制苹果产品的图像。这些符号是有版权的,并且产品的设计可能会频繁地更改。

无论你只使用自定义的图标还是混合自定义和标准的,你的app中所有的图标应该在感知尺寸、细节等级和视觉分量上看起来属于同一个系列。

比如说,看一看iOS栏图标系列,注意它们在尺寸、细节和分量上是如何相似来产生一种和谐统一的感觉的。

image

为了创建连贯的系列图标,一致性是关键:每个图标都应该尽可能地使用相同的透视和笔画粗细。为了确保所有的图标都有一只的感知尺寸,你可能需要创建一些不同实际尺寸的图标。比如说,下面显示的系统提供的图标集合都有相同的感知尺寸,机智喜欢和语音信箱比其他三个图标实际上要大一点点。

image

如果你设计一个自定义的标签栏图标,你应该提供两个版本——一个未选中的外观和一个选中后的外观。选中后的外观往往是未选中外观的填充版本,但是一些设计需要改变这一方式。

image

创建一个与未选中图标内部细节反转的填充版本的图标(例如收音机图标),这样它们就会在选中版中维持特征。键盘图标也有内部细节,但是如果把背景填充并将圆形变成白线,这样的选中版会变得迷惑并且难以识别。

image

有时候,设计需要轻微的修改来使选中时好看。比如说,因为计时器和广播图标包含开放区域,所以选中版浓缩了一点笔触来融入圆形外壳。

image

如果一个图标填充后变得不好辨认,一个好的替代是使用粗一点的笔触来绘制选中版。比如说,语音邮箱和阅读清单图标就使用了2 point的笔触,而不是用来绘制未选中版的1point笔触。

image

有时候,在笔触描绘轮廓时图标的形状有些细节不太好看。当这种情况时——比如音乐和艺术家图标——你可以为图标的两个版本都使用填充外观。对用户来说区分选中和未选中的外观很容易,因为选中的外观颜色深并且有配色。

要设计一个自定义的小图标,要遵循下面的规则:

  • 使用透明来定义图标的形状。iOS忽略所有的颜色信息,所以不必要使用超过一个以上的填充色。
  • 不要包含阴影。
  • 使用反锯齿。

如果你想要设计一个看起来与iOS图标系列相关的小图标,那就使用非常细的笔触来绘制它。特别是1point的笔触(即@2x分辨率用2 pixel笔触)对大部分图标都会非常好。

不管图标的视觉风格是什么,都要使用Icon and Image Sizes中的尺寸来创建自定义工具栏、导航栏和标签栏的图标。如果你为主屏幕快捷操作设计自定义图标,查看Home Screen Quick Actions获取细节。

不要在自定义的标签栏图标中包含文本。用标签栏元素API来设置每个标签的标题(查看initWithTitle:image:tag:获取示例)。如果你需要调整标题的自动布局,你可以使用标题调整的API,比如setTitlePositionAdjustment:

本文翻译自苹果官方开发文档

查看完整合集


查看作者首页

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,088评论 25 707
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 13,276评论 2 60
  • 5. 图像(Graphics) 5.1 应用图标(App Icon) 5.2 自定义图标(Custom Icons...
    70dd80205ba0阅读 930评论 0 7
  • 目光所及之处 所有的妄想 在灰烬里的期盼 斑驳陆离 隐约模糊 都是幻觉 都是想象 心动是一瞬 怎样才能抹去 这些飘...
    Kari_阅读 134评论 0 0
  • 1 没有课的日子很宁静,躺在床上,读着刚找到的夏至未至的资源,好多年前的作品了吧,我记得曾经在图书馆看到这本书已经...
    如何是好阅读 242评论 0 0