解密城市作業系統視覺升級

近期，我們團隊為數字城市群的核心產品“城市作業系統”（後面簡稱“城操”）進行了一次產品體驗升級。

從中我們梳理總結了一些經驗，在此跟各位小夥伴們分享一下。

城操視覺升級全流程

本文將從以下幾個方面為大家解析城操產品體驗升級的全流程：

首先了解城操產品體驗升級的大背景，通過問題的蒐集並梳理出改版的整體方向。通過對產品整體方向的把握和對業務目標的訴求的瞭解，從而提煉出設計目標。在設計目標指引下運用情緒版的方法定義視覺風格語言，再根據全新設計語言全面提升產品體驗，最後做好元件回落的工作，為後續產品更新迭代賦能。

一   背景概況 

智慧城市經過多年建設取得了階段性成果，解決了一部分城市中存在的問題。但在技術創新、商業模式和體制改革等方面仍然面臨各種挑戰。例如：城市狀態感知難、資料多元異構治理難、資料敏感共享難等問題。

基於這些挑戰，我們需要一個開放、公共的數字底座來提供高效的、面向智慧城市業務級別的元件化服務，這個數字底座即是城市作業系統。

城操有六大產品能力矩陣和四大平臺特色，是囊括資料採集、儲存、管理、挖掘、分析、視覺化於一體的大資料AI智慧平臺，通過這些核心產品能力，我們為智慧城市向智慧城市的階段性跨越賦能。

城操為什麼要做體驗升級這件事情？

(1) 新的機遇： 隨著戰略和業務發展，以及各子產品之間的不斷融合。城操需要不斷改變，我們需要全新一致的視覺與互動產品。

(2) 降本增效： 需要產研團隊認可的視覺風格，減少各團隊之間的溝通成本。同時需要全新的元件模版，賦能產研側。

(3) 設計層面： 一致性差、品牌感弱，易學性差，使用效率低。

二   問題聚焦 

我們通過全面走查、使用者反饋、產研側反饋三個途徑蒐集海量問題。如：介面風格平淡、邏輯功能複雜、結構模組混亂等等問題。

這些問題去重後，我們通過下方的 “冰山模型” 來歸類總結哪些是迫切需要解決的根本問題。主要分為三類：產品設計問題、體驗互動問題、視覺介面問題。

分析這些問題存在的根本原因是沒有從使用者視角出發而導致的。所以，我們把解決問題的根本聚焦在使用者場景的使用上。

我們從視覺上著重強化城操品牌、提升視覺衝擊力、規範元件庫，從產品體驗上減少使用者迷茫，為城操複雜的資訊降噪。從而提升城操產品視覺體驗的同時，賦予產品特有的品牌調性，加強與競品的差異化設計。

三   目標確定 

有了升級的大致方向，我們就可以著手去探索設計的具體目標了。

(1) 從業務層面來看

解決智慧城市建設需要的城操具備哪些對應功能呢？城操的業務目標是：打造服務於政府的，開放的、公共的數字底座，構建集資料感知、儲存、管理、分析、挖掘、視覺化於一體的智慧城市大資料AI智慧平臺。從城操的業務目標提煉出來業務關鍵詞：政府、數字底座、智慧、大資料、AI，這些都是設計過程中的原生關鍵詞。

(2) 從體驗層面來看

我們的客戶是政府機構。他們是產品購買的決策者。他們關注產品是否能夠帶來效益；產品是否解決城市執行中的痛點；產品是否為他們快速輔助決策；

我們的使用者是資料工程師，他們是主要的使用者群體。他們年輕有活力、邏輯性強。他們更關注產品的易用性、可擴充套件性。

通過使用者畫像得出 產品體驗目標 ：

A.  產品能夠快速上手；

B.  高效完成任務；

C.  元件化；

D.  松耦合；

E.  易擴充套件；

F.  保證資料安全；

G. 並且能夠輔助決策；

體驗關鍵詞：高效、元件化、易擴充套件、資料安全。

我們的設計目標：打造一個開放的數字底座，使用AI和大資料的科學技術、提供高效的、面向智慧城市業務的元件化服務，構建智慧城市生態。

業務關鍵詞：AI、大資料、高效、元件化、智慧城市生態。

通過以上所有原生關鍵詞進行頭腦風暴歸納出三個衍生關鍵詞：科技、高效、活力，有了這三個關鍵詞我們就可以去著手定義我們的視覺語言了。

四   風格定義 

我們用情緒版的設計方法，通過設計關鍵詞對圖片進行搜尋，通過蒐集的圖片生成情緒版從而推匯出視覺風格，確定設計元素。

我們從情緒版的圖片抓取中，捕捉到設計的靈感，從而提煉出我們的設計方法：簡潔的層次、立體的圖形、毛玻璃的質感、流線的動效…

通過情緒版的設定，我們推匯出產品的品牌色，我們採用了藍、橙色系的補色對比，大膽而富有活力的用色，為平實的產品介面增加了一絲活力。符合我們產品的特性。

其次，我們對城操的logo進行了一個全新的升級。色彩上的撞色對比，增加了介面的視覺衝擊力，圖形上採用簡潔的面性圖形，讓logo更具有科技感、親和力。

新版logo可以從以下三個方面來詮釋：

(1) 圖形的外輪廓是一個六面體，象徵CPU，寓意城市計算。

(2) 圖形之間上下對映關係寓意數字孿生。圖形之間重疊、相交，寓意資料共享。

(3) 兩個圖形交叉的地方，好似人的眼睛，在此寓意人工智慧。

品牌體現的設計感和我們推導的設計目標是相契合的。

logo使用場景是無論淺色還是深色背景上儘量沿用原色，特殊場景下深淺色可以用上圖這種去色設計。

不同場景的效果大家可以直觀感受一下：

然後，我們定義了字型語言：

字型語言我們使用外形方正、簡潔，易於識別、閱讀的無襯線字型。Windows下中/英文用思源黑體，Mac OS用預設的蘋方字型，兩種裝置下數字字型都是谷歌開源的字型Roboto（當然也可以購買DIN PRO這種看上去更有設計感的字型），程式碼部分用開源字型Fira Code，這種字型是專門為程式碼設計的連線字型。

框架的選擇，我們遵循系統佈局的規範，建議使用統一的設計元素和間距規範，從而適應不同的螢幕尺寸，並達到一致性、可適配、可控性原則。

T型結構常用在web端的中臺系統中，因為中颱系統業務複雜層級多，此框架佈局既能滿足人們的F型瀏覽習慣又能解決資訊層級過多的問題。

城操產品特點：城操系統導航複雜、有三級導航，使用者更在意功能完整性和操作的便捷性。

T型框架優勢：

業務上：容量大、可滾動，從而解決了城操功能型產品導航層級複雜的問題。

體驗上：符合使用者使用習慣，同時達到效率高、減少遲疑和錯誤率的目的。

最終我們的的框架如上圖，通用模組的間距是16px，其餘間距設定採用偶數思維進行計算，從而可以匹配不同解析度，設定基本網格基數為4。從緊到松，遵循 4的倍數。卡片等介面元素的採用0px的直角，直角給人感覺是：簡單直接、硬朗、體現前衛科技感。

確定了基本的元素語言，我們來看升級之後的首頁。

首頁導航部分採用毛玻璃材質和輕質光感，導航之下重點展示城市作業系統Slogan和LOGO，強化品牌感，中間位置展示的是ICOS高頻重點產品服務簡介，方便查詢、增加轉化，介面下方區域主要展示城市特色服務，通過幫助中心減少使用者在使用中潛在的問題，個人收藏模組展示使用者收藏的常用任務入口。

同樣我們為使用者定製了淺色模式，以滿足使用者使用習慣和不同喜好。

Table元件是覆蓋率最高的場景（30%以上），使用者在使用過程中痛點很多。如：裝置陳舊，解析度低。頁面充斥著大量的篩選條件，佔用空間。同時篩選項和table的表頭又很難對應上，列表看不到幾行，列表欄位多，橫向滾動操作不易等等。

此次我們從以下兩方面著手進行優化：

(1) 提升空間利用率： 篩選條件右置，數量≤3（控制數量是為了適配小螢幕解析度），其餘歸併到table的標題欄位後。table新增列表緊湊模式，最大限度展示更多條目。

(2) 提升產品易用性： 出現橫向滾動情況時固定table操作項，且操作 >3項隱藏，同時固定翻頁在頁面底部，方便使用者使用。

編輯器頁面需要充分考慮介面的上下左右聯動設計，畫布流頁面需要考慮連線線、連線點的設計以及不同任務型別通過顏色和圖示去區分。

圖形的設計這塊我們依然延續了毛玻璃的設計手法設計3D空間感的圖形，把計算領域的概念通過這種抽象的設計技法傳達給使用者。

原版導航選單包含一級、二級目錄。並且選單數量龐大，難以查詢。二級選單內容重複出現、層級不明確，引發使用者迷茫 。

新版我們只展示一級產品，二級選單隱藏到各個產品頁面的導航中，清晰明瞭，便於查詢，對產品icon的視覺也進行了設計優化，通過視覺引導培養使用者認知習慣。

通過引導型動畫的呈現，讓使用者快速地瞭解城市作業系統的主要功能區域和功能作用，降低使用者的理解成本和操作門檻。 

五   資產回落 

基礎元件：包含268個元件（218個icon、36個原子元件、14個複合元件），156種樣式。我們力求每個元件的樣式多樣性以適應不同的應用場景，滿足後續城市產品和專案的使用。

四大類典型頁面沉澱，涵蓋城操系統60%-70%的業務場景，頁面100+，典型頁面在後續產品迭代中充分體現了降本增效的使命，設計師可以直接基於典型頁面的設計，在其他頁面的設計中，複用或者修改細節，極大提升了效率。

針對設計資產我們做了整合，以城市作業系統設計語言為基礎，構建體驗、視覺統一的設計系統，以少量人力，提升產品的研發效率，和設計產出物的一致性。

六   總結 

經過這次體驗的升級和沉澱，我們重磅推出京東智慧城市設計語言系統。該系統以京東城市設計語言為基礎，呈現預構建、可重用的設計資產（元件庫、模式、指南和程式碼），允許使用者更快地構建良好的數智體驗。

通過使用RainbowD的設計通用資產，團隊花費在設計和頁面構建上的時間被最小化，實現一站式設計服務。大規模複製模式相同的頁面的同時，又兼具個性化設計服務，留取更多的時間為使用者提供定製化需求設計。

RainbowD網址：

http://dev-uc.urban-computing.cn/find-react/index-cn

也可以點選頁面底部 “   閱讀原文   ”直接檢視

最後，感謝我們設計團隊的小夥伴們～

伸出你可愛的手指給我們 點個贊 和 在看 唄

如果能 分享 就更好了