7个按钮设计基本规则

图片:Gal Shir

按钮是交互设计的基本元素。它们在用户和系统之间的对话中起主要作用。在本文中,我将回顾7个基本规则,以创建有效的按钮。

1.使按钮看起来更像是按钮

当涉及到与用户界面的交互时,用户需要立即知道什么是可点击,哪些是不可点击的。设计中的每个界面都需要用户去理解,一般来说,用户对界面进行理解的时间越长,其可用性就越差。

但用户如何判断某个元素是否具有互动性呢?他们会使用以前的经验和视觉本能来进行判断。这就是为什么使用合适的视觉符号(如尺寸,形状,颜色,阴影等)使按钮看起来更像是一个按钮。

不幸的是,在许多界面中,可交互的部分做的很弱,大大降低了可可见性。

如果交互缺少引导性,用户就会苦于可点击还是不可点击,设计的酷炫程度并不重要。如果他们觉得很难使用,他们会觉得很沮丧,最终放弃使用。

交互部分做的弱对于移动用户来说是更重要的问题。为了了解单个元素是否可交互,pc用户可以将鼠标移动到元素上并检查鼠标是否改变其状态。移动用户没有这样的机会,要了解某个元素是否是可交互的,用户不得不点击它,没有其他方法来检查可交互性。

不要以为用户界面中的某些元素是显而易见的

在很多情况下,设计师不会故意去强调按钮,他们认为可交互元素对用户来说是显而易见的。在界面设计中,你应该始终牢记以下规则:由于你知道自己设计的每个元素都是做什么用的,因此你对界面的理解力和用户是不同的。

为你的按钮提供熟悉的设计

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

方形填充按钮

圆角填充按钮

带阴影的填充按钮

边框按钮

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

不要忘记留白

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

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

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

按钮应该放在用户可以轻松找到或者期望看到的地方。不要让用户去寻找按钮。

尽可能使用传统布局和标准的ui界面

按钮的传统位置提高了可发现性。通过标准布局,用户可以轻松理解每个元素的用途-即使是没有强指示性的按钮。通过标准布局和干净的视觉设计,会使用户更加容易理解。

不要与用户玩按钮捉迷藏游戏

3.标签按钮要清楚表明是要做什么

带有通用标签或者说误导性标签的按钮可能会给用户带来巨大的挫折。编写可清楚解释每个按钮功能的按钮标签。理想情况下,按钮的标签应该清楚表明了其操作。

用户应该清楚的了解当他们点下按钮时会发生什么。让我给你一个简单的例子。想象一下,你不小心触发了一个删除操作,现在你看到下面的错误信息。

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

不清楚在这个对话框中确定和取消代表什么。大多数用户会问自己,点击取消会发生什么呢?从来没有一个对话框,它只包含两个按钮ok和cancel

不要使用ok标签,最好使用删除。这将清楚这个按钮为用户做了什么。另外,如果删除是一项潜在的危险操作,你可以使用红色来表明。

'删除'清楚了表达按钮是做什么。


在这个界面中,一个潜在的危险行为'禁用卡片'以红色着色。图像:  Ramotion

4.正确调整按钮的大小

按钮大小应该反应该屏幕上的优先级。大按钮意味着更重要的操作。

优先按钮

让最重要的按钮看起来就很重要。保证主要按钮更加突出。增加其尺寸(通过增大按钮使其看起来对用户更重要)并且使用对比强一些的颜色捕捉用户的注意力。

Dropbox使用尺寸和颜色对比将用户的注意力集中在'Try Dropbox Business free'CTA按钮上。

更适合移动用户的手指

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

左侧:正确尺寸的按钮。右:按钮太小。图片:苹果

麻省理工学院触摸实验室的研究发现,手指垫的平均值在10-14毫米之间,之间为8-10毫米。这使10mm*10mm成为一个良好的最小触摸尺寸。

图片来源:uxmag

5.注意顺序

按钮的顺序反映用户和该系统之间对话的性质。问问自己,用户期望在屏幕上显示什么顺序,然后进行相应的设计。

用户界面是与用户的对话

推动你前进的按钮应该在右侧,后退的按钮应该在左侧。

6.避免使用太多按钮

这是许多应用程序和网站的常见问题。当你提供太多的选择时,你的用户最终不知道该做什么。在你的应用或者网站中,请考虑好你最希望用户采取的最重要的操作。

太多的按钮

7.设计有关交互的视觉或音频反馈

当用户点击按钮时,他们期望用户界面能做出适当的反馈。根据操作类型,这可能是视觉或音频反馈。当用户没有收到任何反馈时,他们可能会认为系统没有收到他们的指令并会重复该操作。这种行为通常导致多次不必要的操作。

作为人类,我们期望在与对象交互之后得到一些反馈。它可能是视觉,听觉或者触觉反馈。

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

结论

尽管按钮是交互设计的普通元素,但我们仍要尽可能的使这个元素更好。

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

推荐阅读更多精彩内容