怎樣設(shè)計(jì)一個(gè)難用的后臺(tái)運(yùn)營(yíng)工具?

21 評(píng)論 17521 瀏覽 253 收藏 16 分鐘

讓我手把手教你3個(gè)絕招,做一個(gè)超級(jí)難用的后臺(tái)運(yùn)營(yíng)工具。

15年7月-17年3月,我主要在做的是個(gè)人中心菜單、賬戶體系、客服系統(tǒng)等前端工作,相關(guān)的工作總結(jié),可以瀏覽我的其他文章:《怎樣設(shè)計(jì)一個(gè)不好的注冊(cè)流程》、《怎樣設(shè)計(jì)一個(gè)不好的“紅點(diǎn)”邏輯》(很高興看到騰訊社交用戶體驗(yàn)部的文章《“煩人的小妖精”,小紅點(diǎn)是怎么來(lái)的》有引用)、《“PRD之道:4個(gè)撰寫PRD的關(guān)鍵思路”》。

上述文章的思路都是按“Via Negativa”來(lái)撰述的,本篇也是。

我個(gè)人比較喜歡讀Nassim Nicholas Taleb的書(著有《隨機(jī)漫步的傻瓜》、《黑天鵝》、《反脆弱》、《Skin in the game(新書,還沒出中文版)》)。

他在《反脆弱》中翻新了一個(gè)概念叫做“Via Negativa”。這個(gè)詞是拉丁文,含義可以理解為“negative way”或 “by way of denial”。

這個(gè)概念主張的是:負(fù)面的信息遠(yuǎn)比正面的信息高效——找到一只“黑天鵝”,就可以立刻推翻“只有白天鵝”的假設(shè)(詳細(xì)闡述去看書)。同樣的,對(duì)于一些產(chǎn)品新人,如果有前人指出坑在哪里,會(huì)比告訴一堆怎么做,會(huì)更有幫助。

《反脆弱》

言歸正傳。17年3月,我通過(guò)內(nèi)部轉(zhuǎn)崗到了運(yùn)營(yíng)工具團(tuán)隊(duì),做一個(gè)唯品會(huì)內(nèi)部稱為“專題系統(tǒng)”的賣場(chǎng)搭建系統(tǒng)。

先大概解釋一下這個(gè)系統(tǒng)是干嘛的。

這種系統(tǒng),在業(yè)內(nèi),通用一些,有人稱之為CMS(Content Management System-內(nèi)容管理系統(tǒng))。準(zhǔn)確一些,可以對(duì)標(biāo)京東的“通天塔”系統(tǒng)(或老版的goshop),在淘寶估計(jì)也有類似的,但我沒有接觸過(guò),淘寶的店鋪系統(tǒng)也比較相似了——區(qū)別只是在淘寶店鋪系統(tǒng),一個(gè)店鋪只能售賣店鋪內(nèi)的商品。

但“通天塔”或者“專題系統(tǒng)”是可以跨品牌、跨品類,多維度自定義搭建頁(yè)面的。實(shí)現(xiàn)方式就是運(yùn)營(yíng)通過(guò)拖拽一些模塊化的組件、配置特定的數(shù)據(jù),搭建一個(gè)H5賣場(chǎng)頁(yè)面,用來(lái)展示不同維度運(yùn)營(yíng)的貨品信息。

唯品會(huì)的大促活動(dòng)頁(yè)面(也包括日常的小活動(dòng)、或自定義的H5信息展示頁(yè)面),都是通過(guò)專題系統(tǒng)搭建的。

京東“通天塔”界面

淘寶旺鋪界面

唯品會(huì) 專題系統(tǒng)(舊)

唯品會(huì) Nova專題系統(tǒng)(新)

這個(gè)系統(tǒng)在我接手的時(shí)候,已經(jīng)有接近2年的生命周期了,近幾個(gè)月在我們團(tuán)隊(duì)的努力下,做了大幅優(yōu)化,重新命名為“Nova”專題系統(tǒng)。(“Nova”是天文學(xué)概念,中文譯為“新星”,但實(shí)際上準(zhǔn)確來(lái)講,一顆行星衰亡時(shí)刻最后迸發(fā)出的強(qiáng)光,不過(guò)一般人在用這個(gè)詞的時(shí)候,都會(huì)忽略它的真實(shí)意義,詳細(xì)知識(shí)自行百度)。

Nova概念圖

專題系統(tǒng),最初始版本是:運(yùn)營(yíng)提需求,產(chǎn)品、設(shè)計(jì)、交互撰寫方案,開發(fā)按需開發(fā)H5頁(yè)面。由于活動(dòng)需求變化快,每次開發(fā)的功能復(fù)用性差。很多小的公司,沒有工具化的系統(tǒng),依然在采用這用方法。

隨著電商行業(yè)進(jìn)入頻繁大促的運(yùn)營(yíng)節(jié)奏后(大概從2015年開始),這種模式完全跟不上業(yè)務(wù)節(jié)奏,因此專題系統(tǒng)誕生了。

在我接手的時(shí)候,專題系統(tǒng)已經(jīng)是唯品會(huì)的一個(gè)核心運(yùn)營(yíng)系統(tǒng)了,服務(wù)的對(duì)象是全公司的運(yùn)營(yíng)團(tuán)隊(duì)(目前暫時(shí)也沒有開放給第三方的計(jì)劃),涉及300多號(hào)人,大促、小促都離不開它。從技術(shù)性能上來(lái)講,它可以扛住大促的高并發(fā)流量,從業(yè)務(wù)使用上來(lái)講,前端開發(fā)可以快速上線HTML樣式,無(wú)需發(fā)版本,極其靈活。

但是,它有一個(gè)弊病——媽呀,太難用了。

接下來(lái),讓我手把手教你3個(gè)絕招,做一個(gè)超級(jí)難用的后臺(tái)運(yùn)營(yíng)工具。

絕招一:必須要慢出翔

接觸過(guò)互聯(lián)網(wǎng)的人,應(yīng)該都接觸過(guò)旋轉(zhuǎn)的菊花:

天下武功,唯“慢”不破。

此招入門快,實(shí)現(xiàn)容易,卻可領(lǐng)運(yùn)營(yíng)痛苦不堪,為第一絕學(xué)。最好運(yùn)營(yíng)的每一步操作,都能讓菊花轉(zhuǎn)一轉(zhuǎn),就再好不過(guò)了。

現(xiàn)代運(yùn)營(yíng)管理(Operations Management)的精益運(yùn)營(yíng)(Lean Operation)理論分支提出過(guò)7種浪費(fèi):

  1. 生產(chǎn)過(guò)剩(Overproduction):To produce sooner or in greater qualities than what customers demand.
  2. 無(wú)效運(yùn)輸(Unnecessary Transportation):Unnecessary movement of parts or people between.
  3. 返工(Rework):”Do it right at the first time, rework is a pain”—— Repetition or correction of a process.
  4. 過(guò)程繁復(fù)(Over-porcessing):Processing beyond what the customer requires.
  5. 無(wú)效動(dòng)作(Unnecessary Motion):Unnecessary movement of parts or people within a process.
  6. 庫(kù)存積壓(Inventory):”Product has to flow like water”.
  7. 無(wú)效等待(Waiting):Underutilizing people or parts while a process completes a work cycle.

這里說(shuō)的“慢出翔”,屬于第7個(gè):無(wú)效等待。它不產(chǎn)出任何價(jià)值,而且會(huì)打斷運(yùn)營(yíng)的操作,如果走神干其他的去了,回神過(guò)來(lái),估計(jì)還要一陣功夫。

“要等到什么時(shí)候!”

(對(duì)運(yùn)營(yíng)管理——不是“互聯(lián)網(wǎng)運(yùn)營(yíng)”,感興趣的,可以去Coursea上一下University of Pennsylvania的課程《Introduction to Operations Management》,花點(diǎn)錢,還可以搞個(gè)Certificate)

Coursera證書

造成無(wú)效等待的最大原因,其實(shí)是技術(shù)上“緩存”應(yīng)用不足的體現(xiàn)。如果產(chǎn)品不注意這個(gè)問(wèn)題,開發(fā)一般也不會(huì)特意關(guān)注,最后就導(dǎo)致坑了運(yùn)營(yíng)。

具體來(lái)講,就是用戶操作中,每一步的操作,如果都需要與接口服務(wù)進(jìn)行交互,那必然涉及到數(shù)據(jù)請(qǐng)求、數(shù)據(jù)返回的耗時(shí)。就好比你做一道蛋炒番茄,如果每個(gè)原料(番茄、雞蛋、油),都需要你走一次菜市場(chǎng),一個(gè)一個(gè)買(注意不能帶菜籃子哦),絕對(duì)慢出翔啊。

但實(shí)際上,很多時(shí)候的操作,并不需要實(shí)時(shí)請(qǐng)求接口。大媽的菜籃子,就是緩存應(yīng)用的實(shí)例——你可以先挑菜呀,挑好了所有的,再一并帶回家。

大媽的菜籃

這個(gè)問(wèn)題,從交互上,產(chǎn)品經(jīng)理是可以提出要求的,可操作性還是比較強(qiáng)的。在唯品會(huì)舊的專題系統(tǒng),操作復(fù)雜頁(yè)面時(shí),像大促主會(huì)場(chǎng)涉及上百個(gè)組件,一個(gè)簡(jiǎn)單的組件順序調(diào)整或增、刪,有時(shí)候就可以load幾十秒。

但在新的Nova專題系統(tǒng),我們的設(shè)計(jì)取消了布局操作的接口請(qǐng)求,運(yùn)營(yíng)的操作達(dá)到了實(shí)時(shí)響應(yīng),當(dāng)需要保存操作整體結(jié)果的時(shí)候,點(diǎn)擊“保存”按鈕,才會(huì)一并請(qǐng)求接口、保存數(shù)據(jù)。

此外,有一篇David H.H(編程語(yǔ)言Ruby on Rails的創(chuàng)造者,37signals的創(chuàng)始人之一,有Basecamp等知名互聯(lián)網(wǎng)產(chǎn)品)的博客文章,推薦可以看一下,名字叫《How Basecamp Next got to be so damn fast without using much client-side UI

(37signals團(tuán)隊(duì)有博客,有英文閱讀能力的,可以直接看,他們團(tuán)隊(duì)的文字功底還不錯(cuò),甚至出版諸如《Rework》等對(duì)于工作效率方面的著作,他們比較倡導(dǎo)極簡(jiǎn)主義。)

絕招二:不允許出錯(cuò)(或低容錯(cuò))

是人,就會(huì)犯錯(cuò)。

那就只給他一次機(jī)會(huì),讓他提心吊膽,悔青腸子。

具體做法諸如:

  1. 操作一保存,立即發(fā)布上線,實(shí)時(shí)生效;
  2. 操作無(wú)法回退為上一次保存的情況,錯(cuò)了,要從頭開始;
  3. 上傳項(xiàng)、填寫項(xiàng),不校驗(yàn)數(shù)據(jù)格式;
  4. 后臺(tái)的登錄狀態(tài),長(zhǎng)時(shí)間不操作,會(huì)斷線,沒提示,斷了之后做過(guò)的東西都白搭。

對(duì)于唯品會(huì)的專題系統(tǒng):

  • 第1點(diǎn),其實(shí)無(wú)論新舊系統(tǒng),我們做的都不錯(cuò)。所有關(guān)鍵操作,都有二次確認(rèn)。頁(yè)面制作好后,需要先預(yù)覽、復(fù)核數(shù)據(jù)正確后,再發(fā)布到先上。
  • 第2點(diǎn),無(wú)論新舊專題系統(tǒng),都還沒有實(shí)現(xiàn),主要原因是技術(shù)實(shí)現(xiàn)成本較大——相當(dāng)于要存儲(chǔ)多個(gè)數(shù)據(jù)備份,每個(gè)數(shù)據(jù)備份實(shí)際上都是要占用服務(wù)器空間的。
  • 第3點(diǎn),舊的專題系統(tǒng),做得特別不好(Nova得到了較好的解決)——受系統(tǒng)限制,組件配置中的文本框被濫用,被開發(fā)定義了各種奇奇怪怪的數(shù)據(jù)格式,但都不會(huì)做規(guī)范校驗(yàn)。比如:某個(gè)組件,必須傳750*480px的圖片才能正常展示,但運(yùn)營(yíng)在后臺(tái)可以成功上傳其他格式的圖片,最終導(dǎo)致前端展示異常。
  • 第4點(diǎn),舊專題存在,需要刷新整個(gè)頁(yè)面,才能重連登錄狀態(tài),之前做的東西都白瞎。Nova解決掉了,具體實(shí)現(xiàn)方式是:重連登錄態(tài),改為請(qǐng)求任意后臺(tái)接口時(shí)進(jìn)行,并不需要重新刷新整個(gè)頁(yè)面。

絕招三:不做任何指引

盲人摸象聽過(guò)么。

對(duì)的,就是要讓運(yùn)營(yíng)像瞎子一樣,猜!

要做到讓運(yùn)營(yíng)問(wèn)這些問(wèn)題:

“我在策劃一場(chǎng)活動(dòng),頁(yè)面希望長(zhǎng)這樣子,你們系統(tǒng)能提供哪些功能?”

“我看到別人做的頁(yè)面,有一個(gè)模塊,我也想使用,組件叫什么?該如何配置?”

“這個(gè)組件,效果好不好?你們有數(shù)據(jù)經(jīng)驗(yàn)嗎?”

“這個(gè)組件,配置好復(fù)雜,你教一下我?”

“你幫忙看看,我配置的組件無(wú)法正常展示,是哪里配置錯(cuò)了嗎?”

在舊的專題系統(tǒng),由于交互隱晦、沒有操作指引,基本上所有系統(tǒng)能力,都靠口傳心授,耗費(fèi)多方的人力,系統(tǒng)用得溜的基本上是在公司待了好幾年的,新來(lái)的人基本一臉懵逼,熟練上手需要個(gè)把月。產(chǎn)品、技術(shù)的日常維護(hù)成本極高,一天如果有5個(gè)運(yùn)營(yíng)來(lái)問(wèn)你,就基本不用干活兒了。

但在Nova,我們打造了【組件樣式庫(kù)】——運(yùn)營(yíng)點(diǎn)擊,可以彈出詳細(xì)的配置介紹、場(chǎng)景說(shuō)明?!卷?yè)面模版庫(kù)】——比較像QQ空間的換膚,可以由活動(dòng)策劃或設(shè)計(jì)師定義配色、基本的組件結(jié)構(gòu),運(yùn)營(yíng)搭建頁(yè)面的時(shí)候,可以直接套用,不同的模版,經(jīng)過(guò)實(shí)驗(yàn)還可以整體迭代、優(yōu)化。

此外,還對(duì)界面的交互做了細(xì)致的優(yōu)化,比較晦澀難懂的操作,hover會(huì)有文案或圖片提示,或者點(diǎn)擊可以跳轉(zhuǎn)介紹wiki。

Nova樣式庫(kù)

Nova模版庫(kù)

一個(gè)不好的運(yùn)營(yíng)工具系統(tǒng),運(yùn)營(yíng)經(jīng)驗(yàn)是無(wú)法傳承的,好的經(jīng)驗(yàn)只能憋在幾個(gè)資深運(yùn)營(yíng)的肚子里,無(wú)法分享給別人。一些數(shù)據(jù)效果好的組件,也只有幾個(gè)人知道。運(yùn)營(yíng)需要幫助的時(shí)候,不能自助解答。

這個(gè)系統(tǒng)關(guān)聯(lián)的產(chǎn)品、設(shè)計(jì)、開發(fā)、運(yùn)營(yíng),都要忙碌在低效的信息溝通中,疲于應(yīng)付瑣碎問(wèn)題,渾渾噩噩過(guò)日子。

總結(jié)一下

如果希望設(shè)計(jì)一個(gè)難用的后臺(tái)運(yùn)營(yíng)工具,需要遵守如下步驟:

  1. 必須慢出翔;
  2. 不允許出錯(cuò)(低容錯(cuò));
  3. 不做任何指引。

簡(jiǎn)單易學(xué),馬上輕車熟路,司機(jī)們請(qǐng)避坑繞行啊!

其他的坑,也歡迎各位補(bǔ)充,本文三個(gè)要點(diǎn),也不能覆蓋所有的情況。

 

作者:張路,微信公眾號(hào)“PathsVIVI”

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 關(guān)鍵詞:黑天鵝,精益。適用于任何開發(fā)、設(shè)計(jì)、策劃、管理等等過(guò)程性的活動(dòng)

    回復(fù)
    1. 認(rèn)真閱讀了,感謝,點(diǎn)贊。推薦的幾本書,值得看看。

      來(lái)自廣東 回復(fù)
  2. 這個(gè)故事告訴我們,后臺(tái)有多爛不重要,前臺(tái)做得好,有賣相,一樣能成功。

    回復(fù)
    1. 每個(gè)產(chǎn)品成長(zhǎng)過(guò)程中的階段性重點(diǎn)問(wèn)題不太一樣

      來(lái)自廣東 回復(fù)
  3. 瞎說(shuō)什么大實(shí)話,話說(shuō)這系統(tǒng)屬于SaaS么?

    回復(fù)
    1. 哈哈。不屬于,沒有做開放不算吧。但互聯(lián)網(wǎng)的基礎(chǔ)能力,打包服務(wù)開放出去,我挺看好的。

      來(lái)自廣東 回復(fù)
  4. 看起來(lái)真是讓人愉快哈哈哈哈

    回復(fù)
    1. 文風(fēng)基本這樣哈哈,希望可以在交流中相互成長(zhǎng) ??

      來(lái)自廣東 回復(fù)
  5. 厲害厲害,平時(shí)也致力于避開這些坑,騰出時(shí)間做有意義的事

    回復(fù)
    1. 共勉之 ??

      來(lái)自廣東 回復(fù)
  6. 哈哈,有趣,有些坑我踩過(guò)

    來(lái)自廣東 回復(fù)
    1. ?? 共勉之

      來(lái)自廣東 回復(fù)
  7. 蠻好玩的

    回復(fù)
    1. 文風(fēng)基本這樣哈哈,希望可以在交流中相互成長(zhǎng) ??

      來(lái)自廣東 回復(fù)
  8. 這可能是PM網(wǎng)站上很歡樂的文章了吧?。」?/p>

    來(lái)自福建 回復(fù)
    1. ??

      來(lái)自廣東 回復(fù)
  9. 這個(gè)就比較任性了

    來(lái)自廣東 回復(fù)
    1. ??

      來(lái)自廣東 回復(fù)
  10. hhhhhhhh做過(guò)相關(guān)系統(tǒng)的看著表示很爽 ??

    來(lái)自廣東 回復(fù)
    1. 哈哈??

      回復(fù)