欣赏评论 · 2015.06.04

多图:Facebook视觉系统是如何养成的?

点击按钮总结全文核心内容,让你的阅读更高效率。
多图:Facebook视觉系统是如何养成的?_01

这是一篇由一位已经离职的Facebook设计师所写的,其中详尽的描述了Facebook的vi系统组建过程,看完之后,也许大家对Facebook,对vi会有更为清晰的认识。以下为正文内容:

当我2008年在Facebook工作开始,它在视觉识别(visual identity)方面已经做了不少研究了。他们选择了一种简单大胆的配色方案,运用了精心设计的简单井字标,令人庆幸的是避免了web2.0时代的流行审美。但是我相信,这其中仍然有巨大的改进机会。这样的机会与公司文化就是我为什么要在那里工作的主要原因。

有些不幸的是,在优先事项列表中,精炼更好的vi排名这件事并不高。在我们努力跟上Facebook快速增长的同时,设计师经常只是单纯的设计新产品或者提议,所以,在这种效率低下的状况之下,就导致了非常零碎的视觉效果。首次解决这个问题是在2009年,我的合作设计者Everett Katigbak和Mark Bixby加入了我在平时考虑过的Facebook文字。我通过描写Facebook的身份准则、插图准则和维基设计资源跟进了这件事。

多图:Facebook视觉系统是如何养成的?_02

2009年Everett Katigbak、Mark Bixby和我开始了对Facebook字标使用的重新思考。

多图:Facebook视觉系统是如何养成的?_03

这是我第一次尝试重绘字标

多图:Facebook视觉系统是如何养成的?_04

早期对映射Facebook品牌的尝试

多年来,我在各个版本系统上都取得了进步,当然也有过失败。我一直坚信我们的努力还不够。Facebook在我看来有悠久的历史和充满热情的员工,这些员工通常会自发的发起项目。所以在2012年,我也决心开发一个全面、统一的vi系统。

多图:Facebook视觉系统是如何养成的?_05

2012——基于听众和背景,我在考虑关于Facebook视觉景观的问题

相机APP

第一次机会是在2012年的时候,我注意到即将到来的相机APP循环像素云的版面排版,这是由Facebook内部共享的设计模拟工具完成的。产品设计师建议使用相机文字体Klavika。虽然Klavika确实不错,但我一直觉得这个字体太过僵硬了,Facebook这个品牌使用的话太过机械化了。我觉得这是一个机会,所以联系了他们,他们也迁就了我的观点,所以很快,我就开始为相机字标重绘Klavika,使得这个字体更为人性化。

多图:Facebook视觉系统是如何养成的?_07

修改过的Klavika(左) 重绘的Klavika(右)

多图:Facebook视觉系统是如何养成的?_09 多图:Facebook视觉系统是如何养成的?_11

最终版的字标

字体

尽管相机APP的成功很有限,但是对于修改后的Klavika,我们决定向Eric Olson——Klavika 的原始设计者商议,开发一个完整的字体。目前,这款字体有两种类型——普通和加粗两个版本,并且支持超过75种语言。

多图:Facebook视觉系统是如何养成的?_13 多图:Facebook视觉系统是如何养成的?_15

Facebook常规版

多图:Facebook视觉系统是如何养成的?_17

实施这款字体的版面排版

小图标

这个字体开发之后不久,我开始将这个理念灌输到了其他部分。尽管这个图标已经成为Facebook的主识标记,但大家仍然开始设法在产品中替换成新的图标。而后Facebook开始向公众提供这些修改过的标记,融进了大家的日常运用中,到最后大家发现了官方的双色设计,很多人开始修改图标。所有的这一切,正是想象造成的。

多图:Facebook视觉系统是如何养成的?_18

谷歌图片搜索中的Facebook图标

即使Facebook本身并不一致,但这样的设计不会一直那么糟糕。下面显示的是它使用的两种主要图标设计。

多图:Facebook视觉系统是如何养成的?_19

老图标

我们试图解决这个问题,创建的新图标需要足够强大和灵活,可以在任何上下文中工作。与第一个图标的设计师Aaron Sitti合作,我们的方法是重绘“f”调整比例,并删除底部的突出显示栏。所以新的图标,是一个简单的颜色标志符号。

多图:Facebook视觉系统是如何养成的?_21

新图标

多图:Facebook视觉系统是如何养成的?_23

与以前的图标相比,一个颜色标志符号的明显好处是可以作为积极或者消极的形状。

多图:Facebook视觉系统是如何养成的?_25

我与设计师Jorn van Dijk、Brandon Walkin暗示产品接口中所需的所有尺寸的图标。

多图:Facebook视觉系统是如何养成的?_27

设计新图标另一个需要重要考虑的地方是模块化边界半径的问题。只要有可能,我们愿意使用默认的半径,但是要满足某些接口或者上下文,就像IOS一样,可以理想的调整该图标的不同半径。

多图:Facebook视觉系统是如何养成的?_28

最后新图标还设计了不同的视觉造型。尽管除了边界半径之外,形状和比例不应该修改,因为该图标本身就拥有可以匹配上下文的视觉美感。这里展示的是ios 和Android的图标区别。

收藏

点击下面的图标分享到你的社交圈吧

取消

把 标志情报局 添加到主屏幕:

请点击按钮 “添加至主屏幕”,便于快速访问 标志情报局。