【編者注】本文作者：范俊豪，騰訊CDC頁面重構(gòu)工程師，作者更喜歡稱呼自己為“頁面仔”。本文中，他結(jié)合工作中的幾個(gè)小故事，分享了小創(chuàng)新是怎樣煉成的。
Web研發(fā)界里有一個(gè)特別的職位——頁面重構(gòu)工程師， 其最基礎(chǔ)的技能是設(shè)計(jì)理念的還原。此外，還需要時(shí)刻關(guān)注前瞻Web技術(shù)、參與頁面動(dòng)效設(shè)計(jì)，甚至還需要處理一些基礎(chǔ)的視覺設(shè)計(jì)工作，更有些重構(gòu)工程師會(huì)擁有服務(wù)器端的開發(fā)能力或者Canvas、SVG等圖形處理能力。這個(gè)職位在國外更多被稱作Web Designer，而我們更喜歡叫自己“頁面仔”。
如果你做過頁面相關(guān)的編碼工作，HTML、CSS、JavaScript應(yīng)該是再了解不過的技術(shù)了。當(dāng)然如果知識(shí)面再廣一些，你可能還會(huì)接觸如HTML5、 CSS3等新型Web標(biāo)準(zhǔn)。非常幸運(yùn)，這個(gè)圈子里還有一幫樂于貢獻(xiàn)的人開發(fā)分享了很多實(shí)用的編碼工具，例如jQuery、YUI、Sencha等。
Web開發(fā)的誕生，有別于客戶端開發(fā)，它讓開發(fā)成本大大降低。并且，有了這些框架和工具，更讓開發(fā)人員能迅速地實(shí)現(xiàn)產(chǎn)品想法，而這些便是創(chuàng)新最好的基礎(chǔ)。
擁有產(chǎn)品思維的技術(shù)人員
在很多互聯(lián)網(wǎng)公司，老板和員工總會(huì)認(rèn)為，合格的產(chǎn)品經(jīng)理應(yīng)該具備技術(shù)能力，我也十分認(rèn)同。但從另一些角度思考，是否技術(shù)人員也需要擁有產(chǎn)品策劃能力或設(shè)計(jì)能力?
答案是肯定的。技術(shù)思維與產(chǎn)品思維是相輔相成、缺一不可的。高超嫻熟的編碼技巧支撐項(xiàng)目快速落地。但擁有了產(chǎn)品的角色之后，能讓我們站在更高的角度去解讀產(chǎn)品，避免走彎路。
因此，近幾年里，我們?cè)谧鍪碌倪^程中，也在不斷地參與項(xiàng)目的討論，提升團(tuán)隊(duì)的產(chǎn)品能力，學(xué)習(xí)用戶研究、人機(jī)交互等范疇。2012年，我加入了騰訊，來到了CDC，負(fù)責(zé)Web開發(fā)團(tuán)隊(duì)，和團(tuán)隊(duì)開始了微創(chuàng)新之路。
從“我”出發(fā)
毫無疑問，2012年又是火爆的移動(dòng)終端年，無數(shù)的App誕生了，我們團(tuán)隊(duì)也負(fù)責(zé)了公司很多的App視覺設(shè)計(jì)工作。但設(shè)計(jì)師要在手機(jī)上預(yù)覽設(shè)計(jì)稿是一件十分煩瑣的事情，按正常的流程，我們想要看一個(gè)應(yīng)用的App設(shè)計(jì)，需要先將App的設(shè)計(jì)稿從PhotoShop中導(dǎo)出為JPG格式，連接設(shè)計(jì)師的移動(dòng)設(shè)備至電 腦，再通過類似iTunes的工具進(jìn)行同步。除了這些方法，也有其他方法還能借助文件傳輸工具，比如安裝一些實(shí)時(shí)預(yù)覽App或者在操作系統(tǒng)上安裝各種文件 傳輸類工具。但這些工具在使用前總需有些門檻，比如需要安裝其App或者需要插上傳輸線。
當(dāng)時(shí)我正負(fù)責(zé)一款自研產(chǎn)品的項(xiàng)目管理工作，在工作過程中，發(fā)現(xiàn)了團(tuán)隊(duì)設(shè)計(jì)師在其中煩瑣的過程。我當(dāng)天便花了幾個(gè)小時(shí)的時(shí)間，用大家再熟悉不過的技術(shù)，開發(fā)了AIR REVIEW工具，如圖1所示。
圖1 AIR REVIEW操作界面
它其實(shí)很簡(jiǎn)單，除了利用最簡(jiǎn)單基礎(chǔ)的HTML、CSS、JavaScript、PHP等Web編程語言外，用到最新的技術(shù)也只是HTML5的拖拽接口。
門檻低、好操作，是這個(gè)小工具的特色。想要將App設(shè)計(jì)稿傳至手機(jī)上查看實(shí)際效果，只需要這么幾步：
1. 訪問AIR REVIEW;
2. 點(diǎn)擊臨時(shí)預(yù)覽(若是長期項(xiàng)目，輸入項(xiàng)目名稱按確認(rèn));
3. 將PSD或JPG文件拉進(jìn)AIR REVIEW;
4. 用手機(jī)掃描二維碼。
現(xiàn)在App設(shè)計(jì)稿已經(jīng)在你的手機(jī)里了，后面你對(duì)設(shè)計(jì)的變更，也只需要再次進(jìn)入AIR REVIEW，拖拽上傳更新文件，再次訪問手機(jī)上的網(wǎng)址，便已是最新的版本。
當(dāng)我在設(shè)計(jì)師面前演示AIR REVIEW時(shí)，他表現(xiàn)得異常興奮，覺得這便是他一直想要的。它真的節(jié)省了很多額外的時(shí)間，現(xiàn)在公司外也已有同行在使用。
其實(shí)AIR REVIEW并沒有應(yīng)用太前沿的技術(shù)，只是一些基礎(chǔ)的PHP上傳代碼、開放的二維碼API、還有一些類似iScroll的響應(yīng)式設(shè)計(jì)腳本庫。僅用幾小時(shí)開發(fā)出來的小工具，卻深受設(shè)計(jì)師的喜愛。
為什么會(huì)開發(fā)AIR REVIEW?其實(shí)很簡(jiǎn)單，因?yàn)轭A(yù)覽設(shè)計(jì)稿這件事情就是我每天都要做的，而每天也會(huì)遇到和用戶相同的問題。所以創(chuàng)新的第一步是從“我”出發(fā)，解決自己工作中遇到的問題，把自己變成用戶，便可以發(fā)現(xiàn)用戶的核心訴求。
善于發(fā)現(xiàn)機(jī)會(huì)
剛加入團(tuán)隊(duì)時(shí)，我所在的事業(yè)群發(fā)布了事業(yè)群Logo。除此之外，也少不了相關(guān)的文化衫、紀(jì)念品、簽名檔設(shè)計(jì)等。某天，在辦公室我經(jīng)過一位設(shè)計(jì)師的座位時(shí)，看見他正在處理同事們的郵件簽名檔。
當(dāng)時(shí)目測(cè)他處理一個(gè)簽名檔并導(dǎo)出的速度大概為五分鐘，而我們事業(yè)群有五千多人，那么他要處理完這五千多人簽名需要的時(shí)間應(yīng)該不少于5分鐘×5000/60分鐘，也就是約400小時(shí)，這是件多么痛苦的事情啊!
當(dāng)時(shí)我便想到一個(gè)幫他解決痛苦的好辦法，并問他要到了簽名檔的源文件，然后用簡(jiǎn)單的代碼寫了一個(gè)表單，通過提交表單把信息進(jìn)行打包整合，利用PHP進(jìn)行圖片拼接，最終輸出簽名檔。
迄今為止，這個(gè)工具已生成了一千多個(gè)簽名檔。因?yàn)檫@個(gè)工具，設(shè)計(jì)師大大節(jié)省了工作成本。也因此，TEG品牌建立項(xiàng)目組也拿到了事業(yè)群的獎(jiǎng)勵(lì)?？赡苓@些輸出比 起一個(gè)大項(xiàng)目來說算不上什么，工具的制作成本也是極小的，熟悉Web開發(fā)的同學(xué)一看工具便能清楚原理，用的也是用爛了的技術(shù)，代碼也更是不值得一提。
但我想說的卻是另一件事，這好比攝影，一個(gè)人能擁有很好的相機(jī)、很好的鏡頭，但最終的攝影效果更取決于你有沒有一雙善于發(fā)現(xiàn)美的眼睛。技術(shù)也是，你能擁有超凡的編碼能力、學(xué)習(xí)到了最前沿的技術(shù)，但缺少不了的是，你也需要擁有一顆善于發(fā)現(xiàn)機(jī)會(huì)的眼睛。
先扛住，再優(yōu)化
小步快跑，先扛住實(shí)現(xiàn)需求，再迭代優(yōu)化上線。這是騰訊“海量用戶之道”系列課程的主要思想。我覺得將這句話詮釋得最好的案例是團(tuán)隊(duì)開發(fā)的“抓鬼”應(yīng)用。
“抓鬼”是騰訊內(nèi)部流行的一個(gè)線下桌游，這個(gè)游戲是考驗(yàn)團(tuán)隊(duì)默契的工具，不僅能讓新人快速融入團(tuán)隊(duì)之中，還能提升團(tuán)隊(duì)的配合、溝通，甚至是記憶能力。游戲的規(guī) 則就不細(xì)說了，之所以會(huì)提起它，是因?yàn)檫@個(gè)游戲必須需要紙條和筆才能進(jìn)行，而處在這個(gè)數(shù)碼時(shí)代，人們又很少會(huì)把紙條和筆帶在身邊。
在一次團(tuán)建的過程中，我們也發(fā)現(xiàn)了這個(gè)問題;在一個(gè)簡(jiǎn)單的腦暴后，我們誕生了一個(gè)在線版“抓鬼”的點(diǎn)子;在當(dāng)天晚上，團(tuán)隊(duì)也利用一些簡(jiǎn)單的響應(yīng)性編碼技巧，開發(fā)了當(dāng)時(shí)第一個(gè)版本，“抓鬼”線上版本也發(fā)布了。
第一個(gè)版本的“抓鬼”非常簡(jiǎn)陋，但解決了紙和筆的問題，也抓住了當(dāng)時(shí)最火、需求最強(qiáng)烈的時(shí)機(jī)。后面陸續(xù)更新了視覺優(yōu)化的版本、多平臺(tái)兼容的版本、利用LocalStorage儲(chǔ)存離線數(shù)據(jù)等，現(xiàn)在又正在準(zhǔn)備加入隨機(jī)推薦詞語的功能。
當(dāng)時(shí)公司里后續(xù)也有其他部門跟進(jìn)制作了App并上線App Store，但我們已抓住了先機(jī)。所以，一旦擁有了想法，一定要將核心需求以最簡(jiǎn)潔的方式表達(dá)出來，結(jié)合最合適、快捷的技術(shù)或工具，快速發(fā)布，這樣不僅能打快，也能保持產(chǎn)品的簡(jiǎn)潔。
微創(chuàng)新的落地
當(dāng)具有了產(chǎn)品發(fā)現(xiàn)能力和敏捷開發(fā)能力之后，我們就能做更多的東西。前面提的例子可能會(huì)讓人覺得用戶群體實(shí)在太少，細(xì)心的人會(huì)發(fā)問，用戶群正在一點(diǎn)點(diǎn)變大，那我們?cè)趺窗讶ψ幼兊酶?這里最后分享一個(gè)很好的案例，關(guān)于一個(gè)圖片顏色分析的微創(chuàng)新的落地使用。如圖2所示。
圖2 圖片顏色分析的微創(chuàng)新
事情的起因是我們?cè)谧鲈O(shè)計(jì)還原時(shí)產(chǎn)生的一個(gè)很不錯(cuò)的想法——通過Canvas遍歷計(jì)算圖片的像素顏色，計(jì)算出圖片最常用的前背景顏色，并將顏色應(yīng)用至模塊及文字中。
這是個(gè)很酷、很簡(jiǎn)單的技術(shù)實(shí)現(xiàn)，有些類似換膚的原理。通過推動(dòng)，最終這個(gè)創(chuàng)意也被采納到騰訊視頻的改版中去。新版本視頻首頁，首屏大輪播下輪播的左右側(cè)及縮略圖的漸變底色是根據(jù)輪播大圖而改變的，這便是我們推動(dòng)落地的結(jié)果。
看，現(xiàn)在我們的小創(chuàng)意已應(yīng)用到了億級(jí)流量平臺(tái)上了，為用戶提供了更愉悅的體驗(yàn)。我想說的是，工程師不單單需要把想法和創(chuàng)意從紙上談兵變?yōu)榧夹g(shù)實(shí)現(xiàn)，還需要利用資源將最合適的創(chuàng)意推動(dòng)至更大的平臺(tái)。
創(chuàng)新是什么？
對(duì)于我來說，創(chuàng)新的產(chǎn)品不是一個(gè)龐大的想法，而是積水成河的過程。工程師需要具備產(chǎn)品經(jīng)理的思維，懂得去做用戶研究，發(fā)掘用戶需求，懂得站在用戶角度去思考產(chǎn)品?；谶@些，再加上我們學(xué)習(xí)到的編程技巧，快速將小創(chuàng)意落地實(shí)現(xiàn)并慢慢打磨。
天下武功，無堅(jiān)不摧，唯快不破。真正的創(chuàng)新，是在合適的時(shí)機(jī)，做出合適的決策，利用合適的技術(shù)最快地將想法落地現(xiàn)實(shí)，最終才能打造真正的創(chuàng)新產(chǎn)品。
