版权申明:本文出自“奥创空间”原创,感谢“奥创空间”的原创文章分享!
来源:Medium网站
作者:尼克·巴比奇
翻译:奥创
阅读时长:7min
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
按钮是交互设计的基本要素。它们在用户和系统之间的对话中起主要作用。在本文中,我将回顾您创建有效按钮时需要了解的七个基本原则。
1.使按钮看起来像按钮
在与用户界面进行交互时,用户需要立即知道什么是"可点击"而哪些不是。设计中的每个项目都需要用户努力解码。通常,用户解码UI所需的时间越多,对它们的可用性就越小。
但是,用户如何理解某个元素是否具有交互性?他们使用以前的经验和视觉指示符来阐明UI对象的含义。这就是为什么使用适当的视觉指示符(如大小,形状,颜色,阴影等)使元素看起来像一个按钮这么重要。视觉能指持有必要的信息价值-他们协助创造适宜性的界面。
不幸的是,在许多界面中,交互性的能指都很弱,需要互动。结果,它们有效地降低了可发现性。
如果缺少明确的交互能力,并且用户对"可点击"和不可点击的内容感到困惑,那么我们设计的酷感并不重要。如果他们发现难以使用,他们会发现它令人沮丧,并最终无法使用。
对于移动用户来说,弱的能指是一个更重要的问题。在尝试了解单个元素是否具有交互性时,桌面用户可以在元素上移动光标并检查光标是否更改其状态。移动用户没有这样的机会。要了解元素是否具有交互性,用户必须点击它 - 没有其他方法可以检查交互性。
不要认为您的UI中的某些内容对您的用户来说是显而易见的
在许多情况下,设计者故意不将按钮识别为交互元素,因为他们认为交互元素对用户来说是显而易见的。在设计界面时,您应始终牢记以下规则:
您解释可点击性指示符的能力 与您的用户不同,因为您知道自己设计中的每个元素应该做什么。
使用熟悉的按钮设计
以下是大多数用户熟悉的按钮示例:
带方形边框的填充按钮
带圆角的填充按钮
带阴影的填充按钮
描边按钮
在所有这些示例中,"带阴影的填充按钮"设计对用户来说是最清晰的。当用户看到对象的维度时,他们立即知道这是他们可以按的东西。
不要忘记空白
不仅按钮本身的视觉属性很重要。按钮附近的空白量使用户更容易(或更难)理解它是否是交互元素。在该示例中,下面的一些用户可能会将ghost按钮与信息框混淆。
作为用户,您无法判断它是盒子还是按钮
2.将按钮放在用户希望找到它们的位置
按钮应位于用户可以轻松找到或期望看到的位置。不要让用户寻找按钮。如果用户找不到按钮,他们就不会知道它存在。
尽可能使用传统布局和标准UI模式
按钮的常规放置提高了可发现性。通过标准布局,用户可以轻松了解每个元素的用途 - 即使它是一个没有强烈指示符的按钮。将标准布局与干净的视觉设计和充足的空白相结合,使布局更容易理解。
不要与您的用户一起玩寻找按钮的游戏
提示:在可发现性方面测试您的设计。当用户首次导航到包含您希望他们采取的某些操作的页面时,应该很容易为用户找到适当的按钮。
3. 用他们所做的标记按钮
带有通用或误导性标签的按钮可能会给您的用户带来挫败感。编写按钮标签,清楚地解释每个按钮的作用。理想情况下,按钮的标签应清楚地描述其动作。
用户应该清楚地了解点击按钮时会发生什么。让我举个简单的例子。想象一下,您不小心触发了删除操作,现在您看到以下错误消息。
模糊的标签'OK'并没有对动作按钮说太多
目前尚不清楚"OK"和"取消"在此对话框中的含义。大多数用户会问自己"当我点击'取消'时会发生什么?"
从未设计过仅由两个按钮"确定"和"取消"组成的对话框或表单。
而不是使用"确定"标签,最好使用"删除"。这将清楚地显示此按钮对用户的作用。此外,如果"删除"是一个潜在危险的操作,您可以使用红色来表明这一事实。
"删除"清楚地说明了按钮对用户的作用
此界面中的潜在危险操作"禁用卡"显示为红色。图像:Ramotion
4.正确调整按钮的大小
按钮大小应反映此元素在屏幕上的优先级。大按钮意味着更重要的动作。
飞特游客
委托设计