C 位出道按钮的自我独白

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

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，我刚刚提交了吗？”比如下面的情况。 点击提交的动作是一个异步操作，但是点击完之后没有给出合适的进度反馈，导致用户以为没点上或网络不好，于是疯狂地继续点击。结果，我又背锅了！ 细节决定成败，这里只需要在等待过程中给点提示就能解决了啊！ 同学们，掌握下面三个步骤就能够把我的异步操作体验弄得妥妥滴。

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

该死的按钮到哪去啦？

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

再啰嗦两句

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

总结

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

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

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

我的话讲完了（带头鼓掌->点赞）！

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