发布时间:2019-3-4 分类: 电商动态
本文主要是对按钮组的使用进行简单总结,享受〜
上周,一位朋友问了我一个问题。当按钮组被安排时,它是一个很好的组合还是一个单独的组合?这个问题当时被问到,因为我之前从未考虑过这个问题。为了回答这个问题,我简单总结了按钮组的使用方法,希望对大家有所帮助。
什么是按钮组?
顾名思义,按钮组指的是排列在一起的两个或多个按钮。为了理解按钮组的使用,我们首先考虑一个问题:我们何时使用按钮组?
从按钮组的样式中,我们可以看到公共按钮组供用户判断(两个选项)或选择(两个或更多选项)。
判断
首先,我们判断只有两个按钮。一般来说,两个按钮中的一个必须具有更高的优先级或者用户更喜欢点击,然后我们将区分样式设计。
微信”取消”按钮背景颜色为灰色,而淘宝直接让“rdquo;取消”成为一个裸文本按钮。此对比度设置允许用户快速找到“检查登录”按钮以完成登录操作并提高操作效率。
实际上,允许用户做出判断的组件具有切换功能。开关,也称为开关,也是我们的一个非常常见的组件,这意味着在两个相反的状态之间切换,主要用于指示功能的打开和关闭。功能的打开可能会导致后续操作。例如,如果您在iOS设置中启用了微信的“通知”功能,则需要进一步设置通知表单。按钮组不会出现这些后续操作,更像是锤子销售,这也是按钮组和开关之间的主要区别。
当我年轻的时候,我们家的灯开关都被拉了。拉绳开关的一个缺点是,当电源关闭时,您不知道当前灯是打开还是关闭。这很头疼。因此,必须使用开关使用户在清除操作后知道当前状态和结果。事实上,淘宝的这种转换并不是很好,因为这里的图形提示不是很清楚。
线性和平面
在上面我们提到了设计中的比较理论,这里我们不妨扩展一下。在设计按钮时,我们经常会遇到选择,线性按钮或面部按钮。事实上,线性或平面参数不仅存在于按钮中,还存在于图标,制表符和标签中。平面和线性形状代表不同的设计概念。我们都知道平面元素更有可能在界面中吸引用户的注意力,而线性元素则强调轻量级。特定于按钮,只需面部按钮比线按钮更易于点击。我们可以看一个例子:
WeChat< ;; Contacts""中的图标向背景添加颜色块,但是“发现”。 &“I”界面图标没有背景颜色块。我试图删除图标颜色块的背景,发现其视觉重量立即降低。由于地址簿界面中有用户头像,如果不添加颜色块背景,用户很难注意到这四个功能。因此块元素的使用可以提高函数的转换率。
我们来看一个例子。喜马拉雅Fm界面中的“录制”按钮实际上看起来像是一顿特别的餐,因为它非常尴尬。但是,达到了设计师的目的。为了增强用户的粘性,他们绝对希望用户可以在喜马拉雅Fm上传他们自己的录音,因此它们必须足够引人注目。
我们在这个界面上进行了高斯模糊处理,发现视觉焦点在于这个“录音”按钮,所以“它是什么?”我担心你不尴尬!
“One”是我个人喜欢的应用程序。除了必要的地图外,界面中的所有图标和按钮都是线性元素,给用户带来清新优雅的感觉。适应这个产品的气质。
对于产品而言,设计师的责任非常大,不应仅限于现在的艺术水平。从整个产品的角度来看,设计者必须准确地定位目标用户组,并根据目标用户组的偏好确定界面设计风格。在每个界面中,设计者应考虑每个功能的优先级排列。不要被打扰,你可以做的事情越多,你的替补越低,你得到的报酬就越多。
选择
喝完鸡汤后,让我们回到主题。当按钮组中有三个或更多选项时,我们该怎么办?
实际上,这个具有多个选项的按钮组样式可以看作是单选/检查功能的变体。然而,传统的单选/退房风格难以满足当前的设计需求,并且用户渴望更多新颖和多样化的按钮样式。特别是在选项太多的情况下,按钮的优点突出显示。
然后我们回到上一个问题,“当按钮组被安排时,它是一个很好的组合还是一个好组合?”对于这个问题,我想是这样的:单独的按钮样式更具适应性。你可以换行或滑动。组合按钮样式通常是完全遍历的,适合显示具有更高信息级别的功能。用一句话概括:如果选项可以在屏幕的宽度上显示,那么组合与分离之间的差异不是很大,但是一旦选项太多,用户就需要滑动并换行查看,单独的风格更适合。
单个选择/检查供用户选择。实际上,有一个类似于单选/检查的组件,即下拉列表。当选项太多时,用户可以使用下拉菜单显示和选择内容。下拉列表的优点是可以节省界面空间,但是想要查看所有选项的用户必须单击下拉列表,添加步骤以及屏蔽界面中的其他内容。因此,当您的界面元素不多时,我个人的建议是尽可能使用收音机/检查按钮。
以上是我对按钮组的使用总结,希望能给大家带来一些帮助。
专栏
王M大赛(微信公众号:王M大赛),大家都是经理专栏作家,高级网络人士。
这篇文章最初发表。未经许可,禁止复制。
该地图来自unsplash,基于CC0协议