发布时间：2020-2-27 分类： 行业资讯
按钮是UI和交互设计的基本元素。它们是用户交互和与系统通信的核心组件。它们也是图形界面中最早和最常见的交互式对象。在今天的文章中，我们将回顾按钮设计的七个基本原则，并希望它们能帮助您进行设计。
1.按钮必须看起来像一个按钮
在用户界面交互方面，用户需要知道哪些是可点击的，哪些不是。面对UI界面中的每个元素，用户需要识别和判断它们，过程越长，可用性越差。
那么，用户如何解释哪些元素是交互式的？通常，用户根据过去的经验和视觉来判断UI元素，这就是为什么需要通过适当的视觉符号（例如大小，形状，颜色，阴影等）来理解它们，以便元素看起来像按钮。视觉符号为我们提供了一个界面。
不幸的是，在许多界面中，按钮的可发现性和指示不强，这降低了交互的可能性，用户纠缠在哪些点击中，哪些不可点击。这似乎不太重要。即使视觉界面被设计得足够突出并且可用性很弱，用户也会感到沮丧并且产品将不再可用。
为了确定按钮是否可用，当用户访问桌面上的代购源码网站时，需要将光标移动到元素以检查元素的状态是否会改变，以确定它是否可被点击。移动用户遇到了麻烦。没有鼠标来执行这样的操作。可以单击该元素，只能尝试一次。没有其他更好的方法。
不要认为UI中的元素对用户来说是显而易见的。
在许多情况下，设计师会有意识地不强调某些元素的交互性，因为他们会认为这些事情是显而易见的。但这种情况并非如此。在设计UI时，您应该牢记以下几点。
作为设计人员，很容易弄清楚UI中的哪些元素是交互式的，哪些不是交互式的，但用户并不清楚。
尝试在按钮中使用熟悉的设计。
以下是大多数用户熟悉的按钮样式：
带有矩形边框的彩色按钮;带有圆角矩形边框的彩色按钮;带有色调和内容填充的按钮;鬼按钮。
在这些常见图案中，具有阴影和颜色填充的按钮对于用户来说是最清晰的，因为它在视觉上是三维的，并且用户认为这是可按压元件。 。
不要忘记留白
按钮本身的视觉属性很重要，按钮附近的白色空间同样重要，使它们更容易识别，更容易与之交互。在以下情况中，用户可能将文本内容与幻影按钮混淆。用户无法在此判断它是框元素还是按钮。
2.将按钮放在要查看的位置
用户对页面交互具有基本的感知和期望，这意味着用户基本了解按钮的位置。不要让用户到处找到按钮，最好出现在用户想要的位置。
尽可能使用传统的布局和标准的 UI 模式
所谓的传统布局是适合用户体验的布局。用户在浏览时会对这种“标准”UI布局有一个明确的期望，并且在正确的位置看到正确的按钮，整体更容易理解，自然很容易与界面交互。
要确认设计的可用性，您只需要观察用户是否会到达您希望他们通过操作到达的位置并找到需要单击的按钮。
3.该按钮应标有相应的操作
如果按钮的文本标签上的内容写得过于宽泛，或者使用了误导性内容，则可能会使用户感到困惑。每个标签上的文本标签应尽可能准确，并清楚直观地介绍其真正的功能。
用户应该知道单击按钮时会发生什么。举一个简单的例子，假设您不小心触发了删除按钮，现在您看到以下错误消息：
在这个界面中，“OK”是一个相当模糊的表达式，并没有解释按钮的作用。无论是“确定”还是“取消”，它都没有说明此操作的真正含义。特别是当删除是一种潜在的危险操作时，此操作需要更精确的表示。因此，更合适的是这个地方的两个按钮是“删除”和“取消”，并且删除应该用红色区分，以便用户知道操作的重要性或唯一性。
4.按钮应具有合理的尺寸
按钮的大小应反映此元素在屏幕上的优先级，较大的按钮应表示更重要的交互。
按钮优先级
在视觉上制作更重要的按钮以反映其重要性。始终尝试使主按钮脱颖而出，增加其尺寸，并使用高对比度颜色吸引用户的注意力。
在Dropbox界面中，设计人员使用大小和颜色之间的对比来创建优先级。
让按钮适配用户的手指
在许多应用程序中，按钮的设计太小，可能导致用户误操作。
△左：正确的按钮尺寸;右：按钮尺寸太小
麻省理工学院的一项实验室研究发现，平均指垫宽度在10到14毫米之间，指尖在8到10毫米之间，这使得10倍和10倍; 10毫米按钮尺寸合理。
5.注意按钮的顺序
按钮的顺序应反映用户和界面之间交互的性质。问问自己用户期望在屏幕上看到的订单，或者更合理的订单，然后进行相应的设计。
例如，如何放置两个按钮“上一个/下一个”？通常，“上一步”是倒带操作，应该在左侧，“下一步”是前进操作，它应该在右侧。
6.避免使用太多按钮
这是许多APP和代购源码网站上经常出现的问题。当您提供太多选择时，用户往往会感到茫然。无论是设计代购源码网站还是APP，请务必考虑最重要的操作并控制优先级和复杂性。
△按钮太多
7.为按钮交互提供视觉和音频反馈
当用户点击按钮时，他们更喜欢界面以提供适当的反馈。界面基于不同的操作提供视觉或音频反馈。当用户没有收到任何反馈时，他们可能会觉得界面没有收到他们的动作，因此反复点击以执行多个不必要的操作。
人类与物理世界互动，获得反馈，然后执行更多操作。这种机制是人类进化中形成的认知。这种反馈可以是视觉或听觉的。这些反馈告诉用户发生了什么。
对于某些操作，例如下载，不仅告诉用户他们的操作成功，而且还显示当前进度。
