Facebook好友图标的设计改版背后的故事

叔亅

叔亅

2016-02-16 20:10

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享Facebook好友图标的设计改版背后的故事教程,希望对大家能有一点小小的帮助。

Facebook 总部是一个神奇的地方,小吃是免费的,阳光永远明媚,每个人都满脑子好点子。来这里的第一周,我碰到的每一个人都努力让这个世界更美好。同时,我也预见到了,自己将会无比轻松得适应并融入这样的日常,但是这样被带着走也容易让人迷失。所以,我时刻提醒自己不忘最初的想法,并且在我的办公桌前贴上海报,上面写着保持谦逊。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

肩膀上有缺口的女性剪影

可是,在我开始担任Facebook设计师的职务不久,令我沮丧的情况出现了,我发现公司的形象套件并不令人满意,甚至可以说令人苦恼。在这个Photoshop文档中,代表好友的两个矢量人物剪影构成的图标,让我抓狂。其中代表男性的剪影,除了发型部分,整体是对称的,但是代表女性的那个剪影不仅在整体上不对称,甚至在肩膀位置上多了一个缺口。经过仔细观察之后,我确信这个缺口的位置正好是朋友图标中男性剪影处于女性前方时,两者交接的位置。对于这个设计缺陷我并没有什么恶意,但是在我看来女性理应拥有完整而强健的肩膀,这里缺口的存在确实欠考虑。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

我将我的质疑同另外一位女设计师分享了,她指着我的海报对我说,在Facebook碰到问题我们每个人都有责任解决。这个女性图标需要一个完整的肩膀,所以我理应为她完善然后我在接下来很长的一段时间里面陷入了图标设计的大坑当中。

为了对称,我将她肩膀上的缺口补上了,但是作为一个形象剪影,她的头发太像《星球大战》中黑武士的头盔了,所以发型还需要进行一些调整。马尾辫足够现代,也非常女性化,看起来会给人年轻的感觉,但是在32像素的宽度之下,马尾辫的效果看起来像是某种啮齿动物。如果改成长发披肩或者其他的造型,在如此低的分辨率之下也难以准确表达、消除歧义。所以,最终我使用了一个更加爽利精致的短发形象。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

更新完女性剪影之后,问题来了:旧的男性剪影似乎也有些僵硬而过时。于是,我调整了男性剪影的发型,令其更加平滑,让肩膀的弧度更大。在更新这个图标设计的时候,我发现Facebook的常常会用男性单人图标来表示添加好友。这样的设定似乎并不公平,或者说是不准确,难道所有的朋友请求都应该用男性标识来传达么?唯一的性别图标是不恰当的,所以我准备了一组。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

基本形象确定之后,我开始调整女性剪影的大小和顺序。作为一个曾经就读于女子学院的女性,我很难忽略图标中所代表的性别意义,这也是为什么我会对图标中男性和女性的位置是如此的敏感。女性必须一直处于男性的阴影中么?

我最初的想法,是让图标中的男性和女性的大小一样,相同的大小就意味着两者不会同大小来暗示前后位置和距离远近,不过迭代十几次之后,我放弃了这个设计,因为真的很难让这个图标看起来不像一个双头怪最后,我让女性剪影的尺寸稍小了一点,置于男性剪影的前方,这样看起来好多了。

而早的群图标使用的是两个男性剪影和一个女性剪影构成的,女性剪影置于较大男性剪影的左后方。而新的图标我选择了使用三个不同的图标来展示,同样的我将唯一的女性图标放大置于中央。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

在朋友的帮助下加速设计

我不知道我作出的这套新版的图标有没有打破团队中的某些规则,也不知道会不会收到同事们质问的短信,或者被冠以破坏原有设计之类的罪名,因此内心一直非常忐忑。相反,实际的状况是,新的设计并没有被否定,反而很快被大家认可,并应用到公司的新产品以及更多的平台之上。

前端工程师 Matt Sain 将新的男性和女性图标引入到桌面端网页中去,悄无声息地将新设计传播到全世界。产品经理Lexi Ross 为了将新的男性和女性图标添加到性别选项的配置文件中,还为此专门砍掉了几个原有的需求。负责管理图标的设计师Brian Frick,在6个月之前更新过图标系统,而这次为了我这个非正式新人的图标而专门更新了图标系统。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

这是Brian Frick调整过后的好友图标

后来我才知道,这样的私自发起的项目在Facebook中并非唯一。去年,设计师Julyanne Liang 曾与工程师 Brian Jew 一起为非美洲的用户更新了通知图标,让这些占据半个地球的用户定制了属于他们的图标。比如亚洲的用户的通知图标中,地球的中心位置是亚洲。

Facebook好友图标的设计改版背后的故事,PS教程,图老师教程网

Brian Frick 的地球图标

标识很重要

项目结束之后,我对于标识和符号更加重视了。我开始试着重新审视所有的图标,尤其是那些我们感觉无比熟悉的图标。举个例子,用公文包来代表工作是否真的是最好的标识?带着公文包上班是哪个时代的事情?有没有其他的标识能更好地代表工作,并且能让这个时代的人得到共鸣?

从我第一天来这里碰到的每个人的初衷和好意是如此的真实,我们都在竭尽全力让Facebook更好,营造更好的企业文化,而不是抱怨,构建一个能够真正传播每个人真实想法和优秀创意的平台,从最小的图标到设计思想都能在这里实现。这些几乎不会被大众在意的项目,不止是设计本身那么简单,许多都承载着设计师的理念和想法,它们隐秘,但是伟大。

展开更多 50%)
分享

猜你喜欢

Facebook好友图标的设计改版背后的故事

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Facebook好友图标的设计改版背后的故事

浅谈Facebook新用户引导背后的设计思路

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈Facebook新用户引导背后的设计思路

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

App图标的设计要求

设计
App图标的设计要求

如何设计图标 设计图标的步骤

设计
如何设计图标 设计图标的步骤

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网页设计:程序图标的设计思路

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计:程序图标的设计思路

QQ爱心图标的设计过程

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
QQ爱心图标的设计过程

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

精选国外复古效果的平面设计欣赏

精选国外复古效果的平面设计欣赏

精选国外创意排版艺术设计欣赏

精选国外创意排版艺术设计欣赏
下拉加载更多内容 ↓