赞助商
立即赞助

一个UI按钮的自我修养

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

编者按:一个合格的 UI 按钮到需要具备么样的素质?在很多设计师眼里似乎并是一个太大的问题的,但是在实际设计的时候,UI 按钮的细节处到位的情况却皆是。来自资深设计师 Taras Bakusevych 的这篇章《Button Design — UI component series》 ,详细拆解了一个设计良好的 UI 按钮,应该有哪些「自我修养」。

为更地设计互界面,有的时,我们需要重新回顾一下历史。想要设计一个按钮,也许我们不用完整地回溯整个 UI 界面的展历史,但是至少要回到数字界面诞生之前看一看。

按钮重要。按钮棒。

在没有图形化界年代,使用按钮来实现复杂命令,将算法和功能隐藏在个按钮背后,让电、或者系统发挥作用。在《Power Button》书,Rachel Plotnick 回溯了如今个按钮文化起,在书,他认为是按钮动了数技术,让复杂命令以以轻松、便捷防呆,在我们生活普及。

「你需要按下按钮,剩下交我们。」——柯相过这醒目Slogan吸引潜在消费者。

一个UI按钮的自我修养

即使在今,足够便捷的按钮设计,也是吸引用户的原因。比 iPhone 的 home 键。通简单的触摸、按下来完成任务,让人享受到强烈的即时满感。尽管成千上万的数字产品和家电开始加上触摸屏,但是物理按钮还没有消失,而虚拟的按钮更是互的基础设施。按钮在去一个世纪里所塑造的验和认根深蒂固,它所塑造的习惯、认和文化影响着设计的直观和易用。

按钮和链接的差别

按钮传达给用户的是直接的执行的操,它们通常存在整个 UI 界面系当中,从各种对框、窗口到工具栏。按钮和链接在某功能验上很接近,但是两者之间的区别是很重要的:

  • 导航到另外一个位置的时候使链接。如「查看全」页面,户「Roger Wright」的个人资,等。
  • 执行特定操的时的按钮。比「上传」、「新建」、「合并」等等。

一个UI按钮的自我修养

按钮会将它的状态告诉用户

创按钮需要使用正确样,而用来昭示按钮状态不样设计,是按钮设计过程绕不过工作。状态都必须有明确「可供性」,这样才能让它和其他元素、布局区分开来。是,异化设计又不能造成喧宾夺主效,制造视觉噪音。

一个UI按钮的自我修养

  • 正常状态——表示按钮是互的,并且用的。
  • 聚焦状——通过高亮的形式告诉用户,它已经被键盘或者其的方式所选中
  • 悬状态——用户使用标或者其他元素,于其上时候,显示这样状态
  • 激活状态——表示用户已按下按钮(且还未结束按按钮的动作)
  • 载状态——表示操作正在载中,组件正在反映,但是操作还未成
  • 禁用状态——表示当前组件处非互状态,但是之以被启用

按钮有各种不同的色彩、形状和大小

圆角矩形的按钮常见的按钮,这些按钮被置于输入框旁,非常易于识别,特别常见。但按钮的样式、小变化范畴非常,使用什么样的样式,取决于什么,所用的平台,以及需遵循的规范。下面一些常用的、受欢迎的样式:

一个UI按钮的自我修养

样式可以用来呈现按钮的重要性

样优先级是用来区分按钮和操作要性。过样,可以区分出代表背后操作要性层级,从而指引用户进多选择。常,你可以让最要按钮使用优先级最高样,这按钮常是「主按钮」,时搭配几个优先级按钮,而其他很少使用、优先级不高、不荐使用按钮,则使用第三级样。

一个UI按钮的自我修养

有时按钮没有「默认状态」

通常,会将用户最常用的按钮使用「默认」状,也就是常说的聚焦状,或者是主式,这可以帮助用户更快完成任,指引正确的方向。但是也有例外的情况,比如所有选择都是、对等的情况下,或者说所有的操作都是有潜在风险的情况下,这个候,你可能会使用个次优先的按钮式来呈现所有按钮。

一个UI按钮的自我修养

「不要让我思考」

「Don’t Make Me Think」 是用大师 Steve Krug 经典的设计门书中所提到的一种设计精神,它涉及到许要点,但是核心思想是要让设计显而易见,不要让用户感到迷惑。是基年横跨设备、各种产品设计之沉淀下来的经验。我们对按钮的功能和验是有期望和基础认的,与我们通常所见的按钮差别太大,让人感到困惑。

一个UI按钮的自我修养

避免对互式和非互式的元素使用相同的颜,否则用户很难判断到底哪里以被点击。

一致性设计可以提高交互准确度和效率

「一致性是非强大的可性原则:当事物的表现和反馈保持一致的时候,户会担心会有意外发生。」——Jakob Nielsen

一致性了户交互的速和准确性,有助于避免错误。这在很大程上设计具备了可预测性,户够清楚自己够做到么。当你创建种同层级的样式的时候,请尽量使相对一致、具有延续性的设计,按钮在整套体系是一致的,并且要兼顾到他可会到它的平台。

一个UI按钮的自我修养

让按钮足够大,确保交互可靠性

按下按钮应该一简单的任务,如果用户无法功轻点按钮,或者操作过程中无从旁的元素,这会负面的体验,并且浪费时间。

一个UI按钮的自我修养

对于绝多数平台,请尽让按钮的小 48×48 dp 以(早 iOS 按钮的小尺寸 44×44 dp)。无论屏幕小如何,触摸按钮控件的理触摸尺寸应该至少 9 mm ,触摸屏幕,按钮控件的可视尺寸应该 7~10 mm 这范畴内。

对于图标按钮,尽量它的触摸尺寸大于它的可视尺寸,这仅适于移端触摸屏,对于普通的页和桌面端 UI 是一样。

无障碍设计

对于每个组件,都应该保持足够的可访问性,严格意义上来说,就是遵循 WCAG 的标准,在色彩、布等细节上,确保有视觉障碍的户可轻松地使他们。有大量的在线的工具可帮你测试设计的可访问性,确保无障碍。

一个UI按钮的自我修养

设计师应当和开发者紧密合作,确保按钮可和屏幕阅读器可配合使,添 role = “button” 到代码当中,确保元素可调屏幕阅读控件,视障户可使这一切。

记得兼顾手势操作

手势交互如今已经是触摸交互的基础了。诸如滑、双击、长按这样的交互已经被户广泛接受,并且每天都在频地使。但是对于普通户而言,它们依然是很明显,因为手势是默认「隐形」的。我建议对于手势交互供支持,但是作为唯一的交互方式,依然显性的按钮交互作为基础。

一个UI按钮的自我修养

优秀的按钮标签能够促进用户操作

按钮的标签文本它的视觉外观一样重。使用错误的标签文本会让人感到困惑,会浪费时间,会问题。

一个UI按钮的自我修养

这也什么微文案的重性如今被一再提高。好的按钮文本同样被精设出的。好使用动词提供趋势引导,并且标注出它的实际功能。就按钮问用户「您(将商品)添加购车吗?」或者「(您)确认订单吗?」

避免使「是」和「否」这样可会存在歧义的、简单的本。

「取消/确认」还是「确认/取消」?都可以

「确认」和「取消」到哪个在左,哪个在右?有的设计师可会好几个小时来纠结和确认。

  • 将「确认」置于首。如果我们知道「确认」可能多数况下的选择,并且这样的置能够节省用户交互时间,那么可以这么。
  • 将「确认」置于末位。有人认为将「确认」置于末位够促进户点击。更多的时候,置于这样的位置可会促进户衡量和思考是否要点击。苹果的设计当中,「确认」被置于末位。

一个UI按钮的自我修养

其实哪使用都有良好论据支撑,并任何选择都不会是灾难性。我个倾于将「确认」于末位(这可能是为我是个 Mac 用户)。

禁用按钮令人抓狂

个都或多或少会碰到这样情况,被卡在页上好阵子,想搞楚到底表单哪里填了导致法进。禁用状态下按钮令抓狂,虽然后续如正确触发可以启用,是此刻是让糟心。结合信息引导和误说明,让按钮保持正常状态,让「可击」状态呈现出来,会让用户更舒适。

一个UI按钮的自我修养

我议尽量避免使用按钮禁用状态。

结语

按钮使用有很多技巧,是这里是最常用也最容易忽略部分。在 UI 控件设计和使用上,这么些年已经逐步地完善成为了套成型「设计礼仪」,在设计时候需要多加注意。

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

相关文章

今天要跟大家分享的是banner的设计思路。 banner的设计过程可以分为五步: 了解需求 根据需求确定设计风格 根据素材...
Banner设计
@Fornever :上周日,我们以「哪些日常场景中,缺少一个易用的小程序」为命题,举办了光涧实验室第一场 Design Workshop「Do ...
工作坊
首先解释一下后台,它是指服务的管理操作部分,主要是对内容、数据的增删改查。后台产品也主要是 To B 的平台型产品,例如企...
后台界面
画过不少图标,也总结了很多大神的方法,在此归纳一下简单的图标画法,希望对大家有帮助。作为一名 UI 设计师,必须要重视 ic...
ICON
十、始,事物之极致也。大众点评在经历九个版本的迭代之后,重新站在变革的十字路口。 V10,一次新的品牌蜕变开始了……. 一...
品牌
按钮是 UI 和交互设计的基本元素,它们是用户交互的时候,和系统进行沟通交流的核心组件,也是图形化界面当中,最早出现,也...
CTA按钮
这次的主题是用户引导和提示,它们都会打扰到用户,也有很多的共通点,就暂且归到一起集中聊一下。 先看一下整体内容: △...
Toast
写在前面 你们在日常工作中是否会有这样的思考,设计能给业务带来多大的价值?或者你从现在的工作中能够感受到多少价值?难道...
ui设计