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

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


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


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


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


  早期对映射Facebook品牌的尝试

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


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

  相机APP

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


  修改过的Klavika


  重绘的Klavika


  最终版的字标

  字体

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


  Facebook常规版


  实施这款字体的版面排版

  小图标

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


  谷歌图片搜索中的Facebook图标

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


  老图标

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


  新图标

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


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


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


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


  所有这一切的修改是为了让他们可以纳入更多的内容,下面是一些版面排版将纳入的新图标。


  之前的iphoto


  之后的iphoto


  之前的windows8


  之后的windows8


  之前的INS


  之后的INS

  子品牌

  做完字体和新图标的发展,就可以为子品牌制定标准和创建新模板了。一个子品牌只是服务于任何从属的产品、服务、团队、小组、页面等。多年来,每一个子品牌的设计者都一遍又一遍的解决相同的问题。这不仅会造成一个非常混乱的视觉设计,也会使得设计师的工作变得十分低效。


  一个Facebook现有子品牌的vi样本

  我对着整个系统的看法可以归纳为不规则的,我们在尝试尽可能创建一个灵活实用的系统。其中一条必须的规则就是永远不会再将这个图标纳入一个子品牌成为一个新标志,这是很虚伪的做法,新标志需要转过身来自己做。


  考虑到这一点,Jorn van Dijk和我开始创建子品牌的新图标。虽然是一个颜色标志符号,但它所需的每个图标也可以在全彩的插图版中呈现。


  经过详尽的调查现有Facebook的分品牌,我试图去创建一个子品牌,不会试图去做限制性很强的品牌。


  这些子品牌公开露面的场所之一是在Facebook的页面上,所以我们要更新系统页内的图标。所以这些简单的单色字形必须适应产品界面的大小。

时间: 2025-01-21 20:12:54

Facebook的视觉系统是如何养成的?的相关文章

亚马逊斥巨资建立在德第四个研发中心,专注人工智能视觉系统

亚马逊今日宣布,将在德国图宾根大学城(university city of Tuebingen)设立一座人工智能研究中心.亚马逊表示,未来五年该研究中心将创造约100个工作岗位.该研究中心是继柏林.德累斯顿和亚琛之后,亚马逊在德国的第四个研究中心,将专注人工智能,提升客户体验,尤其是视觉系统方面的用户体验. 亚马逊的柏林研究中心最初是一个客户服务中心,但自2013年以来,它还包括开发亚马逊云业务(包括管理程序.操作系统.管理工具和自我学习技术).德累斯顿中心是内核和操作系统团队,内核和操作系统在

BBC网站设计中的新网站视觉系统

BBC 日前在Blog 上展示了他们正在设计中的新网站视觉系统,他们称之为视觉语言Visual Language,旨在统一BBC 各个网页的设计风格.目前BBC 网站便用的视觉系统是两年前设计的,该套设计标准规范可在此中寻. 新网站设计想传递「现代英国.时事.强势.独特.领先.综合.优秀」等感觉.同时为了适应越来越流行的阔萤幕浏览,设计团队还重新设计了一套新的网格系统(grid system) 及网页模版. 当然还少不了字款.颜色选用的规范.总体来说没有太大改变.将在今年逐渐应用到bbc 各个网

工业机器人视觉系统该如何选择?

近年来,机器人尤其是工业机器人的迅猛发展,带动了机器视觉市场需求的大幅增长.在2016年5月份的世界机器人大会新闻发布会上,信工部副部长毛伟明透露,把智能制造作为该部门今后的重点工作,制定我国工业机器人产业的"十三五"规划,争取更多政策支持机器人关键部件的研发生产和推广.当前的以高端装备制造为核心的智造工业4.0时代背景下,随着中国制造2025战略的深入,工业智能机器人产业市场呈现爆炸式增长势头,而充当工业机器人"火眼金睛"角色的机器视觉功不可没. 机器视觉技术.j

最激动人心的视觉系统其实是最枯燥乏味的

本文讲的是最激动人心的视觉系统其实是最枯燥乏味的, 原文地址:The Most Exciting Design Systems Are Boring 原文作者:JOSH CLARK 译文出自:掘金翻译计划 译者:Nicolas(Yifei) Li 校对者:SareaYu, yzgyyang 最激动人心的视觉系统其实是最枯燥乏味的 让我们欢迎中性和舒适的视觉系统 我们正在构建另一个企业级视觉系统,并且我们极力把它变得枯燥. Brad Frost, Dan Mall 和我刚刚开始帮助一家大型企业在他

浅析嵌入式视觉系统处理器的类别选择

"嵌入式视觉"这一名词是指在嵌入式系统中使用计算机视觉技术."嵌入式视觉"是指从视觉输入中提取出其背后含义的嵌入式系统.与过去10年中无线通信技术的流行相类似,嵌入式视觉技术有望在今后10年得到广泛应用. 高端工业相机22.jpg 视觉算法与应用大大地延伸了处理器性能要求的范围.一般来说,虽然以运算能力的观点而言,处理器的性能至关重要.但当你跨越学术研究到实际系统的鸿沟,采用先进演算法以即时执行视频输入时,却不可避免地会消耗掉许多的处理功率.在许多嵌入式系统中,设计

FOTRIC列车行驶热像仪辅助视觉系统巧解列车夜间行驶难题

列车行驶中常常遇到无法预料的危险与突发状况,降低安全事故率是列车运营中长期关注的问题. 以夜间行车为例,规避行车危险需要驾驶员在意外发生前,提前预知到前方有突发状况.但是,现在常用的列车车头照明大灯,照射距离通常只有100多米,然而列车刹车的制动距离至少需要200米.这就意味着,即使驾驶员在大灯照射到100米开外障碍物的第一时间立即刹车,也已经无法避免危险的发生了. 因此,如果要减少夜间行车的安全隐患,列车的夜视设备是关键.传统列车搭载的夜视设备大致可分为两类,其一是照明大灯,其二是红外激光夜视

Facebook升级广告系统:信息流插入广告更精准

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 升级后,Facebook可将精准广告投放到用户的"动态汇总"信息流中 北京时间3月27日早间消息,Facebook周二宣布,将允许广告主根据用户的网络浏览历史,将精准广告投放到用户的"动态汇总"(News Feed)信息流中. 这个名为Facebook Exchange的精准广告系统可以根据用户过往的上

《制造业中的机器人、自动化和系统集成》—— 3.2 视觉系统

本节书摘来自华章出版社<制造业中的机器人.自动化和系统集成>一书中的第3章,第3.2节,作者[英] 麦克·威尔逊(Mike Wilson),更多章节内容可以访问"华章计算机"公众号查看. 3.2 视觉系统 机器视觉基本上是利用光学的.非接触式的传感器来自动地接收和解释一个真实场景的图像,以便获得信息来控制机器或工艺流程.视觉系统可以独立地应用,比如作为检测工具或者自动控制系统中的一个部件.最初的视觉系统与其他大多数自动控制设备一样,昂贵且难以使用.近几年,它们的成本大大降低

视觉系统中的按钮

本文讲的是视觉系统中的按钮, 建立一个长远的视觉系统的12点建议 我爱按钮们.我可以用按钮做很多事:进行下一步,做出决定,或者完成事务.有了按钮,交互变得焕发生机. 这就是为什么按钮们是一个设计系统里最重要的组成部分.非常简单,它们在指定的区域提供可以点击的简单标签.因此,按钮是你应用一种设计语言的基本特征的重要方式,之后你可以把特征扩展到其他更复杂的部分上. 这篇文章讲的是我在一个新生系统中着手设计主要按钮.次要按钮.以及一大堆其他类型按钮的时候所学习到的 12 条经验. 主要按钮 #1. 设