【解构ui】 按钮
最近陆陆续续的开始整理UI控件的基本使用方法，这些小小的控件是组成界面的基本元素，就像单词至于文章一样。掌握好这些基本的UI控件，才能更好的去排布它们。
控件
About Face一书中指出：控件是使用者同数字产品进行交流的屏幕对象。 它们具有自包含性。有时也被称作小部件(widget），小配件(gadget),或者小零件(gizmos),是创建典型图形用户界面的主要构造模块。
控件可以被分为四种类型：
- 命令控件(imperative control),用于启动功能。
- 选择控件(selection control),用于选择选项或数据。
- 输入控件(entry control),用于输入数据。
- 显示控件(display conrol),用于控制应用“如何”以及“在哪里”展示它自己及数据。
命令控件
命令控件产生动作，往往是立即执行的动作。
今天我们先从命令控件的最基本元素”按钮“控件开始讲起。
按钮的表现形式
按钮发展到现在同之前讲的UI整体的大趋势变化一样， 也经历了拟物时代，到现在的扁平。
3D 按钮（Three-Dimensional Button）
在相当长的一段时间内，按钮的设计都是3D 形式的，借靠着浮雕，阴影等表现形式，让人感觉这些按钮看起来也是可以按压的。
早期的这种三位凸起的表现形式在交互上很好的帮助了用户去理解屏幕，给到能否点击的势能提示。
拟物按钮（Skeuomorphic Button）
拟物的典型代表就是ios6了， 拟物的按钮看起来和真实世界里的按钮十分相像，拟物的按钮将用户在现实世界中的知识转嫁到了虚拟空间上， 更好的帮助他们使用界面。
典型的比如说ios6上的报刊杂志界面，同现实生活中的书架基本一样，符合用户的心里预期。
扁平化按钮（Flat Design Button）
ios7的到来将按钮带入了扁平化时代，按钮的拟物化的3D的表现被移除了，这些强烈的视觉提示溅落了之后， 按钮的可学性(learnabilty)也变差了。
在这种情况下， 要想要提供扁平化按钮的势能(affordance)，就一定要有比较突出的地方， 现在的扁平化的按钮通常都是矩形的（有时有圆角的），会添加颜色以表示是可点击的。
几乎扁平的按钮&悬浮按钮 (almost flat design & floating action button)
几乎扁平的按钮是在扁平按钮和3D按钮之间的一种折中表现形式，他们几乎是扁平的，但是依然会通过阴影，高亮等方式来表现其可点击性。
最典型的就是Material design
Material design里有三种按钮形式， Flat button, raised button ,以及Floating action button,重要性依次递增。
Material design中最有特色的就是FAB按键。
FAB 键在三种按钮形式中，是最突出，也是最重要的，他承载的动作应当是整个应用中最重要的并且能告知用户这个应用主要功能是什么的一个角色。 最典型的就是地图app，包括百度地图在内，一个小车子图标的fab键起到的就是指引你怎么去的作用。
Fab 按键
在这里我想专门来讨论一下悬浮按钮（下面简称Fab键）。
Fab键在Material design上是一个很好的视觉突破，在一张平淡的界面上Fab键算用户的第一视觉元素，因为Fab键从结构上来说凌驾于一切的层级上， 并且用着整个App配色中的强调色。其形状，相对于整个MD中条条框框的样式来说起到了一个打破平衡的作用。 Fab键应该是一个App上最重要的按键，承载着一个App的主要功能， 算是一个名片。
像之前我上面提到的Fab键用的最好的例子：地图，像是百度地图在ios上也一直保留着一个Fab键。它能很清晰的告诉你这个App的主要功能是什么，也能直观的通过Fab键传递出其自身的按键作用，因为Fab键上目前只允许是图标，因此图标的不言自喻很重要。
Fab键看上去真的很吸引人，让每个设计师都跃跃欲试，似乎没有Fab键的MD设计就不是MD了，总是想方设法想要给Fab键一个功能。但是不得不承认，强扭的瓜不甜，实在没有这个必要就别放Fab键了。
谷歌有提到说Fab键应当给到最关键的动作，而不要用Fab键去操作一些有破坏性的事情。但是如果不好好把控谁又知道Fab键会不会被滥用。
关于Fab键网上也有讨论它是否真的就是一个理想的按钮。
- FAB键容易影响用户的沉浸式的体验，比如我在浏览知乎的问答页面，想找一个问题进去看看，如果一直有一个提问按钮在旁边似乎一直在叫我写问题，但相信大部分的人用手机浏览知乎并不是来提问题的，而是来刷知乎的。这是Fab键就会影响到用户沉浸式的体验
-
挡住内容，由于Fab键是所有层级上最高的，并且是固定不动的，因此，在寸土寸金的手机屏幕上，用户在浏览内容的时候，Fab键容易挡住内容的显示。
- Fab键的使用频率问题。 比如说，邮件应用，Gmail用+号给到了Fab键，点击后可以展开最近联系人的邮件地址，或者创建一个新的邮件书写，但是问题是，是不是很多人都会使用到这个按键去写邮件呢，私以为，更多的情况是，我们更长在手机端的邮箱查看邮件，如要写邮件通常也都是回复，因此这个按键的意义并不大。
因此，虽然FAB 是一个视觉驱动的漂亮设计,但如果某个功能并非用户用的最多的一个，并且如果用成Fab键会影响到用户的使用体验,就没有必要一定要用上。
幽灵按钮(Ghost button)
幽灵按钮指的是只有一个简单的外框，透明的按钮。 颜色通常非黑即白，按钮比普通的按钮要大。通常放在网页的重要位置。
- 幽灵按钮很好画。只需要一个简单的框就行了。
- 幽灵按钮很好的给视觉带来一个焦点。
- 幽灵按钮给人一种更加干净简洁的感觉。 也不会遮住背景，突出整体设计
- 幽灵按钮能很好的整合到各式的设计中去。
CTA
很多网站拿幽灵按钮作为网站的主动作按钮（call to action button)。
CTA (call to action button)指的是，引导用户转化的主要动作按键。是landing page的一部分， 是你希望用户点击的按钮。
如果你要让某个按钮作为CTA就要让他们看起来很重要。
但是由于幽灵按钮的外观形式可能会同许多产品的标志撞车，这会导致用户搞不清楚哪个才是真正的按钮。
也有认为相比作为CTA，幽灵按钮会比较适合作为次按钮， 比如下面这个网站， 将重要的purchase now用传统的按钮形式表达出来， Take Tour作为次级按钮通过幽灵按钮的形式表达。
注意背景图片的使用
再比方说下面这个图片， 按键是白色的，网站底色用的图片也是白色为主的，这使得可读性变得较差。
幽灵按钮的识别性
幽灵按钮也同普通的一般按钮不大一样，用户要能识别幽灵按钮有时候会比较困难，特别是当其没有很好的排布的时候。
下面这个网站的输入框和动作按钮的表现形式几乎相同，这会让用户很难确定get access是否真的可以点击。
要注意在排版的时候适当的突出幽灵按钮，而不要让其成为真正的幽灵按钮。
幽灵按钮的变形
因为幽灵按钮都长得太像了，因此设计师也在寻求形式上突破，比如下图中，捷克语和英文切换的按键。
图标按钮 (Icon button)
通常按钮上都是文字，但是现在我们也能经常看到只有图标的按钮。 这种图标按钮在桌面端的时候，只有当光标移到它们上方的时候才显示出来。
图标按钮的缺点主要是图标的通识别性，很多人在第一次看到一个图标的时候很难辨别其含义。 不过通过工具提示，可以帮助用户解决，但这仅仅是在桌面端。 优秀的图标应该是在经过几次使用后，用户就能容易的记住。
因此现在，至少在移动端，通常会在图标的按钮上加上说明文字，给到文本和图标。 这是两者的混合。 虽然有可能牺牲屏幕的空间，但是对于新手来说，对于不常用的命令来说，这让用户更好理解。
按钮使用的最佳实践
选择按钮的时候，要考虑到你的按钮有否表达出清晰的势能(affordance)，用户会怎样理解你的按钮。
- 要让按钮看起来像一个按钮（按钮的形状）
- 让用户能容易的同按钮交互（按钮的大小）
- 按钮上的文字要告诉用户按下去后会发生什么
- 使用颜色来给到用户视觉反馈
按钮的形状
从扁平化开始按钮就几乎都是矩形的，有时候带有圆角，用户也很快的适应了， 有研究调查发现，圆角能帮助用户将视线集中到按钮上的重要信息。 当然你也可以使用其他的按钮的形状， 比如FAB的原型，但一定要思考起可用性。
按钮的大小和边距
调查显示，手指的点击范围是10-14mm,指尖的点击范围是8-10mm，因此可点击范围最好为10mm*10mm
比如说在Material design里面，最小的触控范围为48px * 48px。iPhone 上则为 44px * 44px
按钮周围的边距，让按钮同其他内容自动的分割开，信息排布更有层次。
按钮上的文字
在选择按钮上的文字的时候也要慎重，不要使用没有意义的文字， 让用户不知所以。按钮上文字要告诉用户点击了这个按钮后会发生什么。 因此最好使用动词。
按钮的颜色
按钮的颜色能顺利的引起用户的注意， 因此最喜欢用户按的按钮一定要有一定的颜色或者其他形式上的突出。 还有一些按钮的颜色比如红色，表示要删除等动作的时候，为了引起用户注意，以免误按。
按钮的四种状态
按钮在外观更上暗示用户，即它具有一些视觉受范性(visual pliancy) 。这种受范性在暗示着用户，它具备”可按压性“。
在之前，当用户鼠标单击按钮的时候，按钮在视觉上回产生一定变化，比如从凸起变成凹下去， 这表示按钮以及被激活了，这是一种动态视觉暗示。 再比如说现在的扁平按钮，点击的时候，按钮也都会有状态的变化，比如幽灵按钮，按钮框被填充色填满了。 因此一个按钮他并不是只有一种状态。
- Normal state
- Focused state
- Pressed state
- Disabled state
关于disabled state通常有这样一个争论，是将不可用的按钮隐藏起来还是，就直接放在外面。
将不可用按钮隐藏起来的好处：
- 从界面的整洁角度上讲，将不可用的按钮藏起来，只将能用的按钮放在外面会比较清晰
- 从节约界面空间上来说，隐藏不必要的按钮，能提供更多的按钮排列灵活性。
使用不可用按钮的好处：
- 让用户一目了然，知道还有哪些功能
- 按钮较为固定，用户用久了之后就能自然反应知道需要的按钮在哪。
小结
按钮是用来指引用户进行操作的，不管是什么形式的按钮，都要容易识别，清晰的告诉用户它是可点击的，并且能帮助用户找到正确的动作，完成任务。
参考文章
Button UX Design: Best Practices, Types and States
Buttons in UI Design: The Evolution of Style and Best Practices
Principles of Mobile App Design: Engage Users and Drive Conversions
Material Design:Why the Floating Action Button is bad UX design
