【To G設計賦能】廣東省移動警務項目設計總結 前言 項目背景 設計策略 設計過程 助力未來規劃 整體效果

【To G设计赋能】广东省移动警务项目设计总结

黨的十九大報告指出——創新是引領發展的第一動力。 根據省政府建設數字政府的部署和公安部在今年全國公安廳局長會議提出的科技興警、實施大數據戰略的要求。廣東省公安廳黨委經過大學習、深調研,提出在全省公安機關實施智慧新警務的構想,並主動與騰訊開展了頂層設計。該項目由騰訊雲負責開發,CDC設計中心負責設計,致力於打造新一代移動警務 – 政務微信。

長期以來全省公安系統信息化方面一直缺少一套官方的即時通訊辦公平臺,民警日常工作、辦案通過互聯網各類即時通信平臺發送警務信息,存在跨區域跨部門通訊渠道不統一、安全管理不規範等方面的問題。同時,與應用豐富、體驗良好的移動互聯網應用相比,移動警務應用的建設存在缺乏統一規劃、不注重用戶體驗、地區水平參差不齊等問題。

爲了解決這些痛點,新一代移動警務平臺項目將按照騰訊雲在警務領域的精品樣板工程來打造,爲廣東全省公安機關警務、基層警務提供統一的即時通訊平臺——與“微信”等即時通訊軟件的使用體驗接近,並同時支持移動信息網和公安網的PC端和移動端。

平臺作爲移動警務應用的統一入口,提供統一的用戶身份認證、消息推送等服務,更好地促進了”跨層級、跨地域、跨部門、跨業務” 的警務協調和支撐服務。通過政務微信和數字廣東公共支撐平臺,新一代移動警務平臺將連接公安各警種、各地市數百項業務應用和全省18萬公安幹警。

移動警務項目一期共上線 26 項功能,且由多家供應商獨立設計和開發。由於各供應商團隊的分散設計、開發所導致交互模式混亂和視覺不統一,直接影響了用戶體驗的一致性、增加了用戶學習成本,以及後續開發的成本。

設計挑戰

CDC 團隊於2018年1月16日參與到項目中,其中一大部分應用已經處於開發階段的尾聲,然而距離最終上線時間——春節前夕(2018年2月15日)只有短短一個月的時間,我們的設計工作面臨着重重挑戰。

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

而在如此短時間內完成這樣的工作量,我們需將交互與視覺工作同時進行。在前期,交互側通過梳理、拆解頁面爲後續設計制定清晰框架;同時,視覺側通過制定協同設計流程,爲後續設計執行打好堅實基礎。在執行期,交互側在每個視覺產出節點與視覺側共同評審,保障最終的設計交付。

建立統一的交互模型

梳理

交互側通過將正在開發的 26 項功能中可準確呈現內容的 160 個頁面以功能性質的維度橫向梳理,將頁面歸納爲以下類別:

拆解

通過將同一類別頁面進行橫向對比,提煉出各類別中功能覆蓋範圍最大的代表頁面,並以組件的維度進行標記。最終,將 160 個頁面所包含的元素拆解爲 3 個大類別下 10 種組件:

重組

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

基於梳理得出的 10 種控件,我們將各代表頁面基於原生政務微信進行了系統性的規劃。在保持政務微信原生系統與具體功能應用體驗上的一致性的同時,也降低了學習成本,方便用戶能更快速地上手,提高工作效率工作。

搭建“階梯式”設計流程

組件庫,大多是在數字產品接近成熟甚至在迭代後,通過抽象得到一些穩定且高複用性的組件,逐步打磨出的一套旨在提升新頁面延展及落地效率的產物。但由於項目不到一個月的設計時間的特殊性,並不允許我們遵循常規項目的設計流程。

在這個項目中,我們需要的是能在設計過程中一直能助力設計工作的推進的組件庫,而不是等項目完成後纔出現的規範化產物。

具體流程

1. 稿件分池

在設計過程中,我們將設計文件分爲幾個“池”:

頁面設計池 —— 由設計師個人管理,用於新頁面設計;

頁面定稿池 —— 由主設計師管理,用於定期設計交付;

頁面優化池 —— 由設計師個人管理,與設計池分開,進行少量的設計稿及控件修改,修改可溯源;

組件優化池 —— 由設計師個人管理,與頁面優化池並存;

組件定稿池 —— 由主設計師管理,定期更新生成組件庫同步至各個設計師,提升輸出效率。

2. 設計分流

在設計流程中,我們將設計輸出和設計優化進行分流:

在第一批頁面完成時,相關頁面中使用的組件也同時產生。設計側對新設計的頁面和新產生的組件進行集中設計走查和評審。將合格的頁面放入定稿池並交付開發,且將定稿頁面中的合格組件沉澱下來,成爲 version_1 組件庫來支撐第二批頁面設計;而不合格的頁面則放入頁面優化池與第二批頁面同時啓動設計,並優先走查評審,將優化定稿頁面優先交付,而優化後的組件則與第二批新組件一起沉澱爲 version_1.1 組件庫。

通過“階梯式”設計流程,避免了由於個別標準組件暫時的“缺失”而影響整體設計工作的推進,爲具體頁面的設計爭取了更多時間,直接減少了因時間有限導致的設計誤差及衍生的研發返工,爲項目的高質量交付奠定了基礎。

執行難點

“階梯式”設計流程的運轉,對設計協作要求極高:從各個設計師到主設計師間設計文件流轉、整合,要求每個人的設計決策高度一致。

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

定義助力高效協同的設計原則

統一環境

由於警務定製移動設備以安卓陣營爲主,且在實際界面中不僅需要開發 H5 頁面,還需定製原生應用頁面。因此,設計上選定以安卓系統畫板尺寸爲基準,選擇了 720*1280(即xhdpi 密度)分辨率作爲基礎畫板開展設計,它既兼顧了美觀性、經濟性和還減少了設計、開發溝通成本。美觀性是指,在該尺寸下顯示完美的界面,在高分屏(即 1080*1920、2K)中也能原比例清晰顯示;經濟性是指,通過該分辨率導出的圖片尺寸適中,提升內容加載速度;減少溝通成本是指,設計側以 px 爲度量單位在和研發側在做以 dp 爲度量單位的頁面進行轉換時,可直接以 1dp=2px 的公式進行快捷地轉換,無需重複地溝通,直接提升設計還原效率和準確率。

基準單位

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

字體

我們通過更清晰的“韻律”,在政務微信原生字體規範基礎上創造出一套既能與原生界面和諧相處,又能呈現更清晰的信息層級的字階與行高使用規則。

原生字體規範是基於1倍大小(即360*640分辨率)制定的,我們在該基礎上進行了以下調整:

  • 強化字階差異,減少字號種類;
  • 統一“韻律”,簡化字階遞增規律;
  • 以灰度、固定色彩體系強化文字性質;

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

爲了讓文字在設計過程中以更標準的矩形元素出現在頁面中,我們以同時滿足多行及單行顯示的 1.5 倍行距來定義各字階最終所對應的行高。

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

柵格

當設計過程中缺少一套底層的、統一的測量單位,供多個設計師之間進行協作。這樣極容易導致sizing、padding、margin的分歧。

比如下方這樣的一個控件,雖然每個世紀是對大體上的視覺風格理解是一致的,但在細節處理上有自己的偏好,這直接導致了在頁面評審易遺漏、控件難以規範化、設計開發繁複修改的問題。其實這就是缺少了一套底層設計方針。

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

  • 元素(Element):指最基礎的元素如,文字、icon或圖片本身的外邊界尺寸;
  • 內邊距(Padding):指元素的外邊界到其他子元素之間的間距;
  • 邊框(Border):指圍繞在元素周圍的路徑;
  • 外邊距(Margin):指元素的外邊界到相鄰元素之間的間距。

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

第二步,以 8 爲基準單位來調整元素的間距與尺寸 ,這意味着任何 sizing、padding、margin,都將是 8 的倍數。

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

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

智慧新警務共分3年計劃。2018,新一代移動警務上線,第一期已於2018年春節前上線;第二期已於2018年上半年完成,會在在珠三角和欠發達地區選擇6個試點地市建設移動網絡和平臺,並實現與省廳的移動對接;第三期將於2018年下半年完成,由省廳利用轉移支付等方式,爲欠發達地市配強移動警務支撐能力,實現全省聯網。

未來三年,將建設移動警務“一張網”,實現全省18民警移動警務“全覆蓋”。

在此,CDC 已爲未來規劃打好基礎,通過代碼級的標準組件庫提升和保障未來更多功能的開發效率和用戶體驗。

結語

回顧移動警務項目,除了在有限時間所帶來的緊迫之外。設計側還經歷了多次緊急且直面省公安廳各級領導的設計彙報,十分榮幸地得到了省公安廳領導的認可與對設計側工作的大力支持。來自上級的認可,讓接下來的設計工作無比順利的推進,得以爲一期、二期項目的順利交付,以及後來的全省聯網工作的落地保駕護航。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章