设计字形

（图形符号设计） 让我们谈下图形符号的设计吧 我觉得我们可以从 “什么是图形符号？”开始说起 从传统意义上讲 图形符号是一个地质学符号 不过它还可能是现实世界中某个物体 的象征或者说大体的形状

或者它还可以是用来表示 作用或概念的形状集合 但是你可能就会想 “这和图标有什么区别呢” 为了解释清楚它们之间的区别 让我们看个例子 这里有四个iPhone的图标

图标可以指代一个很广泛的资源集 它可以是简单的低保真度图形 像是你在左边看到的这种 还可以是色彩丰富的 高度渲染的资源 就像你在右边看到的这种

左边的两种资源也能被定义为图形符号 因为它们所具有的简洁性 在大多数情况下 图形符号都是单色的 并且应该通过编程的方式来上色

这个是iOS钱包应用的图标 它有着不错的色彩运用 以及一些细微的阴影

而这就是该应用表示为 图形符号的样子 你应该明白我的意思了 让我们再看一个例子

这个是通话应用的图标 如果我们去掉图标化的形状 还有颜色的话 你应该猜得到 我们剩下的就是图形符号了 在本例中 图形符号其实是图标的一个组成部分

有效的图形符号有一些关键的特征 它们在形式上是高度简化的 它们在概念上是统一的

把它们放到对应功能或目的上下文环境 中 能很快明白它们所代表的意思

我们很多人有过这样的经历 你到了一个陌生的地方 我们不了解当地的文化或者语言 当我们看到某个 认识的符号时就会放心多了 在本例中 你不需要知道德语 就可以知道去机场的正确方向

这要归功于这个简单的统一图形 在这个上下文环境中 我们知道它代表的是机场

图形符号是个很强大的交流工具 这也是为什么我们将其 作为UI设计语言一部分的原因

（美味的） 让我们做个快速练习来 概念化什么是高效的图形符号 比方说 我们需要一个 图形符号用来表示美味的

你可能想到的第一个图形符号 是芝士汉堡 你不用跟我争辩 我确实认为芝士汉堡是美味的

不管你是否相信 有些人不喜欢芝士汉堡 什么比芝士汉堡更好呢？

披萨饼吗？

我看见有些人摇了摇头 我不知道 好吧 我觉得我可以找到一个 大家都觉得美味的 冰淇淋怎么样？

还不行？ 好吧 我觉得你们知道我要表达的意思了 对于某种食物总会有人喜欢 有人不喜欢

这就不是有效的图形符号 让我们换个角度看下 让我们探究一下给我们美味 这种感觉的核心怎么样

像是某种表情的表达 它很可爱 很有相关性 表现力也很强

不过我们要注意 在某些文化中

使用如面部 嘴部 或是身体的某部分 是看作不合礼仪的 请记住这一点 那么美味的统一象征是什么呢？

一个心形怎么样？

我们喜欢芝士汉堡 有些人喜欢披萨饼 有些人喜欢冰淇淋 喜爱和美味的关联度 比起我们其他的选择来说更为统一

这就是个不错的有效解决方案了

让我们看些我们将图形符号 运用于平台当中的例子

在Mac上

在菜单栏上

工具栏中 侧边栏中 还有最近推出的触摸栏中

在iOS上 标签栏中

列表视图中

还有主屏快速操作菜单中 你会发现图形符号无处不在 你们还会发现 它们很少是单独存在的 这就是为什么我们要牢记 一些设计考虑因素 在我们设计一组图形符号的时候

我们的目标是让这些图形符号 看上去像是一个家庭 而家庭是有个特征的共享集的 让我们来看下视觉上的重量

间距 还有摆放位置

在本例中 这个集合感觉有点太重了 左边的两个图形符号看上去有点小 所以它们看上去就不是很突出 如果我们将指引打开 就会发现 我们被这些垂直边界所限制了 让我们将其关掉 将这两个图形符号放大一些

这样就感觉好多了

这是放大前的样子

而这是放大后的样子

因为信息的椭圆形和电话的狭窄形状 有着较少的表面积 我们就可利用放大来达到视觉上的平衡

让我们看下这个集合中的另一个细节 可让这些图形符号更像是一个家庭 请看一下视频摄像头中的缺口 以及信封中的间隙 它们共享了相同的行间距

接下来让我们看一下间距

这里看上去像是这些 来自不同的地方图像符号都被缩放 以适应相同的大小 不过因为它们没有一样的行间距 其中某些就比其他的图形符号 看上去更突出 这就让它看上去令人困惑 而且它们不像是一个家庭

当我们对其进行规范化的时候 我们会创建一个更具有一致性的集合

这是之前的样子

这是规范化之后的样子 一个像是这样的细微改变 会极大地影响你应用的完善性

让我们接着介绍下摆放位置

这个例子可以很好地说明 视觉上的位置摆放 有时候被忽视了 不过这里我们是可以看出来的 我们在播放图形符号周围 加上了这个中心圆 注意这个圆是完美位于空间中心的 但是从视觉上说 它就是有点偏了 所以我们就把它向右边移了几个像素 这样我们就实现了一个更加平衡的效果

这是之前的样子

而这是改动后的样子

视觉上的位置摆放适用于 几乎所有不对称的资源 或是一边比另一边更大的资源 在本例中 这个分享图形符号 也是完美放到空间中心的 不过它看上去就是有些低了

通过将其向上移动几个像素 我们又实现了一个更好的效果

顺便说一下 你可以将这个内边距 直接固化到资源中 这样在你进行集成的时候 你就只需要将这个资源放到 空间的完美中心位置 而任何需要进行的调整 都可以通过简单的资源交换来完成

在你制作图形符号的时候

请以集合为单位进行制作

将它们在上下文环境中进行测试 而且要在设备上进行预览 而这会帮你实现这些目标

当你从零开始创造某个东西时 要找到开始的地方总是很难 可能东西太多无从下手

那么你要如何开始呢？ 让我们看一些会有所帮助的考虑因素 当设计你应用中的空间时 像是列表视图或者按钮 考虑下类型和图形符号之间的关系

如果你有个轻类型的样式 就可以让你的行间距 与此类型的权重相匹配 如果你有个重类型的样式 或者更重的 或是填充的图形符号样式 它可能会更加合适

这里是个Airbnb的例子 这里图形符号的行间距 与字体匹配得非常好 看上去他们是真的考虑到了 类型和图形符号间的关系 这看上去很不错

对于系统空间 比如Mac上的触摸栏 或是iOS中的主屏快速操作菜单 一个重要的资源就是现有系统的资源

在Airbnb的主屏快速操作菜单中 我们可以看出 他们定制图形符号与 平台共享图形符号之间的一致性

你们还会发现 这里的图形符号要更大和更重些 比起他们应用内的对应部分来说

这个例子很好地体现了 Airbnb的技术水平

目前在我们的人类界面指南中 有一些模板 来帮助你匹配视觉重量 行间距以及摆放位置 它可以帮你节约时间 符合现存的设计语言 你甚至可以直接从这些模板中导出资源 这真的很棒

我们在很短的时间内介绍了一些内容 让我们快速回顾一下 在概念化图形符号的时候 你需要简化并且从整体上进行思考

在制作图形符号的时候 以集合为单位进行制作 在上下文环境进行测试 来让它们像是一个家庭

请考虑到你图形符号的类型之间的关系

最后 就是要让你的资源适应于系统空间

我希望这些小技巧可以帮助你们 创建出更加高效 以及令人愉快的体验 请等一下 这里好像有点问题

这样看上去就好多了 非常感谢