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