慢工出细活,Facebook点赞按钮设计中的门道
一年前,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的演讲中提到的一样,点赞按钮的更改还设计到很多交互细节。即便如此,当所有设计工作完成后,仍需使用Axure、mockplus、Justinmind进行反复迭代更新。
其实这次Facebook更新的经验指出在于点赞、分享按钮的结合。要知道,每天都有220亿人会看到Facebook的点赞按钮,其中超过一半的用户会进行点击操作。点赞和分享按钮综合到同一个按钮中,意味着随着分享被激发后二者的相互促进,用户将有更多机会更广泛地传递信息。在Facebook随后的测试中,新点赞按钮的点击率稳定在旧点赞按钮的两倍以上。

顺便讲一件趣事。有报道称曾有用户建议Facebook增加“踩”的按钮,而Facebook在拒绝这一建议后同时还下线了“疑惑”按钮。扎克伯格在之后的采访中说“如果我的帖子整天被人踩,我也会产生负面情绪的,Facebook更多的提倡的是正能量的东西。”
慢工出细活,Facebook点赞按钮设计中的门道的更多相关文章
- 界面设计中如何增强CTA按钮召唤力?
以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 网页和软件应用之类数字产品的有效交互系统一般是由拥有各种任务和功能的小元素构成.而为创建更加 ...
- UI设计中的48dp定律【转】
有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律. 那么先说说什么是dp ?其实对于一个非技术人员要把 ...
- 浅谈UI设计中妙用无穷的深色系背景
英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...
- 在你设计中可能用到的20个杂志 PSD 原型
你是否正在为您的印刷产品找一些现成的原型素材?在这里,我们收集了一组免费的杂志 PSD 素材,必将派上用场.这些原型将给你和你的客户一个先睹为快的产品,在现实生活中看起来如何.所有这些原型提供了可以免 ...
- AXURE在原型设计中的应用
转: http://uedc.163.com/2248.html 前言 什么是原型呢? 产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块.元素进行粗放式的排版和布局,深入 ...
- MySQL优化技巧之四(数据库设计中的一些技巧)
1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...
- 【转】Android设计中的.9.png
来源:http://isux.tencent.com/android-ui-9-png.html Android设计中的.9.png 注意:当使用9.png做TextView背景时,一定要设置内容区域 ...
- 2014年的Google I/O app设计中的材料设计-渣渣的翻译
又是一篇翻译,用了三个多小时.http://android-developers.blogspot.co.id/2014/08/material-design-in-2014-google-io-ap ...
- Web设计中打开新页面或页面跳转的方法 js跳转页面
Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...
随机推荐
- 1. Two Sum + 15. 3 Sum + 16. 3 Sum Closest + 18. 4Sum + 167. Two Sum II - Input array is sorted + 454. 4Sum II + 653. Two Sum IV - Input is a BST
▶ 问题:给定一个数组 nums 及一个目标值 target,求数组中是否存在 n 项的和恰好等于目标值 ▶ 第 1题,n = 2,要求返回解 ● 代码,160 ms,穷举法,时间复杂度 O(n2), ...
- jpa-spring -basic
applicationContent.xml <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- J2SE 8的Lambda --- functions
functions //1. Runnable 输入参数:无 返回类型void new Thread(() -> System.out.println("In Java8!" ...
- Spring boot @ConfigurationProperties 和@Value
@ConfigurationProperties @Value 功能 批量注入配置文件中的属性 一个个指定 松散绑定(松散语法) 支持 不支持 SpEL 不支持 支持 JSR303数据校验 支持 ...
- gradle问题 cordova
cordova升级7.0后,运行 > ionic build android 或者 cordova build android 报出错误 Error: Could not find a ...
- UI5-文档-4.37-Content Density
在本演练教程的这一步中,我们将根据用户的设备调整内容密度.SAPUI5包含不同的内容密度,允许您为支持触摸的设备显示更大的控件,为鼠标操作的设备显示更小.更紧凑的设计.在我们的app中,我们将检测设备 ...
- js脚本代码调试小技巧
以前写js代码调试代码查看数据是否正确的时候不知道F12(开发者工具),都是alert(xxx)或者console.log(xxx), 现在知道还可以用document.write或者try...ca ...
- 代码报错记录-MAVEN-2
报错: 编译错误,程序包org.junit找不到 原因: 这个是父项目,报错是在子项目中,子项目使用了父项目的junit包,由于scope是test,导致子项目在编译时找不到junit, 修改: 将父 ...
- object-c语法
Objective-C:C的超集 Objective-Objective-C是C语言的严格超集--任何C语言程序不经修改就可以直接通过Objective-C编译器,在Objective-C中使用C语言 ...
- delphi 颜色转换函数总结
unit UColor; interface uses windows, sysutils, classes, graphics; function HexToInt(Hexa: String): L ...