网站内容设计基本原则( 一下按钮设计的7个基本原则，你知道吗？)

　　网站内容设计基本原则(

一下按钮设计的7个基本原则，你知道吗？)

　　按钮是 UI 和交互设计的基本元素。它们是用户交互时与系统进行通信的核心组件。它们也是图形界面中最早也是最常见的交互对象。在今天的文章中，我们将回顾一下按钮设计的7个基本原则，希望对您在设计时有所帮助。

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

　　当涉及到用户界面交互时，用户需要知道什么是可点击的，什么是不可点击的。面对UI界面中的每一个元素，用户都需要对其进行识别和判断，这个过程越长，可用性就越差。

　　那么，用户如何解释哪个元素是可交互的呢？通常，用户根据过去的经验和视觉来判断 UI 元素，这就是为什么需要通过适当的视觉符号（如大小、形状、颜色、阴影等）帮助用户理解，使元素看起来像按钮。视觉符号为界面提供了启示。

　　不幸的是，在许多界面中，按钮不是很容易被发现和指示，这使得交互的可能性较小，用户会纠结哪些是可点击的，哪些不可点击，以及此时的设计是否酷。, 似乎不太重要。即使界面在视觉上足够突出，但可用性很弱，使用户感到沮丧，产品不再可用。

　　为了判断按钮是否可用，当用户在桌面访问网站时，用户需要将光标移到元素上，查看元素的状态是否会发生变化来判断是否可点击。另一方面，移动用户遇到了麻烦。没有鼠标可以执行这样的操作。一个元素是否可以点击只能尝试一次，没有其他更好的方法。

　　不要假设 UI 中的元素对用户来说是显而易见的。

　　在许多情况下，设计师有意识地不强调某些元素的交互性，因为他们认为它们是显而易见的。但事实并非如此，在设计 UI 时，应牢记以下几点。

　　作为设计师，很容易弄清楚 UI 中哪些元素是可交互的，哪些不是，但用户不能。

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

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

　　在这些常见的图案中，带有阴影和颜色填充的按钮对用户来说是最清晰的，因为它在视觉上具有三个维度，用户会将其感知为一个可以按下的元素。

　　不要忘记留空

　　按钮本身的视觉属性很重要，按钮周围的空白区域也很重要，它们使按钮更易于识别并且更易于交互。在下面的案例中，用户可能会将文本内容与幽灵按钮混淆。用户无法分辨它是框元素还是按钮。

　　2. 将按钮放在用户想要看到的位置

　　用户其实对页面交互有基本的认知和期望，也就是说用户对按钮的位置有一个基本的了解。不要让用户寻找按钮，最好在用户期望的地方。

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

　　所谓传统布局，就是贴合用户体验的布局。在浏览时，用户会对这种“标准”的 UI 布局有明确的期望。当他们看到正确位置的正确按钮时，整体就更容易理解了。自然地，您可以轻松地与界面交互。

　　要确认设计的可用性，只需观察用户是否会通过操作到达您希望他们到达的位置并找到要单击的按钮。

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

　　当按钮的文本标签写得太宽泛或内容被误解时，可能会使用户感到困惑。每个标签上的文本标签应尽可能准确，并对其实际作用进行简洁明了的描述。

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

　　在这个界面中，“OK”是一个相当模糊的表达方式，并没有解释按钮的作用。不管是“OK”还是“Cancel”，这个操作的真正含义并没有解释清楚。特别是当删除是一个潜在的危险操作时，这个操作需要更加精确。所以这个地方的两个按钮应该是“删除”和“取消”比较合适，并且删除应该用红色标记，让用户意识到这个操作的重要性或唯一性。

　　4. 按钮应该有合理的尺寸

　　按钮的大小应该反映该元素在屏幕上的优先级，更大的按钮应该意味着更重要的交互。

　　按钮优先级

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

　　在 Dropbox 界面上，设计师使用大小和颜色对比来创建优先级。

　　使按钮适合用户的手指

　　在很多应用中，按钮设计过小，容易导致用户误触。

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

　　麻省理工学院的实验室研究发现，平均指垫宽度在 10 到 14 毫米之间，指尖在 8 到 10 毫米之间，这使得 10 x 10 毫米的按钮尺寸是合理的。

　　5. 注意按钮的顺序

　　按钮的顺序应该反映用户和界面之间交互的性质，问问自己用户希望在屏幕上看到什么顺序，或者什么顺序有意义，并据此进行设计。

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

　　6. 避免使用太多按钮

　　这是许多应用程序和 网站 中反复出现的问题。当您提供太多选项时，用户通常会不知所措。无论是设计网站还是app，一定要尽量考虑最重要的操作，控制好优先级和复杂度。

　　△ 按钮太多

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

　　当用户单击一个按钮时，他们更喜欢提供适当反馈的界面。根据不同的操作，界面给出视觉或听觉反馈。当用户没有得到任何反馈时，他们可能会觉得界面没有收到他们的操作，从而重复点击，执行了多个不必要的操作。

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

　　对于一些操作，比如下载，不仅要告诉用户操作成功，还要显示当前的进度。

　　“2018设计趋势，不容错过”

　　===============明星栏目推荐=================

　　优优教程网：优社网站旗下的优质中文教程，分享了PS、AE、AI、C4D等大量中文教程，还为零基础准备了贴心的知识树专栏设计爱好者。开启自由自学新篇章，跟着我们的专栏一步步学习，你就能快速上手，打造炫酷视觉效果。

　　设计导航：国内最流行的设计网站导航，设计师必备：