UI和交互设计的时候帮到你，你准备好了吗？

　　UI和交互设计的时候帮到你，你准备好了吗？

　　按钮是UI和交互设计的基本元素。当用户交互时，它们是与系统通信的核心组件。它们也是图形界面中最早，最常见的交互式对象。在今天的文章中，我们将回顾按钮设计的7条基本原则，并希望它们可以为您提供帮助。

　　

　　1.按钮必须看起来像按钮

　　在涉及用户界面交互时，用户需要知道哪些是可单击的，哪些不是可单击的。面对UI界面中的每个元素，用户都需要对其进行区分和判断，并且过程越长，可用性就越差。

　　那么，用户如何确定哪个元素是交互式的？通常，用户根据过去的经验和视觉判断UI元素，这就是为什么必须使用适当的视觉符号来帮助用户理解（例如大小，形状，颜色，阴影等）以使元素看起来像按钮的原因。视觉符号可提供界面的可用性。

　　不幸的是，在许多界面中，按钮的可发现性和指示性都不强，这降低了交互的可能性。用户会纠结于哪些是可单击的，哪些不是可单击的。这就是设计是否很酷不是那么重要。即使将视觉界面设计得足够醒目并且可用性很弱，用户也会感到沮丧，并且该产品也将不再可用。

　　为了确定按钮是否可用，当用户访问桌面上的网站时，他需要将光标移动到元素上并检查元素的状态是否会改变，然后再判断它是否可单击。移动用户遇到麻烦了。没有鼠标可以执行此类操作。是否可以单击某个元素只能尝试一次，没有其他更好的方法。

　　不要以为用户界面中的元素对用户来说是显而易见的。

　　在许多情况下，设计人员不会自觉地不强调某些元素的交互性，因为他们会认为这些事物是显而易见的。但这种情况并非如此。在设计用户界面时，应牢记以下几点。

　　作为设计者，很容易确定UI中的哪些元素是交互式的，哪些不是交互式的，但是用户不清楚。

　　尝试在按钮中使用熟悉的设计。

　　以下是大多数用户熟悉的按钮样式：

　　

　　在这些常见模式中，具有阴影和颜色填充的按钮对于用户来说是最清晰的，因为它在视觉上具有三个维度，并且用户会将其视为可以按下的按钮。元素下降。

　　别忘了留空

　　按钮本身的视觉属性非常重要，按钮周围的空白同样重要。它们使按钮更易于识别和交互。在以下情况下，用户可能会将文本内容与重影按钮混淆。用户无法分辨它是盒子元素还是按钮。

　　

　　2.将按钮放置在用户想要看的地方

　　用户实际上对页面交互具有基本的感知和期望，这意味着用户对按钮的位置具有基本的感知。不要让用户到处寻找按钮，最好将其显示在用户期望的位置。

　　尽可能使用传统布局和标准UI模式

　　所谓的传统布局是适合用户体验的布局。浏览时，用户将对这种“标准” UI布局有明确的期望。当他们在正确的位置看到正确的按钮时，从整体上更容易理解。自然，与界面进行交互很容易。

　　要确认设计的可用性，您只需要观察用户在使用过程中是否可以通过操作到达所需的位置，并找到需要单击的按钮即可。

　　3.该按钮应标有相应的操作

　　当按钮的文本标签上的内容太宽或误解了内容时，可能会使用户感到困惑。每个标签上的文字标签应尽可能准确，简洁，直接地描述其真实功能。

　　用户应该知道单击按钮时会发生什么。举一个简单的例子，假设您不小心触发了删除按钮，现在您看到以下错误消息：

　　

　　在此界面中，“确定”是一个模糊的表达，不解释按钮的功能。无论是“确定”还是“取消”，都没有明确说明此操作的真正含义。尤其是在删除是一个潜在的危险操作时，此操作需要更准确的表达。因此，此位置上的两个按钮应该更“删除”和“取消”，并用红色标记删除，以使用户意识到此操作的重要性或唯一性。

　　

　　

　　4.按钮的大小应合理

　　按钮的大小应反映该元素在屏幕上的优先级，较大的按钮应表示更重要的交互作用。

　　按钮优先级

　　在视觉上制作更重要的按钮足以反映其重要性。始终尝试使主按钮更加突出，增加其尺寸并使用高对比度的颜色来吸引用户的注意力。

　　

　　在Dropbox界面中，设计人员使用大小和颜色的对比来创建优先级。

　　使按钮适合用户的手指

　　在许多应用中，按钮设计过小，可能导致用户意外触摸它。

　　

　　左：正确的按钮大小；右：按钮尺寸太小

　　

　　麻省理工学院的实验室研究发现，指垫的平均宽度在10-14mm之间，指尖的平均宽度在8-10mm之间，这使得10×10 mm的按钮尺寸更加合理。

　　5.注意按钮的顺序

　　按钮的顺序应反映用户与界面之间交互的性质。问问自己用户希望在屏幕上看到什么顺序，或者哪个顺序更合理，然后进行相应的设计。

　　例如，应该如何定位两个按钮“上一个/下一个”？一般来说，“上一步”是倒带操作，应该在左侧，而“下一步”是快进操作，应该在右侧。

　　6.避免使用过多的按钮

　　这是一个经常出现在许多应用和网站中的问题。当您提供太多选择时，用户通常会无所适从。无论是设计网站还是APP，请确保尽可能多地考虑最重要的操作，并控制优先级和复杂性。

　　

　　按钮太多

　　7.为按钮交互提供视觉和音频反馈

　　当用户单击按钮时，他们希望界面提供适当的反馈。根据不同的操作，该界面可提供视觉或音频反馈。当用户未收到任何反馈时，他们可能会感觉界面尚未收到他们的操作，因此他们反复单击并执行多项不必要的操作。

　　

　　人类与现实世界互动，获得反馈，然后执行更多操作。这种机制是人类进化过程中形成的认知。该反馈可以是视觉的或听觉的。这些反馈将告诉用户发生了什么事。

　　

　　对于某些操作，例如下载，不仅要告诉用户他们的操作成功，而且还要显示当前进度。