增加用户体验的细节--三个按钮的交互设计思维

最初接触交互设计的工作，由于现代网络和APP的发展需要，一般设计最多的就是放按钮，市场的需求就是这几点：1.摆放按钮的位置、2.确定按钮的状态与反馈、3.按钮的样式等这几个方面；然而一个小小的按钮设计是“五脏俱全”，包含的很多交互设计的思维，并且还考虑到产品的需求，用户的体验等各方面的平衡开发。

 

案例一

假设场景：在一个订单页或者商品订单等，每个订单下发都会有几个可操作的按钮用于取消，确认，投诉等。一般情况下订单产生了2天后才可以使用按钮。

现状：目前市场上流行的设计方案是，不管订单有没有生成，下面的几个按钮都是可以点击的，区别在于：如果按钮是出于可用时间段内，点击后就链接到投诉申请的页面，如果出于不可用的时间段内，则会提醒还有几天才能发起投诉。

 

 

目的：一个设计方案的设计时都是为了让用户操作的工程更加简单，有逻辑性，而不是告诉用户，这个按钮点击之后没反应，就好像一个空气，这样得不到用户一个体验的期望。设计按钮，只要点击就会有反应，交互期望就应该是实现相应的功能。

 

设计过程：

首先开始组织一个方案的时候，就必须有这样的一个反应，不可用或者暂时还不能用的按钮可以先隐藏起来，这样一方面可以减少界面的复杂程度，另一方面可以减少用户对这一个按钮的吸引力。

 

 

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

于是，根据之前的方案设计的数据和整理出来，首先得出的结论是，这个按钮的点击率不低（超过10%的用户，而且这个页面的总 pv 非常高），其次，如果把这个投诉按钮给隐藏了，用户寻找不了投诉入口的时候就会引来大量的投诉电话。

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

 

 

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

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

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

 

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

 

案例二

假设场景：对商家或商品进行投诉之后，需要用户选择投诉原因，如态度不好、价格变动、缺货等。其中，在某些特殊时间段内，如该商品本身就是秒杀商品，用户发起投诉时则不能选择『缺货』原因。

 

现状：线上目前没有这个功能，即所有的投诉原因都是可选的，选择组件使用的是 picker，大概如下图的样式（最常见的就是选择时间啦）。

 

 

 

目标：对于『缺货』这个投诉原因进行交互处理，令其在特定时间段内（商品秒杀阶段）无法选择，并给用户相关提醒。

设计过程：

乍一看和案例一非常相似，但其实差别还是挺大的。案例一属于设计师自发尝试对体验改进，而案例二确实明确的业务需求，需要把没有的功能融入到现有方案中。拿到这个需求时，首先看到大概会涉及两个页面可以用来设计，分别是投诉页面和投诉原因选择页（这两个通常不会直接在一起，但是后者有可能以弹层的形式出现，当然也可能新开页面），于是闪过几种可能的处理方案。

方案一，在投诉页面提前进行文案披露，告诉用户『缺货』原因不可选，同时进入原因选择页时将『缺货』选项置灰；

 

 

方案二，原因选择页的『缺货』按钮正常可选，选择后通过弹窗提醒用户该原因不可用，并恢复默认待选原因状态；

 

 

方案三，仅设计原因选择页，在『缺货』选项内提供文案如『暂不可选』，并且置灰该选项。

 

 

 

详细了解需求背景之后，方案三首先被排除了。原因很简单，本身置灰就已经表示不可选了，『暂不可选』文案所表达的内容太少，既没有展示出不可选的原因，也没有告诉用户什么时候恢复该投诉选项。同时，我们得知反馈的文案会比较长，大约有十几个汉字，按钮本身的空间有限，并且直接在原因字段内拼接『暂不可选』也会有点技术成本。

方案二在流程上是顺畅的，但是和案例一中提到的类似，我们一般希望用户在操作之前就能预期到交互的结果，而不是让可选的按钮点击后出现提醒再告诉用户不可选。

同时考虑方案一，对于按钮置灰有一个问题需要考虑，可以看到无线端使用的是这种滚轮式的选择组件，其本身置灰能不能做是要打个问号的，事实上和开发沟通之后发现确实无法实现。最后，综合考虑下，还是采用了方案二。

总结：通过案例二可以看到，设计中常常会有一个最优解，但又总会因为技术成本、其他业务原因的影响去妥协，最后得到的方案也许不是交互上最佳的，但确实整体效率最高的。这也说明了，新人不要轻易对其他产品做体验分析，因为你并没有这些真实限制，所得出的结论也是空中楼阁。

案例三

假设场景：某些操作是有时效的，比如某个商品限量销售，如果还没有到付款的时间节点，付款功能是不可用的，那么付款按钮能否优化处理。

现状：当商品不在支付时间段内，付款按钮隐藏。

 

 

目的：不要让用户找不到付款按钮，令操作更加顺畅，可见性更强。

设计过程：

和案例一一样，这也是一个设计师自发想要改善体验的过程，正好有其他业务需要对这些页面进行改造，能否把这个按钮隐藏的过程优化呢？原因相信大家都能理解，把不可用的功能藏起来，总归不是最好的做法。

仔细查看线上的样式我们发现，这个案例和案例一还不太一样。最重要的一点是，付款的时间是有倒计时的，也就是说即便付款按钮本身是隐藏起来的，但其附近依然有文案提醒现在不在支付时间内，所以用户不太容易迷惑。

比较简单的解决办法就是，把支付按钮暴露出来，并且置灰。看来今天三个案例都和置灰杠上了。经过交互小组和产品小组的讨论，都一致觉得把不可用的支付按钮置灰更加合适，并且线上已有文案提醒说明，用户也更容易理解。

 

 

但是这个案例最后的结论有些出乎意料，首先，因为线上所有类似业务都采用了隐藏不可支付按钮的做法，所以如果这类交易要改，其他全都要改（时间成本）；其次，这个按钮组件在早期开发过程中，并没有设计、开发 disable 的状态，也就是没有置灰的样式，如果要做，需要重新设计和开发（开发成本）；最后，线上这个隐藏的样式已经存在很长时间了，用户大部分都其已经习惯，并且没有发生普遍的反馈表示认知困难（用户理解成本）。所以，结论还是保持线上的样式。

总结：有时候设计是对的，所有人都认可，但是依然会有各种因素前来制约。尤其在较大的产品团队，业务节奏快、需求多、上线紧，这类优化体验的工作常常优先级不够高。与此同时，很多朋友可能会说一个按钮而已，加一个 disable 的样式又有何难？然而很多团队的流程规则导致业务工作是一条线，组件优化新增样式又是另一条线，想要一步把两件事都做了并没有想象中的容易。

怎么样，简单的三个按钮，是不是让你有些晕了？交互设计的难点常常就在于体验、产品、开发各个内容的协调，相互妥协，最后达到一个平衡的状态。由小见大，小按钮我们能应付了，慢慢就可以面对大问题啦。

 

转载于:https://www.cnblogs.com/qudaxueyuan/p/4820505.html