按钮设计丨7基本规则

按钮是交互设计的基本要素。它们在用户和系统之间的对话中起主要作用。在本文中,我将回顾您创建有效按钮时需要了解的七个基本原则

1.使按钮看起来像按钮

在与用户界面进行交互时,用户需要立即知道什么是“可点击”而哪些不是。设计中的每个项目都需要用户努力解码。通常,用户解码UI所需的时间越多,对它们的可用性就越小。

但是,用户如何理解某个元素是否具有交互性?他们使用以前的经验和视觉指示符来阐明UI对象的含义。这就是为什么使用适当的视觉指示符(如大小,形状,颜色,阴影等)使元素看起来像一个按钮这么重要。视觉能指持有必要的信息价值-他们协助创造适宜性的界面。

不幸的是,在许多界面中,交互性的能指都很弱,需要互动。结果,它们有效地降低了可发现性。

如果缺少明确的交互能力,并且用户对“可点击”和不可点击的内容感到困惑,那么我们设计的酷感并不重要。如果他们发现难以使用,他们会发现它令人沮丧,并最终无法使用。

对于移动用户来说,弱的能指是一个更重要的问题。在尝试了解单个元素是否具有交互性时,桌面用户可以在元素上移动光标并检查光标是否更改其状态。移动用户没有这样的机会。要了解元素是否具有交互性,用户必须点击它 - 没有其他方法可以检查交互性。

不要认为您的UI中的某些内容对您的用户来说是显而易见的

在许多情况下,设计者故意不将按钮识别为交互元素,因为他们认为交互元素对用户来说是显而易见的。在设计界面时,您应始终牢记以下规则:

您解释可点击性指示符的能力​​与您的用户不同,因为您知道自己设计中的每个元素应该做什么。不要忘记空白

不仅按钮本身的视觉属性很重要。按钮附近的空白量使用户更容易(或更难)理解它是否是交互元素。在该示例中,下面的一些用户可能会将ghost按钮与信息框混淆。

使用熟悉的按钮设计

以下是大多数用户熟悉的按钮示例:

带方形边框的填充按钮

带圆角的填充按钮

带阴影的填充按钮

鬼按钮

在所有这些示例中,“带阴影的填充按钮”设计对用户来说是最清晰的。当用户看到对象的维度时,他们立即知道这是他们可以按的东西。

不要忘记空白

不仅按钮本身的视觉属性很重要。按钮附近的空白量使用户更容易(或更难)理解它是否是交互元素。在该示例中,下面的一些用户可能会将ghost按钮与信息框混淆。

作为用户,您无法判断它是盒子还是按钮


2.将按钮放在用户希望找到它们的位置

按钮应位于用户可以轻松找到或期望看到的位置。不要让用户寻找按钮。如果用户找不到按钮,他们就不会知道它存在。

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

按钮的常规放置提高了可发现性。通过标准布局,用户可以轻松了解每个元素的用途 - 即使它是一个没有强烈指示符的按钮。将标准布局与干净的视觉设计和充足的空白相结合,使布局更容易理解。

不要与您的用户一起玩寻找按钮的游戏

提示:在可发现性方面测试您的设计。当用户首次导航到包含您希望他们采取的某些操作的页面时,应该很容易为用户找到适当的按钮。

3. 用他们所做的标记按钮

带有通用或误导性标签的按钮可能会给您的用户带来挫败感。编写按钮标签,清楚地解释每个按钮的作用。理想情况下,按钮的标签应清楚地描述其动作。

用户应该清楚地了解点击按钮时会发生什么。让我举个简单的例子。想象一下,您不小心触发了删除操作,现在您看到以下错误消息。

模糊的标签'OK'并没有对动作按钮说太多

目前尚不清楚“OK”和“取消”在此对话框中的含义。大多数用户会问自己“当我点击'取消'时会发生什么?”

从未设计过仅由两个按钮“确定”和“取消”组成的对话框或表单。

而不是使用“确定”标签,最好使用“删除”。这将清楚地显示此按钮对用户的作用。此外,如果“删除”是一个潜在危险的操作,您可以使用红色来表明这一事实。

“删除”清楚地说明了按钮对用户的作用。
此界面中的潜在危险操作“禁用卡”显示为红色。图像:  Ramotion

4.正确调整按钮的大小

按钮大小应反映此元素在屏幕上的优先级。大按钮意味着更重要的动作。

优先按钮

让最重要的按钮看起来像是最重要的按钮。始终尝试使主要操作按钮更加突出。增加其大小(通过使按钮更大,使其对用户来说更重要)并使用对比色来吸引用户注意力。

Dropbox使用大小和颜色对比来将用户的注意力集中在“免费试用Dropbox Business”CTA按钮上


使按钮对移动用户来说非常友好

在许多移动应用中,按钮太小。这通常会导致用户输入错误的情况

左:适当大小的按钮。右:按钮太小。图片:Apple

麻省理工学院触摸实验室的研究发现,指垫的平均值在10-14mm之间,指尖的平均值为8-10mm。这使得10mm x 10mm具有良好的最小触摸目标尺寸。

图片来源:uxmag


5.记住命令

按钮的顺序应反映用户与系统之间的对话性质。问问自己,用户期望在这个屏幕上有什么样的订单并进行相应的设计。

用户界面是与用户的对话

例如,如何在分页中订购“上一个/下一个”按钮?合理的是,向前移动的按钮应位于右侧,向后移动的按钮应位于左侧。

6.避免使用太多按钮

这是许多应用和网站的常见问题。当您提供太多选项时,您的用户最终无所事事。在您的应用或网站中设计网页时,请考虑您希望用户采取的最重要的操作。

按钮太多了。

7.提供有关互动的视觉或音频反馈

当用户单击或点击按钮时,他们希望用户界面将以适当的反馈进行响应。根据操作类型,这可能是视觉或音频反馈。当用户没有任何反馈时,他们可能会认为系统没有收到命令并会重复操作。这种行为经常导致多次不必要的操作

为什么会这样?作为人类,我们希望在与对象交互后获得一些反馈。它可能是视觉,音频或触觉反馈 - 任何承认交互已注册的事实。

用户界面提供印刷机已注册的视觉反馈。图片来源:Vadim Gromov

对于某些操作,例如下载,不仅要确认用户输入,还要显示进程的当前状态。

此按钮转换为进度指示器,以演示操作的当前状态。图片:科林加文


结论

尽管按钮是交互设计的普通元素,但值得注意的是要使这个元素尽可能好。按钮用户体验设计应始终与识别和清晰度相关。 谢谢!

转载地址 作者:尼克·巴比奇

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335