赞助商
立即赞助

细节见真章!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个按钮设计容易踩到的坑

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

相关文章

前言 “行动按钮”作为连接用户与产品的交互触点,在产品设计中扮演了至关重要的角色,一个优秀的按钮控件可以有效的提升交互体...
CTA按钮
也许你是个新手设计师,也许你是个有着丰富开发经验的开发者,但是有需求让自己设计的网页和UI看起来更像那么一回事,至少看...
ui设计
Tesla Model 3,标志性意义的中控设计,成为汽车业内一个颠覆式创新。采用极简的内饰设计,精简了物理按键,甚至连仪表都不复...
Tesla Model 3
在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工...
交互文档
Z Yuhan:这篇文章从一个眼动实验得来的数据分析用户对长网页的阅读习惯,以及对比八年前的数据发现用户行为的惊人变化。最后...
用户体验设计
由于设计师、产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照iOS的规范进行设计,...
Android设计
作为交互设计师,天天画的就是交互稿了。而对于很多新手交互设计师以及想转行做交互的同学们来说,一定都非常想知道大厂的交...
交互稿
之前我把交互设计师职业技能的第一部分——思维部分讲完了,之后我开始讲「眼界」这部分。老实说,我只是作为一个设计师在写些...
交互模型