開(kāi)發(fā)工具是指開(kāi)發(fā)人員在開(kāi)發(fā)中需要用到的工具，借以提升研發(fā)效率。

工作 3 年來(lái)，筆者一直都在為開(kāi)發(fā)同學(xué)做工具設(shè)計(jì)；開(kāi)發(fā)使用的工具與 C 端用戶使用的工具無(wú)論是場(chǎng)景還是對(duì)產(chǎn)品的訴求、交互的習(xí)慣、UI 的審美都有著較大的差異。

作為一個(gè)設(shè)計(jì)師，到底如何為研發(fā)同學(xué)做工具設(shè)計(jì)？

下面筆者將結(jié)合自己的業(yè)務(wù)實(shí)踐，介紹一些工作中設(shè)計(jì)策略和經(jīng)驗(yàn)，希望對(duì)大家有所參考&啟發(fā)。

專業(yè)術(shù)語(yǔ)解釋

研發(fā)人員：

負(fù)責(zé)研究&開(kāi)發(fā)的專業(yè)人員。也稱“程序員”、“IT人員”、“互聯(lián)網(wǎng)搬磚者”、“碼農(nóng)”（此處絕無(wú)半點(diǎn)不敬之意 ）。

開(kāi)發(fā)工具：

開(kāi)發(fā)工具，是開(kāi)發(fā)同學(xué)們?cè)陂_(kāi)發(fā)中需要用到的工具產(chǎn)品；主要目的是為協(xié)助開(kāi)發(fā)同學(xué)，提升研發(fā)效率。

研發(fā)工具的特征&使用場(chǎng)景

特征：

• 效率第一
• 注重功能的齊全
• 注重產(chǎn)品性能，追求可用性，易用性
• 會(huì)長(zhǎng)時(shí)間使用，提倡沉浸式設(shè)計(jì)

使用場(chǎng)景：

• 個(gè)人研發(fā)（編碼&測(cè)試）
• 團(tuán)隊(duì)研發(fā)（研發(fā)協(xié)作，項(xiàng)目聯(lián)調(diào)）

如何從設(shè)計(jì)角度做研發(fā)工具？

對(duì)于研發(fā)工具類的設(shè)計(jì)，設(shè)計(jì)的深度與業(yè)務(wù)的理解深度是成正比的；甚至大部分時(shí)間是在做業(yè)務(wù)理解&需求分析，真正設(shè)計(jì)輸出的時(shí)間并不長(zhǎng)。

首先建議先通過(guò)一切可利用的途徑和手段吃透業(yè)務(wù)。這里筆者建議采用 5W2H 模型：

1. 吃透業(yè)務(wù)（知道自己在做什么）

• WHAT：?要做的研發(fā)工具是什么？（是什么？）
• WHY：為什么要做？（需求淶源&背景）
• WHO：給誰(shuí)用的？（核心用戶）
• WHEN：用戶什么時(shí)候用？（工作習(xí)慣&接觸點(diǎn)訴求）
• WHERE：具體的接觸點(diǎn)是什么（使用場(chǎng)景）
• HOW：產(chǎn)品邏輯如何實(shí)現(xiàn)？不做會(huì)怎樣？做了又會(huì)怎樣？（用戶研發(fā)模式有何差異？）
• HOW：要做成什么樣？達(dá)到什么目標(biāo)？（項(xiàng)目目標(biāo)、用戶訴求、設(shè)計(jì)目標(biāo)）

以上這些點(diǎn)都應(yīng)該是你接到需求后，腦袋中立刻就要出現(xiàn)的問(wèn)題。以梳理清楚以上點(diǎn)，體驗(yàn)設(shè)計(jì)要做的事就可控很多。接下來(lái)就是橫向了解行業(yè)發(fā)展?fàn)顩r，做相關(guān)競(jìng)品分析。

具體在業(yè)務(wù)分析中，推薦兩個(gè)小技巧，首先是業(yè)務(wù)流程圖（何人在何地何時(shí)做何事）如下圖：

第 2 個(gè)是，在確認(rèn)具體需求和任務(wù)時(shí)，快速拆解任務(wù)的列表，這些都能讓你快速明白在做什么？業(yè)務(wù)用戶的訴求；及用戶操作的具體路徑。如下圖：

2. 不要重復(fù)造輪子，要了解研發(fā)工具行情

如果設(shè)計(jì)師從來(lái)沒(méi)做過(guò)同類的工具/產(chǎn)品，那競(jìng)品分析的環(huán)節(jié)更加關(guān)鍵。具體業(yè)務(wù)場(chǎng)景不同，但“知己知彼，百戰(zhàn)不殆”。

大家都知道競(jìng)品分析的優(yōu)勢(shì)，筆者不再贅述，重點(diǎn)說(shuō)下對(duì)于研發(fā)工具的競(jìng)品分析，從哪些方面系統(tǒng)進(jìn)行：

• 產(chǎn)品定位（了解產(chǎn)品策略&定位；抓穩(wěn)側(cè)重點(diǎn)）
• 信息架構(gòu)（競(jìng)品核心功能是什么？解決的核心問(wèn)題是什么？）
• 頁(yè)面布局（競(jìng)品的研發(fā)工具如何布局；通用規(guī)律是什么？）
• UI 配色（競(jìng)品分是如何配色？設(shè)計(jì)依據(jù)是什么？）
• 交互方式（研發(fā)中的交互方式是否有通用的？是何規(guī)律？）

在這里舉個(gè)栗子：說(shuō)下筆者前段時(shí)間為阿里開(kāi)發(fā)做的一款云端研發(fā)工具時(shí)，對(duì)行業(yè)內(nèi)的研發(fā)工具 IDEA（全世界最受歡迎的研發(fā)工具） 進(jìn)行的設(shè)計(jì)體驗(yàn)分析：

1. 菜單和工具欄?（常放置功能類型入口）；
2. 導(dǎo)航條（編輯文件時(shí)幫助定位和導(dǎo)航項(xiàng)目中的文件；同時(shí)也會(huì)放置重復(fù)使用且高頻的功能鍵；例如開(kāi)始/重啟 ）
3. 工具窗口欄（位于IDEA界面的上下左右各有一個(gè)，擺放著工具窗口顯示和隱藏的按鍵 ）
4. 文件索引欄（常用于搜索代碼文件；通過(guò)代碼樹(shù)結(jié)構(gòu)/搜索框）
5. 代碼編輯器區(qū)域?（進(jìn)行代碼開(kāi)發(fā)&調(diào)試）
6. 工具窗口（輔助類窗口（IDEA提供了各式各樣的輔助窗口來(lái)幫助完成各種任務(wù)；如項(xiàng)目管理，代碼查找等，類似 Sketch 的插件；可自行定制）
7. 工具窗口（可自行定義窗口模式與位置尺寸）；
8. ?狀態(tài)欄（顯示當(dāng)前項(xiàng)目，IDEA本身的狀態(tài)，還有別的一些狀態(tài)相關(guān)的一些信息；例如加載中/重啟中等）
9. 快捷入口（查看變更/日志/IP環(huán)境/資源等較多信息，出錯(cuò)時(shí)才需要的，相對(duì)低頻功能入口）

通過(guò)對(duì)多個(gè)研發(fā)工具界面布局進(jìn)行分析，得出研發(fā)工具的布局規(guī)律；從而指引后續(xù)我們的研發(fā)工具設(shè)計(jì)：

通過(guò)對(duì)競(jìng)品研發(fā)工具的交互分析，總結(jié)出了研發(fā)工具通用的交互模式和原則。在后續(xù)的設(shè)計(jì)中讓我們的云端產(chǎn)品體驗(yàn)在滿足阿里業(yè)務(wù)場(chǎng)景&用戶需求的情況下，又與研發(fā)行業(yè)內(nèi)的通用體驗(yàn)保持了一致。

這樣做既避免設(shè)計(jì)師悶頭搞創(chuàng)新，重復(fù)造輪子，又不會(huì)兩敗俱傷。

3. 必須 360 全景了解&尊重用戶習(xí)慣

通過(guò)競(jìng)品分析，了解到行業(yè)的規(guī)范及規(guī)律后；就要深入去解決自己的業(yè)務(wù)&用戶訴求了，如何在大框架下進(jìn)行有針對(duì)性的體驗(yàn)設(shè)計(jì)呢？

筆者總結(jié)了以下幾點(diǎn)：

• 業(yè)務(wù)訴求（用戶在業(yè)務(wù)場(chǎng)景中，每個(gè)接觸點(diǎn)的真實(shí)訴求）
• 習(xí)慣訴求（具體的工作習(xí)慣；工具使用習(xí)慣；日常研發(fā)習(xí)慣）
• 審美訴求（通過(guò)用戶常用的工具，調(diào)研分析其審美和對(duì)工具選擇的要求）

研發(fā)工具不是普通大眾能輕易上手和使用的工具，它的專業(yè)性和學(xué)習(xí)成本都很高；設(shè)計(jì)師本身也不是真實(shí)的用戶，此時(shí)做移情和同理心思考，可行度都是很低的。

設(shè)計(jì)師不是用戶，沒(méi)辦法感同身受的了解研發(fā)同學(xué)真實(shí)的訴求&審美，所以此時(shí)一定要通過(guò)研發(fā)常用的工具，和用戶的真實(shí)反饋，分析得出用戶的研發(fā)習(xí)慣和審美訴求。這里強(qiáng)烈推薦用研的“觀察法”、“焦點(diǎn)訪談法”，通過(guò)對(duì)開(kāi)發(fā)同學(xué)日常研發(fā)環(huán)境&習(xí)慣的追蹤；研發(fā)焦點(diǎn)小組的腦暴，得到想要的數(shù)據(jù)結(jié)論。

4. 挖掘痛點(diǎn)，制造嗨點(diǎn)

輸出了工具基本的設(shè)計(jì)方案，對(duì)用戶已完成“雪中送炭”的操作，工具可用性得到了保證；接下來(lái)如何能“錦上添花”，讓產(chǎn)品易用和好用呢？那當(dāng)然是針對(duì)影響研發(fā)效率的具體接觸點(diǎn)，增加小的嗨點(diǎn)和爽點(diǎn)了。

對(duì)于研發(fā)工具類的產(chǎn)品設(shè)計(jì)，工具只要幫助用戶好好解決問(wèn)題，哪怕只有幾個(gè)小點(diǎn)，用戶也是很愿意選擇和持續(xù)使用的。

栗子 1 : 發(fā)布主頁(yè)面的體驗(yàn)點(diǎn)設(shè)計(jì)

栗子 2 : 發(fā)布任務(wù)狀態(tài)的快速追蹤體驗(yàn)設(shè)計(jì)

結(jié)語(yǔ)

1. 除了設(shè)計(jì)方案，如何能做的更多？更好？更快？

• 設(shè)計(jì)組件模板規(guī)范；
• 設(shè)計(jì)沉淀&經(jīng)驗(yàn)分享；
• 專利申請(qǐng)；

2. 提前明確產(chǎn)品&用戶體驗(yàn)度量指標(biāo)

C 端產(chǎn)品與研發(fā)工具度量指標(biāo)的差異，一定要根據(jù)具體業(yè)務(wù)場(chǎng)景提前設(shè)好體驗(yàn)度量指標(biāo)。一方面輔助自己做設(shè)計(jì)驗(yàn)證；另一方面用指標(biāo)數(shù)據(jù)幫助定位洞察更多問(wèn)題，發(fā)現(xiàn)創(chuàng)新機(jī)會(huì)點(diǎn)。

結(jié)語(yǔ)中的部分可以作為設(shè)計(jì)賦能和個(gè)人成長(zhǎng)的事情來(lái)做。業(yè)務(wù)是永遠(yuǎn)支持不完的，一個(gè)業(yè)務(wù)結(jié)束了，千千萬(wàn)萬(wàn)的業(yè)務(wù)還需要你支持，但是作為體驗(yàn)設(shè)計(jì)師，通過(guò)做這件事情，能為業(yè)務(wù)增值固然是根本；但同時(shí)還要思考對(duì)團(tuán)隊(duì)和個(gè)人是否有更大的增值空間？

做工具設(shè)計(jì)不易，做研發(fā)工具更不易，希望大家能從相似的工具設(shè)計(jì)中洞察到不同的多彩世界，共勉。

作者：阿里TXD，公眾號(hào)：TXD技術(shù)體驗(yàn)設(shè)計(jì)（ID：TXD-UED）

本文由 @阿里TXD 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。