為什么做的界面和原型一樣，總監(jiān)卻說(shuō)不過(guò)關(guān)？

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

有位設(shè)計(jì)師直接就對(duì)著原型把界面做了出來(lái)。對(duì)于做好這個(gè)界面，他也非常努力，比如讓元素更好看，信息排列更整齊。我遇到過(guò)幾位設(shè)計(jì)師都是這么做需求，但是最終出來(lái)的界面不盡人意。因?yàn)樗麄儼涯抗舛季劢乖诰植浚狈?duì)整體的思考。

今天用這個(gè)界面來(lái)說(shuō)一下思路吧。

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

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

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

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

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

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

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

成圖如下

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

1. 識(shí)別需求

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

2. 重塑需求

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

3. 梳理流程

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

4. 設(shè)計(jì)界面

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

總結(jié)

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

歡迎關(guān)注作者微信公眾號(hào)：「牙線y2x」