产品需求

有一天，产品给我发来一个需求，是我们租衣订单的详情页。

在订单详情页的商品列表里，有如图所示的需求信息——密密麻麻。

 

我们都知道，界面信息最好能简洁一些，简洁的才是好看的——但是，现实就是这么残酷，从业务的角度，很多复杂的信息都是必要的。

 

复杂的信息本就很难处理了，更加尴尬的局面是——状态，有些状态下显示或者不显示，有些状态下是这样的信息或者是那样的。在这个案例里，有超过一半的信息量是可能不显示的，而且还是分成两组信息的可能不显示，也就是总共存在2×2，即4种可能性。

 

对着PM翻一个大大的白眼，然后开始料理它们。

信息布局

信息布局的第一步是对信息进行分组

我有一次在脉脉上发状态说在进行UED设计的时候注重信息的分组，有很多同行以影响设计操作效率为由反对，其实在我看来，信息分组并不只是设计的过程，更加是分析需求的过程，从业务逻辑、用户心智来看，哪些信息归纳在一起是更容易被用户理解的？怎样归置才便于查找？

比如说，用户心智的角度，商品品牌和名称就应该是归纳在一起的，如果他们看到品牌名却找不到商品名的话，就会感到焦虑和恐慌，这就是不理想的用户体验了。

对信息进行分组后，我有点懵逼，因为我们看到，总共3组信息里，两组都是可能不存在的（可选），要怎样设计才能兼顾未来的2×2种变化呢？

信息布局的第二步，是对信息进行结构关系的层次化处理

即，哪些信息组之间的关系更近？哪些比较疏远？哪些是平行关系？哪些是嵌套关系？——在处理这些关系之前，我们先要深入的理解业务。

在这个案例里，商品信息、租赁信息、购买信息，其实有多种分层分法：

比如，商品信息+（租赁信息+购买信息）

如果脱离业务来看，这样的分法看上去也是比较合理的，因为租赁和购买是对商品的两种看似平等的操作，且两项里都有价格，所以看上去这俩是可以归为一类的。

但是在这个案例里，如果我们深入的了解一下业务就会发现，在形成租赁订单的此时，租赁流程已经结束了，租赁信息只是实现展示目的，帮助用户追溯之前的租赁订单；而此时，购买是一个业务方希望用户去完成的任务——因此从业务逻辑的时间序列上来说，应该是这样的分层方式：

（商品信息+租赁信息）+购买信息

信息布局的第三步，是对信息进行布局，兼顾清晰和美观

相对来说是最考验设计师设计功力和设计经验的一个步骤。

我们尽量把固定不变的信息布局在左上方，起到一个稳固定位的效果，这样即便其他两项可变信息全部缺席，只要固定信息还坐标在左上方，这套布局在视觉上就依然是稳固的。

另外租赁价格和购买价格、参考价格，三个价格容易引起很大的迷惑性，所以这里我刻意的把租赁信息移到了右上方，让租赁价格和购买价格可以拉开足够的距离。（但其实这样的布局方式从更加广阔的视角还有另一项一举两得的好处，后面再说）。

细节设计

接下来我们进行进一步的细节设计。

这部分可能是大家会相对比较熟悉的UI的工作了，字体字号字重颜色等等。

但是难点在于，繁杂的信息还是要根据业务上信息的重要度、优先级分配不同的展示方式，尤其是信息较多的情况下，视角上的区分可以更容易阅读，增加用户接收信息的效率，但是同时又要兼顾整体的和谐美观，到底有多少种不同的呈现方式能把这么多信息安排的明明白白的，说到底就看设计师在视觉把控上的18般武艺了。

特别要提醒的是，在一个页面中的信息一般分为两种，展示信息和任务信息。

展示信息简而言之是让用户看的，比如这里的商品信息和租赁信息，因为商品已经挑过了，租赁也完成了，所以这里只是明确的把信息展示出来即可。

任务信息则是希望用户触发的任务，需要具有很强的引导性，在视觉上需要进行加强，不如这里的购买信息，购买的价格和购买触发的按钮都需要视觉上的加强表现，以促使用户采取行动，完成业务上期待的购买行为。

经过一系列的工作，最终得到了比较理想的设计稿。

且可以确认，即便租赁信息、购买信息两项内容不出现，也不会影响到布局效果。

产品优化

下面是这个案例中比较特殊的附加的一个步骤。

众所周知，产品和业务是设计的需求方，但是作为设计师的我们，是否有可能通过用户体验更加深刻的东西，给到需求方更加专业的支持呢？

答案是肯定的。

在这个案例里，排版后我发现，对于不需要加价租赁的普通商品，与其隐去租赁信息，不如对租赁信息进行零标价处理，并且说明「会员免费租」，这样和「奢品加价租」形成明确的对比，帮助用户更好的理解两项业务。当然，附加的好处是，在视觉感受上显得更加平衡规整了。

业务方也认可这是一个非常好的建议。

我们做设计时，立足于某个具体的点，同时要兼顾到全局，右侧的租赁价格和订单明细中右侧的租赁价格一脉相承，非常便于用户理解价格的总计操作。

最后，别忘了再次确认设计稿已经兼顾了未来的各种可能的状态，并且把这些状态整理完毕，再提交开发。

用户体验设计的难点之一，是基于场景对复杂信息进行合理化处理，从而帮助用户完成业务方期待的核心任务——它要求设计师能够深入的理解业务、细致的懂得用户、专业的掌控设计。

在这里和大家分享的就是我近期工作中遇到的一个实际案例，一个看似并不大的功能点，要想处理的稳妥，却并不是容易的事情。它要经过很多关键的步骤，尽管对于资深UED来说，这些步骤可能根本不会落在纸面上，而是迅速的在脑海里执行，直接输出结果——但是并不代表这些工作不存在，这就是所谓UED的经验和能力。

随着业务和产品的演进，功能和信息的复杂化是必然的趋势——如果很复杂的业务看上去却很清晰，那一定是用户体验设计的居功至伟。

我认识的一个老板曾说过：「好的UED真是又好又贵，但是只有亲历过，才知道到底有多好用！」

因为种种原因，UED并不是很好衡量和描述的工作，但是今天我就是要通过这样一个案例来聊一聊，解答一下诸位老板的日常好奇——UI每天都在忙什么？

初来站酷，如果大家喜欢，欢迎推荐分享，更加欢迎评论区讨论。

SO，还不把本文转发你的老板嘛？