转自：https://www.zhihu.com/question/21816650

泻药。这是一个好问题啊。听众虽少，也要认真把歌唱完。

扁平和非扁平的按钮有啥区别？

基本没区别。

但是，扁平化的极简设计对设计师提出了更高要求：

• 精炼内容
• 真正地思考主要任务，让用户专注于主要任务
• 重复上两点来不断迭代
• 勇敢地重新设计

其实题主提出的这个问题等于「如何设计出优秀和有效的行为召唤」。有的同学可能会觉得扁平按钮不够突出，就做不到有效的行为召唤，其实那是全局设计有问题。我所理解的「全局设计」在非扁平的界面里包含这些东西：

• 对比：颜色、大小、位置；
• 上下文：例如按钮的作用类型、使用场景；
• 文案：各种动宾短语，活动口号；或者识别度高的icon；
• 各种反馈：填写校检；悬停状态；
• 有爱
  

以上东西没做好，就算你的按钮再「拟物」，用户也没有点击欲望。

字多会闷，举些图例来说明吧：

图1：扁平 vs 非扁平 (广义上的) 图片来源：

LukeW | Designing for iOS7: Perils & Pluses

请注意：「扁平化」的 iOS 7 的键盘按钮也是有阴影的哦。

图2：扁平 vs 非扁平 (广义上的) 图片来源：同上

图3： 扁平 vs 非扁平 (广义上的)

图4：新浪微盘按钮，很好地诠释了「对比」的重要性

图5：iOS 7 绝大多数情况都具有良好的上下文，当然也专注于让用户一次只做一个任务

在有上下文关联的情况下，就算是简单的「文字链接」也会很容易被识别。当然左图的「Agree」按钮也使用了加粗的对比效果。

图6：上下文、单一任务

登录时非常美好——简单的表单，还记住我上次登录的账户名，大大的蓝色「登录」按钮。

但成功登录却给我一个「广告」页面，还要来个与任务无关的推广按钮——我用手机来登录你的网页版，还能指望我先下载你的app？流量、网速、使用环境都不帮用户考虑一下？跟新浪微盘有啥区别。

图7：吸引的文案

Mailchimp 用简单大方的产品介绍设计出良好的上下文环境，然后加上一句简单的「Sign Up free」来搞定用户。

图8：很多时候识别度高的图标能帮你节省很多空间，并能提升美观度和一致性

图9：自动校检，未填写东西就不让你点击按钮。那么明显的变化很容易吸引用户眼球，这个场景稍微复杂。

图10：不可用状态的鼠标hover反馈（Bootstrap 的 CSS 3 样式）

图11：知乎的按钮

非常低的对比，为啥？为了减少用户写作的干扰源。

图12：什么叫有爱？知乎还没支持Gif啊！！！大家自己去试试

Tumblr

最后奉上一个比较完美的按钮设计：

MapBox | Fast and beautiful maps

我要Gif！！！！

Are u watching closely?

至于扁平与拟物孰劣孰优的争论，我就不多说了，全球包括知乎都有海量的讨论。 我的理解是这样的：

趋势是视觉上越来越扁平，交互上越来越拟物。