移動警務(wù)應(yīng)用的建設(shè)一直有存在缺乏統(tǒng)一規(guī)劃、不注重用戶體驗、地區(qū)水平參差不齊等問題，為了解決這些痛點，新一代移動警務(wù)平臺項目將按照騰訊云在警務(wù)領(lǐng)域的精品樣板工程來打造。

項目背景

長期以來全省公安系統(tǒng)信息化方面一直缺少一套官方的即時通訊辦公平臺，民警日常工作、辦案通過互聯(lián)網(wǎng)各類即時通信平臺發(fā)送警務(wù)信息，存在跨區(qū)域跨部門通訊渠道不統(tǒng)一、安全管理不規(guī)范等方面的問題。同時，與應(yīng)用豐富、體驗良好的移動互聯(lián)網(wǎng)應(yīng)用相比，移動警務(wù)應(yīng)用的建設(shè)存在缺乏統(tǒng)一規(guī)劃、不注重用戶體驗、地區(qū)水平參差不齊等問題。

為了解決這些痛點，新一代移動警務(wù)平臺項目將按照騰訊云在警務(wù)領(lǐng)域的精品樣板工程來打造，為廣東全省公安機關(guān)警務(wù)、基層警務(wù)提供統(tǒng)一的即時通訊平臺——與“微信”等即時通訊軟件的使用體驗接近，并同時支持移動信息網(wǎng)和公安網(wǎng)的PC端和移動端。

平臺作為移動警務(wù)應(yīng)用的統(tǒng)一入口，提供統(tǒng)一的用戶身份認證、消息推送等服務(wù)，更好地促進了“跨層級、跨地域、跨部門、跨業(yè)務(wù)” 的警務(wù)協(xié)調(diào)和支撐服務(wù)。通過政務(wù)微信和數(shù)字廣東公共支撐平臺，新一代移動警務(wù)平臺將連接公安各警種、各地市數(shù)百項業(yè)務(wù)應(yīng)用和全省18萬公安干警。

移動警務(wù)項目一期共上線 26 項功能，且由多家供應(yīng)商獨立設(shè)計和開發(fā)。由于各供應(yīng)商團隊的分散設(shè)計、開發(fā)所導(dǎo)致交互模式混亂和視覺不統(tǒng)一，直接影響了用戶體驗的一致性、增加了用戶學(xué)習(xí)成本，以及后續(xù)開發(fā)的成本。

設(shè)計挑戰(zhàn)

CDC 團隊于2018年1月16日參與到項目中，其中一大部分應(yīng)用已經(jīng)處于開發(fā)階段的尾聲，然而距離最終上線時間——春節(jié)前夕（2018年2月15日）只有短短一個月的時間，我們的設(shè)計工作面臨著重重挑戰(zhàn)。

設(shè)計策略

以既定上線的時間點為目標，設(shè)計側(cè)需要在不影響當前業(yè)務(wù)流程的前提下，對這 26 項功能的 160 個頁面進行交互和視覺的優(yōu)化。面對五花八門的界面，設(shè)計的重中之重就是“統(tǒng)一”，以一致的交互、一致的視覺來支撐移動警務(wù)“一張網(wǎng)”。

而在如此短時間內(nèi)完成這樣的工作量，我們需將交互與視覺工作同時進行。在前期，交互側(cè)通過梳理、拆解頁面為后續(xù)設(shè)計制定清晰框架。同時，視覺側(cè)通過制定協(xié)同設(shè)計流程，為后續(xù)設(shè)計執(zhí)行打好堅實基礎(chǔ)。在執(zhí)行期，交互側(cè)在每個視覺產(chǎn)出節(jié)點與視覺側(cè)共同評審，保障最終的設(shè)計交付。

設(shè)計過程

1. 建立統(tǒng)一的交互模型

（1）梳理

交互側(cè)通過將正在開發(fā)的 26 項功能中可準確呈現(xiàn)內(nèi)容的 160 個頁面以功能性質(zhì)的維度橫向梳理，將頁面歸納為5個類別：

1. 流程表單
2. 功能裂變
3. 數(shù)據(jù)展示
4. 資訊裂變
5. 詳情

（2）拆解

通過將同一類別頁面進行橫向?qū)Ρ?，提煉出各類別中功能覆蓋范圍最大的代表頁面，并以組件的維度進行標記。最終，將 160 個頁面所包含的元素拆解為 3 個大類別下 10 種組件：

• 菜單類別下：底部菜單、頂部菜單、宮格菜單
• 輸入類別下：搜索、篩選器、輸入
• 瀏覽類別下：內(nèi)容列表、只讀表單、內(nèi)容詳情、數(shù)據(jù)

（3）重組

因為移動警務(wù)中的功能大多會在原生微信頁面及 H5 頁面間來回跳轉(zhuǎn)，所以為了體驗的一致性，我們最大程度地保留了 WeUI 的交互模式。

基于梳理得出的 10 種控件，我們將各代表頁面基于原生政務(wù)微信進行了系統(tǒng)性的規(guī)劃。在保持政務(wù)微信原生系統(tǒng)與具體功能應(yīng)用體驗上的一致性的同時，也降低了學(xué)習(xí)成本，方便用戶能更快速地上手，提高工作效率工作。

2. 搭建“階梯式”設(shè)計流程

組件庫，大多是在數(shù)字產(chǎn)品接近成熟甚至在迭代后，通過抽象得到一些穩(wěn)定且高復(fù)用性的組件，逐步打磨出的一套旨在提升新頁面延展及落地效率的產(chǎn)物。但由于項目不到一個月的設(shè)計時間的特殊性，并不允許我們遵循常規(guī)項目的設(shè)計流程。

在這個項目中，我們需要的是能在設(shè)計過程中一直能助力設(shè)計工作的推進的組件庫，而不是等項目完成后才出現(xiàn)的規(guī)范化產(chǎn)物。

（1）具體流程

稿件分池：

在設(shè)計過程中，我們將設(shè)計文件分為幾個“池”：

• 頁面設(shè)計池 —— 由設(shè)計師個人管理，用于新頁面設(shè)計；
• 頁面定稿池 —— 由主設(shè)計師管理，用于定期設(shè)計交付；
• 頁面優(yōu)化池 —— 由設(shè)計師個人管理，與設(shè)計池分開，進行少量的設(shè)計稿及控件修改，修改可溯源；
• 組件優(yōu)化池 —— 由設(shè)計師個人管理，與頁面優(yōu)化池并存；
• 組件定稿池 —— 由主設(shè)計師管理，定期更新生成組件庫同步至各個設(shè)計師，提升輸出效率。

設(shè)計分流：

在設(shè)計流程中，我們將設(shè)計輸出和設(shè)計優(yōu)化進行分流：

在第一批頁面完成時，相關(guān)頁面中使用的組件也同時產(chǎn)生。設(shè)計側(cè)對新設(shè)計的頁面和新產(chǎn)生的組件進行集中設(shè)計走查和評審。將合格的頁面放入定稿池并交付開發(fā)，且將定稿頁面中的合格組件沉淀下來，成為 version_1 組件庫來支撐第二批頁面設(shè)計。

而不合格的頁面則放入頁面優(yōu)化池與第二批頁面同時啟動設(shè)計，并優(yōu)先走查評審，將優(yōu)化定稿頁面優(yōu)先交付，而優(yōu)化后的組件則與第二批新組件一起沉淀為 version_1.1 組件庫。

通過“階梯式”設(shè)計流程，避免了由于個別標準組件暫時的“缺失”而影響整體設(shè)計工作的推進，為具體頁面的設(shè)計爭取了更多時間，直接減少了因時間有限導(dǎo)致的設(shè)計誤差及衍生的研發(fā)返工，為項目的高質(zhì)量交付奠定了基礎(chǔ)。

（2）執(zhí)行難點

“階梯式”設(shè)計流程的運轉(zhuǎn)，對設(shè)計協(xié)作要求極高：從各個設(shè)計師到主設(shè)計師間設(shè)計文件流轉(zhuǎn)、整合，要求每個人的設(shè)計決策高度一致。

但在初期實踐過程中，發(fā)現(xiàn)不同設(shè)計師在開展設(shè)計時會有自己對畫板和尺寸的偏好，甚少與開發(fā)團隊在前期做好溝通對齊，且每個設(shè)計師在對文字樣式、間距細節(jié)處理上還是容易出現(xiàn)數(shù)值的偏差。這種雜糅了各種設(shè)計偏好的界面大大增加了設(shè)計評審的時間成本，導(dǎo)致“階梯式”設(shè)計流程難以順利推進設(shè)計交付，除非能讓所有設(shè)計師們有著同樣的設(shè)計“偏好” —— 設(shè)計原則。

3. 定義助力高效協(xié)同的設(shè)計原則

（1）統(tǒng)一環(huán)境

由于警務(wù)定制移動設(shè)備以安卓陣營為主，且在實際界面中不僅需要開發(fā) H5 頁面，還需定制原生應(yīng)用頁面。因此，設(shè)計上選定以安卓系統(tǒng)畫板尺寸為基準，選擇了 720*1280（即xhdpi 密度）分辨率作為基礎(chǔ)畫板開展設(shè)計，它既兼顧了美觀性、經(jīng)濟性和還減少了設(shè)計、開發(fā)溝通成本。

• 美觀性是指，在該尺寸下顯示完美的界面，在高分屏（即 1080*1920、2K）中也能原比例清晰顯示；
• 經(jīng)濟性是指，通過該分辨率導(dǎo)出的圖片尺寸適中，提升內(nèi)容加載速度；
• 減少溝通成本是指，設(shè)計側(cè)以 px 為度量單位在和研發(fā)側(cè)在做以 dp 為度量單位的頁面進行轉(zhuǎn)換時，可直接以 1dp=2px 的公式進行快捷地轉(zhuǎn)換，無需重復(fù)地溝通，直接提升設(shè)計還原效率和準確率。

（2）基準單位

為了幫助不同設(shè)計能力的設(shè)計師們在設(shè)計過程中保持輸出一致性，減少開發(fā)的還原損耗，設(shè)計側(cè)在這次使用了“基準單位”的概念，幫助設(shè)計團隊在設(shè)計過程中更快、更好、更準確地做好設(shè)計決策。

字體：

我們通過更清晰的“韻律”，在政務(wù)微信原生字體規(guī)范基礎(chǔ)上創(chuàng)造出一套既能與原生界面和諧相處，又能呈現(xiàn)更清晰的信息層級的字階與行高使用規(guī)則。

原生字體規(guī)范是基于1倍大?。?60*640分辨率）制定的，我們在該基礎(chǔ)上進行了以下調(diào)整：

• 強化字階差異，減少字號種類；
• 統(tǒng)一“韻律”，簡化字階遞增規(guī)律；
• 以灰度、固定色彩體系強化文字性質(zhì)。

我們將根字號定義為 16pt 來平衡次要信息字號（11pt、13pt、14pt）到大標題（20pt）間的字階，同時將次要信息的三個字號統(tǒng)一整合為 12pt，同時引入灰階及固定色彩體系來區(qū)分次要信息、輔助信息及說明文本。最終將原有的除外的 7 種字號減少為 4 種以 4pt 為“韻律”的遞增字階。

為了讓文字在設(shè)計過程中以更標準的矩形元素出現(xiàn)在頁面中，我們以同時滿足多行及單行顯示的 1.5 倍行距來定義各字階最終所對應(yīng)的行高。

整合字號與規(guī)范字階帶不僅僅是通過減少設(shè)計決策帶來更小的設(shè)計誤差，更重要的是讓不同信息之間的視覺差異更大，幫助用戶更高效獲取信息。

柵格：

當設(shè)計過程中缺少一套底層的、統(tǒng)一的測量單位，供多個設(shè)計師之間進行協(xié)作。這樣極容易導(dǎo)致sizing、padding、margin的分歧。

比如下方這樣的一個控件，雖然每個世紀是對大體上的視覺風(fēng)格理解是一致的，但在細節(jié)處理上有自己的偏好，這直接導(dǎo)致了在頁面評審易遺漏、控件難以規(guī)范化、設(shè)計開發(fā)繁復(fù)修改的問題。其實這就是缺少了一套底層設(shè)計方針。

首先，我們將設(shè)計側(cè)與開發(fā)側(cè)從底層設(shè)計思想上進行對齊，引入了盒子模型（The Box model）這樣一個解釋元素尺寸和間隔的概念。它從核心至外層氛圍四格部分：元素（Element）、內(nèi)邊距（Padding）、邊框（Border）、外邊距（Margin）。

• 元素（Element）：指最基礎(chǔ)的元素如，文字、icon或圖片本身的外邊界尺寸；
• 內(nèi)邊距（Padding）：指元素的外邊界到其他子元素之間的間距；
• 邊框（Border）：指圍繞在元素周圍的路徑；
• 外邊距（Margin）：指元素的外邊界到相鄰元素之間的間距。

這樣，我們就可以通過統(tǒng)一而明確的名稱來定義最底層的設(shè)計基準，如該控件的按鈕：text(16)，lineheight(24)，padding(8,16,8,16)，border(0)，margin(8,16,8,-)。

第二步，以?8 為基準單位來調(diào)整元素的間距與尺寸，這意味著任何 sizing、padding、margin，都將是 8 的倍數(shù)。

以 8 為倍數(shù)的設(shè)計在未來屏幕尺寸和分辨率層出不窮的設(shè)備中將展現(xiàn)強大的適配性。例如在某些設(shè)備上，我們的設(shè)計將會以 1.5 倍大小呈現(xiàn)，而奇數(shù)像素則會出現(xiàn)半像素偏移。

在設(shè)計過程中我們采用了軟柵格方法：通過 8 的倍數(shù)來定義各個獨立元素間的距離，這種柵格會更適合容易拓展新的控件及頁面，而不受固定柵格容器的阻礙。同時在兼容奇數(shù)像素屏幕（iPhone6 為 750*1334）的時候，可以不用改變原有柵格，直接通過縮放元素尺寸來填補剩下的奇數(shù)空間。

助力未來規(guī)劃

智慧新警務(wù)共分3年計劃。2018，新一代移動警務(wù)上線，第一期已于2018年春節(jié)前上線；第二期已于2018年上半年完成，會在在珠三角和欠發(fā)達地區(qū)選擇6個試點地市建設(shè)移動網(wǎng)絡(luò)和平臺，并實現(xiàn)與省廳的移動對接；第三期將于2018年下半年完成，由省廳利用轉(zhuǎn)移支付等方式，為欠發(fā)達地市配強移動警務(wù)支撐能力，實現(xiàn)全省聯(lián)網(wǎng)。

未來三年，將建設(shè)移動警務(wù)“一張網(wǎng)”，實現(xiàn)全省18民警移動警務(wù)“全覆蓋”。

在此，CDC 已為未來規(guī)劃打好基礎(chǔ)，通過代碼級的標準組件庫提升和保障未來更多功能的開發(fā)效率和用戶體驗。

整體效果

結(jié)語

回顧移動警務(wù)項目，除了在有限時間所帶來的緊迫之外。設(shè)計側(cè)還經(jīng)歷了多次緊急且直面省公安廳各級領(lǐng)導(dǎo)的設(shè)計匯報，十分榮幸地得到了省公安廳領(lǐng)導(dǎo)的認可與對設(shè)計側(cè)工作的大力支持。

來自上級的認可，讓接下來的設(shè)計工作無比順利的推進，得以為一期、二期項目的順利交付，以及后來的全省聯(lián)網(wǎng)工作的落地保駕護航。

原文地址：Tencent CDC

（https://cdc.tencent.com/2018/09/26/【to-g設(shè)計賦能】廣東省移動警務(wù)項目設(shè)計總結(jié)/）

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@騰訊CDC，作者@tiantxie

題圖來自騰訊CDC官網(wǎng)