客戶給的原型

由于這個(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)，之后給出交互建議，選擇了一些典型頁指出其中的不足，并放上類似頁面的設(shè)計(jì)作品，提出解決方式并做出ppt，開電話會(huì)議溝通，客戶和項(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ā)，更加生動(dòng)直觀的體現(xiàn)了每個(gè)模塊的變動(dòng)。

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

此頁在和項(xiàng)目組溝通原型時(shí)，發(fā)現(xiàn)原型上列表下面總是空的，克拉瑪依一共就四個(gè)區(qū)，以后不會(huì)增加行數(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)行重新整合和視覺化提煉，力求以圖形化的語言，將頁面信息完整，生動(dòng)展現(xiàn)出來。針對不同區(qū)域內(nèi)容和信息屬性，我們進(jìn)行圖文轉(zhuǎn)化，設(shè)計(jì)出不同的數(shù)據(jù)看板，同時(shí)簡化列表信息，優(yōu)化信息排列、展示方式，在完整展示業(yè)務(wù)信息同時(shí)，豐富頁面層次，也避免了信息過多帶來的視覺壓力，提升用戶數(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)集成了較多功能，每種功能布局都不相同，這樣就會(huì)出現(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)，減少冗余流程，提升頁面操作效率。

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)理挺感動(dòng)，覺得確實(shí)做了一些事情，通過外部UI咨詢公司的參與，把整個(gè)公司的UI認(rèn)識和產(chǎn)品UI水準(zhǔn)提升了。

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

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