本文作者整理了一套實踐性很強的流程和理論，結(jié)合了大量的案例，力求大家以后接手工具型產(chǎn)品，能瞬間著手。

前言

自工作以來，做過各類型的數(shù)字產(chǎn)品，橫跨web、客戶端、native app、web app、小程序、H5等等，最考究交互基本功，并且最接近數(shù)學(xué)算術(shù)題，半開卷答題形式的（講究邏輯、唯一答案），只有工具型產(chǎn)品。

工具型產(chǎn)品的劃分不那么絕對，但基本工具性偏向特強，例如TaroIDE（客戶端）、京東讀書（APP）、京東定制（Web），這三個我們團隊近兩年做的產(chǎn)品，當(dāng)然也有早期做得不夠成熟的產(chǎn)品，ERP門戶系列等等。我整理了一套實踐性很強的流程和理論，結(jié)合了大量的案例，力求大家以后接手工具型產(chǎn)品，能瞬間著手。

01 認識工具型產(chǎn)品

工具型產(chǎn)品形態(tài)比較單一，為了讓用戶處理某一件事情更有效率，節(jié)省時間。一個產(chǎn)品里如果工具屬性占主導(dǎo)，我們就可稱之為工具型產(chǎn)品。從宏觀視野去觀察每一個歷史階段，工具的重點演變設(shè)計重點，從而更好理解工具型產(chǎn)品背后的商業(yè)模式和設(shè)計趨勢。

1. 古早期

第一部蘋果電腦，從線下搬到線上，復(fù)制現(xiàn)實，如何在系統(tǒng)里記錄文字，如何運算計算器，計算機工具開始誕生。

2. 萌芽期

以微軟office辦公工具為案例，根據(jù)更加復(fù)雜的辦公場景，提供了文字編輯word，列表運算excel等等。集中還是運用到現(xiàn)實的高頻工作場景中。

2. 高速發(fā)展期

互聯(lián)網(wǎng)的環(huán)境變得復(fù)雜并不安全，殺毒軟件興起如卡巴斯基，360等，資源聯(lián)網(wǎng)共享，下載工具迅雷還有各大瀏覽器高速發(fā)展，工具場景開始多維度擴散。

3. 設(shè)備拓展期

蘋果3GS ，除了PC，智能手機、電子閱讀器、車載系統(tǒng)等等，從載體上形成生態(tài)圈，移動設(shè)備最典型的就是移動支付，還有各種生活領(lǐng)域的小工具例如墨跡天氣、記賬軟件等等。

4. 領(lǐng)域下沉期

行業(yè)下沉，開始根據(jù)各行各業(yè)輸出方案，工具開源化。

無論在哪個階段，工具的本質(zhì)是達成目標(biāo)的過程，提高生產(chǎn)力的本身，工具型產(chǎn)品就像是中國的基建，它雖然能產(chǎn)生直接的經(jīng)濟利益，但遠不如它間接增強其他領(lǐng)域能力強。

02 工具型產(chǎn)品特點

舉一個栗子，從這個典型的工具栗子我們發(fā)現(xiàn)，首先這個記賬的訴求，可替代的產(chǎn)品很多，我可以用記賬本寫筆記，可以用系統(tǒng)待辦記錄，也可以換一個同類型產(chǎn)品。

從這里案例里，我們能夠很快抓取到工具型產(chǎn)品的特點是：

1. 場景固定

我們使用工具型產(chǎn)品的場景是非常固定的，花錢了需要記賬，或者是周期性需要統(tǒng)計賬單。

2. 需求明確

用戶使用產(chǎn)品的目標(biāo)很明確，高效解決明確的需求。

3. 使用時間短

解決問題后就走，對產(chǎn)品粘性很低。

4. 忠誠度低

產(chǎn)品極易被替代。

那么，工具型產(chǎn)品如何商業(yè)化？

有關(guān)工具型產(chǎn)品如何商業(yè)化這個問題是挺難的，市場上比較常見的有以下三種類型：

1. 使用前付費，例如PS、sketch；
2. 基礎(chǔ)功能免費，高級功能付費，例如印象筆記；
3. 依靠高流量，做流量變現(xiàn)，打廣告。

03 設(shè)計原則

1. 解決現(xiàn)存問題

工具型產(chǎn)品的第一目標(biāo)是解 決問題，更關(guān)注用戶現(xiàn)存的 場景痛點或者新的訴求。京東讀書的線上版本接到了很多投訴，就是當(dāng)書架上的書籍越來越多，達到大幾十本以上就很難找到，于是我們對書架進行改版，按照幾個核心維度進行可選分組。

2. 提高效率

工具的誕生本質(zhì)就是提高完 成目標(biāo)的效率，它體現(xiàn)在任 務(wù)目標(biāo)、流程、文案、視覺 引導(dǎo)等等。從原始社會發(fā)展到現(xiàn)在，工具的本質(zhì)就是為了提高效率?；ヂ?lián)網(wǎng)產(chǎn)品也不例外，如何提高效率通常會體現(xiàn)在目標(biāo)、流程、引導(dǎo)和文案的集中體現(xiàn)上。下面的案例是京東品牌管理平臺，將線下郵件審批流程線上化后，省時省力省成本。

3. 一致性

一致性主要是將用戶對產(chǎn)品的認知最大化，降低用戶使用時的學(xué)習(xí)成本，滿足用戶的本能反應(yīng)，讓產(chǎn)品更加容易使用。前段時間我們接的ERP流程中心表單需求優(yōu)化，大家可以明確看出左邊的頁面一致性是很差的，規(guī)則重復(fù)，控件不統(tǒng)一，會很覺得很亂。右邊我們將問題就解決后，會更加簡單輕松。

4. 讓產(chǎn)品用起來聰明

人工智能時代，工具成為了承載技術(shù)的最佳載體，更加自動化及時反饋，會讓用戶留下更加好的印象，市場更具競爭優(yōu)勢。我們在京東冰箱就結(jié)合了硬件設(shè)備，通過冰箱界面提示用戶蔬果的新鮮程度，給人一種無時無刻有關(guān)注食材的感受。

04 GPUS

GPUS其實就是以下四個關(guān)鍵點的縮寫：

1. 規(guī)范-Guideline
2. 平臺與姿態(tài)-Platform and Posture
3. 用戶心理模型-User mental model
4. 簡化-Simplify

為什么要提這幾點？

首先這四者的關(guān)系是從上至下不斷濃縮，對產(chǎn)品工具屬性來說，起到了一個很好的基礎(chǔ)搭建作用。其次這四點很容易被設(shè)計師們忽略，過于聚焦于需求，而過少關(guān)注工具的“積木屬性”。

其實工具型產(chǎn)品是基礎(chǔ)產(chǎn)品規(guī)則的沉淀，很多流程、控件已經(jīng)規(guī)范定型，如果我們先了解清楚每一塊“積木”的作用和規(guī)則，可以通過積木快速搭建產(chǎn)品，并且不會出錯，而不是自己花大成本去做積木，做出來的成果還不一定比已有的好。

1. 規(guī)范的目的

好的人機界面規(guī)范遵從于用戶思考和行動的方式，而不屈從于設(shè)備的性能，學(xué)習(xí)規(guī)范能幫助我們理解底層基礎(chǔ)規(guī)則。往大的看，每個平臺都有平臺規(guī)范，我們可以稱之為“生態(tài)規(guī)范”，往小的看，我們還會有產(chǎn)品規(guī)范，這是基于產(chǎn)品內(nèi)部的統(tǒng)一規(guī)范，對于做迭代需求接入時，提前了解能夠快速了解產(chǎn)品背景和接入效率。

以蘋果發(fā)布的《人機界面準(zhǔn)則》來說，規(guī)范里會闡述清楚系統(tǒng)的設(shè)計理念，每個控件的類型和使用方法，是一本實踐性很強的用戶體驗“教科書”。

2. 平臺與姿態(tài)

產(chǎn)品的姿態(tài)是指產(chǎn)品的行為立場，也就是產(chǎn)品對用戶的展現(xiàn)方式，用戶需要在產(chǎn)品上投入多少精力，產(chǎn)品又如何回應(yīng)。不同平臺和姿態(tài)會對產(chǎn)品的尺寸是大是小，內(nèi)容是多是少，怎么強調(diào)怎么引導(dǎo)，都有不用的差別。以下以PC平臺為案例，我們可以將PC的產(chǎn)品類型分為以下三種姿態(tài)：

（1）獨占姿態(tài)

（2）暫時姿態(tài)

（3）后臺姿態(tài)

舉個實際分析的栗子-Taro，Taro是一個能將一份開發(fā)代碼編譯成適配 8 個平臺的開發(fā)語言的產(chǎn)品，用戶使用Taro的目標(biāo)就是做一個可發(fā)布到各個開放平臺的小程序和H5，我們先看看幾個主流程的關(guān)系。

Taro的幾個主流程都是閉環(huán)的，基本是在流程里，需要完成流程的步驟任務(wù)才會進入新一個流程。使用Taro的過程中，我們有時候需要調(diào)取代碼編輯器，發(fā)布的時候也需要打開開放平臺網(wǎng)頁，某些功能需要沉浸式操作（獨占），某些功能則只需要用一下就走（暫時），所以在尺寸選擇上，我們定了窗口尺寸為1000*618，這個尺寸也能兼容公司常用的屏幕分辨率。

同時，桌面場景需要多個產(chǎn)品界面來回切換，流程性很強，我們?nèi)∠俗笥覍?dǎo)航結(jié)構(gòu)，而用了上下結(jié)構(gòu)，把更多的空間留給內(nèi)容區(qū)。

原來的版本：

優(yōu)化后的版本：

3. 用戶心理模型

實現(xiàn)模型、軟件如何工作的模型稱作“實現(xiàn)模型”，用戶認為必須用什么方式完成工作以及應(yīng)用程序如何幫助用戶 完成工作的方式被稱作為“心理模型”，呈現(xiàn)模型，設(shè)計師將軟件運行機制呈現(xiàn)給用戶的方式稱為“呈現(xiàn)模型”。

舉一個放電影的案例，電影放映機它在一瞬間發(fā)出一束很亮的光線穿過半透明的微縮圖像，然后在下一幅微縮圖像就位前擋住光線，下一幅圖像就位后再次投射光線，以每秒24次的頻率重復(fù)這個過程。但看電影的用戶和操作放映機的工作人員并不需要了解這個機制，只需要產(chǎn)品有一個打開開關(guān)，然后就能看了。

還是Taro為案例，例如選擇完項目后，操作第二個步驟的時候，需要選擇平臺進行編譯，但過程中你需要安裝平臺編輯工具，已安裝的就需要啟動編譯，如果啟動失敗，你可以手動“打開編譯工具”，這是一個結(jié)合了操作步驟和狀態(tài)判斷的流程，但是Taro原來的版本是將流程里的幾個節(jié)點都鋪出來了，用戶使用起來就比較懵，不知道自己接下來要做什么，在什么狀態(tài)里。

原來的版本：

優(yōu)化后的版本：

優(yōu)化后，一個頁面講一件事情，并且在使用過程中先判斷你的工具狀態(tài)，再進行下一步引導(dǎo)，這樣用戶就清晰明了多了。

設(shè)計方案呈現(xiàn)：

選擇完項目后，進入主界面 ，已安裝的工具都高亮，用戶下一步選擇需要編譯的平臺。

未安裝的會置灰，hover引導(dǎo)下載安裝包，諸如此類的細節(jié)。

4. 簡化四策略

簡化四策略更多的是針對具體方案的界面，控件等，以經(jīng)典的遙控器為案例，簡化遙控器，這跟我們收納的方法是有點類似的，你要收拾家里，第一步先將不要的東西扔掉（刪除），第二步將剩余的東西按照使用類型或者某個規(guī)則進行歸類（組織），第三步不常用的收起來（隱藏），最后一步實在不想放在家里就拿到爸爸媽媽的大房子里去（轉(zhuǎn)移）。

刪除、組織、隱藏、轉(zhuǎn)移的方法，很多項目中都有涉獵，實際項目過程中會反復(fù)去重復(fù)這四步驟，這四個整理界面的方法很好懂，需要我們做的就是不斷嘗試而已。

05 多端聯(lián)動

其實大部分工具型產(chǎn)品，都會針對某一個平臺做“小而美”的解決方案，但依然還是有很多產(chǎn)品會做多端適配，例如PS出了iPad pro版本，又例如京東讀書也有App、M站、iPad版本、后續(xù)還規(guī)劃了小程序等等。

有兩個點可以講講：

• 第一個是各端需要根據(jù)場景進行定位和適配，目標(biāo)是有限的資源最大化利用。例如讀書產(chǎn)品App是業(yè)務(wù)功能最完整的，M站承載的是商城導(dǎo)流到讀書App的工作，小程序承載的是微信社交玩法的基礎(chǔ)上導(dǎo)流到App，這個保證M站和小程序能完成基礎(chǔ)購買和閱讀即可。
• 第二個點就是柵格化響應(yīng)式之類的問題，iPad是另一個閱讀場景，它用的是App同一套，例如手機閱讀只需要輸出豎版，但iPad的閱讀空間是很大的，就需要考慮橫豎版。如果是有多端的場景，在手機方案的基礎(chǔ)上需要考慮柵格不要過于復(fù)雜，簡單好拓展，如果是網(wǎng)頁就可以基于柵格化的基礎(chǔ)上做成不同尺寸的響應(yīng)式，體驗會好很多。

我也不展開說了，普通的規(guī)則就是簡單至上，但不需要完全的拘泥，根據(jù)資源做適配變動，多端上也需要體現(xiàn)工具型產(chǎn)品追求效率的原則。

謝謝你閱讀到此，希望以上內(nèi)容能對你有所幫助。

作者：梁綺琴，公眾號：京東設(shè)計中心JDC（ID：JDCdesign）

來源：https://mp.weixin.qq.com/s/2yBhUfQsI3FHeVaFbK10Bw

本文由 @京東設(shè)計中心JDC 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議