移动控件_组件01_一般按钮

如题所述

第1个回答  2022-07-14

如果我们将移动端全部控件,按照任务属性进行归类,大致可归纳为4类,
1、命令控件 (imperative Control)
2、选择控件 (Selection Control)
3、输入控件 (Entry Control)
4、显示控件 (Display Control)
按钮 (button)属于命令控件的一种。

按钮是我们进行移动端产品设计,经常要使用的一类控件,它包含多种不同的类型。常见有 文字按钮 (Text button), 轮廓按钮 (Outlined button), 实体按钮 (Contained button), 图标按钮 (icon button), 悬浮按钮 (Floating action button)。

其中 文字按钮 (Text button), 轮廓按钮 (Outlined button), 实体按钮 (Contained button), 图标按钮 (icon button),是我们本次课程的内容重点

如图,以 纯文本 (A)或是 图标 + 文本 (A+C)组合而成的按钮类型,我们将之称为 文字按钮 (Text button)

主体内容区慎用实体按钮,实体按钮会对用户浏览形成事实上的干扰

如图,以 图标 (C)或 图标 (C)+ 范围容器 (B)组合而成的按钮,被称为 图标按钮 (icon button)

图标按钮以特定的视觉图形,来示意命令属性,相较于文字按钮,使用图标按钮,能显著提升界面的整洁度。很多应用的标签栏,都通过使用图标按钮来完成设计。

图标的设计,需要设计人员,有较高的图形释义能力。如果图标的形态,不能准确的传达其命令含义,就会给用户带来困扰,用户不得不通过点击“试错”的方式,来探究图标背后的命令含义。

为了平衡图形示意准确性的问题,设计人员会尝试各种解决方案。例如,在iPhone手机照片应用中,设计人员通过使用大量的图标按钮,让整体界面显得非常整洁,但问题随之而来,用户很难从这些抽象的图形按钮中,理解其背后真正的命令意图,这种情况下,设计人员想到了一个比较好的解决方案,当图标按钮被选中时,按钮正上方区域便同步显示相关的注释字段。

如图,以 文本 (A)+ 轮廓容器 (B)或 文本 (A)+ 图标 (C)+ 轮廓容器 (B)组合而成的按钮,我们称之为 轮廓按钮 (Outlined button)

文本 (A)+ 纯色范围容器 (B)或 文本 (A)+ 图标 (C)+ 纯色范围容器 (B)组合而成的按钮,我们称之为 实体按钮 (Container button)

实体按钮可以常驻在页面的底部位置,当有相关命令需要被执行时,能方便用户随时点击。

在移动端的表单填写页、筛选页或设置页,实体按钮通常会被放置在页面内容的最下方,当主体内容设定或填写完毕后,用户可以通过点击实体按钮完成提交。

实体按钮有时会作为“背景板”来承载某些命令执行的结果或状态,比如收藏、加载等。

报名状态发生变化时,按钮的前景文案需适时作出变更,以辅助用户判断

我们在进行按钮设计时,需要对按钮的前景文案持续的提炼优化,一个长度超过5个汉字的前景文案,往往被认为还有进一步优化的空间。但文案长度,和其准确释义传达,存在天然的矛盾,尤其是当用户置身于比较陌生的任务场景中。所以持续优化文案,使得“文能达意”又不赘余,一直都是设计人员努力的方向。

按钮前景文字不宜过长,按钮的前景文案,需要在表意明确的基础上,尽量精简,过长的文案是不被推荐的

图标按钮、实体按钮和轮廓按钮的范围容器,可以很好的为用户执行命令,提供点击范围参考。但是在现实的软件开发中,为了保证用户执行命令时,触发操作的灵敏度,真实的 响应区域 ,往往和范围容器呈现的略有不同。

以输入法为例,当输入法被调用时,便会驻留于屏幕的底部。输入法的输入面板由多组按钮构成,如此密集的按钮排布,按道理讲,我们在输入中,误触应该时有发生,但是真实的情况是,误触被限定在较低的频次,这是什么原因呢?

这种低错误率,其实主要归功于设计人员,他们仔细研究过各种极限输入场景(比如单手操作的扇形点击区域,双手操作因遮挡导致的点击偏移等),通过大量的点击数据,不断优化和修正按钮的可视区域和真实响应区的坐标,来提升输入的准确率。

输入法对按钮响应区域调整的思想,我们同样可以借鉴到其他的产品设计中。例如,一些产品经常会在狭小页面空间,设置多组位置相近的按钮,此时我们应该灵活设定其响应区域,以减少误触的发生。

如下所示,我们总结了4类按钮,在页面交互中多种按钮状态(其中Focused状态是轨迹球手机的选中状态),在具体的视觉设计中,经常遗漏按钮状态的设计师,可对照参考

以上就是本次课程的主讲内容,最后我们通过一个表格,简要总结一下本次课程的内容要点

相似回答