此項(xiàng)目一直是由我主要負(fù)責(zé)和跟進(jìn)的，后臺(tái)網(wǎng)站管理系統(tǒng)是由開(kāi)發(fā)的同事很早就自行做了的，所以我主要是根據(jù)網(wǎng)站已有的現(xiàn)狀進(jìn)行的改版設(shè)計(jì)。第一眼看到程序員做的網(wǎng)站，內(nèi)心還是有點(diǎn)崩潰的，因?yàn)檎麄€(gè)頁(yè)面風(fēng)格給人的感覺(jué)真是一言難盡。

     網(wǎng)站原本的樣子已經(jīng)找不到圖片了，之前做的時(shí)候也是習(xí)慣性的把東西做完就整理歸檔，所以也沒(méi)保留改版前的截圖。在網(wǎng)上隨意找了張同類(lèi)型的圖來(lái)說(shuō)明吧。改版前的網(wǎng)站大概就這種風(fēng)格，左邊菜單是這種樹(shù)狀型，頂部整了個(gè)項(xiàng)目名稱(chēng)和logo。

 

     從左邊菜單點(diǎn)擊進(jìn)去后，內(nèi)容頁(yè)面全在一個(gè)頁(yè)面上，大概是這種樣子（紅線(xiàn)標(biāo)注）。

 

   

     頁(yè)面風(fēng)格、顏色什么的就不吐槽了，畢竟是沒(méi)進(jìn)行視覺(jué)設(shè)計(jì)的網(wǎng)頁(yè)。然后我點(diǎn)擊了所有能點(diǎn)擊的頁(yè)面，查看了整個(gè)網(wǎng)站的交互邏輯，發(fā)現(xiàn)菜單內(nèi)容有些錯(cuò)亂，有些地方邏輯也走不通。然后跟開(kāi)發(fā)的同事討論了我發(fā)現(xiàn)的問(wèn)題，確定了一些東西后才開(kāi)始著手改版設(shè)計(jì)。

     按照我們部門(mén)的規(guī)定，做視覺(jué)設(shè)計(jì)是需要先做幾版設(shè)計(jì)方案，然后從中挑選一個(gè)來(lái)進(jìn)行全面設(shè)計(jì)。我進(jìn)行了配色方案的制定，出了幾版設(shè)計(jì)初稿，最終確定用以下配色方案的設(shè)計(jì)稿。

 

     主色的選擇，主要是基于項(xiàng)目是關(guān)于智能環(huán)境檢測(cè)的，藍(lán)綠色能給人安定的感覺(jué)。強(qiáng)調(diào)色主要是為了突出某些重要內(nèi)容，再配以合適的輔助色，就完成了基本的配色。

     對(duì)于頁(yè)面布局，這個(gè)也是花了很多時(shí)間和精力的。我將網(wǎng)站頁(yè)面邏輯梳理了一番，整理了框架圖（剛翻看了文件夾，竟然被我刪了，手賤啊），然后首先把一級(jí)菜單的頁(yè)面做了，然后再把其余頁(yè)面補(bǔ)充完。邏輯不通的地方首先是跟程序那邊溝通，然后再做設(shè)計(jì)，避免做無(wú)用功。

     這一切還算順利，最讓我頭痛的就是首頁(yè)。本來(lái)是想學(xué)人家國(guó)外網(wǎng)站做dashboard，但是由于項(xiàng)目自身原因沒(méi)做，就用的設(shè)備監(jiān)控頁(yè)面做首頁(yè)，畢竟這是最重要的內(nèi)容。由于這個(gè)頁(yè)面所包含的內(nèi)容很多，所以在布局方面是經(jīng)過(guò)多次嘗試（包括按鈕的位置，三種顯示方式的切換方式，顏色的搭配等等），還和同事開(kāi)會(huì)討論過(guò)，最后才修改完的，都不能說(shuō)修改好，因?yàn)檫€是有些地方做得不夠好。

 

 

     我已經(jīng)忘記首頁(yè)是修改過(guò)好多次了，但是我記得過(guò)程是痛苦的，心力交瘁。還好最后還是順利完成了所有頁(yè)面。

     最后就是標(biāo)注、切圖等等后續(xù)工作。

     至此，改版頁(yè)面就算完成了。