之前接到一個需求，在客戶跟進系統中，銷售根據客戶手機號碼生成的串碼，復制到企業微信添加好友后，可以將 useID 自動關聯綁定客戶編號。

有位設計師直接就對著原型把界面做了出來。對于做好這個界面，他也非常努力，比如讓元素更好看，信息排列更整齊。我遇到過幾位設計師都是這么做需求，但是最終出來的界面不盡人意。因為他們把目光都聚焦在局部，缺乏對整體的思考。

今天用這個界面來說一下思路吧。

這張是產品的原型，為了體現真實情況，文檔說明基本是原話(已對信息進行脫敏)。原型的意思是在客戶的主頁點擊「生成串碼」就會來到這個頁面，默認將客戶的置頂手機號碼顯示在第一位，復制這個號碼生成的串碼，去企業微信添加好友就會自動關聯綁定。就像以前要分享淘寶的商品給微信用戶時，需要點擊分享，將出現的那串文字復制到微信發給朋友一樣。

利用路徑拆分原則，分析這個用戶在當前頁面要通過什么方式才能達到目的，可以分為以下兩種情況：復制置頂號碼即可滿足需求;需要將其它號碼生成串碼才能滿足需求。

通過這張圖，結合原型，我們可以發現這兩點：1、這個頁面的目的非常明確，是復制串碼;2、置頂號碼默認生成串碼，其它號碼需要點擊生成才會有串碼，因此重新獲取這個按鈕，在兩種號碼卡片上出現的節點不一樣。

理清思路之后再來看原型，會發現原型的低保真圖與說明是兩種意思，也就是低保真圖沒有體現應有的狀態和正確的意思。如果拿著這張低保真圖直接對著做，將「重新獲取」作為頁面的主按鈕樣式，這個界面的可用性就很低了，用戶會認為點擊「重新獲取」是對應所有的號碼。

根據正確的思路，做界面之前我們應該做一張低保真設計稿。下圖是對于原型進行優化后的低保真設計稿。

我們還可以用墨刀制作一個小型 demo，找相關用戶或同事進行測試。這樣做可以提前驗證界面是否達到用戶的預期。小型 demo 如果驗證不成功，用戶依然有困惑，可以繼續調整，直至驗證成功后，才進行界面高保真設計。這個概念也叫 MVP，即最小可行性方案設計。方法有很多，簡單的紙面原型、線框圖都可以實現，視情況使用。通過驗證后做出來的界面，返工率會更低，因此不要忽視這一步。

接下來才是找參考界面，不用局限在相同類型的界面中，可以泛瀏覽界面，從中找到靈感。(所以平時收集界面很重要)

成圖如下

經過這個事例，我們可以大致描繪歸納出步驟：識別需求-重塑需求-梳理流程-設計界面

1. 識別需求

識別需求不是讀原型說明文字，而是要基于了解用戶和產品的前提下：在什么場景，用戶需要通過什么方式，解決什么問題。不然原型文字就只是文字規則，沒有發揮最大作用。其次，需求是否合理，是否能真正解決用戶問題。

2. 重塑需求

理解產品的意思后，利用路徑拆分原則進行需求的重塑，了解用戶通過什么方式到達目的地。需求拆分方法的原則可以看喬梁的《持續交付 2.0》，其中 INVEST 原則、需求拆分的五大技法能夠幫助我們設計時以產品角度進行思考。

3. 梳理流程

梳理流程，查缺補漏后，進行界面的低保真設計。在這過程中用到 INVEST 原則中的 Testable(即可驗證原則)，不斷驗證直至成功再進行界面設計，可以讓我們的返工率降低。

4. 設計界面

經過前面一系列的思考和驗證，再去進行界面設計的時候，我們才是帶著正確的任務：哪個才是當前的任務重點、什么元素應該強調或弱化、在設計規范的范圍內怎么讓界面更舒適好用…等。

總結

這個思路框架可以幫助我們快速而準確地完成界面設計，特別在小型需求上。別小看小的需求，每個界面都有其任務，可以推動流程的完成。面對大型的需求時，則需要拆分得更細致，用更全面的方法去做。