C 位出道按钮的自我独白
Hi,我是一个随处可见的按钮,对于很多应用来说,我承担着绝大部分的用户互动。但是,并不是所有人都懂我的特性,结果总是让我背锅!他们经常会说:“这个按钮太垃圾了,体验真差!”实际上,我想说,这真的不是我的锅!
我是个木头?
用户经常说我的一个问题就是把我比喻成木头,点到我身上的时候居然没有任何反应,就像下面这种情况,你们看出来我被点击了吗?用户遇到这种情况的时候,他们会说:“这个按钮点到让我怀疑人生!” 他们把我比喻成木头也就算了,不能忍的是他们有时候还把我比喻成木讷的程序员,这我就不能忍了!毕竟那是我的亲爹亲妈啊!不行,我得回炉重造!
让我对点击反应很简单。对于移入(hovered),按下(pressed)我都能做出相应的反应,只是需要给我配置不同的反应样式就可以了。样式包括背景颜色,前景颜色和文字颜色。
对于 Flutter 版本的我而言,提供了一个 buttonStyle
的属性来对我的各个状态配置不同的颜色,配置好之后就可以快速反应啦,看一下下面的效果是不是好多啦!
对于代码来说,其实很简单,为了提高复用性,封装一个 MaterialStateColor
的子类,然后指定我的各个状态应该返回什么颜色就行了。例如下面的代码就是配置我不同状态的背景色。记住,除了背景色( backgroundColor
),我的前景色(foregroundColor
),阴影色(shadowColor
)和子组件中的 Text
组件的文字样式(textStyle
)都是可以配置的。
class PrimaryButtonColor extends MaterialStateColor {
const PrimaryButtonColor() : super(_defaultColor);
static const int _defaultColor = 0xDB1887E8;
static const int _pressedColor = 0xDE074EA5;
static const int _hoveredColor = 0xDE549BF3;
@override
Color resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) {
return const Color(_pressedColor);
}
if (states.contains(MaterialState.hovered)) {
return const Color(_hoveredColor);
}
return const Color(_defaultColor);
}
}
// 使用示例
TextButton(
onPressed: () {
if (kDebugMode) {
print('我被点击了!');
}
},
style: const ButtonStyle(backgroundColor: PrimaryButtonColor()),
child: const Text(
'这就是我',
style: TextStyle(
color: Colors.white,
),
),
),
用户体验原则:给予用户动作的及时反馈,比如按钮悬停和点击后的背景色的改变。
提交了吗?
用户会经常用我来提交表单到后台,但是他们有时候挠着头问:“呃i,我刚刚提交了吗?”比如下面的情况。 点击提交的动作是一个异步操作,但是点击完之后没有给出合适的进度反馈,导致用户以为没点上或网络不好,于是疯狂地继续点击。结果,我又背锅了! 细节决定成败,这里只需要在等待过程中给点提示就能解决了啊! 同学们,掌握下面三个步骤就能够把我的异步操作体验弄得妥妥滴。
- 点击我之后立即禁用我避免出现过快点击导致重复提交(上面例子的蒙层实际上也避免了重复点击)。
- 给用户等待过程指示,比如 loading 的转圈。
- 收到提交结果后,给出结果反馈,比如上面的“提交成功”。
该死的按钮到哪去啦?
这里我不得不批评某些同学,明明我是妥妥的 C位出道角色,应该给我充足的曝光渠道收割一波流量红利,却偏偏把我“雪藏”。这不,用户找不着我了,然后一脸茫然 —— 该死的按钮到哪去了? 对于长页面,肯定会需要滚动的,这个时候千万不要把我放到最底下,用户进来找不到我会着急的。而且,还会影响业务转化率哦!你们自己看看各大电商的 App,加入购物车和购买按钮是不是都是固定在底部的 —— 这才是 C 位出道的我的应有待遇啊!
再啰嗦两句
还有一些情况,也会影响我的个人形象。比如对于同样的功能操作,一会将我放底下,一会放右上角,一会悬浮在页面某个角落。同学们,让我跑来跑去,很累的,好吗?而且,你不能让用户也跟着跑来跑去啊,这样他们很容易跑路的啊!再比如,给我承担几项功能,我曾经被命名为“再记一笔”,可是我是个提交按钮。当前的活还没干完,然后就让我干下一个活,而且是一气呵成那种,臣妾做不到啊!程序员大大们,单一职责原则不能忘啊!
总结
啰嗦了这么多,总结一下吧。我就说最后3点:
- 一定要及时反馈!及时反馈!及时反馈!点到我的时候,给他们的颜色瞧瞧!不要让人把我当木头!
- 提交过程等待时请给个友好的等待提示,结束后请给出结果反馈!
- 避免出现反复提交!
再补充三点,一是注意如果我是 C 位咖,请给我保留最好找的位置,比如固定在底部。二是不要让我到处跑,我跑没事,用户跑了事大。三是,我能力有限,一次给我一个活就行。一口吃不成胖子,事情咱一件一件做。
我的话讲完了(带头鼓掌->点赞)!
源码地址:按钮的用户体验
转载自:https://juejin.cn/post/7144705839805235207