慢工出细活,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 ...
随机推荐
- UVA-10115
字符查找替换,WA了N次,一次只能替换一个,下一次find必须从第0个位置开始 import java.io.File; import java.io.FileNotFoundException; i ...
- centos已经安装了libestr但在安装libee时却提示未安装
在loganalyzer+rsyslog日志分析错误总结;
- margin-top和padding-top
padding- top 在原有的基础上进一步的扩张 margin - top 在原有的位置上发生上下的平移 <!DOCTYPE html> <html lang="en& ...
- 在客户端浏览器中点击下载生成excel
生成excel的样式,里面的数据已经写好,使用apache,poi来写的. 1.首先是controller /** *下载服务结构体Excel * *@return */ @RequestMappin ...
- 值得推荐的C/C++开源框架和库
值得推荐的C/C++开源框架和库 转自:http://www.cnblogs.com/lidabo/p/5514155.html - 1. Webbench Webbench是一个在Linux下 ...
- mongodb基础学习10-手动预分片
手动预分片是提前对分片创建一定数量足够使用的chunk,这样避免了IO上的压力 先对要演示的表进行分片 调用splitAt函数进行手动预分片,第一个参数指定要预分片的表,第二个参数指定分片规则,即当u ...
- Linux下基于官方源代码RPM包构建自定义MySQL RPM包
rpmbuild时不要以root用户执行! 方法一: 1.首先安装rpmbuild #yum install rpm-build gcc gcc-c++ cmake bison ncurses-dev ...
- mtr 命令详解
一般在windows 来判断网络连通性用ping 和tracert,ping的话可以来判断丢包率,tracert可以用来跟踪路由,在Linux中有一个更好的网络连通性判断工具,它可以结合ping ns ...
- UGUI 实例预制对象位置不对
public static Object Instantiate(Object original, Transform parent, bool instantiateInWorldSpace); / ...
- TCP/IP知识总结(TCP/IP协议族读书笔记三)
接下来,总结传输层的两大协议UDP和TCP. 一.UDP(用户数据报协议) 讲UDP之间,先了解两个概念:有连接和无连接. 有连接:通信之前,通信双方必须建立一条通道: 无连接:不需要建立通道,发送方 ...