怎樣設(shè)計(jì)一個(gè)難用的后臺(tái)運(yùn)營(yíng)工具?
讓我手把手教你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):
- 生產(chǎn)過(guò)剩(Overproduction):To produce sooner or in greater qualities than what customers demand.
- 無(wú)效運(yùn)輸(Unnecessary Transportation):Unnecessary movement of parts or people between.
- 返工(Rework):”Do it right at the first time, rework is a pain”—— Repetition or correction of a process.
- 過(guò)程繁復(fù)(Over-porcessing):Processing beyond what the customer requires.
- 無(wú)效動(dòng)作(Unnecessary Motion):Unnecessary movement of parts or people within a process.
- 庫(kù)存積壓(Inventory):”Product has to flow like water”.
- 無(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ì),讓他提心吊膽,悔青腸子。
具體做法諸如:
- 操作一保存,立即發(fā)布上線,實(shí)時(shí)生效;
- 操作無(wú)法回退為上一次保存的情況,錯(cuò)了,要從頭開始;
- 上傳項(xiàng)、填寫項(xiàng),不校驗(yàn)數(shù)據(jù)格式;
- 后臺(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)工具,需要遵守如下步驟:
- 必須慢出翔;
- 不允許出錯(cuò)(低容錯(cuò));
- 不做任何指引。
簡(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é)議
關(guān)鍵詞:黑天鵝,精益。適用于任何開發(fā)、設(shè)計(jì)、策劃、管理等等過(guò)程性的活動(dòng)
認(rèn)真閱讀了,感謝,點(diǎn)贊。推薦的幾本書,值得看看。
這個(gè)故事告訴我們,后臺(tái)有多爛不重要,前臺(tái)做得好,有賣相,一樣能成功。
每個(gè)產(chǎn)品成長(zhǎng)過(guò)程中的階段性重點(diǎn)問(wèn)題不太一樣
瞎說(shuō)什么大實(shí)話,話說(shuō)這系統(tǒng)屬于SaaS么?
哈哈。不屬于,沒有做開放不算吧。但互聯(lián)網(wǎng)的基礎(chǔ)能力,打包服務(wù)開放出去,我挺看好的。
看起來(lái)真是讓人愉快哈哈哈哈
文風(fēng)基本這樣哈哈,希望可以在交流中相互成長(zhǎng) ??
厲害厲害,平時(shí)也致力于避開這些坑,騰出時(shí)間做有意義的事
共勉之 ??
哈哈,有趣,有些坑我踩過(guò)
?? 共勉之
蠻好玩的
文風(fēng)基本這樣哈哈,希望可以在交流中相互成長(zhǎng) ??
這可能是PM網(wǎng)站上很歡樂的文章了吧?。」?/p>
??
這個(gè)就比較任性了
??
hhhhhhhh做過(guò)相關(guān)系統(tǒng)的看著表示很爽 ??
哈哈??