一个没有用的按钮，为什么还要放在页面上呢？

转载自公众号：1鸣说。作者：一鸣。十二赞产品经理。

我们知道，在做页面设计的时候，最重要的就是确定「页面元素」。哪些元素需要放在页面上，哪些元素不需要放在页面上，这些都是需要深思熟虑的。这一节我们来讲讲页面元素中比较特殊的一类元素——无效元素。

那么什么是「无效元素」呢？一般来说，对于推进页面流程没有任何帮助的元素，均属于无效元素。比如说有一个按钮，点击之后发现其实是无效的，或者说该展示内容的地方实际上是空的等，都属于本文定义的「无效」情况。「无效」指的是不产生作用，对推进页面流程没有任何帮助，即将这个元素完全地去除，也并不会影响页面的正常使用。

「无效」并不是「无用」，很多新人在刚开始做页面设计的时候，很容易想当然地把一些页面中的无效元素删除，简单的思考就是「既然没用，干嘛还把它放上面？」或者是为了页面看起来简洁，而直接把无效元素给去除了。

我们先来看看「无效按钮」。

什么是「无效按钮」呢？例如在点保存的时候，提示不能保存，并告知不能保存的原因。这里的保存按钮就是上述定义中的无效按钮，因为点击保存并没有起到「保存」的作用，并没有使流程往前推进。再例如在点击「选择」的时候，正常的操作是弹窗列表页，从中进行选择，如果如果这个列表页是空的，那么显然无法选择，这个时候这里的「选择」按钮便是无效按钮。简单来讲，所有不能达到「预期效果」的按钮均为无效按钮。

一般情况下，我们应对「无效按钮」有以下4种策略：

（1）策略一：直接隐藏按钮。

（2）策略二：显示按钮但禁用。鼠标悬停提示禁用的原因。

（3）策略三：显示按钮并可操作，点击后弹窗提示不可用的原因。

（4）策略四：显示按钮并可操作，进入新页面（包含弹窗页）提示不可用。

这4种策略的适用场景分别是什么？我们针对电商系统常见的前后台页面逐一说明各自的应对策略。

列表页内容

当列表页的内容为空时，该页面就是「无效页面」，通常来讲，列表页为空属于特殊情形，一般不隐藏，而是在列表页展示内容的区域告知暂无内容。后台部分列表页很常见，采取这种策略的原因是列表页内容为空仅为临时性的特殊情况，非大概率事件，无须对该种情况增加额外判断，同时也可以让用户知晓存在这么一个页面。另外主动性列表页（由用户自行主动产生内容的列表页）一旦隐藏入口将无法进行内容新增。

更准确的讲，实际上列表页内容为空情形属于以上的策略四。一般都是通过点击事件后进入列表页，承载点击事件的按钮便属于以上的策略四，采取策略四的原因一般是：通过点击按钮的下一步操作通常是可用的，便不在这一个环节进行拦截了，用户的预期是这个按钮是可操作的，即便禁用还是会习惯性的去进行点击。

列表页操作按钮

列表页除了展示内容的「业务区」，一般会在行尾放置「操作区」，对每一行的内容进行操作。列表页的操作按钮的主要特点是，按钮都基本一致，因此对于一个不可用按钮直接隐藏会导致按钮区的错位，因此对于每一行的按钮都一样的操作区，采取策略二是不错的选择。实际上策略二和策略三并无区别，除非是需要提醒的内容过多，无法在按钮区承载，则使用消息框提示，否则一般都建议使用策略二。

上面这种是普遍情况，还有一种特殊情况是，对于同一行的元素存在多种状态，每种状态的操作有明显不一样的地方，很难做到统一，如果将所有按钮都进行摆放，都会造成操作区大大冗余，得不偿失。在这种情况下，就采取策略一。将其他状态的按钮进行隐藏。常见的例如订单列表页就采取了这种策略。

编辑页

在编辑页中，我们知道，如果用户填写的内容未达到要求的话，我们是不允许用户进行保存的。这个时候如果用户点击保存，很显然是无效的，这种情况怎么处理呢？一般来说，有两个策略：一是用户没完成一个输入，就对输入区进行检测和判断，如果填写错误，则标红提示错误信息，在用户未完成所有的必填项之前，保存按钮均保持禁用，仅当所有内容均正确输入后才将保存按钮变更为可用。二是在用户输入时不检测，保存按钮始终保持可用，但是点击保存时，提示无法保存的原因。以上两种策略均可用，不过策略一的用户体验会高于策略二。

总归一点，所有的策略都是围绕着「用户预期」来的，都是为了让用户能够少思考，更好地使用，少出错。而不是为了使页面看起来「简洁」而强行「简洁」，否则就是本末倒置了。上面的二三四策略区别并不明显，主要区别在于是否需要隐藏一个不可用的按钮，一个简单的方法就是，如果这个按钮是这个页面是主要元素，那就绝对不要隐藏，否则会造成用户操作中断。一个按钮虽然不能点，但是却给用户提供的明确且有效的信息，而如果直接隐藏了，则这个时候很容易产生困惑，会一直去寻找这个按钮，找不到只会认为是遗漏了而不会认为产品贴心地帮他过滤了无效信息。

【原文链接】