原型圖展示

前期我們提交了兩個版本頁面設(shè)計布局供客戶參考，由于客戶產(chǎn)品使用用途及其廣泛，所有模塊均需要滿足有圖和無圖方式展示，對屏幕分辨率適應(yīng)跨度較大，這就對界面布局提出較高要求，界面布局應(yīng)當(dāng)盡可能簡單，以滿足產(chǎn)品對適應(yīng)性的要求，而且要在界面布局合理情況下保持美觀。

在各模塊功能都確定情況下，繪制頁面布局草圖，經(jīng)過反復(fù)修改，客戶認為第二種布局及交互方式符合客戶預(yù)期，同時在對使用現(xiàn)版本客戶的可用性測試中，這一版本草圖可接受度最高。

四個首頁設(shè)計提案

項目初期，通過對客戶的簡單溝通和對需求文檔的研討分析，設(shè)計了四個不同風(fēng)格的方案。
在我們拿著提案去和客戶說明的過程中，發(fā)現(xiàn)我們對產(chǎn)品并沒有理解透徹，客戶方的銷售、開發(fā)、運營人員喜歡的每個方案也不同。經(jīng)過討論后，大家達成一致：
1  擴展性高
（適合賣給各個公司培訓(xùn)使用）
2  現(xiàn)代，結(jié)合國際流行趨勢（三至五年之內(nèi)不改版也不落伍）
3  結(jié)合用戶使用場景和具體需求。

藍藍設(shè)計師重新梳理需求，先從了解線上教育行業(yè)的基本業(yè)務(wù)開始，在客戶公司了解客戶現(xiàn)階段產(chǎn)品的操作邏輯，并且與使用該系統(tǒng)的客戶進行交談，了解他們對現(xiàn)在產(chǎn)品的看法及槽點。
在了解了該系統(tǒng)目前存在的問題之后，做了交互設(shè)計診斷，用將近2周時間重新設(shè)計了頁面的交互布局及視覺效果。

前臺首頁設(shè)計

在產(chǎn)品邏輯和頁面布局確認之后，開始對界面進行視覺設(shè)計。

界面采用紅色為主色調(diào)，紅色寓意著激情與活力，采用紅色作為主色調(diào)能夠激發(fā)用戶學(xué)習(xí)樂趣。

方案采取卡片式+大標(biāo)題的布局，這樣布局好處是界面美觀簡介，同時界面功能區(qū)分明顯。

將學(xué)習(xí)情況與積分情況放在一起可視化展示，即顯得頁面美觀整潔。

增加了簽到獎勵功能，可激勵客戶每日登錄平臺學(xué)習(xí)，增加用戶粘性。

由于本系統(tǒng)一般架設(shè)在各企業(yè)本地服務(wù)區(qū)上使用，商業(yè)化運作較少，考慮到企業(yè)日常運營維護問題，前臺頁面大部分具有圖文模式和列表模式兩種顯示方式，這樣會使該系統(tǒng)能夠適應(yīng)更多的使用環(huán)境。

后臺界面設(shè)計

后臺功能除了管理、編輯前臺所有功能，對學(xué)員的數(shù)據(jù)進行收集整理分析，還需要管理企業(yè)不同層級之間數(shù)據(jù)的管理與編輯；后臺的復(fù)雜程度并不比前臺低，而且由于一個頁面需要承載2至3個不同維度的管理，篩選功能，對頁面布局及交互設(shè)計的要求很高。

在前臺設(shè)計完成之后，我們又去客戶公司對后臺的功能及布進行了溝通，確定了基本的設(shè)計目標(biāo)和方向。

后臺一級頁面采用全屏設(shè)計，已尺寸1366*768px為基礎(chǔ)，支持自適應(yīng)。

這樣做可以將將內(nèi)容最大化展現(xiàn)出來，增加頁面利用率，減少其他不必要元素的干擾，使用戶保持專注。界面導(dǎo)航采用頂部導(dǎo)航+左側(cè)導(dǎo)航的方式，頂部導(dǎo)航層級高于左側(cè)導(dǎo)航層級。

由于頁面功能之間差異較大，而且涉及到權(quán)限分配問題，將彼此聯(lián)系較弱，且不受權(quán)限約束的功能置于頂部導(dǎo)航，更大程度保持界面統(tǒng)一性，同時也減少開發(fā)工作量。

此外，由于同一頁面需要承載多個樹形結(jié)構(gòu)，為了減輕服務(wù)器壓力，同一頁面最多保留一個樹形結(jié)構(gòu)，其余結(jié)構(gòu)根據(jù)使用評率進行隱藏，點擊按鈕后調(diào)出彈窗進行選擇。

配色方面，為了與前臺保持保持一致，后臺頁面主色調(diào)也為紅色。

后臺界面共設(shè)計和前端切圖不到200頁。