8.链接与按钮

初识

产品中随处可见的点击操作：
有的是一小行蓝色文字；
有的是一个矩形的按钮；
……
仔细看，形式很多，概况一下：文字、图标、背景色、背景边框的各种排列组合。
我们回看一下历史，或许可以更好的理解现在这些纷繁的“可点击样式”。

在古代

最最最初的互联网，访问的是ftp，与现在电脑的文件夹管理器差不多，一层层的文件夹目录，要看什么文件，就逐层的打开文件夹，最终找到那个文件。
这样很辛苦，于是发明出了一个很厉害的功能：超链接（Hyperlink），一个文字链接，可以指向任意一个文件。于是，就可以在文件之间直接的、迅速的跳转了，方便~
这种超链接，约定为一个特定的样式：蓝色文字+下划线。

另外一种可以点击的是：按钮。
代码写出来是：< button >……< /button >
中间写下这个按钮要实现的功能，比如：
搜索按钮，是将前面文本输入框里的内容提交给服务器；
发送邮件按钮，把写好的邮件发送出去；
删除按钮，把一张照片从相册里删除。
这样的可点击对象，写代码需要用< button >标签，于是成了按钮。
按钮，有系统默认的样式：矩形或圆角矩形或圆形，立体的，鼠标经过、按下、释放几种状态有对应的样式。按钮里也可以加个图标，或者只用图标。

下图是google早期的页面，可以清晰的看到链接与按钮。

在远古的时候，链接与按钮是可以区分的比较清楚。不过，后来，互联网产品发展的越来越复杂，就用乱了。

现在

现在的互联网产品中，链接与按钮的样式，并不太遵循上面所说的技术性定义，有这么几个原因：
原因一. 要表达的信息更复杂了
现在的互联网产品要传达的信息很多，信息要区分主次，才能传达的更有效，比如：当前页面上有一个超链接，是最最重要的，同时还有几个很不重要的按钮，但链接的样式怎么也不如按钮明显，按钮有立体的背景色，在页面里很抢眼。要遵守技术规范，就没法正确的传达信息主次了。
原因二. 用户压根儿没搞懂过
上面说的什么是链接，什么是按钮，用户通常搞不清楚，也没打算去搞清楚。用户只需要知道“哪里可以点击”就好了。至于有没提交数据给服务器之类的事儿，多数用户恐怕根本不知道服务器是怎么回事儿。
既然用户根本不知道这回事儿，干嘛要区分？
原因还有很多。
总之，我们现在不该再以技术性定义来区分链接与按钮。而应该混用，不向用户强调这两者的差异，只追求把“可点击”表达好就行了。
怎样才算表达的够好？

应达到的要求

要表达好，要达到什么要求？
要求一. 可识别
让用户知道这里是“可点击的”。
要实现“可识别”，遵循各操作系统的UI规范，是个捷径。一个系统建立起长期稳定的UI规范，是与用户建立起一套共通的语言，使得用户更清楚什么样的是可以点击的。设计者设计自己的产品时，遵循着系统规范来弄，就好了。
要做到“可识别”，还有个小问题：一小行可点击的文字（也就是原本的文字链接），不打算强调，不要加图标，不要背景色块，怎么表现？
从远古遗留下来的蓝色文字是一个办法，不过适用范围有限，比如：页面背景色如果是蓝色，就不适用。
加下划线是另一个办法，适用范围广，但加下划线又不是很美，现在用的也越来越少了。
下图是apple.com中的一个页面：
用了蓝色文字，为了明确，还加了右箭头。再下面更小、更次要的文字中，也有链接，也用蓝色太过抢眼，只是用了稍深色一些的灰色。鼠标移上去才会出现下划线。只从UI样式来说，用户并不能看出这是可点击的，而是要试出来。不过，还好可点击的都是网址，网址应该是可以点击的吧。
蓝色、下划线这些手段，都难免会与产品视觉效果冲突，要完全落实并不容易。在少数冲突的时候，可点击样式不能用了，我们只好这样判断：即使没有使用可点击的UI样式，但用户也能猜出来，那是可点击的，也是ok的。比如：页脚里的“联系我们”。
要求二. 典型的按钮不宜妄动
这是iOS自己产品的登录，符合iOS自家的UI规范。但这个“Sign In…”，让人一眼看上去有点儿恍惚，要迟疑一下子。
“Sign In…”是很按钮的，它就应该是个按钮，会这么想是因为用户对表单的认识。（表单是这个系列里的另外一篇。）一份表单，填好后，提交。这个提交，应该是个按钮，是这个表单的提交按钮。
这里是因为用户名、密码那两行的样式是那样，“Sign In…”要是也搞成个带圆角的矩形按钮，看上去别扭，所以用了蓝色文字链接的样式。
再加上下面还有另一行小字链接“Forgot Apple…”，这两个文字链接看上去好像倒是更接近的了，让这个“Sign In…”的不对劲儿，更甚了。
原本是文字链接的，为了强调，用按钮的样式，通常ok；原本是按钮的，用文字链接的样式，得稍小心点，尤其是这种表单提交按钮。
虽然我们不应该向用户强化链接与按钮的差别，但设计者自己还是得心里有数的。
要求三. 操作前，操作结果可预知
“这个按钮是不是只给一个图标就可以了？还是要写上文字才清楚？”这是经常会遇到的问题。
要做这个判断，我们得先确定：需要让用户清楚到什么程度。
应该尽量让用户能猜到点击后将带来什么结果，这样用户才更敢去点击。
是不是只给一个图标，用户就没法猜到后果？那也不一定。这要看产品里的上下文情景，还有用户对产品的熟悉程度。闹钟APP里，只一个“+”图标，谁都知道是添加新闹钟。