帮助

交互设计七大规则,您了解了吗?

2019-07-01 11:14 技术文档
该按钮是交互设计的基本元素。它们在用户和系统之间的对话中发挥着重要作用。在本文中,我将回顾创建有效按钮时必须了解的七个基本原则。
 
1.使按钮看起来像一个按钮
 
当与用户界面交互时,用户必须立即知道什么是“点击”而哪些不是。设计中的每个项目都需要用户进行解码。通常,用户解码UI所需的时间越长,其可用性就越低。
 
但是,用户如何理解元素是否是交互式的?他们使用以前的经验和视觉指示器来阐明用户界面对象的含义。这就是为什么使用适当的视觉指示器(如大小,形状,颜色,阴影等)使项目看起来像一个按钮是如此重要。视觉能量意味着保持必要的信息价值;它们有助于创建适用性界面。
 
不幸的是,在许多界面中,交互性指标很弱并且需要交互。结果,它们有效地降低了发现的能力。
 
如果缺乏明确的互动,并且用户对“可点击”和难以理解的内容感到困惑,那么我们设计的新鲜度并不重要。如果他们发现难以使用,他们会发现它令人沮丧并最终无法使用。
 
对于移动用户而言,弱指示符是一个更重要的问题。当试图查看单个元素是否是交互式时,桌面用户可以将光标移动到元素上并检查光标是否改变状态。移动用户没有这样的机会。要查看元素是否是交互式的,用户必须单击它,没有其他方法可以验证交互性。
 
不要认为用户界面中的某些内容对您的用户来说是显而易见的
 
在许多情况下,设计者不会故意将按钮识别为交互元素,因为它认为交互元素对用户来说是显而易见的。在设计界面时,您应始终牢记以下规则:
 
您解释点击指标的能力与用户的能力不同,因为您知道设计的每个元素应该做什么。
 
使用熟悉的按钮设计
 
以下是大多数用户熟悉的按钮示例:
 
带方形边框的填充按钮
 
带圆角的填充按钮
 
带阴影的填充按钮
 
职业按钮
 
 
 
在所有这些示例中,“阴影填充按钮”的设计对于用户来说是最清晰的。当用户看到对象的尺寸时,他们立即知道这是他们可以按下的尺寸。
 
不要忘记空白区域
 
不仅按钮的视觉属性很重要。按钮附近的空白区域使用户更容易(或更难)理解它是否是交互式元素。在此示例中,以下某些用户可能会将幻影按钮与信息框混淆。
 
 
 
作为用户,您无法判断它是盒子还是按钮
 
2.将按钮放在用户想要找到的位置
 
该按钮必须位于用户可以轻松找到或希望看到的位置。不要让用户寻找按钮。如果用户找不到该按钮,他将不知道它存在。
 
尽可能使用传统设计和标准UI模式
 
按钮的常规放置提高了发现能力。通过标准设计,用户可以轻松了解每个元素的用途,即使它是一个没有强大指标的按钮。将标准设计与干净的视觉设计和充足的白色空间相结合,使设计更易于理解。
 
不要与用户一起玩寻找按钮的游戏
 
提示:测试您的设计以找出答案。当用户第一次导航到包含您希望他们执行的某些操作的页面时,应该很容易为用户找到正确的按钮。
 
3.使用已制作的标签按钮
 
带有通用或欺骗性标签的按钮可能会让用户感到沮丧。编写按钮标签,清楚地解释每个按钮的作用。理想情况下,按钮标签应清楚地描述其动作。
 
用户应该清楚地知道单击按钮时会发生什么。让我举一个简单的例子。想象一下,您不小心激活了删除操作,现在您看到以下错误消息。
 
 
 
“OK”模糊标签对动作按钮
 
没有太多说法
 
目前尚不清楚这种对话中的“接受”和“取消”是什么意思。大多数用户会问,'点击'取消'会发生什么? '
 
从未设计过只包含两个“接受”和“取消”按钮的对话框或表单。
 
不使用“Accept”标签,最好使用“删除”。这将清楚地显示此按钮对用户的影响。此外,如果“删除”是一个潜在危险的操作,您可以使用红色来表示这一事实。
 
 
 
“删除”清楚地解释了按钮对用户的影响
 
 
 
此界面上的潜在危险操作“禁用卡”显示为红色。
 
4.正确调整按钮的大小
 
按钮的大小应反映此元素在屏幕上的优先级。大按钮意味着更重要的行动。
 
优先按钮
 
让最重要的按钮看起来像最重要的按钮。始终尝试使主动作按钮脱颖而出。增加尺寸(使按钮更大,使其对用户更重要)并使用对比色来引起用户的注意。
 
 
 
Dropbox使用颜色对比度和大小将用户的注意力集中在“Dropbox Business免费试用”测试按钮
 
 
使按钮对移动用户非常友好
 
在许多移动应用程序中,按钮太小。这通常会导致用户输入错误。
 
 
 
左:适当的大小按钮。右:按钮太小。
 
麻省技术研究所触摸实验室的研究发现,手指垫的平均值在10到14毫米之间,指尖的平均值为8到10毫米。这使得10 mm x 10 mm具有良好的最小接触目标尺寸。
 
 
 
5.记住命令
 
按钮的顺序应反映用户与系统之间的对话性质。问问自己用户在此屏幕上等待的订单类型并进行相应的设计。
 
用户界面是与用户的对话
 
例如,如何在分页中订购“上一个/下一个”按钮?向前移动按钮位于右侧并且向后按钮位于左侧是合理的。
 
6.避免使用太多按钮
 
这是许多应用程序和网站的常见问题。当您提供太多选项时,您的用户最终无所事事。在应用程序或网站中设计网页时,请考虑您希望用户执行的最重要操作。
 
 
按钮太多
 
7.提供有关互动的视觉或音频评论
 
当用户是唯一的当您单击或单击按钮时,您希望用户界面以相应的注释进行响应。根据操作类型,这可以是视觉或音频反馈。当用户没有评论时,他可能认为系统没有收到命令并将重复该操作。此行为通常会导致多个不必要的操作。
 
为什么会这样?作为人类,我们希望在与对象交互后得到一些评论。它可以是视觉,音频或触觉反馈,也可以是记录交互的任何确认。
 
用户界面提供印刷机已注册的可视信息。
 
对于某些操作,例如下载,不仅要确认用户的输入,还要显示进程的当前状态。
 
 
 
此按钮成为进度指示器,显示操作的当前状态。
 
结论
 
虽然按钮是交互设计的普通元素,但值得注意的是这个元素应该尽可能好。按钮的用户体验设计应始终与识别和清晰度相关。


相关推荐

QQ在线咨询