火星网校
UI设计:按钮组设计总结
发布时间：2024-04-03 15:28:09 浏览量：113次
上周一个朋友问了我一个问题，按钮组排布的时候是组合在一起好还是分开好。这个问题当时就把我问倒了，因为我之前从来没有考虑过这个问题。为了回答这个问题，我对按钮组的使用场景进行了一个简单的总结，希望可以帮助到大家。
什么是按钮组？
判断
首先我们来说判断，就是只有两个按钮的情况。一般来说，两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击，那么我们会在样式设计上进行区分。
小时候，我们家的灯开关都是拉绳的。拉绳的开关有一个缺点就是停电的时候，你不知道当前的灯是开还是关，这个就很头疼。所以开关要用好必须要让用户明确自己当前所处的状态以及清楚操作后的结果。其实淘宝的这个switch用的并不是很好，因为这里的图形暗示并不是很清晰。
线状和面状
微信里“通讯录”里的icon加了一个色块做背景，但是“发现”和“我”界面中的icon都没有加色块做背景。我尝试着把icon的色块背景给去掉，发现它的视觉权重立马降了一档。因为通讯录这个界面中有用户头像，如果不加色块背景，用户很难注意到这四个功能。所以说块状元素的使用可以提升功能的转化率。
“一个”是我个人很喜欢的应用，它的界面中除了必要的配图，其余所有icon和按钮使用的都是线状元素，给用户一种非常清新淡雅的感觉，这倒也很贴合这款产品的气质。
对于一款产品来说，设计师的职责是非常大的，不应该像现在这样仅限于美工层面。从整个产品的角度来说，设计师要准确的定位目标用户群，根据目标用户群的喜好来确定界面设计风格，具体到每个界面中设计师要考虑各个功能的优先级排布。不要怕麻烦，你能做的事情越多，你的“可替代性”就越低，所得的报酬就会越多。
选择
喝完了鸡汤，接下来我们回到正题。再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢？
其实这种出现多个选项的按钮组样式我们可以看成是单选/复选功能的一个变形。只不过现在传统的单选/复选的样式很难满足当前的设计需要，用户渴望更加新颖多变的按钮样式。特别是选项过多的情况下，按钮的优势就凸显出来了。
那么我们再回到之前的那个问题，“按钮组排布的时候是组合在一起好还是分开好？”对于这个问题，我是这么认为的：分开的按钮样式具有更强的适应性，可以换行，也可以滑动。组合按钮样式一般都要全贯通，适合展示信息层级较高的功能。总结成一句话：如果选项在一屏的宽度中可以展示完全，那么组合在一起和分开的区别并不是很大，但是一旦选项过多需要用户滑动和换行才能浏览完的时候，分开的样式更加适合。
单选/复选都是供用户进行选择操作，其实还有一个组件跟单选/复选很相似，那就是下拉列表。当选项过多时，用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间，但是用户想要看到全部的选项必须要点击出下拉列表，增加了操作步骤，而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下，我的个人建议是尽量使用单选/复选按钮。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
