云圖智造（北京）科技有限公司成立于2017年，總部位于北京中關(guān)村，是一家集地理信息數(shù)據(jù)、軟件、服務(wù)于一體的行業(yè)內(nèi)領(lǐng)先的智慧云服務(wù)商，產(chǎn)品覆蓋政務(wù)云、不動(dòng)產(chǎn)登記、房產(chǎn)、國(guó)土、規(guī)劃、測(cè)繪、自然資源等眾多領(lǐng)域，致力于為客戶(hù)提供全面、品質(zhì)、專(zhuān)業(yè)的地理信息服務(wù)。
在界面設(shè)計(jì)開(kāi)始之前，云圖的開(kāi)發(fā)工作已經(jīng)進(jìn)行了一兩年，各項(xiàng)功能俱全，但是交互和用戶(hù)體驗(yàn)不足，視覺(jué)也不盡人意。客戶(hù)是新疆克拉瑪依國(guó)土資源局，客戶(hù)可以說(shuō)出使用不舒服的感覺(jué)，但無(wú)法提出應(yīng)如何修改的建議。這是云圖智造第一次委托專(zhuān)業(yè)的設(shè)計(jì)公司，也非常謹(jǐn)慎，經(jīng)過(guò)半年的選擇，最后確定與藍(lán)藍(lán)設(shè)計(jì)合作。
產(chǎn)品定位
以軟件核心功能“自然資源領(lǐng)域辦公”為主，整合數(shù)據(jù)分析，資源規(guī)劃，公文辦理，人員管理等系統(tǒng)。形成”主核心功能為中心，多個(gè)功能為輔助“的辦公生態(tài)系統(tǒng)，提高資源審批流程運(yùn)轉(zhuǎn)效率，實(shí)現(xiàn)各級(jí)各相關(guān)部門(mén)間的無(wú)縫銜接。
目標(biāo)用戶(hù)
目標(biāo)用戶(hù)為自然資源領(lǐng)域相關(guān)從業(yè)人員，對(duì)相關(guān)業(yè)務(wù)熟悉，年齡分布較大，多在24~55歲之間。目標(biāo)人群涵蓋城市及城鄉(xiāng)地區(qū)，對(duì)人機(jī)交互效率要求較高且使用頻率較高。主要進(jìn)行辦公類(lèi)操作，希望能夠便捷好用，易于理解。
設(shè)計(jì)風(fēng)格
人機(jī)交互方面，以簡(jiǎn)單點(diǎn)擊交互為主，盡量避免復(fù)雜交互形式的出現(xiàn)；布局方面，以大間距和卡片式布局等主流布局為主，簡(jiǎn)潔大方，突出主要信息。配色方面，主色采用配色自然資源行業(yè)傳統(tǒng)藍(lán)色，輔助色方面采用與克拉瑪依本地特色相呼應(yīng)的橙色。
客戶(hù)給的原型
由于這個(gè)項(xiàng)目，客戶(hù)和項(xiàng)目經(jīng)理在新疆，開(kāi)發(fā)團(tuán)隊(duì)在海口，設(shè)計(jì)公司在北京，當(dāng)面溝通頭腦風(fēng)暴條件不具備，于是我們換了一種方式：藍(lán)藍(lán)設(shè)計(jì)團(tuán)隊(duì)使用上線(xiàn)的軟件進(jìn)，之后給出交互建議，選擇了一些典型頁(yè)指出其中的不足，并放上類(lèi)似頁(yè)面的設(shè)計(jì)作品，提出解決方式并做出ppt，開(kāi)電話(huà)會(huì)議溝通，客戶(hù)和項(xiàng)目組認(rèn)可后，進(jìn)行設(shè)計(jì)工作。
在設(shè)計(jì)過(guò)程中客戶(hù)不再參與，只看結(jié)果。每一個(gè)流程和頁(yè)面由項(xiàng)目組講清需求，業(yè)務(wù)邏輯，藍(lán)藍(lán)設(shè)計(jì)提建議和思路，畫(huà)出原型，認(rèn)可后視覺(jué)設(shè)計(jì)。
首頁(yè)設(shè)計(jì)了日常辦公和領(lǐng)導(dǎo)兩種角色頁(yè)面。經(jīng)過(guò)內(nèi)容梳理，原型的大部分內(nèi)容空洞不必要，新設(shè)計(jì)增加了每天登錄最需要關(guān)注的業(yè)務(wù)處理:緊急.待辦.超期.月簽四種情況，并把公文和業(yè)務(wù)分開(kāi)，每種類(lèi)型重要的內(nèi)容字體大號(hào)，色彩突出，輔助信息弱化。領(lǐng)導(dǎo)角色需要全局觀(guān)，增加了總?cè)兄匾獢?shù)據(jù)和重要關(guān)注點(diǎn)信息。
頁(yè)面開(kāi)發(fā)采用了Layui輕量級(jí)框架，簡(jiǎn)單美觀(guān)。適用于開(kāi)發(fā)后端模式，它在服務(wù)端頁(yè)面上有非常好的效果。頁(yè)面采用柵格布局適配1366-1920分辨率，適配主流的電腦屏幕，提升用戶(hù)閱讀的體驗(yàn)。并且有三套換膚功能，用戶(hù)可以根據(jù)自己的喜好調(diào)整，便于后期維護(hù)。
其中導(dǎo)航部分采用三級(jí)導(dǎo)航，一級(jí)導(dǎo)航有多條不確定，在小屏幕的情況下采用收縮導(dǎo)航，隨著屏幕的遞減而相應(yīng)的減少導(dǎo)航，二級(jí)導(dǎo)航采用固定向右的方式來(lái)完美適配小分辨下導(dǎo)航過(guò)多的情況。
圖表類(lèi)采用Echarts開(kāi)發(fā)，更加生動(dòng)直觀(guān)的體現(xiàn)了每個(gè)模塊的變動(dòng)。
定稿的首頁(yè)（領(lǐng)導(dǎo)角色頁(yè)面）
選址類(lèi)型統(tǒng)計(jì)頁(yè)原型
此頁(yè)在和項(xiàng)目組溝通原型時(shí)，發(fā)現(xiàn)原型上列表下面總是空的，克拉瑪依一共就四個(gè)區(qū)，以后不會(huì)增加行數(shù)了，這個(gè)頁(yè)面顯的比較空。在和項(xiàng)目組溝通時(shí)，了解到這個(gè)頁(yè)面用戶(hù)關(guān)注的是：不同年份各區(qū)的單獨(dú)選址和多批次選址的項(xiàng)目數(shù)量，如果有地圖直觀(guān)看就更好了。所以在設(shè)計(jì)的時(shí)候，上面搜索改為直接進(jìn)行年份選擇的時(shí)間線(xiàn)，右側(cè)加入了地圖，更加了簡(jiǎn)單直觀(guān)。
在整個(gè)項(xiàng)目設(shè)計(jì)過(guò)程中，根據(jù)產(chǎn)品特點(diǎn)和設(shè)計(jì)需求結(jié)合業(yè)務(wù)場(chǎng)景，我們將頁(yè)面信息進(jìn)行重新整合和視覺(jué)化提煉，力求以圖形化的語(yǔ)言，將頁(yè)面信息完整，生動(dòng)展現(xiàn)出來(lái)。針對(duì)不同區(qū)域內(nèi)容和信息屬性，我們進(jìn)行圖文轉(zhuǎn)化，設(shè)計(jì)出不同的數(shù)據(jù)看板，同時(shí)簡(jiǎn)化列表信息，優(yōu)化信息排列、展示方式，在完整展示業(yè)務(wù)信息同時(shí)，豐富頁(yè)面層次，也避免了信息過(guò)多帶來(lái)的視覺(jué)壓力，提升用戶(hù)數(shù)據(jù)處理效率。
定稿的選址類(lèi)型統(tǒng)計(jì)頁(yè)面
gis軟件界面設(shè)計(jì)
在辦業(yè)務(wù)頁(yè)原型
統(tǒng)一的視覺(jué)語(yǔ)言是產(chǎn)品和UI設(shè)計(jì)中最重要額設(shè)計(jì)原則之一，全局化的設(shè)計(jì)是視覺(jué)統(tǒng)一的保證。藍(lán)藍(lán)設(shè)計(jì)在進(jìn)行前期調(diào)研時(shí)發(fā)現(xiàn)，改版前的系統(tǒng)集成了較多功能，每種功能布局都不相同，這樣就會(huì)出現(xiàn)視覺(jué)語(yǔ)言的不統(tǒng)一。我們?cè)俸笃诘脑O(shè)計(jì)中，遵循“框架-布局-細(xì)節(jié)”的設(shè)計(jì)思路，將頁(yè)面功能重新梳理，提煉出全新的視覺(jué)語(yǔ)言和頁(yè)面布局，確保視覺(jué)的統(tǒng)一性。
目標(biāo)人群和產(chǎn)品使用場(chǎng)景是決定產(chǎn)品設(shè)計(jì)的基礎(chǔ)性因素。我們?cè)诋a(chǎn)品架構(gòu)設(shè)計(jì)時(shí)，仔細(xì)研究目標(biāo)用戶(hù)使用場(chǎng)景，模擬用戶(hù)操作過(guò)程中所有可能行為，精簡(jiǎn)產(chǎn)品架構(gòu)，優(yōu)化頁(yè)面層級(jí)，合并頁(yè)面內(nèi)容，創(chuàng)新頁(yè)面展示方式，運(yùn)用大量的彈窗，toast提示等輕量化設(shè)計(jì)元素，力求將產(chǎn)品任意操作流程控制在4級(jí)頁(yè)面之內(nèi)，減少冗余流程，提升頁(yè)面操作效率。
定稿的在辦業(yè)務(wù)頁(yè)面
UI培訓(xùn)
在項(xiàng)目結(jié)束后，根據(jù)合同約定，準(zhǔn)備了一次面對(duì)云圖全公司范圍的UI培訓(xùn)，針對(duì)提出的問(wèn)題一項(xiàng)項(xiàng)結(jié)合云圖的具體頁(yè)面，設(shè)計(jì)前后的對(duì)比，回溯了當(dāng)時(shí)的研究、溝通和思考。當(dāng)時(shí)沒(méi)有參與具體設(shè)計(jì)的其它研發(fā)人員和管理層由此也更清晰我們做了什么?？偨?jīng)理挺感動(dòng)，覺(jué)得確實(shí)做了一些事情，通過(guò)外部UI咨詢(xún)公司的參與，把整個(gè)公司的UI認(rèn)識(shí)和產(chǎn)品UI水準(zhǔn)提升了。
UI培訓(xùn)視頻講解
根據(jù)季節(jié)可換背景的登錄頁(yè)
其它典型頁(yè)（總計(jì)設(shè)計(jì)40頁(yè)以?xún)?nèi)）
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
數(shù)慧時(shí)空國(guó)土資源數(shù)據(jù)中心一張圖平臺(tái)PC端界面設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品應(yīng)急大屏設(shè)計(jì)
設(shè)計(jì)作品大屏設(shè)計(jì)
