先讲个故事。

最近公司做支付项目，打算把自己的平台线下支付这块接入新做的线下支付功能，这样就能实现用户线下汇款平台自动到账（以前都是财务同事人工核对），这次主要讲讲前端页面，功能背后的逻辑就不做过多介绍。

下图是改版前的线下充值的页面流程，线下充值的入口被放在“购买小贴士”，点击可进入引导线下汇款页

从“账户余额”到线下大额汇款  

需求：

线下支付功能介绍：通过发放随机码给用户，要求用户线下将随机码输入转账银行的备注里，如果转账成功，平台通过随机码识别对应的用户，从而实现自动给用户平台账户充值

1、线下支付功能代替目前的线下大额转账

2、把上图中“充值“页面改为可选择支付方式的形式，使线下支付成为一个支付方式选项，不再只是一个在线充值的金额输入页面。

就上面的两条需求，是不是觉得很简单？

下面来看看初级设计师的设计：

接到需求，脑子过了一遍流程，心想这是线下汇款，和线上没什么关系，只用考虑替换之前线下充值的流程就可以了，于是，他只画了用户选择“线下大额汇款”后的页面流程，并配有说明如下

充值到线下汇款引导页

①充值入口

②

输入金额页

③

线下汇款引导页

页面释义看上去都很清晰，需求简单，很多细节流程可以按照以前的来，设计师再仔细看了一遍，把上面的图递给了开发。

过了一会，开发看了图后

无奈的程序员

设计师心里一紧，于是又去过了一遍流程，确认了线下和线上可以分开

目前在线充值流程r

于是跑去和开发说，嗯，没问题的，这个流程我们这次只做线下转账这块，不会影响线上，现在看来主要就是这两个页面（②和③）的变化，于是开发继续干活，设计师也继续干活，

过了一会，开发又来了

无奈的程序员

这些看似简单的细节，因为这次新增需求几乎不会改变这些细节，设计师也没有把增加功能后的逻辑清楚地表达在原型上面，甚至漏掉了一些地方，于是开发不断地发问，设计师陷入被动中，如果每次交付设计输出物都是这样的情况，可想设计师是没办法获得开发同事的信任的。

无奈的程序员

------------------------------------故事完毕分割线--------------------------------------

那么接到一个需求正确的打开方式是怎样的呢？

1、首先我们要了解为什么需要做这个功能

从上面的描述知道，线下支付的功能是已经做好的一个功能，只是要对接到我们的平台来使用，之所以接入此功能，是为了代替以前效率更低的线下汇款（需要人工处理），用户体验更优

2、用户在什么情况下会用到它？

结合之前设计该流程的研究以及“线下汇款引导页”里有一段说明附注

汇款注意事项

我们知道，平台线上是采用第三方支付通道作为用户的支付通道，而第三方支付通道对各个银行的银行卡有限额标准（每日限额、每月限额），如果用户要支付的金额超出在平台绑定的银行卡的限额，就没有办法通过线上支付的方式进行充值及购买了，于是对于大额用户以及上面提到的用户来说，线下汇款是最好的选择

场景

根据我们对这类用户的了解，这类用户具有以下特点

他们的主要关注点就是：投资平台信息完整透明、安全

3、流程梳理

因为接到的需求是将在充值页面的线下汇款这个业务接入新的线下支付功能，所以首先考虑充值流程

那是不是充值完了就完了呢？用户充值是为了投资产品，产品到期现金返回，用户还要提现，这样才形成用户在平台充值投资到提现的闭环，我们做设计一定要把功能放到全局来看，它对整个闭环的影响

投资提现闭环

通过梳理平台充值的业务流程，可以看出平台用户有两种状态：绑卡和未绑卡。进行线下充值的用户也会有这两种情况。

从上面充值流程来看，这次新增的功能只是替换流程中的某一个旧的功能，对大的流程几乎没有影响，再接着分析提现的流程，发现走线下充值的未绑卡用户是没有办法提现的，这一点在以前也一直被忽略了，平台目前一直没有这个流程，所以这时候回顾最开始设计师设计的页面流程，可以看出他也是最开始就默认了进行线下充值的用户都是已绑卡的用户。

像这种已有流程的项目改版，首先要做的就是理清之前的流程，再次熟悉一次，分析清楚增加的需求会对现有流程带来哪些影响

通过以上分析，我们可以清楚地知道哪些页面需要进行修改，以及有哪些需要特别注意的点

设计师理给自己看的

4、设计方案（原型）

知道了要做的东西，接下来才是考虑页面流程以及细化原型，从上面的梳理，我们知道流程是没变的，关键就是页面信息的变化，上面的故事，开发之所以要问那么多，除了设计师确实没有考虑清楚以及一些状态的遗漏外，还有一个很重要的原因就是，看着需求简单，所以设计师在表达的时候只是表达了修改的地方，而和修改的页面上下承接的关系并没清楚表达，例如：这次交付原型，设计师只是把修改的页面及页面流程交付过去，并没有说清楚这个页面不会影响整个流程，如果是在线流程没有变化，也要告知清楚没做变化。

将页面设计逻辑及细节表达如下

页面流程

当前的页面流程是将所有状态下的信息都展示罗列出来的情况，下面会列出页面各个信息在不同状态下的展示情况以及细节逻辑。

关于原型的设计及表达，初步总结如下

交互页面设计流程

简单讲，按先后顺序，

1、首先分析完一个需求，可以开始考虑页面布局，需要哪些功能。

2、根据用户场景及操作流程来分别设计不同的页面流程。

3、考虑控件的样式摆放，以及控件的不同状态，各个元素不同状态的展现。

4、最后是文案的斟酌细化。

这一部分暂时做简单介绍，在以后的实践中会不断优化加深认识。

最后要交付给开发的就是原型和文案修改文档，原型需要UI设计的还需交付给UI

交付件

到此，一个小需求的设计过程完整的呈现出来，想说明的是，当我们拿到一个需求的时候，下意识的是觉得一定要做点什么出来才踏实，所以立即就开始着手画原型，这样反而使得我们不能清晰的了解自己当前在做的需求；其实工作中无论是运营设计，还是产品功能迭代，当接到一个需求的时候，都应该养成一个首先思考评估的习惯，这里通过一个小需求的设计分享了自己的一个工作习惯，也是对自己工作的整理，总结成思维导图如下

需求的正确打开方式