客戶給的原型

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

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

首頁設計了日常辦公和領導兩種角色頁面。經過內容梳理，原型的大部分內容空洞不必要，新設計增加了每天登錄最需要關注的業務處理:緊急.待辦.超期.月簽四種情況，并把公文和業務分開，每種類型重要的內容字體大號，色彩突出，輔助信息弱化。領導角色需要全局觀，增加了總全市重要數據和重要關注點信息。

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

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

圖表類采用Echarts開發，更加生動直觀的體現了每個模塊的變動。

選址類型統計頁原型

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

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

在辦業務頁原型

統一的視覺語言是產品和UI設計中最重要額設計原則之一，全局化的設計是視覺統一的保證。藍藍設計在進行前期調研時發現，改版前的系統集成了較多功能，每種功能布局都不相同，這樣就會出現視覺語言的不統一。我們再后期的設計中，遵循“框架-布局-細節”的設計思路，將頁面功能重新梳理，提煉出全新的視覺語言和頁面布局，確保視覺的統一性。

目標人群和產品使用場景是決定產品設計的基礎性因素。我們在產品架構設計時，仔細研究目標用戶使用場景，模擬用戶操作過程中所有可能行為，精簡產品架構，優化頁面層級，合并頁面內容，創新頁面展示方式，運用大量的彈窗，toast提示等輕量化設計元素，力求將產品任意操作流程控制在4級頁面之內，減少冗余流程，提升頁面操作效率。

UI培訓

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

根據季節可換背景的登錄頁

其它典型頁（總計設計40頁以內）