三个按钮背后由小见大的交互思考发布者：本站     时间：2020-06-20 14:06:48

初入交互设计工作，最常见的需求就是——放按钮。放按钮看起来是超级简单的事，无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等，但殊不知其『麻雀虽小，五脏俱全』，小小的按钮设计中也蕴含了很多交互设计的思维，当然除了设计本身之外，还能看到如何平衡开发、产品以及用户各方的需求。
所以，本文章会通过三个真实但抽象的例子说明工作中『放按钮』是怎么做的。真实说的是案例来源于实战，抽象就是提炼出思维但讲的场景都是虚拟的，免得透露机密。有趣的是，三个按理都和时间、时效有关。

案例一
虚拟场景：某订单页面，商品订单以卡片的形式罗列，每个卡片下方有若干操作按钮，如支付、取消、投诉等。根据规则，投诉按钮必须在订单产生2天后才可使用。

现状：目前产品线上的设计方案是，几个按钮同时呈现可点击状态，当投诉按钮处于可用时间段内时，点击就会去往一个投诉页面填写投诉申请；当目前处于不可投诉时间段内，投诉按钮点击后弹窗提醒用户：还有 XXX 时间才可发起投诉。



目标：提出这个案例时，我们希望让这个操作过程更加自然，不要让用户点击了之后才告诉用户这个功能不可用，而不要脱离用户的交互期望（如果按钮可用，交互期望就应该是实现相应的功能）。

设计过程：

最开始考虑这个案例时，我的第一反应就是如果一个按钮当前是不可用的，就应该隐藏起来，这个场景按钮还是挺挤的，明明不能用的东西为什么要放在界面中吸引视线呢？



但是很明显，这个第一感觉有严重的硬伤。首先，对于一个按钮或功能，告诉用户这个东西不可用，和不告诉用户有这个功能，是完全两码事。尤其是一个存在可用/不可用两种状态的按钮，在特定时间将其隐藏的风险非常大——你不知道这个功能的被需要度多高。

于是，我们去查阅了一下数据和之前的设计方案。首先得出的结论是，这个按钮的点击率不低（超过10%的用户，而且这个页面的总 pv 非常高），其次，以前有尝试过把这个按钮直接在不可用时隐藏的设计，但是立刻引来了大量的客服投诉——用户找不到投诉入口在哪里了。

所以，似乎数据和历史方案帮助我们排除了第一种做法，也就是直接隐藏按钮。那在不可用期间把按钮置灰怎么样？



置灰的好处在于，用户一眼就能看到这个功能的存在，同时又能知道这个功能暂时是不可用的。但是问题也来了，怎么知道这个按钮什么时候可点什么时候不可点？一个解决方案是在置灰的按钮中加上文案提醒，另一个是点击置灰的按钮后给出文案提示，但是前者似乎没有足够的空间进行展示了，而后者看起来不错……但是好像又回到了原点？（后来还讨论过一些更复杂的方案，比如最后半天置灰，更早的时候隐藏等，但我们并无法判断用户对时间点的真实感受和期待。）

所以最终的结论就是，由于当前的线上形式并没有什么致命的问题，也没有收到太多关于体验方面的投诉，而考虑到开发成本、设计成本和迭代周期，还是选择保持线上的样式不变。

感觉走了一圈走回原地？在实际工作中经常遇到这样的情况，设计师通过本能和直觉判断某些内容的体验可能不是最佳的，但经过资料搜集、自我批判、成本评估后发现，似乎保持现状是最好的做法。

总结：这个案例告诉我们，设计时不要总想着找茬，第一反应往往可能漏过了诸多细节，思考清楚再做行动。