杰佛軟件教育考試系統(tǒng) 前后臺軟件交互設(shè)計及視覺設(shè)計

杰佛軟件教育考試系統(tǒng) 前后臺軟件交互設(shè)計及視覺設(shè)計

圖標(biāo)設(shè)計 | 交互設(shè)計 | 信息架構(gòu) | 界面設(shè)計 | 前端html

圖標(biāo)設(shè)計 | 交互設(shè)計 | 信息架構(gòu) | 界面設(shè)計 | 前端html

北京杰佛軟件技術(shù)開發(fā)有限公司是國內(nèi)率先針對大中型企業(yè)和政府機(jī)構(gòu)提供e-learning整體解決方案的高新技術(shù)企業(yè)。本次杰佛教育網(wǎng)站由藍(lán)藍(lán)設(shè)計負(fù)責(zé)前期項目梳理、信息架構(gòu)增量、頁面邏輯設(shè)計、頁面布局、動線操作、視覺設(shè)計及HTML切圖。在產(chǎn)品設(shè)計過程中,不斷與客戶溝通,及時調(diào)整設(shè)計方向,充分考慮客戶想法。

對產(chǎn)品本身的認(rèn)識也不斷加深,功能布局,交互方式不斷深化、提煉精減,融入當(dāng)前流行設(shè)計元素,歷時6個月,最終設(shè)計完成400余個頁面。工作量較簽合同前的認(rèn)知多了數(shù)倍,藍(lán)藍(lán)設(shè)計本著一旦簽了合同就不在考慮得失利潤的原則,不畏堅辛,善始善終完成工作,得到客戶認(rèn)可。

前臺網(wǎng)站思維導(dǎo)圖

在前期功能規(guī)劃過程中,我們將產(chǎn)品劃分為登錄注冊,首頁,課程表,圖書館,考試與答題,問卷與測評,報名中心,積分商城,收藏,消息,閱卷,知道個人中心,程序檢查這14個板塊,每個板塊內(nèi)又分為若干板塊。新的版本較之前版本新增收藏,知道等板塊,對之前在一起的板塊進(jìn)行了拆分,最終經(jīng)客戶審核,認(rèn)為下圖中板塊布局更符合產(chǎn)品發(fā)展方向,選定次版本為產(chǎn)品框架,進(jìn)行后續(xù)設(shè)計。具體產(chǎn)品框架如下圖:

第一個版本

后臺網(wǎng)站思維導(dǎo)圖

后臺功能除了保留前臺相應(yīng)功能模塊之外,還增加了下載中心和統(tǒng)計分析板塊。下載中心主要包括后臺批量上傳工具下載,文件膜版下載和相應(yīng)插件下載等功能;統(tǒng)計分析主要對學(xué)生,老師,機(jī)構(gòu),業(yè)務(wù)層面的相關(guān)數(shù)據(jù)的展示及分析。

第一個版本

原型圖展示

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

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

第一個版本

第一個版本

第二種版本(客戶選定)

第二種版本(客戶選定)

課程詳情展示

課程詳情展示

選課中心展示

選課中心展示

報名中心展示

報名中心展示

板塊展示

板塊展示

首頁界面設(shè)計

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

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

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

四個首頁設(shè)計提案-1
四個首頁設(shè)計提案-2
四個首頁設(shè)計提案-3
四個首頁設(shè)計提案-4

前臺首頁設(shè)計

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

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

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

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

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

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

前臺首頁設(shè)計-1
前臺首頁設(shè)計-2
前臺首頁設(shè)計-3
前臺首頁設(shè)計-4
前臺首頁設(shè)計-5

后臺界面設(shè)計

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

在前臺設(shè)計完成之后,我們又去客戶公司對后臺的功能及布進(jìn)行了溝通,確定了基本的設(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ù)使用評率進(jìn)行隱藏,點(diǎn)擊按鈕后調(diào)出彈窗進(jìn)行選擇。

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

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

后臺界面設(shè)計
后臺界面設(shè)計
后臺界面設(shè)計
后臺界面設(shè)計
后臺界面設(shè)計

  返回