之前接到一個需求，在客戶跟進系統(tǒng)中，銷售根據(jù)客戶手機號碼生成的串碼，復(fù)制到企業(yè)微信添加好友后，可以將 useID 自動關(guān)聯(lián)綁定客戶編號。

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

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

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

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

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

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

根據(jù)正確的思路，做界面之前我們應(yīng)該做一張低保真設(shè)計稿。下圖是對于原型進行優(yōu)化后的低保真設(shè)計稿。

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

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

成圖如下

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

1. 識別需求

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

2. 重塑需求

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

3. 梳理流程

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

4. 設(shè)計界面

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

總結(jié)

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