洋蔥數(shù)學(xué)教師端首頁(yè)迭代UI小結(jié)
洋蔥數(shù)學(xué)教師端從一開(kāi)始的MVP版到如今,上線(xiàn)也有半年時(shí)間了,期間也經(jīng)過(guò)了四五次迭代,主要圍繞首頁(yè)的三次改版,進(jìn)行一下小結(jié)。
項(xiàng)目背景:
雖然已經(jīng)有web端的教師后臺(tái),但大部分教師用戶(hù)主要通過(guò)移動(dòng)端使用洋蔥數(shù)學(xué),所以需要在移動(dòng)端直接提供相應(yīng)的教師功能,促進(jìn)教師的轉(zhuǎn)化,從而通過(guò)教師帶動(dòng)學(xué)生端的增長(zhǎng)和活躍。
一.MVP版首頁(yè)
1.確定整體UI風(fēng)格
教師端的第一版,時(shí)間本身很緊(需要快速搭建出一個(gè)MVP的版本),所以UI風(fēng)格上主要是和「洋蔥數(shù)學(xué)」之前的風(fēng)格一致,通過(guò)顏色(洋蔥數(shù)學(xué)主品牌色,#1696ea),以及一些圖標(biāo)、插畫(huà)等去體現(xiàn)品牌感,總的UI以“實(shí)用”為主。此外這個(gè)版本主要是在微信里使用,所以設(shè)想的是不要和微信本身的UI差別過(guò)大,這樣的設(shè)計(jì)有利于建立用戶(hù)的信任感。

2.首頁(yè)UI
確定好基本風(fēng)格后,首頁(yè)UI也有了雛形,這時(shí)的UI承襲了「洋蔥數(shù)學(xué)」Web端的班級(jí)卡片樣式,藍(lán)色背景塊,白色按鈕。

上線(xiàn)一段時(shí)間后,第二個(gè)迭代很快也來(lái)了,班級(jí)卡片上增加了一個(gè)“學(xué)生管理”的功能按鈕,這時(shí)原先的UI不再能很好的支撐:

同時(shí)也考慮到原先一個(gè)卡片套一個(gè)按鈕的樣式有點(diǎn)陳舊和累贅,因此考慮換一種形式去展現(xiàn),主要從以下兩點(diǎn):
1. 更符合移動(dòng)端的展現(xiàn)和操作
2. 頁(yè)面整體更輕快、透氣
經(jīng)過(guò)一些嘗試,最終采用了打通頁(yè)面的卡片結(jié)構(gòu),把兩個(gè)主要功能置于卡片下方,相比之前點(diǎn)擊區(qū)域更大,更好操作,并且給主要功能都繪制了圖標(biāo),輔助展示。

期間,也脫離產(chǎn)品PRD進(jìn)行了一定發(fā)揮,給頁(yè)面增加了頭部概覽模塊,但考慮到開(kāi)發(fā)成本等因素,并未采用。

三.首頁(yè)改版成索引頁(yè)
在這個(gè)版本,首頁(yè)結(jié)構(gòu)變成了3個(gè)主要功能的索引頁(yè),結(jié)構(gòu)較之前變化比較大,同時(shí)頁(yè)面里的信息很少,因此考慮通過(guò)運(yùn)用一些視覺(jué)元素,一方面豐富界面,另一方面輔助教師用戶(hù)理解功能;同時(shí)這個(gè)版本的頁(yè)面開(kāi)始植入到「洋蔥數(shù)學(xué)」APP內(nèi),用戶(hù)可以直接通過(guò)APP的底部導(dǎo)航欄訪問(wèn),因而也需要考慮到和APP內(nèi)界面的統(tǒng)一。

a. 延續(xù)上個(gè)版本,線(xiàn)性圖標(biāo)的方案,為豐富視覺(jué)效果,增加了頭部小場(chǎng)景插畫(huà),營(yíng)造一種教師辦公后臺(tái)的感覺(jué)。
b. 每一個(gè)功能都配了一個(gè)小插畫(huà)場(chǎng)景,整體視覺(jué)效果比較重,和其他頁(yè)面風(fēng)格不夠一致
c. 彩色圖標(biāo)方案,通過(guò)角度的略微轉(zhuǎn)變,也營(yíng)造了一種小場(chǎng)景的感覺(jué),同時(shí)視覺(jué)上也沒(méi)有過(guò)重,整體頁(yè)面干凈,以白色為主,和其他子頁(yè)面白色為主的風(fēng)格也更一致,最后選取了此方案。


總結(jié):
1. 功能性頁(yè)面,應(yīng)該先以實(shí)用和效率為優(yōu)先,至少需要做到視覺(jué)上的舒適:
給信息分組,劃分主次,突出重點(diǎn);
需要注意頁(yè)面之間的一致性;
以及適當(dāng)留白,增進(jìn)理解;
2. 信息比較少的時(shí)候,適當(dāng)?shù)倪\(yùn)用插畫(huà)和圖標(biāo),一方面使界面更親切些,另一方面也會(huì)有點(diǎn)睛的效果
3. 版面布局上可以有一定的變化,豐富頁(yè)面的同時(shí)也給頁(yè)面增加了節(jié)奏感
做方案的時(shí)候,盡量嘗試更多可能性,腦子里覺(jué)得不太可能的方案,也不妨嘗試快速做一下,說(shuō)不定可以給其他方案提供思路或者和其他方案整合。
謝謝閱讀~







































