分享、上传分不清?谈图示设计哲学

分享、上传分不清?谈图示设计哲学
分享、上传分不清?谈图示设计哲学
 图片来源:alexkingorg
分享、上传分不清?谈图示设计哲学

您知道以上这些图示有什幺共通点吗?它们全部都试图传达一个相同的动作──分享!时至今日,将内容或连结分享至社群网路或电子邮件联络人是一个非常普遍的动作,然而应该用什幺符号来设计分享图示,设计师们仍旧没有达成共识。问题不仅在于各大平台的分享图示不一致,此外它的设计也随着时间演进成各种版本。

我花了一些时间思索这个问题,试图找出最适合代表分享的符号。

上传──iOS 7
分享、上传分不清?谈图示设计哲学
iOS 7 的分享图示。

我第一次见到这个图示是在 2013 年苹果发表 iOS 7 的 WWDC 大会上。那时,我立即仿照 重新作了一个分享图示 ,希望看看有没有人和我一样,不喜欢这个新图示。

分享、上传分不清?谈图示设计哲学

这个图示的主要问题是它看起来太像「上传」了。若把这个分享图示放在下载图示旁边,马上就发现 iOS 7 分享图示非常容易让人混淆。那向上指的箭头,完全就是下载图示的箭头反方向,人们自然容易推论这个图示代表相反的意义:上传。

箭头向外指的托盘──Pre-iOS 7
分享、上传分不清?谈图示设计哲学

iOS 7 诞生以前,此款「箭头向外指的托盘」的图示被使用了许多年,现在 Mac OS X Mavericks 仍旧使用这个图示。整体而言,它是一个设计得很好的图示。箭头从托盘里头向外指,隐喻分享的意义。从第一支 iPhone 诞生,就使用这个符号,人们对它的熟悉感渐增。

三个圆点──Android 分享符号

Android 分享图示简单地由三个点和连结它们的直线组和而成。为开发者设计的分享外挂程式 ShareThis 也使用同样的符号作为图示,它看起来像是有许多节点的图形,而这些节点又由顶点连结他们。第一眼它似乎没有传达什幺意义,但若是要大胆猜测,设计师试图呈现左边的节点传散出去,变成右边的点。总的来说,这个图示所隐含的意义不是直觉性的,使用者能够看懂单纯是因为他们使用后学习的结果。我怀疑只有苹果使用者,才会有辨识这个符号的困难。

分享、上传分不清?谈图示设计哲学
从 Google 搜寻分享图示, 前 10 名图示就有 7 个是以三个点构成的,可见 Android 分享图示的影响力。
Y──旧版 Android

在 Android 作业系统 Honeycomb 前的版本,在各式各样的 Android 装置都使用 Y 型的图示,儘管现在这个图示不是很普遍,但我依然非常喜欢这个图示,因为箭头代表者向外传散的意思,跟分享的行为很像,而且它具有垂直对称的特色。单纯根据它的形状以及所要传达的意义,我认为它是设计得最好的图示。

分享、上传分不清?谈图示设计哲学
最左边的是原始的分享图示。也有一些衍生出来的变体。
圆圈──Windows 8
分享、上传分不清?谈图示设计哲学
圆圈型分享图示在 Windows 8 的常用工具列里头。

Windows 8 分享符号,与 Ubuntu 的 logo 很像,在作业系统、Windows Phone 等装置都很普遍。圆圈型的分享符号是另一个完全抽象的符号,没有任何实质性的意义。若没有底下的文字,第一次使用的人可能有会辨识困难的问题。

礼物──Windows Phone 7
分享、上传分不清?谈图示设计哲学

Windows Phone 7 的分享图示是一个礼物的图案,属分享图示中相当有趣的特例。礼物图案背后的概念显而易见──代表着分享给他人的一个礼物。然而,此符号的问题是:人们不是真的「分享」礼物,而是「送」礼物。

礼物这个图示很有趣,让人眼睛为之一亮,但对使用者来说太过陌生了。当使用者第一次看到它的时候,没有任何线索告诉使用者它到底是做什幺用的。这个符号只用了短短一年半就被汰换掉,Windows 8 即採用新的分享图示。

手──开源分享图示
分享、上传分不清?谈图示设计哲学

Shareaholic 试图创造国际设计师通用的分享符号,因此 Open Share Icon 的设计概念:

整体而言,这是一个有趣的概念与点子。儘管它的设计很明显,但大多数的使用者不会一眼就辨识出「手」的形状。如果手不是立刻就分辨出来,那幺图示就失去原本的意义了。不幸地,Open Share Icon 没有流行起来,网站也很少使用。

---

由于不同平台上有许多不同版本的分享图示,许多设计师试图创造一个「国际通用」的分享符号。以下是我发现的其他图示:

散布
分享、上传分不清?谈图示设计哲学
某些设计师使用「散布」的概念来代表分享,它可以把分享所带来的网路效果网路描述地很好,但我发现此符号太过拥挤、杂乱,不是一个好的分享图示。
图表
分享、上传分不清?谈图示设计哲学

某些分享图示由几个大小不同的原点和线组合而成,这些图示看起来很像图表。可以很好地描绘出人际之间的连结感,但它们并无很好地呈现「分享」这件事。
张开的手掌
分享、上传分不清?谈图示设计哲学
许多年前,张开手的符号被用来象徵分享的网路资料夹。某些老旧的企业软体依然使用张开手的符号作为分享的动作,然而这种分享到本地区域网路的行为,和分享到社群平台的动作不同。
许多人
分享、上传分不清?谈图示设计哲学

许多人的符号通常都指的是分享给合作伙伴或团队成员的行为。我从来没有看见它用于社群平台的分享行为。

奶昔!

有时候,解决设计问题最棒的方式就是询问非设计师的人。在这个议题上,我询问我那不是设计师的室友:

他马上画下一杯有两只吸管的饮料,随后解释他画的是奶昔:

分享、上传分不清?谈图示设计哲学
我朋友的速写。

奶昔图示是一个非常有趣的点子。把分享的行为描绘地非常好。然而,这个符号有两个问题,把奶昔放在其他我们常用的符号里头有点突兀。更重要的是,这个符号似乎传达一个非常具体的概念,意即,两个人之间分享同样的事物。然而,在我们讨论的分享情境中,它几乎是把点子分享到其他 许多 的平台。

分享、上传分不清?谈图示设计哲学
我一时兴起画的奶昔向量图。
所有分享的图示
分享、上传分不清?谈图示设计哲学
本文讨论过的所有图示一览表。
您应该使用哪一个图示呢?

我们不太可能看到所有图示统一的结果,因为苹果不会开始採用 Android 的设计语言,Google 不会开始实行微软的设计,而微软也不会想使用其他平台的分享图示。由于这三大操作系统的公司个别都拥有很大的市占率,使用者至少会遇到代表同一个动作的三种不同图示。

最棒的图示不是最简单的那个,也不是最有道理的那个;最棒的图示是大多数使用者已经熟悉的那个。有效的图示是让使用者不必费力就能理解。

若您开发的平台是 iOS 7,您应该使用 iOS 7 既有的分享图示,也就是前述所提及的「上传」图示。同样地,若您开发 Android app,那幺您就该使用「三个圆点」。

如果我想要在所有平台上都用统一的符号呢?

若您想要为 app 或网站选择一个跨平台统一的分享图示,那幺「箭头向外指的托盘」与「三个圆点」图示会是最好的方案,因为它们是目前辨识度最好的图示。不过,这两者我更推荐「箭头向外指的托盘」图示,因为对某些不曾使用过苹果产品的人来说,他们也能轻易地辨识图示的意义。相对而言,「三个圆点」图示比较抽象。

一年内,iOS 7 的「上传」图示与 Windows 8 的「圆圈」图示的辨识度很可能会变得更高。

基本概念

若排除使用者熟悉度与图示被 app 採用的热门程度,单纯就设计来看的话,我会选择「Y」图示,因为这个图示是最不抽象也是最直接代表分享动作的图示。它的设计辨识度很高,而且也具备垂直对称的特色。不过很遗憾地,它没有被广为使用。

---

今日我依然使用「箭头向外的托盘」作为我预设的分享图示。

若您是 App、网站的设计与开发者,您使用什幺样的分享图示呢?欢迎与我们分享。