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