拍卖出价流程浮窗设计小结

　　之前在交互周会上，作为项目分享了之前做过的拍卖线的出价流程，由于讲的比较匆忙，所以还是想整理成文字，累积下。做多了日常以后，常常觉得如果不多做字面的积累，很多看似瞬间的累积，很快就会被更多的项目淹没
　　之所以把这个项目分享出来，是因为觉得我们在工作中所做到的大小日常，99的都不是无中生有的，都具有一定的历史，也一定有一定的痛点，一定也有新的业务变化在里面，如何在短时间内把握这些因素，迅速转化为一个合理的方案，是有一定方法的，虽说方法不一定完美，但希望给大家一些思路。
　　开始正题，大概介绍下这个出价流程的背景：拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的，随着拍卖业务的发展，觉得有必要以更简单的形式来进行操作，所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断，而之前做的一版浮窗出价流程并没有交互设计完整的参与，导致了页面逻辑中有一些问题，所以需要交互再次参与进来将这个出价流程梳理好，但另一方面，之前尽管有问题的出价流程由于业务需要，却正在上线中
　　首先，从项目的背景中，就可以总结出这个项目有几个特点：1，有大概的交互形式，且已经不能修改（尽管当时也有人觉得浮窗形式不是很好，但一切都在上线中，所以暂时也无法改变）2，发展中的业务和要求革新的心态（这在很多项目中都存在，我们通常不喜欢一成不变，但面对发展中业务，多变也是一个挑战）3，没有原始页面数据（这是最无奈的一点，因为看不到用户的反馈，让我们少了很多依据）
　　其次，这个项目从交互角度出发，这个项目有几个挑战：1，浮窗形式的界面（区别于一般也页面，对信息的分类和呈现要求更高）2，需要对流程做出完整的梳理（一般涉及到前后步骤的页面，最好有完整的流程图有助于检验页面）3，之前的版本出自非专业人士（势必需要纠正一些浅显的问题，这也是之后开始着手的切入点）
　　总结了以上几点，确定了这次项目的主要核心点，即原有流程的提升和修正，修正原有出价流程中错误的地方，提升原有流程页面的交互体验。
　　由于接到这个任务的时候对拍卖业务还不是很熟悉，所以一方面与PD沟通了解拍卖业务，另一方面让QA把准备上线的拍卖浮窗的每个状态给到我（因为之前的版本没有完整的交互稿）如之前所说，先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题，以此归纳出具有针对性的方法。
　　1，文字引导与输入框距离太遥远
　　2，同类信息被放置在不同的地方
　　是否设置成代理出价是和用户的出价有关的信息，应该归类显示。
　　1、2两点，实际上都牵涉到了信息归类显示的问题。在一个页面中，一些相关的信息（例如同类的，行为上可以连续操作的）尽量可以放在一起，但其中要避免相同形式表达的信息（例如都是数字的形式）则要分开展现，以免互相混淆。
　　3，操作行为的起始和完成逻辑不通
　　在上图中有修改的点击操作但在接下来却没有确定或修改完成的操作，而是直接通过整个确认出价的动作作为结束，一定程度上并没有给于用户一个操作闭合，很容易让用户搞不清楚自己正处在修改资料还是出价哪种行为。
　　4，浮窗文案提示并未从用户角度出发
　　在这个首先提示用户出价成功，但随即又告知用户其他用户的出价已经超过了他，然后让用户重新出价，这个充满矛盾的页面，就是因为没有站在用户的角度出发。这里所谓的出价成功仅仅只是后台有此次出价的记录，而对于用户来说实际应该是出价失败。
　　在浮窗的操作体验过程中，由于遇到的情况会很多，很有可能在页面跳转中流失一定的用户，所以，避免给予用户挫折感。并且，不论在哪一步文案的表达都应该站在用户的角度，更便于在整个拍卖过程中传达正确的信息。
　　5，文案展现上主次不明
　　上图的浮窗中用非加粗的字体表达了一句比较重要的话，而下图的浮窗却用加粗的字体表达一句不是那么重要话。可能在大的页面中这些都不会这么凸显出来，但由于浮窗区域比较小，错误就显而易见了。
　　6，文案上表达有欠缺
　　上图浮窗的建议您设置一个更高的价格并重新出价语义表达重复而累赘，下图浮窗中的话也是类似问题。而且同样都是让用户重新出价，使用的确是两种不同文字的button。
　　4、5、6点都是文案上表达的问题，对于浮窗中的文案，一方面可以通过视觉上不同层次的文案做区分，另一方面文案本身也要符合逻辑。
　　7，一些必要信息的缺失
　　例如浮窗中的单位元不见了，这种常见的问题也很容易被我们忽视。
　　由于分别找出了原有页面中的一些问题，接下来的思路也显现出来，将浮窗页面的信息做大概的功能区隔，并对具体区块中的信息做规范表达。
　　将浮窗分为三大区域：橙色区域是有关出价的信息最主要的信息提示；蓝色区域是保证金和客户信息信息补充区域；绿色区域是判断区域出价按钮或关闭窗口的位置。
　　橙色区域还细分成三个部分，第一行显示和数字相关的信息表示当前最主要状态的信息；第二行为重新出价设置；第三行为设置代理价。第二和第三行的信息在一些状态中是没有的，所以相应会不做显示。
　　功能区域的分割只种维度上的，我还在视觉表达层次上做了规范，尽量让有用的信息更加凸显出来。通过这个方法即在交互的表现层面上有了一定的规范，在视觉进行的时候也可以有效减少对原有交互设计的误解。