站内公告:
联系我们CONTACT
2022-02-10 点击量:
按钮设计在网页或是移动端都很常用,看似简单的一个按钮,但很多设计师并没有详细了解,特别是培训班出来的设计师,更加不知道这些按钮设计体验。本文将和大家科普按钮的由来,以及如何设计按钮,让它变得更实用并提升用户体验。
为了设计合适的交互方式,嘉瑞广告,我们需要回顾实体按钮的发展历史,作为UI组件之一的按钮来源于实体按钮,现在广泛用于互联网产品中。按钮非常神奇,只需手指触摸,就可以打开一个APP、启动汽车或者一个系统,即使用户不懂背后的原理。在《Power Button》这本书里,Rachel Plotnick研究了今天按钮操作的文化起源,描述了按钮成为互联网产品的命令方式,可以实现毫不费力控制。
“你只需按快门,其余的我们来做。”—柯达相机用抓人眼球的口号来吸引潜在的顾客。
这正是迄今为止,按钮吸引用户的地方,只需简单的触摸,就能获得处理事件的满足感。即使很多新家电和其他设备都进化为了触屏操作,实体按钮却并没有完全消失,其塑造的行为习惯仍然影响按钮设计的直观性和易用性。
按钮与链接的区别按钮传达了用户可以执行的操作,它们通常在UI界面中,比如:对话框、表单、工具栏等。区分按钮和链接特别重要:
链接:用于导航到另一个位置,比如:“查看全部”页面、跳转另一个位置等。
按钮:用于实现一个操作,比如:提交、合并、新建和上传等。
设计正确的交互和样式,对按钮设计十分重要。按钮每个状态必须可识别,要显著区别于其他状态和周围的布局,但是也不能完全改变组件或者制造视觉混乱。
普通状态:可交互和可用的状态。
焦点状态:用户使用键盘或其他输入方法来突出显示一个元素。
悬停状态:用户把光标置于可交互元素上的状态。
触发状态:用户已点击按钮后的状态。
加载状态:当操作没有立即实现时,表示正在进行的状态。
禁用状态:按钮目前不可交互,但以后可以使用。
按钮的多种样式最常见的是圆角按钮,可以轻易识别,并且在输入字段旁边看起来不错。为按钮选择正确的样式,取决于目的、平台和规范。以下是一些最流行的样式:
样式最初是用来区分操作的优秀级。明确操作的优先级,可以在众多的选择前,引导用户。通常,要有一个突出的按钮(主按钮),几个二级按钮,还有三级按钮。
通常,把最常用的按钮设置为“默认”(使用主样式)和选中的状态。这样可以帮助大多数用户,更快完成他们的任务,引导正确的方向。
此外,当选择同等重要时,或者操作存在危险,在这些情况中,需要用户明确按钮的选择而不是意外选择。
Don’t make me think(别让用户思考)是可用性工程师Steve Krug所著的书的名字(中文《点石成金:访客至上的网页设计秘笈》)。其中指出,触屏是为了让界面更明显,而不是让用户产生困惑。基于多年使用不同的设备和其他产品,淮安专业广告公司,用户养成了对按钮外观和功能的特定期待。如果和“标准”按钮的样式差别太大,就会让用户迟疑和困惑。
不要对可交互和不可交互的元素,使用相同的色彩。如果可交互和不可交互的元素,使用相同的色彩,会让用户不知道点击哪里。
一致性提高效率和准确性“一致性是最有力的可用性原则之一:当元素一直都是统一的样式,用户就不必担心突发事件。” — Jakob Nielsen