操作面板的重要性毋庸置疑，因为那是人们打开应用首先看到的东西。我们花了数月的时间，反复迭代绘制不同操作面板的原型。我们有许多想法：课程包，让用户从3个随机课程中选择，事件相关的课程话题，或是为与我们有合作的专家和品牌创造特殊组件。可能性总是无穷无尽。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

来源：莫贝网

所以，本文章会通过三个真实但抽象的例子说明工作中『放按钮』是怎么做的。真实说的是案例来源于实战，抽象就是提炼出思维但讲的场景都是虚拟的，免得透露机密。有趣的是，三个按理都和时间、时效有关。

案例一

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

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

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

设计过程：

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

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

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

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

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

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

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

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

案例二

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

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

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

设计过程：

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

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

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

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

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

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

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

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

案例三

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

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

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

设计过程：

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

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

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

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

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

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

之前知乎上有这么一个问题：怎样理解信息架构?，@Mr汤进er当时以“商场信息导视图”为例，回答了这个问题，比较适合“入门小白”去理解信息架构、流程图和页面布局，其中针对“信息架构”的回答如下：

小文一篇，话题仍与上周衔接，小结了五种在iOS中向用户申请权限的实践模式，可参考。下面进入译文。

对于iOS app，当功能涉及到推送通知、访问照片或调用相机、获取地理位置等等时，都需要向用户申请授权。申请会发生在app运行的过程中，而不是像Android那样在安装的时候就莫名其妙的问用户是否同意app调用某些系统功能。不过如今Android也在向iOS的方式靠拢。

很多app会在初次使用的过程中直接弹框索取权限。确实是最简单的实现方式，但被拒的可能性也最大(除了那些足够大牌到用户没理由不信任的产品)，用户如果决定重新授权，必须完整执行前面提到的设置流程，因为这个弹框是唯一一次决定的机会。

有些功能相对复杂的app更是会在初次加载的时候就执行一系列的授权申请，先是要求调用相机，然后问是否允许获取地理位置，最后还要让你授权接收消 息通知。某些时候，这种简单粗暴的方式也确实可用，比如前面提到的，用户已经足够了解和信任这款产品的情况下。但对于多数产品，你不能做这样的假设；即便 对于那些大牌，说到底也无法100%确保用户不会看走眼或习惯性的点击拒绝。

次授权申请的成功与否会在很大程度上决定着能否充分地展示产品价值以留住用户，在这个看似不起眼但几乎是一击决定胜败的环节里，我们需要慎之又慎，对于任何优化方案，都要把各种可能性考虑进去。今天分享一个引导流程的实战思考，转化率数据证明，这篇文章很值钱。

我们的Hopper应用，每天会分析海量的机票价格，并能准确的预测价格的变化趋势，告诉用户何时购票最为划算。

Hopper可以非常的进行价格预测并告诉你应该购票还是继续等待。在等待过程中，你可以使用“观望”功能，此时app会持续观望你所关注的航班，直到价格进入“低价”范围，便向你推送建议购买的通知。

图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现。数据是事实或观察的结果，是对客观事物的逻辑归纳，通常一 个具体的数字比一个模糊的说法更加具有可信度和说服力。但单纯的数字本身并不能提供足够的影响力，假设一个淘宝女装卖家3月份的成交金额是50万，这个数 据本身并不能说明什么问题，但是当你加上4月份60万，5月份的成交金额70万等多个月的数据，通过折线图的方式呈现，可以判断出成交金额是上升趋势，再 结合去年同时段的销售曲线进行对比和其他维度信息的补充（图1-1），可能推断出是因为换季所带来得销量增长，店铺可以考虑加大夏季款的上新。所以我们说 图表是解读数字的一种强有力的手段。

创造性固然是个好东西，若是抛弃了产品自身及目标用户的特性，片面的为了创造性而创造性，为了聪明而聪明，那么你就是在拿用户长久以来的认知习惯来冒险，赌上的很可能是产品最核心的价值。

不妨先将注意力集中在产品初次体验流程当中的空状态上，因为这个环节相对特殊，某种程度上属于用户引导机制的一部分。在这个场景下，空状态界面应该实现以下几点目标：

1. 用户教育与产品说明

设计师自然是要解决问题的。每一个项目都是一个问题或挑战。设计师需要透过层层云雾寻找一个解决方案。

我们用一组抽象的图片，总结设计时解决问题的10种思维。