想设计按钮？先来看这份超全面的按钮使用场景总结

微交互 · 公众号 · 设计 · 2017-12-12 08:41

正文

小时候，我们家的灯开关都是拉绳的。拉绳的开关有一个缺点就是停电的时候，你不知道当前的灯是开还是关，这个就很头疼。所以开关要用好，必须要让用户明确自己当前所处的状态以及清楚操作后的结果。其实淘宝的这个switch用的并不是很好，因为这里的图形暗示并不是很清晰。

在上面我们提到了设计中的一个对比理论，这里我们不妨来进行一个拓展。我们在设计按钮的时候，经常会面临着抉择，线状按钮还是面状按钮？

其实线状还是面状争论不仅仅存在于按钮，还有icon，tab和标签等样式。面状和线状代表不同的设计理念，我们都知道面状元素在界面中更容易吸引用户的注意力，而线状元素强调的是轻量化。具体到按钮，简单来说就是面状按钮比线状按钮具有更强的可点击性。我们可以来看一个例子：

微信里「通讯录」里的icon加了一个色块做背景，但是「发现」和「我」界面中的icon都没有加色块做背景。我尝试着把icon的色块背景给去掉，发现它的视觉权重立马降了一档。因为通讯录这个界面中有用户头像，如果不加色块背景，用户很难注意到这四个功能。所以说块状元素的使用可以提升功能的转化率。