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

語言: CN / TW / HK

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

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

城操視覺升級全流程

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

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

一   背景概況 

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

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

城操有六大產品能力矩陣和四大平臺特色,是囊括資料採集、儲存、管理、挖掘、分析、視覺化於一體的大資料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

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

最後,感謝我們設計團隊的小夥伴們~

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

如果能 分享 就更好了