html前端 | 交互設(shè)計(jì) | 視覺設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)
中國節(jié)能是以節(jié)能環(huán)保為主業(yè)的中央企業(yè)。中國節(jié)能以生態(tài)文明建設(shè)為己任，長期致力于讓天更藍(lán)、山更綠、水更清，讓生活更美好。經(jīng)過多年發(fā)展，中國節(jié)能已構(gòu)建起以節(jié)能、環(huán)保、清潔能源、健康和節(jié)能環(huán)保綜合服務(wù)為主業(yè)的4+1產(chǎn)業(yè)格局，成為我國節(jié)能環(huán)保和健康領(lǐng)域規(guī)模大、實(shí)力強(qiáng)、專業(yè)覆蓋面廣、產(chǎn)業(yè)鏈完整的旗艦企業(yè)。
中節(jié)能現(xiàn)金流抗壓測試軟件是一套可以科學(xué)分析企業(yè)存量項(xiàng)目現(xiàn)金流量，隨著外部條件（利率/匯率/收入到帳時(shí)間）變化，預(yù)測未來現(xiàn)金流量的軟件系統(tǒng)。此次麥浪科技和藍(lán)藍(lán)設(shè)計(jì)合作，進(jìn)行軟件升級(jí)改版，進(jìn)行交互方式的優(yōu)化，參考了國際上后臺(tái)管理軟件的設(shè)計(jì)優(yōu)點(diǎn)，風(fēng)格簡約而不簡單，邏輯清晰，大數(shù)字及動(dòng)效的使用，讓用戶體驗(yàn)更佳。
通過現(xiàn)金流抗壓測試軟件，可以為企業(yè)存量項(xiàng)目現(xiàn)金流進(jìn)行全方位壓力測試，和評(píng)估，并預(yù)測下一階段企業(yè)現(xiàn)金流量，為企業(yè)財(cái)務(wù)體系運(yùn)轉(zhuǎn)體統(tǒng)數(shù)據(jù)存量數(shù)據(jù)支撐和增量數(shù)據(jù)預(yù)測?，F(xiàn)金流抗壓測試軟件是中節(jié)能財(cái)務(wù)體系中重要一環(huán)，是企業(yè)財(cái)務(wù)系統(tǒng)和業(yè)務(wù)現(xiàn)金流系統(tǒng)之間的安全屏障。
中節(jié)能企業(yè)內(nèi)部財(cái)務(wù)人員使用，年齡分布較大，普遍年齡在20-50之間。目標(biāo)使用人群辦公場所相對(duì)固定，主要集中于辦公室；對(duì)人機(jī)交互效率要求較高且使用頻率較高。主要進(jìn)行辦公類操作，希望系統(tǒng)能夠便捷好用，穩(wěn)定安全且易于理解。
交互方面，采用平鋪設(shè)計(jì)方案，將信息盡可能多的呈現(xiàn)在同一級(jí)頁面中，同時(shí)對(duì)類別區(qū)域加以區(qū)分，在保證信息傳遞清晰流暢的同時(shí)，盡量減少用戶點(diǎn)擊行為和點(diǎn)擊次數(shù)，提高辦公效率。 視覺方面，以大為主，采用大間距，大對(duì)比，大字號(hào)的設(shè)計(jì)思路，保證頁面呼吸感和節(jié)奏感的同時(shí)，兼顧信息傳遞，在主要業(yè)務(wù)頁面突出產(chǎn)品的功能屬性。
在交互原型設(shè)計(jì)過程中，藍(lán)藍(lán)與麥浪同事進(jìn)行了深入的溝通，我們多次前往麥浪公司以及中節(jié)能公司了解業(yè)務(wù)，在確保對(duì)業(yè)務(wù)完全理解的情況下，充分吸收用戶意見，與麥浪同事反復(fù)修改交互原型圖，打磨交互細(xì)節(jié)。最終通過客戶評(píng)定，確定交互原型。
在項(xiàng)目進(jìn)行過程中，麥浪同事也提供很多支持
根據(jù)手繪原型圖，制作并優(yōu)化原型設(shè)計(jì)圖
客戶最終確定的交互原型圖
頁面設(shè)計(jì)過程中，藍(lán)藍(lán)按照先定風(fēng)格再深入設(shè)計(jì)的原則，先期提供不同風(fēng)格的首頁和登錄頁，供客戶選擇，待確定系統(tǒng)整體視覺風(fēng)格后，再進(jìn)行后續(xù)頁面的設(shè)計(jì)。
本系統(tǒng)首頁主要是核心數(shù)據(jù)的總覽和展示，經(jīng)過與客戶討論，首頁主要顯示“資產(chǎn)”“負(fù)債”“現(xiàn)金流”等方面的內(nèi)容。在確定展示內(nèi)容之后，藍(lán)藍(lán)設(shè)計(jì)嘗試將行業(yè)特色和產(chǎn)品結(jié)合，運(yùn)用情景化的設(shè)計(jì)，把行業(yè)“風(fēng)機(jī)”融入進(jìn)首頁中來，同時(shí)深色的背景和多種元素的組合，也把科技感體現(xiàn)了出來。
設(shè)計(jì)過程中提供的其他方案
藍(lán)藍(lán)對(duì)每個(gè)頁面功能性也做了區(qū)分，并且根據(jù)頁面的功能屬性調(diào)整優(yōu)化設(shè)計(jì)方案。
本系統(tǒng)按照頁面屬性分類，大致分為2類：圖表展示和數(shù)據(jù)計(jì)算。針對(duì)圖表展示類型的頁面，藍(lán)藍(lán)采用平鋪的展示方式，盡可能多的將數(shù)據(jù)呈現(xiàn)給用戶，提高頁面數(shù)據(jù)展示效率，減少用戶交互行為。平鋪展示這種方式對(duì)數(shù)據(jù)的分類展示要求較高，經(jīng)過與客戶溝通確認(rèn)后，藍(lán)藍(lán)按照信息優(yōu)先順序進(jìn)行排版，針對(duì)數(shù)字類型信息，采用橫向平鋪，針對(duì)圖表展示信息，采用卡片和色彩區(qū)分不同類型的數(shù)據(jù)。藍(lán)藍(lán)還把頁面操作區(qū)域放置在頁面頂部，并采用吸頂設(shè)計(jì)，不會(huì)隨著頁面滾動(dòng)而消失，在保證數(shù)據(jù)展示最優(yōu)的同時(shí)，兼顧操作便利性。
數(shù)據(jù)計(jì)算類型的頁面，偏向操作性，對(duì)頁面交互、跳轉(zhuǎn)邏輯較高。本系統(tǒng)中，需要操作的功能大多集中在數(shù)據(jù)的輸入和計(jì)算相關(guān)的范圍內(nèi)。在交互層面， 藍(lán)藍(lán)與客戶反復(fù)溝通，優(yōu)化頁面層級(jí)和交互邏輯，將不必要的功能隱藏展示，或者將原本在1頁顯示的信息分頁展示，并在原型圖中予以確認(rèn)和展示。在視覺層，藍(lán)藍(lán)采用大字號(hào)的方式來突出需要輸入的信息，并利用色塊/圖形化展示等方式，區(qū)分信息層級(jí)。在保證交互便利的同時(shí)，完整展示業(yè)務(wù)信息，豐富頁面層次，也避免了信息過多帶來的視覺壓力，提升用戶數(shù)據(jù)處理效率。
