如何設計小程式？騰訊這個實戰案例太讚了！
粵省事小程式是一個基於移動端的聚合式政務服務平臺。作為一個平臺型產品，它集成了廣東省各地市、各部門的多項民生、政務類服務內容；同時，它也承擔著對不同政府部門、合作開發商、公眾使用者等多個相關主體的利益串聯。數字廣東公司（由廣東省政府發起並領導，騰訊及三大運營商共建）是粵省事小程式的幕後建設統籌單位。「數廣」體驗設計團隊（主要由來自騰訊的設計師組成）通過體系化的工作方法，在專案複雜、工期緊張的背景下，完成了對粵省事小程式的體驗框架搭建。在這次實踐中，設計團隊探討了基於網際網路的設計理念與傳統政務服務的結合模式，為推進「數廣」產品體系中各模組的設計工作，整體重塑廣東電子政務服務的遠期目標積累了重要經驗。
一、背景解讀
近年來，在黨中央和國務院的大力支援下，我們國家逐漸完善了電子政務發展的頂層設計，為各地「網際網路+政務」的建設制定了清晰、可執行落地的路徑規劃。廣東省按照相關規劃，在數字政府的建設模式上積極探索：一方面，在政府側成立了專門的領導小組，對建設工作進行規劃及協調 ；另一方面，由騰訊和三大運營商組建了數字廣東公司，為實施過程提供專業的技術支撐、方案設計及建設運維能力。
在這樣一個領導責任明確、建設支撐單位專業化能力完備的基礎上，「數廣」公司將按照領導單位的規劃，聯合各家合作開發商，逐步對廣東各地市、各部門分散設立、重複建設、服務質量較差的電子政務系統進行整體重塑：通過規劃中的一系列改造，降低資訊化系統的整體運營成本，提升政府工作人員的辦事效率，為公眾帶來更好的政務服務體驗。
二、總體任務
對全省範圍內的電子政務體系進行整體重塑，是一項非常複雜的系統性工程，需要以架構設計的方式對技術底層到應用表層間不同環節的相關工作進行規劃。按照相關規劃，設計團隊的總體任務既要聚焦於整個架構的顧客行為層面，也要協調 PPP 三方的合作方式：一方面基於一系列平臺型產品，結合各級政府及開發商的運作特點，對各類政務服務進行體驗重塑和整合，讓政務服務變得更人性化、更方便好用；另一方面基於一系列工具型產品，為政務運作提供更好的效率支援。
粵省事小程式是數字廣東產品體系中的重要一環，作為一個政務服務的聚合平臺，通過對各類相關事項的整合處理和體驗提升，為公眾提供「一站式」、「能辦成事」的移動端服務觸點；而針對服務供給側，粵省事平臺為各級政府部門及合作開發商提供規範的對接模式，讓這些相關主體能順暢地把各類服務事項按照統一標準在粵省事平臺上線，以充分利用平臺的各項技術（高併發、穩定性等）和業務（身份、支付等）優勢，以更低的成本為更廣泛的使用者帶來更多、更好的服務。
「粵省事」三個字，「粵」即是廣東省的簡稱，同時也和「越」同音；「省」代表了服務與省內，和「事」字組成「省事」也傳遞出小程式的核心要義「方便快捷」。「一站式，更省事」的 Slogan 更是強調了突出了我們的優勢，希望給使用者提供一站式便捷辦理省內政務服務的平臺。
接下來，我們將回顧「數廣」設計團隊在粵省事小程式專案中的各項工作實踐，同時也對過程中關於「政務類服務及體驗設計」的一些思考進行總結。
三、設計分析
1. 競品探索
第一類：在已有的高使用者量平臺裡，搭建民生服務集合站點，例如微信城市服務、支付寶城市服務。這一類門戶本身是眾多官方或第三方服務的入口集散地，優點是提供了大而全的服務平臺，群眾可以比較容易的在固定平臺裡找到服務入口。但每個服務自成一體，獨自開發，所以各個服務之間不存在統一或者規範。
第二類：渠道商自建 App 中的服務入口，例如中國郵政的車務代辦。這一類服務散落在各個渠道商自建的 App 裡。同時也受渠道的能力影響，功能相對比較簡單。
第三類：業務部門自建公眾號或 App。在部門的業務範圍內，有很好的體驗一致性及服務閉環。但公眾號、服務號更多的被集合在第一類大平臺裡。而 App 必須先下載後使用，這就讓使用門檻又高了一層。
綜上所述，我們小程式是希望打造一站式的服務體驗平臺。所以，既應該有第一類競品的全面、易找到的特性，也同時要具備第三類的體驗一致性與業務閉環。最終需要我們自己去尋找一個適合的定位。
2. 使用者研究及分析
通過顧客旅程地圖來梳理使用者三種辦事場景（線上辦理辦結、線上預約線下辦結、線下辦理）的每一個環節的需求，感受和痛點。從而推匯出設計的機會點。
我們彙總發現使用者的痛點集中在以下方面。歸納起來，便捷、清晰、易找到是使用者關注的核心要素點。
3. 設計統籌與戰略分析
和傳統的 to C 專案不一樣，粵省事小程式不僅是一個資訊規模大、功能複雜的平臺型產品，同時也涉及到政府各部門如何協調合作的問題。和業務、技術等其他相關團隊一樣，設計團隊也需要基於全域性視角，以統籌的思路介入工作，才能避免在紛雜的細節執行中走偏，實現對平臺整體體驗的有效把控。在節奏尤其緊張的專案初期，設計團隊有意識地慢下來，對以下這些最可能影響設計走向的問題進行了梳理，作為對後續各類細節工作的總體指引。
自下而上的設計：做好預判，提前設計
小程式和廣東省政務服務網的設計路徑有很大區別。政務服務網是一個集合了政務服務全量功能的平臺，設計路徑也是自上而下的全盤改造。但小程式是一個開放的接入平臺，各個部門願意接入哪些移動端的業務能力，就接入哪些業務，是自下而上的設計。「多」，大概是對全省政務服務總量的一個安全的估算，但到底和我們的平臺屬性相吻合的服務有多少卻不是顯而易見的。通過有針對性的盤點，我們發現在全省50多個部門中只有20多個包含和我們的目標使用者相關的服務，而這20多箇中僅有三分一提供大部分使用者較常使用的服務。粵省事平臺需要對接的核心服務內容，其實僅來自7、8個相關部門，對資訊總量和使用者規模的整體梳理將有助於後續資訊架構和關鍵路徑的設計。
以辦成事情為目標，做服務整合
在對資訊的盤點過程中，我們發現當前大量的政務服務是以行政事項的形式機械地羅列出來，是政府內部運轉模式的直接呈現。使用者要做成一件事情，往往需要分別辦理若干個不同的事項。為此，我們得到一個設計各類服務流程的基本原則：在平臺接入的服務內容需要以「辦成事情」為任務目標來整合，儘可能解決使用者的最終訴求。
探尋品類通用模型
對比其他網際網路化更充分的行業，大部分政務服務還沒有成熟的品類通用體驗模式（如：電商、外賣、視訊應用的框架佈局、基本操作大同小異）。 作為一家統籌單位，我們有條件集中力量處理好服務整合的問題，從而為不同政務服務找到各自領域的內容本質，形成通用體驗模型，以滿足在不同地市、場景快速複製的業務發展需求。
4. 設計目標
在有了前序比較完整的分析之後，我們歸納分析出整體目標。粵省事小程式的本質在於構建一個聚合各項政務服務的移動端平臺，以平臺的模式串聯好使用者、合作開發商、政府部門，讓三個利益方各得其所。為此，我們對設計目標進行了針對各方核心需求特定的有針對性的定義：
定義設計基礎原則：
清晰易用
根據業務狀態推薦業務功能，降低使用者決策負荷。確保資訊元素具備優先順序層次與可用性。確保介面更加符合使用者心理直覺。
靈活高效
提供全域性觀的入口式設計方案，不輕易陷入細節流程。設計模式具備可擴充套件、完善包容的機制。
簡單務實
摒棄不必要的設計元素，追求利落適用的特質。通盤考慮各端優勢，移動端可作為複雜事項申辦引流入口，不可處理過於複雜的事項流程。
進一步推匯出基礎設計語言：
輕快
資訊聚焦、扁平視覺、自然的視覺流、提高視覺信噪比。
親和
簡潔緩和、完整統一、操作可靠，體驗上連續舒適。
直率
結構簡單、資訊富有韻律感，減少視覺分割和過於熱鬧的裝飾。
5. 資訊架構構建
For 使用者 – 以「辦事為中心」組織整體資訊
按相關部門主持的服務來組織功能是當前常見的處理方式，但這種組織方式從使用者調研的反饋來看，使用者並不能把事情和各個主管部門一一對應，且許多事情需要多個部門配合處理。所以常見的「部門」組織方式，不是直接解決使用者問題的方式。因此摒棄以主管部門為維度的歸類方式，換成改同類事情的集合。
For 服務 – 基於地市組織服務資訊
按行政屬地劃分是當前各類政務服務能力的基本組織形式，這種形式和基於地理的模型有許多共通之處，像訂餐、差旅等行業都是以屬地來組織資訊的常見例子，這種模型和我們的情況最吻合。從服務側來看，這樣可以根據地理位置直接匹配相應的服務提供方。從使用者側來看，也可以更準確的提交服務訴求。
For 合作 – 劃分三級頁面體系
總體上，我們把小程式的架構處理成小程式主體+各個功能模組二級首頁+具體辦事流程頁的三級體系。
小程式首頁與各種全域性功能（如登入、訊息、進度、搜尋等），涉及的內容直接反應小程式的初始體驗感受。我們將這部分內容定義為「全部模型設計」的範疇，由數廣設計團隊主刀。 二級首頁即各個業務的服務大廳，影響使用者對業務的感知。我們將這部分內容定義為「業務模型設計」，同樣由數廣設計團隊主刀，可以保證多業務的體驗一致性。
而業務流程，我們則交給對業務熟悉程度更高的開發商。數廣定製「流程模型」規範，讓不同開發商能按照統一標準，在2個月內把152個事項接入到粵省事中。
四、設計實施
1. 主程式設計
以使用者為中心，以證件為切入點
在過往的線上服務系統中，服務提供方傾向一次性展示更多的功能，希望眾多功能總有一個是使用者需要的。但這並不是以幫助使用者辦成事為第一目標的設計思維。
在前文中提到以事情為中心的資訊組織方式，是為了讓資訊架構成更扁平直觀，從而更易於使用者理解。於是我們嘗試了第一種整體的佈局方案，小程式整體分為「服務」「證件」「我」三個大的 tab。但從用研測試反饋來看，相對具體的服務事項，證件才是使用者對業務的第一認知方式。同時，粵省事的小程式屬性，導致再次巢狀底部導航的體驗不夠輕便。於是在僅剩1個月就要上線的前夕，我們推翻了第一種方案。把證件放到了首頁的 C位，強化了證件的展示，通過最易理解的資訊元素引導使用者探索其他常用的功能。
證件本體的設計上，我們更多采用了輕質感擬物化設計。從實體證件中提取具有識別性的顏色和特徵圖形，進行視覺優化。同時，在 「視覺的顏色」 和 「跟真實顏色走」 兩個點間，我們選擇了跟真實顏色走。通過這些簡單而必要的視覺隱喻，減少使用者記憶壓力，從直觀層面上理解業務，更快作出反應和決定。
入口資訊處理
作為承載各類服務的平臺，我們初次面對的是需要容納142個細項的業務，後續還會不斷的增加更多事項。如果不加以規範，很容易出現入口堆砌的窘境。既要保證服務內容的完整展示，又要保證使用者能便捷地找到相關的內容，我們對首頁的入口展現形式做了特定處理。
保持友好：在視覺表現上通過對留白和字號的控制，讓使用者儘可能舒適地瀏覽多入口資訊。在類別標題上儘可能選用簡單的名詞來命名，不需要再次轉譯資訊。
建立信任感：增加服務提供方的名稱，即可以提高服務的公信度，也可以反向影響政府部門儘快上線更多的便民功能。
平衡設計細節
整體介面採用扁平化的設計，去除冗餘、繁雜的裝飾效果，突出核心的設計元素，讓使用者使用時更為直觀和更有目的性；為適用於不同年齡層的使用者，整體介面採用了大字型，通過字號、字重、間距、留白來建立清晰的資訊層級，提高使用者的使用效率。
2. 二級首頁設計
通用基礎模型搭建
不同型別的政務服務，從使用者角度來看能抽象成相對簡單的查詢類、辦理類、預約類三個大類。進一步梳理，我們把基本的「查」相關的資料更直接的展現出來。「辦」和「約」則根據使用者當前的狀態，給予適合的任務推薦。簡單的來說，通過「我的基本資訊+我的狀態+我能做什麼」的公式來組合業務。通過這種模型，不僅可以使資訊組織更有邏輯性，也可以減少因使用者狀態不滿足條件引起的錯誤業務申請量。
為使用者提供服務全域性觀
二級首頁承載的是以單個主題為中心的系列服務內容。許多政務服務內容自身有這樣的特點：使用者不是很頻繁使用，許多時候使用者並不能較清晰地理解相關業務名詞的抽象概念。因此，我們首先打破了原有的以某某局，某某視窗為事情呈現的方式。但業務本身不能毫無章法的一股腦全部呈現給使用者，為此，我們通過對不同服務的解構，在頁面的主要區域展示通過梳理提取的服務主題核心名詞或任務，幫助使用者更好地理解各類抽象概念。同時，在整個頁面資訊佈局上，儘可能展示某類服務的框架性資訊。讓使用者先建立該主題的全域性認知，再安心地探索自己感興趣的內容。
以護照與通行證為例子，我們可以把護照與通行證基礎的3類業務：護照相關、臺灣通行證相關、港澳通行證相關，作為整個主題的主框架。再細分，每種證件的狀態、相關的功能。那麼使用者對護照與通行證這裡可以做什麼，就可以有一個比較全域性的認知和理解。
通過狀態判斷簡化任務
每個主題下，可辦理的事項很多。在專案初期，我們快速輸出了一個以分類事項入口為主導的樣式。但這些事項往往是和特定的狀態繫結的，使用者當前的狀態極有可能導致業務不可辦理。例如，未辦理過通行證的使用者不能也不需要辦理掛失、再次簽註等業務，他僅可申請辦理新的證件。利用這樣的邏輯，我們為二級首頁的內容設定這樣的規則：任何功能入口都以使用者的當前狀態作為展示與否的依據。這樣我們便能通過一些前端的基本處理，大大減低使用者的選擇任務負荷了。
塑造親和簡潔的服務形象
為打造粵省事小程式服務便捷、貼近民生、專業可靠的品牌形象，選用「民生綠」作為主色，搭配充滿活力的黃色為輔色。
3. 服務場景整合設計
真正地以使用者為中心，從「羅列服務內容讓使用者來找」轉變為「深入瞭解需求，把服務打包好端到使用者面前」是我們其中一個設計目標。在實際設計過程中，我們重點重建了服務的使用場景。
我們前面多次提及的業務平鋪羅列會讓使用者難以快速理解。同時，很多業務由於其專業性，其名稱描述並不是普通老百姓一眼就能看懂的，這讓服務使用的門檻又再高了一層。
以仲裁業務為例，大部分需要通過仲裁為自己爭取權益的使用者文化層次較低（如農民工），對相關法律術語不太瞭解。儘管許多仲裁事項已經進行了線上化改造，使用者可在線上辦理許多業務，不需要到線下排隊等等。但大量的專業術語讓普通使用者也很難理解如何使用這些服務，對文化層次較低的農民工就更不友好了。於是在改造仲裁服務時，我們把原本列表式的入口呈現方式進行了整合，根據使用者的訴求場景來歸納相關內容，在符合法律規定的基礎上，儘可能減少專業術語的露出，讓專業事項通過更直白的方式描述。分不同角色檢視對應該使用的業務，再細分不同階段可能會需要的業務。
4. 流程設計
小程式的100多項服務的具體流程分別由多家合作商開發完成。為了保證「粵省事」整體的體驗一致性，我們對流程頁的設計提出基礎目標：先改造，後標準化。
服務改造
在沒有粵省事綜合服務平臺之前，各個業務都自成一體。獨立不互通的業務導致的使用者每次辦理時，都需要反覆填寫身份資訊。另一方面，由於業務可能涉及多個管理部門，互相都要驗證一遍使用者的資訊，在一個業務中也會出現反覆填寫的情況。針對這種不合理的存在，我們在推動前後臺能力打通。前端上做了使用者資訊的判斷，後端推動多部門資料打通，減少使用者同類資訊重複填寫的工作。
在能力打通的基礎上，我們以減少使用者每一次跑動作為更高目標，去推動事項流程的優化。以殘疾人證件申辦為例，我們推動優圖的影象識別能力與業務部門合作，減去殘疾人去照相館拍攝證件照的流程，在線上可完成證件申請流程，是實在有效的為弱勢群體服務。
模組標準化
在業務對接和設計的過程中，有一個繞不開的難點是業務流程數量龐大，無法快速針對每一個流程做個性化設計。為了更高效接入這些業務，我們採用了模組化的設計方法。將業務整理分類、抽象出最基礎的業務模型，得出辦事模型。以下模型可以涵蓋小程式現在接入的70%的辦理業務。使用辦事模型套用所有業務後，降低了使用者使用過程中的突兀感，統一了以前無預知的辦事過程，減少了使用者對業務辦理的認知負荷。
在這個基礎上，我們再針對單個模組進行細化設計。以「過程」這個模組為例子，辦事過程是整個流程裡最關鍵而且最多樣性的環節。在這個環節設計裡，我們使用了類似樂高的模組形式，讓不同的過程以拼積木的形式組裝完成，從而實現符合規範的個性化接入。每塊積木都是業務抽象元件化設計，使得整個辦事流程更加統一、高效。
五、政務服務類設計經驗小結
緊跟風口辦好事
在跟政府的合作專案中，政府領導有想法有自己的意志，其實是一件好事。有了大領導的推動，專案的進展和執行速度都會加快。關鍵是做好預判和預留，風來了馬上執行，也不出亂子。
創新思維重塑服務
設計師是服務改造的整合者。政務服務在過往的版本中大多是以技術導向來實現的，轉換為使用者導向需要設計師發揮更高的創造能力。離開業務角度和技術實現的角度，純站在設計師考慮的角度，運用設計師的創新思維來改造服務流程。同時，設計也能反向影響，讓政務服務變得更好，用設計思維把原本零散的點整合起來，是服務模式創新的一部分。
橫向視野框架優先
政務服務通常都不是隻有一件事或者只涉及到一個地市。面對體量較大的業務時，不著急進入業務流程的細節設計。平臺級產品需要橫向視野，可以同時評估多個業務中一致的部分。跳出單個業務流程的限制，需要把控整體的體驗一致性。優先做好整體框架，建立起業務的全域性觀。有助於複雜多樣的政務服務快速接入。
積極推動調節
儘管當前的政務類業務基本上都有了一套線上化的解決方案，但大多數仍然停留在技術實現階段，體驗斷層等各種問題也參差不齊，在初期也會出現需求凌亂的狀態。設計師可以發揮最大的能動性，根據片段性的資料、需求快速的輸出具體的內容，主動推進專案進展，起到潤滑、融合的作用。
六、階段成果
粵省事小程式於5月21日上線，上線首日 pv 突破1000萬，最高日訪問量達到1394萬。目前，粵省事小程式總使用者數有338萬，日均訪問數179萬，累計查詢辦理量約2202.5萬次。分享次數日峰值達到7.6萬次，平均每8個市民就產生了1次分享。粵省事常駐於55%的市民微信最近使用小程式，也是小程式熱門排行榜第75位，成為唯一入榜的政務類應用。小馬哥也頻頻在各種行業大會上，正面評價粵省事。
廣大使用者對各類服務的使用體驗反饋總體良好。我們的一些設計創新，如：提前暴露查詢資訊、根據狀態展示可用服務得到了使用者的認同。辦理事情比以前也更容易了，例如申領居住證，以前最少跑一次，現在可以直接在線上完成申請。小程式整體上資料填寫減少55%，41個事項零跑動，致力向更「人性化」的方向發展。
我們也密切關注使用者擔憂的聲音，部分使用者對隱私設定等問題存在顧慮。所以小程式並不是一步到位的產品，在後續的迭代中還需要針對各種細節問題進行設計調整。一步步把小程式的體驗在基礎體驗框架的基礎上優化。
歡迎關注「騰訊CDC體驗設計」的微信公眾號：
