步步为营——记我们是如何将Facebook背后的图标设计的更美好

 

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

 

 

 

肩膀上有缺口的女性剪影

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

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

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

2

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

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

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

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

4

 

在朋友的帮助下加速设计

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

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

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

步步为营——记我们是如何将Facebook背后的图标设计的更美好

 

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

步步为营——记我们是如何将Facebook背后的图标设计的更美好

Brian Frick 的地球图标

标识很重要

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

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

原文链接:medium

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/7207/

(0)
iouedioued
上一篇 2015-08-19
下一篇 2015-08-19

相关推荐

  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 一款APP从设计稿到切图全记录

    这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用。 Part 1 项…

    2016-10-18
  • 『UI设计尺寸标准汇总』iPhone界面尺寸标准|Android界面尺寸标准|网页界面尺寸标准

    iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 147px iPhone6 plus放大版 1125×2001 px 401PPI 54px 132px 147px iPhone6 plus物理版 1080…

    2015-06-16
  • 苹果也中枪!拿什么拯救尴尬的UI界面?(一)

    你是否体验过死气沉沉的交互界面?或者你又是否曾感到自己设计的UI界面总是缺了点什么?如果你经历过上述的情况,那么你应该就体验过“尴尬”的UI界面。收下这篇全是干货的文章,拯救你的尴尬症! “尴尬”的UI界面就好…

    UI设计 2015-09-17
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • 有哪些非常有设计感的App?—国外篇

    对于一款应用的设计感,不同的人会有不同的观点,比如我们可以从以下几个维度进行比较: 界面:UI 设计精美,界面每一处细节都精雕细琢,展现了 App 的独一无二,有些即使是「无用之美」,下载了也会舍不得删掉。 …

    2015-05-18
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19
  • 沉沉的干货,必读平面设计技巧!

    在过去几年中,我们见证了软件和应用界面设计从3D及拟物化向扁平化和极简化的快速转变。尽管这一趋势现在已经无所不在,但我们不妨拿出一点时间来思考今天的结果是如何形成的,以及其对界面设计整体有着何种影响。另外,我还会和大家分享一些有关设计扁平化界面的小技巧和注意事项。

    2014-12-28
  • iOS 9设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy)…

    2016-05-18
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08