慢工出细活,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 ...
随机推荐
- 在oracle下如何创建database link全面总结
物理上存放于网络的多个ORACLE数据库,逻辑上可以看成一个单一的大型数据库,用户可以通过网络对异地数据库中的数据进行存取,而服务器之间的协同处理对于工作站用户及应用程序而言是完全透明的,开发人员无需 ...
- 基于request.getAttribute与request.getParameter的区别详解
HttpServletRequest类既有getAttribute()方法,也有getParameter()方法,这两个方法有以下区别:1.HttpServletRequest类有setAttribu ...
- Zabbix结合Grafana绘图
参考网站: https://www.jianshu.com/p/6eec985c5c94 注意事项: 1.在ganafa添加datasource的时候url写成http://10.116.33.116 ...
- spring mvc 解决json 不能转换的问题
在要转的实体上加一个 @JsonIgnoreProperties(value = { "hibernateLazyInitializer", "handler" ...
- 前台框架vue.js中怎样嵌入 Echarts 组件?
目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...
- VBA 定义能返回数组公式的自定义函数
返回一个变量大小结果数组的方法 此方法返回基于一个参数范围的值的数组.结果数组的大小具体取决于参数数组中的元素数量波动.例如对于假定您要创建一个范围中的每个值乘以 100 的函数.下面的自定义函数接受 ...
- 机器学习入门-贝叶斯中文新闻分类任务 1. .map(做标签数字替换) 2.CountVectorizer(词频向量映射) 3.TfidfVectorizer(TFDIF向量映射) 4.MultinomialNB()贝叶斯模型构建
1.map做一个标签的数字替换 2.vec = CountVectorizer(lowercase=False, max_features=4000) # 从sklean.extract_featu ...
- Zuul超时问题,微服务响应超时,zuul进行熔断
天碰到了微服务响应超时问题,而且超时时间特别短,2秒就超时,zuul就走熔断了. 我采用zuul作为网关,根据不同的访问路径进行微服务的路由,譬如有个服务是user,我访问user服务的某个接口时,该 ...
- Python Spider 抓取今日头条街拍美图
""" 抓取今日头条街拍美图 """ import os import time import requests from hashlib ...
- Vote Disk 和 OCR概述
Oracle Clusterware由2部分组成,分别是Voting Disk和 OCR. Voting Disk里面记录着节点成员的信息. 如RAC数据库中有哪些节点成员,节点增加或者删除时也同样会 ...