之前在交互周会上，作为项目分享了之前做过的拍卖线的出价流程，由于讲的比较匆忙，所以还是想整理成文字，累积下。做多了日常以后，常常觉得如果不多做字面的积累，很多看似瞬间的累积，很快就会被更多的项目淹没~~

之所以把这个项目分享出来，是因为觉得我们在工作中所做到的大小日常，99%的都不是“无中生有”的，都具有一定的历史，也一定有一定的痛点，一定也有新的业务变化在里面，如何在短时间内把握这些因素，迅速转化为一个合理的方案，是有一定方法的，虽说方法不一定完美，但希望给大家一些思路。

开始正题，大概介绍下这个出价流程的背景：拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的，随着拍卖业务的发展，觉得有必要以更简单的形式来进行操作，所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断，而之前做的一版浮窗出价流程并没有交互设计完整的参与，导致了页面逻辑中有一些问题，所以需要交互再次参与进来将这个出价流程梳理好，但另一方面，之前尽管有问题的出价流程由于业务需要，却正在上线中……

首先，从项目的背景中，就可以总结出这个项目有几个特点：1，有大概的交互形式，且已经不能修改（尽管当时也有人觉得浮窗形式不是很好，但一切都在上线中，所以暂时也无法改变）2，发展中的业务和要求革新的心态（这在很多项目中都存在，我们通常不喜欢一成不变，但面对发展中业务，多变也是一个挑战）3，没有原始页面数据（这是最无奈的一点，因为看不到用户的反馈，让我们少了很多依据）

其次，这个项目从交互角度出发，这个项目有几个挑战：1，浮窗形式的界面（区别于一般也页面，对信息的分类和呈现要求更高）2，需要对流程做出完整的梳理（一般涉及到前后步骤的页面，最好有完整的流程图有助于检验页面） 3，之前的版本出自非专业人士（势必需要纠正一些浅显的问题，这也是之后开始着手的切入点）

总结了以上几点，确定了这次项目的主要核心点，即原有流程的提升和修正，修正原有出价流程中错误的地方，提升原有流程页面的交互体验。

由于接到这个任务的时候对拍卖业务还不是很熟悉，所以一方面与PD沟通了解拍卖业务，另一方面让QA把准备上线的拍卖浮窗的每个状态给到我（因为之前的版本没有完整的交互稿）如之前所说，先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题，以此归纳出具有针对性的方法。

1，  文字引导与输入框距离太遥远

2，  同类信息被放置在不同的地方

是否设置成代理出价是和用户的出价有关的信息，应该归类显示。

1、2两点，实际上都牵涉到了信息归类显示的问题。在一个页面中，一些相关的信息（例如同类的，行为上可以连续操作的）尽量可以放在一起，但其中要避免相同形式表达的信息（例如都是数字的形式）则要分开展现，以免互相混淆。

3，  操作行为的起始和完成逻辑不通

在上图中有修改的点击操作但在接下来却没有“确定”或“修改完成”的操作，而是直接通过整个确认出价的动作作为结束，一定程度上并没有给于用户一个操作闭合，很容易让用户搞不清楚自己正处在修改资料还是出价哪种行为。

4，  浮窗文案提示并未从用户角度出发

在这个首先提示用户“出价成功”，但随即又告知用户其他用户的出价已经超过了他，然后让用户重新出价，这个充满矛盾的页面，就是因为没有站在用户的角度出发。这里所谓的“出价成功”仅仅只是后台有此次出价的记录，而对于用户来说实际应该是“出价失败”。

在浮窗的操作体验过程中，由于遇到的情况会很多，很有可能在页面跳转中流失一定的用户，所以，避免给予用户挫折感。并且，不论在哪一步文案的表达都应该站在用户的角度，更便于在整个拍卖过程中传达正确的信息。

5，  文案展现上主次不明

上图的浮窗中用非加粗的字体表达了一句比较重要的话，而下图的浮窗却用加粗的字体表达一句不是那么重要话。可能在大的页面中这些都不会这么凸显出来，但由于浮窗区域比较小，错误就显而易见了。

6，  文案上表达有欠缺

上图浮窗的“建议您设置一个更高的价格并重新出价”语义表达重复而累赘，下图浮窗中的话也是类似问题。而且同样都是让用户重新出价，使用的确是两种不同文字的button。

4、5、6点都是文案上表达的问题，对于浮窗中的文案，一方面可以通过视觉上不同层次的文案做区分，另一方面文案本身也要符合逻辑。

7，  一些必要信息的缺失

例如浮窗中的单位“元”不见了，这种常见的问题也很容易被我们忽视。

由于分别找出了原有页面中的一些问题，接下来的思路也显现出来，将浮窗页面的信息做大概的功能区隔，并对具体区块中的信息做规范表达。

将浮窗分为三大区域：橙色区域是有关出价的信息/最主要的信息提示；蓝色区域是保证金和客户信息/信息补充区域；绿色区域是判断区域/出价按钮或关闭窗口的位置。

橙色区域还细分成三个部分，第一行显示和数字相关的信息/表示当前最主要状态的信息 ；第二行为重新出价设置；第三行为设置代理价。第二和第三行的信息在一些状态中是没有的，所以相应会不做显示。

功能区域的分割只种维度上的，我还在视觉表达层次上做了规范，尽量让有用的信息更加凸显出来。通过这个方法即在交互的表现层面上有了一定的规范，在视觉进行的时候也可以有效减少对原有交互设计的误解。

做了以上两步的同时，在与PD的沟通下，也对整个增加拍的逻辑做了充分的梳理，当然过程中少补了的是Qa同学的辅助，因为QA更加了解业务逻辑中的一些细节，在此基础上做出了一份逻辑图。最后就是按照之前制定的规则，将相应的信息“填写”到相应区域即可。

上线的页面请大家有空参与淘宝拍卖会上拍品活动：http://www.paimai.taobao.com即可看到。如果有任何疑问都可以通过页面右侧的意见入口，给我们提宝贵的意见，相信这个拍卖产品的好的体验是大家一同参与下得出的结果，我们也会不断根据用户的反馈给予产品最及时和有效的改进！

琳韵 撰于2011.12.23

来源：http://ued.taobao.com