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

項(xiàng)目背景

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

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

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

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

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

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

設(shè)計(jì)策略

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

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

設(shè)計(jì)過(guò)程

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

（1）梳理

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

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

（2）拆解

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

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

（3）重組

因?yàn)橐苿?dòng)警務(wù)中的功能大多會(huì)在原生微信頁(yè)面及 H5 頁(yè)面間來(lái)回跳轉(zhuǎn)，所以為了體驗(yàn)的一致性，我們最大程度地保留了 WeUI 的交互模式。

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

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

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

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

（1）具體流程

稿件分池：

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

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

設(shè)計(jì)分流：

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

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

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

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

（2）執(zhí)行難點(diǎn)

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

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

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

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

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

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

（2）基準(zhǔn)單位

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

字體：

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

原生字體規(guī)范是基于1倍大?。?60*640分辨率）制定的，我們?cè)谠摶A(chǔ)上進(jìn)行了以下調(diào)整：

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

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

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

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

柵格：

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

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

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

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

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

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

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

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

助力未來(lái)規(guī)劃

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

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

在此，CDC 已為未來(lái)規(guī)劃打好基礎(chǔ)，通過(guò)代碼級(jí)的標(biāo)準(zhǔn)組件庫(kù)提升和保障未來(lái)更多功能的開發(fā)效率和用戶體驗(yàn)。

整體效果

結(jié)語(yǔ)

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

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

原文地址：Tencent CDC

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

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

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