一年前,Facebook点赞按钮发布更新。一年后的今天,Facebook小小的点赞按钮因为Ted刚发布的一段演讲掀起波澜。设计一个像FB点赞按钮那么小的东西很难么?Ted中Margaret Gould Steward.给出的答案是“难。”不但难,而且工作量巨大。据FB主管该项目的leader透露,光是想出一种可行的解决方案就耗费了他们280小时。

Facebook团队不可能生生浪费280小时去做无用功,于是整件事就更加耐人寻味了:除了把一个浅蓝色圆角矩形上的大拇指换成一个深蓝色圆角矩形上的“f”按钮和加粗字体“like”。他们还做了些什么呢?

第一点,尽管大拇指点赞按钮已经深入人心、人见人“赞”,是什么给了Facebook这么大的决心和勇气来放弃它呢?实际上,大拇指按钮点赞也是源自facebook的设计,这个大拇指点赞按钮一定程度上在很长时间内都在一定程度上代表着Facebook的品牌形象。

然而,facebook设计的大拇指点赞图标实际上随着facebook的壮大很快成为了行业标准。结果就是,模仿甚至直接抄袭的facebook“大拇指”点赞图标充斥在我们的日常App中。Facebook早就察觉到了这一趋势的严重性并开始策划专变。与Twitter不同,facebook的方向在于强化品牌名称而弱化“大拇指”的符号特征。不难猜想,这两件事实施起来会在设计、策划、沟通、迭代上遇到多少困难。

事实上, 点赞按钮并不像我们想象中的那么简单。所有好的按钮设计,包括facebook中的点赞按钮,都是不能与对应的辅助设计分开来看的。所谓“牵一发而动全身”,facebook官方发布的点赞按钮设计样式截图仅仅是整个设计流程中极小的部分。我们看不到的是小小的按钮设计更改的背后无数的辅助设计点需要重新调整。同时,就如Steward的演讲中提到的一样,点赞按钮的更改还设计到很多交互细节。即便如此,当所有设计工作完成后,仍需使用AxuremockplusJustinmind进行反复迭代更新。

其实这次Facebook更新的经验指出在于点赞、分享按钮的结合。要知道,每天都有220亿人会看到Facebook的点赞按钮,其中超过一半的用户会进行点击操作。点赞和分享按钮综合到同一个按钮中,意味着随着分享被激发后二者的相互促进,用户将有更多机会更广泛地传递信息。在Facebook随后的测试中,新点赞按钮的点击率稳定在旧点赞按钮的两倍以上。

顺便讲一件趣事。有报道称曾有用户建议Facebook增加“踩”的按钮,而Facebook在拒绝这一建议后同时还下线了“疑惑”按钮。扎克伯格在之后的采访中说“如果我的帖子整天被人踩,我也会产生负面情绪的,Facebook更多的提倡的是正能量的东西。”

慢工出细活,Facebook点赞按钮设计中的门道的更多相关文章

  1. 界面设计中如何增强CTA按钮召唤力?

    以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 网页和软件应用之类数字产品的有效交互系统一般是由拥有各种任务和功能的小元素构成.而为创建更加 ...

  2. UI设计中的48dp定律【转】

    有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律. 那么先说说什么是dp ?其实对于一个非技术人员要把 ...

  3. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  4. 在你设计中可能用到的20个杂志 PSD 原型

    你是否正在为您的印刷产品找一些现成的原型素材?在这里,我们收集了一组免费的杂志 PSD 素材,必将派上用场.这些原型将给你和你的客户一个先睹为快的产品,在现实生活中看起来如何.所有这些原型提供了可以免 ...

  5. AXURE在原型设计中的应用

    转: http://uedc.163.com/2248.html 前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入 ...

  6. MySQL优化技巧之四(数据库设计中的一些技巧)

    1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...

  7. 【转】Android设计中的.9.png

    来源:http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意:当使用9.png做TextView背景时,一定要设置内容区域 ...

  8. 2014年的Google I/O app设计中的材料设计-渣渣的翻译

    又是一篇翻译,用了三个多小时.http://android-developers.blogspot.co.id/2014/08/material-design-in-2014-google-io-ap ...

  9. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

随机推荐

  1. js-传送file

    这是选择文件的标签 <input type="file" class="add-image-input"> 这是js实现传输文件 var addIm ...

  2. THINKPHP3.2.3增加阿里云短信接口思路整理

    https://help.aliyun.com/document_detail/55359.html?spm=5176.product44282.4.7.O4lc1n 阿里云短信服务地址,感冒的下载看 ...

  3. SVN的使用----经历

    一,使用SVN down文件到本机 svn co path1 path2 co是checkout的简写 path1是源文件路径 path2是目标文件存放目录 比如::下面的方式是下载到当前目录. ++ ...

  4. Spring boot&Mybatis 启动报错 Failed to auto-configure a DataSource

    *************************** APPLICATION FAILED TO START *************************** Description: Fai ...

  5. bat 笔记 一

    echo 有两个参数 off 和 on 注意echo前面要加个@才生效 当 @echo off的时候就是将doc命令将前面的路径去掉,默认其实就是@echo on显示路径: 默认的状态: 输入@ech ...

  6. JSTL标签库学习记录1-c

    JSTL全称为JSP Standard Tag Library,即JSP标准标签库. 导入JSTL相关的JAR包,jstl.jar standard.jar 导入jstl标签库: <%@tagl ...

  7. python Count类(转)

    1.collections模块 collections模块自Python 2.4版本开始被引入,包含了dict.set.list.tuple以外的一些特殊的容器类型,分别是: OrderedDict类 ...

  8. python函数式编程(转)

    函数式编程是使用一系列函数去解决问题,按照一般编程思维,面对问题时我们的思考方式是“怎么干”,而函数函数式编程的思考方式是我要“干什么”. 至于函数式编程的特点暂不总结,我们直接拿例子来体会什么是函数 ...

  9. python yield 浅析-转载

    如何生成斐波那契數列 斐波那契(Fibonacci)數列是一个非常简单的递归数列,除第一个和第二个数外,任意一个数都可由前两个数相加得到.用计算机程序输出斐波那契數列的前 N 个数是一个非常简单的问题 ...

  10. 使用HTTP头去绕过WAF(bypasswaf)

    在用node http get 请求的时候,发现的 解决方案: Add headers to all Burp requests to bypass some WAF products. This e ...