客戶給的原型

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

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

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

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

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

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

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

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

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

在辦業(yè)務頁原型

統(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)，減少冗余流程，提升頁面操作效率。

UI培訓

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

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

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