客戶給的原型

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

在設(shè)計(jì)過(guò)程中客戶不再參與，只看結(jié)果。每一個(gè)流程和頁(yè)面由項(xiàng)目組講清需求，業(yè)務(wù)邏輯，藍(lán)藍(lán)設(shè)計(jì)提建議和思路，畫出原型，認(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ù)分開，每種類型重要的內(nèi)容字體大號(hào)，色彩突出，輔助信息弱化。領(lǐng)導(dǎo)角色需要全局觀，增加了總?cè)兄匾獢?shù)據(jù)和重要關(guān)注點(diǎn)信息。

頁(yè)面開發(fā)采用了Layui輕量級(jí)框架，簡(jiǎn)單美觀。適用于開發(fā)后端模式，它在服務(wù)端頁(yè)面上有非常好的效果。頁(yè)面采用柵格布局適配1366-1920分辨率，適配主流的電腦屏幕，提升用戶閱讀的體驗(yàn)。并且有三套換膚功能，用戶可以根據(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ò)多的情況。

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

選址類型統(tǒng)計(jì)頁(yè)原型

此頁(yè)在和項(xiàng)目組溝通原型時(shí)，發(fā)現(xiàn)原型上列表下面總是空的，克拉瑪依一共就四個(gè)區(qū)，以后不會(huì)增加行數(shù)了，這個(gè)頁(yè)面顯的比較空。在和項(xiàng)目組溝通時(shí)，了解到這個(gè)頁(yè)面用戶關(guān)注的是：不同年份各區(qū)的單獨(dú)選址和多批次選址的項(xiàng)目數(shù)量，如果有地圖直觀看就更好了。所以在設(shè)計(jì)的時(shí)候，上面搜索改為直接進(jìn)行年份選擇的時(shí)間線，右側(cè)加入了地圖，更加了簡(jiǎ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é)壓力，提升用戶數(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)用戶使用場(chǎng)景，模擬用戶操作過(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è)面操作效率。

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咨詢公司的參與，把整個(gè)公司的UI認(rèn)識(shí)和產(chǎn)品UI水準(zhǔn)提升了。

根據(jù)季節(jié)可換背景的登錄頁(yè)

其它典型頁(yè)（總計(jì)設(shè)計(jì)40頁(yè)以內(nèi)）