恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
按钮组设计总结
0.0°
2017-12-15 原创文章 经验/观点 举报 11316 251 412 14

上周一个朋友问了我一个问题,按钮组排布的时候是组合在一起好还是分开好?这个问题当时就把我问倒了,因为我之前从来没有考虑过这个问题。为了回答这个问题,我对按钮组的使用场景进行了一个简单的总结,希望可以帮助到大家。

Image title


什么是按钮组?


顾名思义,按钮组就是指两个或两个以上的按钮排布在一起。为了了解按钮组的使用场景,首先我们来思考一个问题:什么时候我们会使用按钮组?


从按钮组的样式上我们可以看出常见的按钮组是供用户进行判断(两个选项)或者选择(两个以上选项)的。


判断


首先我们来说判断,就是只有两个按钮的情况。一般来说,两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击,那么我们会在样式设计上进行区分。

Image title



微信的”取消”按钮背景色选择的是灰色,而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮,进而完成登录操作,提升了操作效率。


其实可以让用户进行判断操作的组件还有开关。开关,又称switch,也是我们很常见的一个组件,表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作,例如你在iOS设置里开启了微信的“通知”功能,那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作,更像是一锤子买卖,这也是按钮组和开关的一个主要的区别。

Image title



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

Image title



线状和面状


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

Image title



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

Image title



我们再来看一个例子,喜马拉雅Fm这个界面中的“录音”按钮其实看起来特别的吃藕,因为很突兀。但是设计师的目的达到了,为了提升用户黏性,他们肯定很希望用户在喜马拉雅Fm里上传自己的录音作品,那么必须做到足够的显眼。


我们对这个界面进行高斯模糊处理,发现视觉焦点就在这个“录音”按钮上,所以“突兀”算什么?就怕你不突兀呢!

Image title


“一个”是我个人很喜欢的应用,它的界面中除了必要的配图,其余所有icon和按钮使用的都是线状元素,给用户一种非常清新淡雅的感觉,这倒也很贴合这款产品的气质。

Image title


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


选择


喝完了鸡汤,接下来我们回到正题。再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢?


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

Image title


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

Image title


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

Image title


总结


以上就是我对按钮组的使用场景做的一个总结,希望可以给大家带来一些帮助。

微信公众号:王M争

更新:2017-12-15

收藏

251人已收藏

王M争

微信公众号:王M争

  • 63

    作品

  • 9257

    粉丝

  • 78

    关注

  • 苹果 or 谷歌,到底谁的设计更好?
  • 盘点那些容易让用户上瘾的产品设计
  • iPhone如何改变手机的交互方式
  • 为什么甲方不喜欢极简主义
相关标签

    猜你喜欢

      2017-12-15 原创文章 经验/观点 举报 11316 251 412 14

      按钮组设计总结

      0.0°

      你确定要举报按钮组设计总结

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年12月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      412
      251
      14

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录