實例解析:工具型產(chǎn)品怎么做?

3 評論 9476 瀏覽 78 收藏 19 分鐘

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

前言

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

工具型產(chǎn)品的劃分不那么絕對,但基本工具性偏向特強,例如TaroIDE(客戶端)、京東讀書(APP)、京東定制(Web),這三個我們團隊近兩年做的產(chǎn)品,當然也有早期做得不夠成熟的產(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)里記錄文字,如何運算計算器,計算機工具開始誕生。

工具型產(chǎn)品怎么做?

2. 萌芽期

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

工具型產(chǎn)品怎么做?

2. 高速發(fā)展期

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

工具型產(chǎn)品怎么做?

3. 設(shè)備拓展期

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

工具型產(chǎn)品怎么做?

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

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

工具型產(chǎn)品怎么做?

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

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

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

工具型產(chǎn)品怎么做?

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

1. 場景固定

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

2. 需求明確

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

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

工具型產(chǎn)品怎么做?

2. 提高效率

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

工具型產(chǎn)品怎么做?

3. 一致性

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

工具型產(chǎn)品怎么做?

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

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

工具型產(chǎ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)品,并且不會出錯,而不是自己花大成本去做積木,做出來的成果還不一定比已有的好。

工具型產(chǎn)品怎么做?

1. 規(guī)范的目的

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

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

工具型產(chǎn)品怎么做?

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)

工具型產(chǎn)品怎么做?

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

工具型產(chǎn)品怎么做?

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

工具型產(chǎn)品怎么做?

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

工具型產(chǎ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ū)。

原來的版本:

工具型產(chǎn)品怎么做?

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

工具型產(chǎn)品怎么做?

3. 用戶心理模型

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

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

工具型產(chǎn)品怎么做?

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

原來的版本:

工具型產(chǎn)品怎么做?

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

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

工具型產(chǎn)品怎么做?

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

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

工具型產(chǎn)品怎么做?

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

工具型產(chǎn)品怎么做?

4. 簡化四策略

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

工具型產(chǎn)品怎么做?

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

工具型產(chǎn)品怎么做?

05 多端聯(lián)動

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

有兩個點可以講講:

  • 第一個是各端需要根據(jù)場景進行定位和適配,目標是有限的資源最大化利用。例如讀書產(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 說的挺好的,其實很多東西也是我的感悟,包括從效率出發(fā),一致性原則,一個頁面只完成一件事情等等。

    來自上海 回復(fù)
  2. 這個PPT好好看,可以私發(fā)我嗎 648503181@qq.com

    來自浙江 回復(fù)
    1. 可以的,1w

      來自廣東 回復(fù)