一年前,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. awk(gawk)

    awk,逐行处理文本内容.Linux里的awk其实是“gawk”. 使用格式: awk [选项] '模式匹配 {命令 命令参数}' file1, file2, …… 支持的选项 说明 -f progr ...

  2. TCP keep-alive翻译

    原文链接: http://www.freesoft.org/CIE/RFC/1122/114.htmhttp://www.freesoft.org/CIE/RFC/1122/index.htm 实现T ...

  3. 自定义服务与调用--------factory

    自定义服务: angular.module('myApp').factory('UserService',['$http','$q',function ($http,$q) { // 定义一个方法工厂 ...

  4. DevExpress GridView 显示行号

    Private Sub GridView1_CustomDrawRowIndicator(sender As Object, e As RowIndicatorCustomDrawEventArgs) ...

  5. jquery ajax 赋值问题, 后面程序判断逻辑用

    添加async:false; 像 $.get() 等是没有async参数的, 所以需要用到如下 $.ajaxSetup({ async : false //这个意思是等这个ajax有了返回值后才会执行 ...

  6. WDA-FPM-4-用OVP做查询跳转到明细

    转载:https://www.cnblogs.com/sapSB/p/10100697.html   FPM四:用OVP做查询跳转到明细 前面做了查询的UIBB配置,在这边可以直接复用,查询的feed ...

  7. mongodb基础学习10-手动预分片

    手动预分片是提前对分片创建一定数量足够使用的chunk,这样避免了IO上的压力 先对要演示的表进行分片 调用splitAt函数进行手动预分片,第一个参数指定要预分片的表,第二个参数指定分片规则,即当u ...

  8. ng2-file-upload 使用记录

    最近这两周一直在修bug,修的很是痛苦,不过痛苦也是件好事,不然每天都是在做同样的事情,没有什么挑战,工作多无聊呀! 是吧. 大致说一下背景吧: 这个项目是两年前开新项目,到现在一直还在开发中,一直不 ...

  9. layoutSubviews相关总结

    ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size - (void)sizeToFit ------- - (void)layoutSubview ...

  10. go slice和数组的区别

    1.使用方式 数组和slice长的很像,操作方式也都差不多,并且slice包含了数组的基本的操作方式,如下标.range循环,还有一些如len()则是多种类型共用,所以根据操作根本搞不清数组和切片的区 ...