赞助商
立即赞助

细节见真章!12个按钮设计容易踩到的坑

UI设计3年前 (2021)发布 流光
4K 0 0

按钮设计

为了设计正确的交互,我们需要顾一物按钮的历史和源。物理按钮是 UI 组件的前身,当今的数字产品还在大量使用它们。按钮很,即使用户不基的机或法,只用手指触摸就以让电器、汽车或系统运行/关闭。在《Power Button》中,者 Rachel Plotnick 描述当今按钮文化的源,并释按钮是何成为数字命令方式的。

“你按下按钮,剩下的我们来做。” ——柯达相机的醒目标语吸引潜在消费者。

细节见真章!12个按钮设计容易踩到的坑

即使在今,这也是吸引用户的地方——通过简触摸就能让事情发生的即足。尽管有大量新的家用器和备都变成了触摸屏,但物理按钮并不会消失,因为它让人形成的行为习惯,会响按钮计的直观性和易用性,是一种远存在的实物参考。

按钮 vs 链接

按钮向用户传递了操作的可执行性,在整个 UI 常见,例如:对话框、表和工栏等。按钮和链之间的别,请注:

-链接是导航到另一个地方时应用的,例:“查看部”页面、“ Roger Wright”个人简介等;

-按钮是在执行作时应的,例如:“交”、“合并”、“创建”、“上传”等。

细节见真章!12个按钮设计容易踩到的坑

让用户直观感受按钮状态

为按钮创建正确的互和样式,是按钮设计程中重要的组成部分之一。在不改变组件或产生视干扰的前提下,每个按钮的状态必须有明确定义,以使其与周围局区别开来。

细节见真章!12个按钮设计容易踩到的坑

  • 正常 — 表示该组件已启用交互;
  • 突出提示 — 用户使用键盘,进入编辑状;
  • 鼠标悬停 — 当用户将鼠标置互式元素上方时;
  • 点击 — 按状态表示户已轻点按钮;
  • 度/加载 — 用户操作行立即执行,表示完操作中;
  • 禁用 — 表示该组件前处于交互状态,将来可以启用。

按钮的颜色、形状和大小

见的是圆角矩形按钮,这些按钮即使在输入框旁,户快速识别。按钮样式的择取决于途、平台和应准则。是一些最受的样式变:

细节见真章!12个按钮设计容易踩到的坑

建立按钮样式等级

样式主要用区分重要和不重要的动。创建动次结构,该次结构将指导用户进行种选择。通常,以有一个突出的按钮(该样式通常称为“首要”按钮),剩下的按钮则依据重要程度建立不同的样式等级。

细节见真章!12个按钮设计容易踩到的坑

《Don’t Make Me Think》

这是可用性工程 Steve Krug 撰写的书籍标题,其中讲了一点:对用户而言,界面清晰了非常重要,不要给用户制造难题。人周围其实已经被产品包围了,多年使用各种备、软件的经验,一定程度上固化了人对按钮外观和功能的认知。如果常见的“标准”存在较大偏差,也会给用户造成困惑。

细节见真章!12个按钮设计容易踩到的坑

避免对交互式和非交互式素使用相同的颜色,否则用户不知道该点击哪。

一致性的重要性

“一致性是最大的可用性则之一:当事物始终表现相同,用户不必担心会发生什。” —雅各布·尼尔森(Jakob Nielsen)

一致提升速度和准确,有助避免错误。创建预测,帮助用户控和现产品中的目标。当创建主要、次要和三种样式时,试着找找一致元素,颜、形状等。按钮设计不仅要在设计系统内部持一致,在整平台也要进行统一。

细节见真章!12个按钮设计容易踩到的坑

使按钮足够大以实现可靠交互

按下按钮应该是一个简的操作任,如果用户无法正常进行,或在过程中错误地按了相邻素,不但给用户造成了负面体验浪费了间。

对大数平台,请考虑被触摸的目标至少为 48x48dp。无论屏幕大小,种尺寸的触摸目标的物理尺寸应为 9mm,触摸屏元件的目标尺寸至少是 7-10mm。

细节见真章!12个按钮设计容易踩到的坑

对图标按钮来说,请确触摸目标超出元素的视范围。不仅适用移动设备、平板电脑,同时也适用网络上的指示设备,比鼠标。

无障碍设计

所有组件应推行无障碍设计。目标区域的大小是影响访问的因素之一,其他的则是字大小、颜和对比度,也有很工具能检查组件的设计能。

细节见真章!12个按钮设计容易踩到的坑

手势应用

势应用,让用户可以通过触摸应用程序进行交互。使用触摸来完成任,不仅提供了触觉控制还非常节约间。某些势(比如滑动以触发上下文动作、双击或长按来标记喜欢等)每都被人广泛使用,但对于普通用户而言,它仍然不显,建议把它替换给高用户执行操作。

细节见真章!12个按钮设计容易踩到的坑

按钮标签信息易于理解

按钮传信息与其观样要,误信息会让用户感到困惑,甚至是误导用户操作。正确按钮标签会引导用户完成操作,最好使用动词,并在按钮上标记其实功能。

就像按钮在问用户——“您要(添加购物篮中)吗?” 或“您要(确认订)吗?”,避免使用Yes/No或过于通用的标签,比如Submit。

细节见真章!12个按钮设计容易踩到的坑

确定/取消,还是取消/确定?

两者都是正确选择,设计师可能会花几个小时来讨论哪个更合适。确定按钮在前,是自然流畅阅读序。Windows 把确定按钮放在了前;确定按钮在后,可以帮助改善流程。这序形,帮助用户在采取动前,所有选项评估,有效地帮助们避免误。苹则是把确定按钮放在最后;任何选择其实都没有,也不会造成什么可用性灾难。

细节见真章!12个按钮设计容易踩到的坑

避免使用禁用按钮

每人都遇到过这种况:屏幕停留了几秒或几分钟,怎么操作都反应,这发原禁用按钮使我们无法行下一。禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常易让用户产负面绪。

细节见真章!12个按钮设计容易踩到的坑

我建议尽避免禁用按钮,好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知即可。

欢迎关注作者微信公众号:「UX辞典」

细节见真章!12个按钮设计容易踩到的坑

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

我们每天都会用微信,但是却不知道有些功能它的存在,究其原因是因为这些功能的使用频率不高,所以产品设计者把他们放到了比...
产品细节
写在前面 「我们这双鞋绝对是正品,支持专柜验货!」 「买咱这支基金,稳赚不赔,绝对涨,还要再涨,现在不买后面后悔死你!...
交互设计
王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发...
交互控件
最近收到的一则问题,大概是:在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时...
交互设计
文字的基本属性 字体属性包含的内容很多,我们可以根据 Sketch 或 Figma 的文字属性栏为例,分别进行解释。 1. 字体选择 F...
B端
APP和网站这样的数字产品中所包含的有效的交互系统,通常是由包含不同任务和功能的小元素组合到一起的。想要让整套交互系统无...
CTA按钮
“以体验地图的思维阐述交互设计师的工作流程,梳理问题并分享对应策略,从体验地图中窥见新人交互设计师的成长之路。” 体验...
交互设计
交互说明,是交互设计师必不可少的「写作能力」,它能让研发同事更加了解你的方案说明、交互想法。但写得不好,容易出现流水...
交互设计