洋蔥數(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ō)不定可以給其他方案提供思路或者和其他方案整合。
謝謝閱讀～
