按钮组学习经验

         引言：今天是2017年12月21号，距离26岁只剩下2天了。感觉自己这么多年来，一直做事不认真，爱偷懒 ，爱睡觉等等...一事无成，今天突然想到要把自己学到的东西做整理，方便记忆。so，就以这个文章作为学习的开始吧。加油！

按钮组定义：

顾名思义，按钮+组，即为，两个或上个以上的按钮。

按钮排列例子

判断优先级：

当出现两个或两个以上的按钮时，一般会有优先级的分别。即拥有更高的优先级或产品更期望用户点击，这是我们就要做按钮样式进行区分设计。

按钮组中按钮的优先级 

微信的“”取消按钮是一个灰色底+灰.1描边样式，而淘宝是一个直接“取消”文字按钮，快和背景融合在一起了，识别度极地。这样做的目的跟他们的app所属类型有关，微信是-社交类，淘宝是-电商。这样的对比设置可以让用户很快找到“确认登陆”按钮，完成登陆操作，提高了操作效率。

其实可以让用户进行判断操作的组建还有开关，英文名：switch，也是我们很常见的一个组件，表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作，例如你在iOS设置里开启了微信的“通知”功能，那么你就需要对通知形式进行进一步的设置。

淘宝的switch设计

线状和面状

在上面我们提到了设计中的一个对比理论，这里我们不妨来进行一个拓展。我们在设计按钮的时候，经常会面临着抉择，线状按钮还是面状按钮？其实线状还是面状争论不仅仅存在于按钮，还有icon，tab和标签等样式。面状和线状代表不同的设计理念，我们都知道面状元素在界面中更容易吸引用户的注意力，而线状元素强调的是轻量化。具体到按钮，简单来说就是面状按钮比线状按钮具有更强的可点击性。我们可以来看一个例子：

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

对于一款产品来说，设计师的职责是非常大的，不应该像现在这样仅限于美工层面。从整个产品的角度来说，设计师要准确的定位目标用户群，根据目标用户群的喜好来确定界面设计风格，具体到每个界面中设计师要考虑各个功能的优先级排布。不要怕麻烦，你能做的事情越多，你的“可替代性”就越低，所得的报酬就会越多。

选择

再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢？

其实这种出现多个选项的按钮组样式我们可以看成是单选/复选功能的一个变形。只不过现在传统的单选/复选的样式很难满足当前的设计需要，用户渴望更加新颖多变的按钮样式。特别是选项过多的情况下，按钮的优势就凸显出来了。

“按钮组排布的时候是组合在一起好还是分开好？”对于这个问题，我是这么认为的：分开的按钮样式具有更强的适应性，可以换行，也可以滑动。组合按钮样式一般都要全贯通，适合展示信息层级较高的功能。总结成一句话：如果选项在一屏的宽度中可以展示完全，那么组合在一起和分开的区别并不是很大，但是一旦选项过多需要用户滑动和换行才能浏览完的时候，分开的样式更加适合。

单选/复选都是供用户进行选择操作，其实还有一个组件跟单选/复选很相似，那就是下拉列表。当选项过多时，用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间，但是用户想要看到全部的选项必须要点击出下拉列表，增加了操作步骤，而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下，我的个人建议是尽量使用单选/复选按钮。