劉歡華東師范大學信息化辦公室
追求優異的用戶體驗,在前端開發、項目管理、微信運營方面有豐富經驗。實踐高校第一個響應式設計主頁,微信服務建設負責人。
“高校新一輪信息化建設中,用戶是否滿意成為了評價信息化建設質量的重要標準。與此同時,Web前端作為提升用戶滿意度的關鍵手段之一,其重要性也越來越凸顯。能夠給予用戶愉悅的視覺感受,提升應用的外觀水準,改善用戶體驗,還能夠應對多終端對高校帶來的信息化挑戰?!?br style="margin:0px;padding:0px;box-sizing:border-box;" />
華東師范大學基于網站群的一體化宣傳服務平臺、移動信息化建設一直在高校走在前列,近期蘇迪視界對劉歡老師做了專訪,分享在項目建設、前端開發等方面的經驗。
(以下蘇迪提問用Q代替)
高效執行力=領導重視+緊密協作+技術路徑優勢
Q
華東師范大學的宣傳服務平臺建設一直走在前列,從11年開始建設網站群,到13年進行主站和新聞網改版時,形成了一體的宣傳服務平臺建設規劃,把網站群、信息公開、教師個人主頁等內容放在一起建設,數據共享,這在現在看理念也是比較先進的,當時是怎么考慮的?
劉歡:走在前列不敢當,之前的工作,我覺得有幾點比較關鍵。
首先是領導層面的支持。11年底我們開始做網站群的時候,當時主要的目的還是做黨務公開的站群。到了12年,校領導分工有所調整,宣傳口和信息化口統一為一個校領導分管,校領導提出了通過信息化促進宣傳工作的思路,從那時起兩個部門的合作就緊密起來,部門之間的工作協調也非常通暢。
其次是技術路徑的優勢。蘇迪的網站群平臺是一個很好的粘合劑,能夠把若干同時具備信息化和宣傳服務的需求整合到同一個平臺上面來,整合得越多,站點與站點之間的內容復制、模板分享等應用方式就越靈活,后來者的加入成本就越低。
另外還有一些歪打正著的因素。比如我們在這之前就上線了教師個人主頁系統,但是老的系統存在著一些瀏覽器兼容性問題,感覺使用不太方便,存在著升級的需求。由于正好建站群系統,借此機會考察了蘇迪的產品,把教師個人主頁納入了進來。信息公開也是一樣的?;剡^頭來看,恰好這些系統逐漸地形成了一個體系,也是比較讓人驚喜的。
Q
很多時候學校怕網站改版,因為改版需要協調全校很多部門,改版的設計頁面也需要三審五審遲遲不能定稿,在這方面華東師范大學一直給人的感覺是執行力很強,我們是怎么做的?有什么經驗可以分享?
劉歡:做改版確實是一個跨部門的事情,特別是牽涉到內容層面的提供。比如文字、圖片、設計素材這些東西跟不上,改版是很難好的。
所幸的是我們從一開始就理順了組織關系,校領導把宣傳口和信息化口一起深度合作,從技術和內容兩方面同步推進。在實施時,我們制定了一個日程表,明確新門戶上線的時間,按照這個時間來倒推各個節點,該做決定的時候就請校領導出馬來拍板。另外,像改版會涉及到給一些部門增加工作量、對一些人員提供新的工作要求等問題,也都因此迎刃而解了。
做響應式設計,需要注意的是從一開始就做好規劃
Q
華東師范大學的主頁是響應式設計,這在當時高校還是首創,建設思路是什么?需要注意什么?
劉歡:我們是在12年底做新版門戶網站的時候加入響應式設計的。當時不僅是在高校,在互聯網上都是比較領先的,相關的網站還比較少,絕大多數網站都是使用一個桌面版和一個移動版的方式。
選擇響應式設計首先是自己在前端方面的興趣所致,感覺這是一種好的技術路徑,值得嘗試。再就是當時人手比較有限,門戶網站改版,需要同時做中、英、法文和新聞網四個站點,上線時間緊張,還要兼顧移動端,如果采用桌面版+移動版的開發方式工作量會加倍,而采用響應式設計,相關的工作量就少多了。
響應式設計主頁剛上線的時候,很多人還不太理解這個技術有什么用,可能當時大家還只是把目光放在桌面端?,F在這幾年移動互聯網的趨勢已經非常明顯,做任何一個站點都需要考慮移動端了。
做響應式設計,需要注意的是要從一開始就做好規劃,特別是在設計稿階段。當時設計階段我實際上是沒有考慮到響應式設計的,也是在后期PC版已經有雛形的基礎上再加入的,這時候就發現還得回去改不少東西,所以也走了一些彎路。另外,當時還沒有很好地解決圖片響應式加載的辦法,所以移動端的流量消耗還是比較大,放到今天,前端技術發展的很快,這些都已經不是什么問題了。
在前端方面,高校要有一定的自主設計和開發能力
Q
現在回過頭看,網站群平臺覆蓋的內容形式非常多樣,在當時就提出了圖庫、視頻庫,圖片的顯示效果也做的非常好,這也是為了給用戶帶來更豐富的體驗吧?
劉歡:是的,這些需求大都是領導層面及宣傳部門提出來的。因為我們的分管校領導的觀念也很新,當時就認為今后是一個“讀圖”的時代,要以圖像畫面說話,直觀呈現。所以那幾年,宣傳部門都突然配置了很好的拍攝設備,還不斷鉆研拍攝技巧,他們在圖片、視頻方面提供了很好的內容支撐。我們也就根據宣傳部門的需求,做好前端的呈現。最終的效果也是有目共睹的。
說實話,再好的設計配上一張低質量的內容圖片都會變味。以前做一些校內的二級網站,很多人上來就問,能不能做成哈佛主頁那樣?每次遇到這樣的情況,我都想問對方,你們部門是不是有像哈佛主頁那樣高品質的圖片素材呢?
Q
現在越來越多的高校關注“用戶交互體驗”,也希望能夠改進系統的“視覺效果”,在這方面你有什么好的建議?
劉歡:我覺得在前端方面,高校要有一定的自主設計、開發能力。因為除了用開源的系統以外,高校不可能自己去做一套網站群系統,后端實際上廠商已經負責解決了。而前端如果太依賴廠商開發,工作中碰需求的節點就會更多,把整個節奏拖慢。所以,高校最好在技術上配備一名對UI和前端代碼比較熟悉的專業人才。
比起后端技術,Web前端技術更新換代更快,框架更加多樣化,成熟的技術方案更稀缺,且可借鑒并照搬復制的成功經驗極少。相較于后端開發者而言,優秀的前端開發者較為稀缺,高校要招募且留存其中水平較高的開發人員,其操作難度和投入程度無疑也較高。此外,高校還需要考慮如何創造適宜的學習工作環境,以實現前端開發團隊中成員的個人可持續發展。
高校和廠商是一種良性的共生關系
Q
你覺得和廠商怎樣合作才能合力實現建設成效最大化?
劉歡:高校和廠商是一種良性的共生關系,可以通過對產品的不斷深入運用。一方面促進高校信息化建設,另一方面優化改進軟件系統。就像在我們門戶網站改版的過程中,會就一些特殊的需求和廠商不斷商討,最后做出來的東西也對廠商提供了一些有益的經驗。
當前,師生的需求更多的是在移動端獲取到便捷的服務,并且可以個性化定制
Q
現在互聯網時代,師生對信息化部門的主要要求是什么?對信息化部門有什么挑戰?覺得前端技術在服務師生上還可以做哪些工作?
劉歡:關于師生的要求,在做微信企業號之前,我們花了很多時間,找了很多師生,特別是對我們意見比較大的師生,了解他們對我們有什么需求,他們想要什么東西。我們的公共數據庫功能是很全面的,但不是很好用。最大的問題是瀏覽器兼容性、界面不是很好看,操作不方便等。他們希望可以更簡單的獲取到服務特別是移動化的方式獲取到服務。比如,在手機上查工資。師生的需求都是一些非常小的需求,我們現在就是把他們的需求在移動端實現,讓他們可以非常方便的獲取到服務。
Q
面向師生的服務非常多,輕松上百,這種情況下你覺得在搜索和展現上有什么好辦法?
劉歡:現在的趨勢就是碎片化,以前的做法是建大平臺,各種系統都在里面,都是以部門為條線?,F在大家都希望我直接能看到我關注的功能點,我最關注的這些功能點。我希望這些都是可以個性化定制的。就像我們進交管平臺,可能最關心的就是有沒有違章記錄,罰款怎么繳。以后就是把各個系統的功能打碎成基礎的單元,這些單元可以直接提供給用戶,讓用戶可以自由組合。當用戶需要交互的時候,可以精確地給到用戶,而且終端更偏向于移動端。移動端是最能夠及時和用戶取得聯系的。
考慮到推廣容易、開發門檻較低、能方便接入微信支付、微信卡包等能力,面向師生的管理服務移動化,我們選擇了微信企業號來作為主要的平臺
Q
現在華東師范大學移動化主要是在微信上實現,當時選擇用微信是怎么考慮的?你覺得建設難點是什么?
劉歡:移動化主要有兩塊,一塊是做宣傳,這個我們在之前的門戶網站上已經做了。另一塊是面向師生的管理服務,我們選擇了微信企業號來作為主要的平臺。
選擇微信主要是從幾點出發的。一是微信的推廣非常容易,并且相比APP來說基于微信的應用用戶留存率很高。我們對學校里的師生做過統計,隨機選擇了十幾個部門院系接近兩百個師生,調查結果是99%的師生都是微信用戶。二是微信的開發門檻比較低,微信企業號已經做了很多基礎功能,我們只需要做具體的應用就行了。三是使用微信還可以很方便地接入微信支付、微信卡包等能力,能夠把管理服務的應用面做的比較廣。
建設難點主要是第一步的人員和組織架構的基礎數據梳理、定期同步等功能的開發,沒有這個基礎,企業號就很難很好地運作,精準推送服務也無從談起。我們目前每天晚上定期做同步,使微信的人員和組織架構與學校公共數據庫數據一致。
微信校園卡的實現意味著我們可以使用電子卡完全替代掉實體卡的核心功能
Q
我們做了很多服務到人的應用,比如微信校園卡,這個從創意到實施用了多長時間?在操作上有什么需要特別注意的?
劉歡:微信校園卡是我們和微信卡包團隊一起合作研發的,前前后后花了大概半年的時間。前面一般的時間是做一些探索性嘗試,主要開發和實施工作是后面兩三個月的事情,還好進展比較順利,趕在9月份開學前完成了一期的研發,主要實現了身份識別功能,學生可以使用微信校園卡進出圖書館。10月份我們又把微信支付做上去了,學生可以在食堂刷手機微信買飯,同時實現對校外人員的區分,這個不管對于高校還是對于微信而言都是非常有價值的一件事情,意味著我們可以使用電子卡完全替代掉實體卡的核心功能了。
目前微信校園卡最大的一個顧慮是卡的轉借問題,因為實體卡也有出借的情況,但是有一定的出借成本,而電子卡的出借成本很低,學生可以把二維碼截圖拍照發給別人,別人就能夠用這個碼進入圖書館了。我們也采取了一定的防范措施,比如限制同一個學號的實體卡和電子卡進出圖書館的頻率,定期做數據分析等。但這些都不是關鍵的,關鍵是以后我們將在電子卡上疊加很多功能,讓這個碼越來越有分量,能容納更多的功能,把電子卡變成一個更加私密的、體現個人身份的線下媒介。
受限于微信提供的js接口,在調用設備底層硬件這塊還比較薄弱
Q
現在很多高校在糾結移動校園是建設移動客戶端APP,還是基于微信實現,你在建設過程中有沒有遇到哪些應用是不適合放在微信上,需要APP來完成?
劉歡:我目前還沒有碰到,我覺得是調用某種底層硬件,只能通過APP來做。受限于微信提供的js接口,在調用設備底層硬件這塊還比較薄弱。
采用合作伙伴(廠商)加自建的多主體開發機制,讓我們對應用有掌控力
Q
在運營推廣時,發現有很多有趣的H5,聽說都是自己開發的,這個開發團隊是怎樣的?
劉歡:是的,我們做過一些小游戲,比如520微信企業號上線的時候做的拼?;盏挠螒?,還有去年年底做的拼手速的校園卡游戲,實際的效果還是挺不錯的。
開發團隊實際上目前主要是我一個人,因為我們信息辦人手一直很緊張,一共三十多名同事,每個人的工作量都很飽和,在前端這塊很難組建一個較大的團隊出來。但是這些小東西外包起來效率也很低,所以還是自己抽時間來開發,一般一個H5從構思到開發完成就一兩天的時間。未來也希望能夠有一些學生能加入到這里來。
Q
在應用成效上,通常用什么工具來觀測?
劉歡:目前觀測工具還比較有限。一個是企業號自帶的統計工具,看看認證數、總訪問量和每個應用的訪問量。另一個就是看各種渠道反饋上來的口碑狀況。
Q
很多學校不選擇自建應用是因為開發團隊難于管理,維護起來力不從心,在這方面我們是怎么做的?
劉歡:得益于微信企業號的良好的權限分級機制,我們現在采用了合作伙伴(廠商)加自建的多主體開發機制,把一些工作量比較大的應用交給合作伙伴開發,我們自己根據人手狀況,會選擇開發一些簡單的、對時效要求高的應用,這樣信息辦自己對部分應用具有完全的掌控力。因為我們自己參與了部分應用開發,對微信企業號的框架接口也非常熟悉了,因此對于合作伙伴開發的部分應用,我們也能夠具備一定的代碼修改能力。

更多實戰案例
劉歡老師收錄在他的新書
《HTML5基礎知識、核心技術與前沿案例》中。
小編已收,你還等什么呢?