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

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