之前接到一个需求，在客户跟进系统中，销售根据客户手机号码生成的串码，复制到企业微信添加好友后，可以将useID 自动关联绑定客户编号。

有位设计师直接就对着原型把界面做了出来。对于做好这个界面，他也非常努力，比如让元素更好看，信息排列更整齐。我遇到过几位设计师都是这么做需求，但是最终出来的界面不尽人意。因为他们把目光都聚焦在局部，缺乏对整体的思考。

今天用这个界面来说一下思路吧。

这张是产品的原型，为了体现真实情况，文档说明基本是原话（已对信息进行脱敏）。原型的意思是在客户的主页点击「生成串码」就会来到这个页面，默认将客户的置顶手机号码显示在第一位，复制这个号码生成的串码，去企业微信添加好友就会自动关联绑定。就像以前要分享淘宝的商品给微信用户时，需要点击分享，将出现的那串文字复制去微信发给朋友一样。

利用路径拆分原则，分析这个用户在当前页面要通过什么方式才能达到目的，可以分为以下两种情况：复制置顶号码即可满足需求；需要将其它号码生成串码才能满足需求。

通过这张图，结合原型，我们可以发现这两点：1、这个页面的目的非常明确，是复制串码；2、置顶号码默认生成串码，其它号码需要点击生成才会有串码，因此重新获取这个按钮，在两种号码卡片上出现的节点不一样。

理清思路之后再来看原型，会发现原型的低保真图与说明是两种意思，也就是低保真图没有体现应有的状态和正确的意思。如果拿着这张低保真图直接对着做，将「重新获取」作为页面的主按钮样式，这个界面的可用性就很低了，用户会认为点击「重新获取」是对应所有的号码。

根据正确的思路，做界面之前我们应该做一张低保真设计稿。下图是对于原型进行优化后的低保真设计稿。

我们还可以用墨刀制作一个小型demo，找相关用户或同事进行测试。这样做可以提前验证界面是否达到用户的预期。小型demo如果验证不成功，用户依然有困惑，可以继续调整，直至验证成功后，才进行界面高保真设计。这个概念也叫MVP，即最小可行性方案设计。方法有很多，简单的纸面原型、线框图都可以实现，视情况使用。通过验证后做出来的界面，返工率会更低，因此不要忽视这一步。

接下来才是找参考界面，不用局限在相同类型的界面中，可以泛浏览界面，从中找到灵感。（所以平时收集界面很重要）

成图如下