云圖智造（北京）科技有限公司成立于2017年，總部位于北京中關(guān)村，是一家集地理信息數(shù)據(jù)、軟件、服務(wù)于一體的行業(yè)內(nèi)領(lǐng)先的智慧云服務(wù)商，產(chǎn)品覆蓋政務(wù)云、不動產(chǎn)登記、房產(chǎn)、國土、規(guī)劃、測繪、自然資源等眾多領(lǐng)域，致力于為客戶提供全面、品質(zhì)、專業(yè)的地理信息服務(wù)。

在界面設(shè)計開始之前，云圖的開發(fā)工作已經(jīng)進行了一兩年，各項功能俱全，但是交互和用戶體驗不足，視覺也不盡人意。客戶是新疆克拉瑪依國土資源局，客戶可以說出使用不舒服的感覺，但無法提出應(yīng)如何修改的建議。這是云圖智造第一次委托專業(yè)的設(shè)計公司，也非常謹慎，經(jīng)過半年的選擇，最后確定與藍藍設(shè)計合作。

產(chǎn)品定位

以軟件核心功能“自然資源領(lǐng)域辦公”為主，整合數(shù)據(jù)分析，資源規(guī)劃，公文辦理，人員管理等系統(tǒng)。形成”主核心功能為中心，多個功能為輔助“的辦公生態(tài)系統(tǒng)，提高資源審批流程運轉(zhuǎn)效率，實現(xiàn)各級各相關(guān)部門間的無縫銜接。

目標用戶

目標用戶為自然資源領(lǐng)域相關(guān)從業(yè)人員，對相關(guān)業(yè)務(wù)熟悉，年齡分布較大，多在24~55歲之間。目標人群涵蓋城市及城鄉(xiāng)地區(qū)，對人機交互效率要求較高且使用頻率較高。主要進行辦公類操作，希望能夠便捷好用，易于理解。

設(shè)計風(fēng)格

人機交互方面，以簡單點擊交互為主，盡量避免復(fù)雜交互形式的出現(xiàn)；布局方面，以大間距和卡片式布局等主流布局為主，簡潔大方，突出主要信息。配色方面，主色采用配色自然資源行業(yè)傳統(tǒng)藍色，輔助色方面采用與克拉瑪依本地特色相呼應(yīng)的橙色。

客戶給的原型

由于這個項目，客戶和項目經(jīng)理在新疆，開發(fā)團隊在?？?，設(shè)計公司在北京，當面溝通頭腦風(fēng)暴條件不具備，于是我們換了一種方式：藍藍設(shè)計團隊使用上線的軟件進，之后給出交互建議，選擇了一些典型頁指出其中的不足，并放上類似頁面的設(shè)計作品，提出解決方式并做出ppt，開電話會議溝通，客戶和項目組認可后，進行設(shè)計工作。

在設(shè)計過程中客戶不再參與，只看結(jié)果。每一個流程和頁面由項目組講清需求，業(yè)務(wù)邏輯，藍藍設(shè)計提建議和思路，畫出原型，認可后視覺設(shè)計。

首頁設(shè)計了日常辦公和領(lǐng)導(dǎo)兩種角色頁面。經(jīng)過內(nèi)容梳理，原型的大部分內(nèi)容空洞不必要，新設(shè)計增加了每天登錄最需要關(guān)注的業(yè)務(wù)處理:緊急.待辦.超期.月簽四種情況，并把公文和業(yè)務(wù)分開，每種類型重要的內(nèi)容字體大號，色彩突出，輔助信息弱化。領(lǐng)導(dǎo)角色需要全局觀，增加了總?cè)兄匾獢?shù)據(jù)和重要關(guān)注點信息。

頁面開發(fā)采用了Layui輕量級框架，簡單美觀。適用于開發(fā)后端模式，它在服務(wù)端頁面上有非常好的效果。頁面采用柵格布局適配1366-1920分辨率，適配主流的電腦屏幕，提升用戶閱讀的體驗。并且有三套換膚功能，用戶可以根據(jù)自己的喜好調(diào)整，便于后期維護。

其中導(dǎo)航部分采用三級導(dǎo)航，一級導(dǎo)航有多條不確定，在小屏幕的情況下采用收縮導(dǎo)航，隨著屏幕的遞減而相應(yīng)的減少導(dǎo)航，二級導(dǎo)航采用固定向右的方式來完美適配小分辨下導(dǎo)航過多的情況。

圖表類采用Echarts開發(fā)，更加生動直觀的體現(xiàn)了每個模塊的變動。

定稿的首頁（領(lǐng)導(dǎo)角色頁面）

選址類型統(tǒng)計頁原型

此頁在和項目組溝通原型時，發(fā)現(xiàn)原型上列表下面總是空的，克拉瑪依一共就四個區(qū)，以后不會增加行數(shù)了，這個頁面顯的比較空。在和項目組溝通時，了解到這個頁面用戶關(guān)注的是：不同年份各區(qū)的單獨選址和多批次選址的項目數(shù)量，如果有地圖直觀看就更好了。所以在設(shè)計的時候，上面搜索改為直接進行年份選擇的時間線，右側(cè)加入了地圖，更加了簡單直觀。

在整個項目設(shè)計過程中，根據(jù)產(chǎn)品特點和設(shè)計需求結(jié)合業(yè)務(wù)場景，我們將頁面信息進行重新整合和視覺化提煉，力求以圖形化的語言，將頁面信息完整，生動展現(xiàn)出來。針對不同區(qū)域內(nèi)容和信息屬性，我們進行圖文轉(zhuǎn)化，設(shè)計出不同的數(shù)據(jù)看板，同時簡化列表信息，優(yōu)化信息排列、展示方式，在完整展示業(yè)務(wù)信息同時，豐富頁面層次，也避免了信息過多帶來的視覺壓力，提升用戶數(shù)據(jù)處理效率。

定稿的選址類型統(tǒng)計頁面

gis軟件界面設(shè)計

在辦業(yè)務(wù)頁原型

統(tǒng)一的視覺語言是產(chǎn)品和UI設(shè)計中最重要額設(shè)計原則之一，全局化的設(shè)計是視覺統(tǒng)一的保證。藍藍設(shè)計在進行前期調(diào)研時發(fā)現(xiàn)，改版前的系統(tǒng)集成了較多功能，每種功能布局都不相同，這樣就會出現(xiàn)視覺語言的不統(tǒng)一。我們再后期的設(shè)計中，遵循“框架-布局-細節(jié)”的設(shè)計思路，將頁面功能重新梳理，提煉出全新的視覺語言和頁面布局，確保視覺的統(tǒng)一性。

目標人群和產(chǎn)品使用場景是決定產(chǎn)品設(shè)計的基礎(chǔ)性因素。我們在產(chǎn)品架構(gòu)設(shè)計時，仔細研究目標用戶使用場景，模擬用戶操作過程中所有可能行為，精簡產(chǎn)品架構(gòu)，優(yōu)化頁面層級，合并頁面內(nèi)容，創(chuàng)新頁面展示方式，運用大量的彈窗，toast提示等輕量化設(shè)計元素，力求將產(chǎn)品任意操作流程控制在4級頁面之內(nèi)，減少冗余流程，提升頁面操作效率。

定稿的在辦業(yè)務(wù)頁面

UI培訓(xùn)

在項目結(jié)束后，根據(jù)合同約定，準備了一次面對云圖全公司范圍的UI培訓(xùn)，針對提出的問題一項項結(jié)合云圖的具體頁面，設(shè)計前后的對比，回溯了當時的研究、溝通和思考。當時沒有參與具體設(shè)計的其它研發(fā)人員和管理層由此也更清晰我們做了什么?？偨?jīng)理挺感動，覺得確實做了一些事情，通過外部UI咨詢公司的參與，把整個公司的UI認識和產(chǎn)品UI水準提升了。