C 位出道按钮的自我独白

3,172 阅读5分钟

本文为掘金社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

Hi,我是一个随处可见的按钮,对于很多应用来说,我承担着绝大部分的用户互动。但是,并不是所有人都懂我的特性,结果总是让我背锅!他们经常会说:“这个按钮太垃圾了,体验真差!”实际上,我想说,这真的不是我的锅!

我是个木头?

用户经常说我的一个问题就是把我比喻成木头,点到我身上的时候居然没有任何反应,就像下面这种情况,你们看出来我被点击了吗?用户遇到这种情况的时候,他们会说:“这个按钮点到让我怀疑人生!” 点击没反应.gif 他们把我比喻成木头也就算了,不能忍的是他们有时候还把我比喻成木讷的程序员,这我就不能忍了!毕竟那是我的亲爹亲妈啊!不行,我得回炉重造!

让我对点击反应很简单。对于移入(hovered),按下(pressed)我都能做出相应的反应,只是需要给我配置不同的反应样式就可以了。样式包括背景颜色,前景颜色和文字颜色。

对于 Flutter 版本的我而言,提供了一个 buttonStyle 的属性来对我的各个状态配置不同的颜色,配置好之后就可以快速反应啦,看一下下面的效果是不是好多啦! 按钮不同状态的反应.gif 对于代码来说,其实很简单,为了提高复用性,封装一个 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,我刚刚提交了吗?”比如下面的情况。 提交处理.gif 点击提交的动作是一个异步操作,但是点击完之后没有给出合适的进度反馈,导致用户以为没点上或网络不好,于是疯狂地继续点击。结果,我又背锅了! 细节决定成败,这里只需要在等待过程中给点提示就能解决了啊! 异步loading提示.gif 同学们,掌握下面三个步骤就能够把我的异步操作体验弄得妥妥滴。

  1. 点击我之后立即禁用我避免出现过快点击导致重复提交(上面例子的蒙层实际上也避免了重复点击)。
  2. 给用户等待过程指示,比如 loading 的转圈。
  3. 收到提交结果后,给出结果反馈,比如上面的“提交成功”。

该死的按钮到哪去啦?

这里我不得不批评某些同学,明明我是妥妥的 C位出道角色,应该给我充足的曝光渠道收割一波流量红利,却偏偏把我“雪藏”。这不,用户找不着我了,然后一脸茫然 —— 该死的按钮到哪去了? 按钮隐藏.gif 对于长页面,肯定会需要滚动的,这个时候千万不要把我放到最底下,用户进来找不到我会着急的。而且,还会影响业务转化率哦!你们自己看看各大电商的 App,加入购物车和购买按钮是不是都是固定在底部的 —— 这才是 C 位出道的我的应有待遇啊! 底部固定按钮.gif

再啰嗦两句

还有一些情况,也会影响我的个人形象。比如对于同样的功能操作,一会将我放底下,一会放右上角,一会悬浮在页面某个角落。同学们,让我跑来跑去,很累的,好吗?而且,你不能让用户也跟着跑来跑去啊,这样他们很容易跑路的啊!再比如,给我承担几项功能,我曾经被命名为“再记一笔”,可是我是个提交按钮。当前的活还没干完,然后就让我干下一个活,而且是一气呵成那种,臣妾做不到啊!程序员大大们,单一职责原则不能忘啊! image.png

总结

啰嗦了这么多,总结一下吧。我就说最后3点:

  1. 一定要及时反馈!及时反馈!及时反馈!点到我的时候,给他们的颜色瞧瞧!不要让人把我当木头!
  2. 提交过程等待时请给个友好的等待提示,结束后请给出结果反馈!
  3. 避免出现反复提交!

再补充三点,一是注意如果我是 C 位咖,请给我保留最好找的位置,比如固定在底部。二是不要让我到处跑,我跑没事,用户跑了事大。三是,我能力有限,一次给我一个活就行。一口吃不成胖子,事情咱一件一件做。

我的话讲完了(带头鼓掌->点赞)!


源码地址:按钮的用户体验