最专业的八方代购网站源码!

资讯热点
按钮设置使用方案设计摘要

发布时间:2022-7-2 分类: 电商动态

上周,一位朋友问了我一个问题。当按钮组被安排时,它是一个很好的组合还是一个单独的组合?这个问题当时被问到,因为我之前从未考虑过这个问题。为了回答这个问题,我简单总结了按钮组的使用方法,希望对大家有所帮助。

什么是按钮组?

顾名思义,按钮组指的是排列在一起的两个或多个按钮。为了理解按钮组的使用,我们首先考虑一个问题:我们何时使用按钮组?

从按钮组的样式中,我们可以看到公共按钮组供用户判断(两个选项)或选择(两个或更多选项)。

判断

首先,我们判断只有两个按钮。一般来说,两个按钮中的一个必须具有更高的优先级或者用户更喜欢点击,然后我们将区分样式设计。

微信”取消”按钮背景颜色为灰色,而淘宝直接让“rdquo;取消”成为一个裸文本按钮。此对比度设置允许用户快速找到“检查登录”按钮以完成登录操作并提高操作效率。

实际上,允许用户做出判断的组件具有切换功能。开关,也称为开关,也是我们的一个非常常见的组件,这意味着在两个相反的状态之间切换,主要用于指示功能的打开和关闭。功能的打开可能会导致后续操作。例如,如果您在iOS设置中启用了微信的“通知”功能,则需要进一步设置通知表单。按钮组不会出现这些后续操作,更像是锤子销售,这也是按钮组和开关之间的主要区别。

当我年轻的时候,我们家的灯开关都被拉了。拉绳开关的一个缺点是,当电源关闭时,您不知道当前灯是打开还是关闭。这很头疼。因此,必须使用开关使用户在清除操作后知道当前状态和结果。事实上,淘宝的这种转换并不是很好,因为这里的图形提示不是很清楚。

线性和平面

在上面我们提到了设计中的比较理论,这里我们不妨扩展一下。在设计按钮时,我们经常会遇到选择,线性按钮或面部按钮。事实上,线性或平面参数不仅存在于按钮中,还存在于图标,制表符和标签中。平面和线性形状代表不同的设计概念。我们都知道平面元素更有可能在界面中吸引用户的注意力,而线性元素则强调轻量级。特定于按钮,只需面部按钮比线按钮更易于点击。我们可以看一个例子:

WeChat< ;; Contacts""中的图标向背景添加颜色块,但是“发现”。 &“I”界面图标没有背景颜色块。我试图删除图标颜色块的背景,发现其视觉重量立即降低。由于地址簿界面中有用户头像,如果不添加颜色块背景,用户很难注意到这四个功能。因此块元素的使用可以提高函数的转换率。

我们来看一个例子。喜马拉雅Fm界面中的“录制”按钮实际上看起来像是一顿特别的餐,因为它非常尴尬。但是,达到了设计师的目的。为了增强用户的粘性,他们绝对希望用户可以在喜马拉雅Fm上传他们自己的录音,因此它们必须足够引人注目。

我们在这个界面上进行了高斯模糊处理,发现视觉焦点在于这个“录音”按钮,所以“它是什么?”我担心你不尴尬!

“One”是我个人喜欢的应用程序。除了必要的地图外,界面中的所有图标和按钮都是线性元素,给用户带来清新优雅的感觉。适应这个产品的气质。

对于产品而言,设计师的责任非常大,不应仅限于现在的艺术水平。从整个产品的角度来看,设计者必须准确地定位目标用户组,并根据目标用户组的偏好确定界面设计风格。在每个界面中,设计者应考虑每个功能的优先级排列。不要被打扰,你可以做的事情越多,你的替补越低,你得到的报酬就越多。

选择

喝完鸡汤后,让我们回到主题。当按钮组中有三个或更多选项时,我们该怎么办?

实际上,这个具有多个选项的按钮组样式可以看作是单选/检查功能的变体。然而,传统的单选/退房风格难以满足当前的设计需求,并且用户渴望更多新颖和多样化的按钮样式。特别是在选项太多的情况下,按钮的优点突出显示。

然后我们回到上一个问题,“当按钮组被安排时,它是一个很好的组合还是一个好组合?”对于这个问题,我想是这样的:单独的按钮样式更具适应性。你可以换行或滑动。组合按钮样式通常是完全遍历的,适合显示具有更高信息级别的功能。用一句话概括:如果选项可以在屏幕的宽度上显示,那么组合与分离之间的差异不是很大,但是一旦选项太多,用户就需要滑动并换行查看,单独的风格更适合。

单个选择/检查供用户选择。实际上,有一个类似于单选/检查的组件,即下拉列表。当选项太多时,用户可以使用下拉菜单显示和选择内容。下拉列表的优点是可以节省界面空间,但是想要查看所有选项的用户必须单击下拉列表,添加步骤以及屏蔽界面中的其他内容。因此,当您的界面元素不多时,我个人的建议是尽可能使用收音机/检查按钮。

总结

以上是我对按钮组的使用总结,希望能给大家带来一些帮助。

« 如何构建Web端设计规范文章 | 一篇文章解释了2017年APP »