系統(tǒng)分析教育類網(wǎng)站改版

時(shí)間：2023-04-26 00:30:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-26 00:30:02 來源：網(wǎng)站運(yùn)營

系統(tǒng)分析教育類網(wǎng)站改版：關(guān)于網(wǎng)站改版的大體思路分為

一發(fā)現(xiàn)問題，二解決問題

1、布局問題

（改版前）

在設(shè)計(jì)上，每個(gè)模塊之間沒有銜接性，布局的層級(jí)不夠清晰，沒有輕重緩急（應(yīng)該圍繞課程內(nèi)容和教學(xué)特點(diǎn)作為重點(diǎn)）。在內(nèi)容上，界面越往下走內(nèi)容層級(jí)關(guān)系應(yīng)該越弱。因此在banner以及banner下方的位置應(yīng)該放的內(nèi)容是整個(gè)網(wǎng)頁的突出內(nèi)容，在這里應(yīng)當(dāng)放的內(nèi)容就是四大課程內(nèi)容的學(xué)習(xí)流程。



（改版后）

2、文字問題

（改版前）

一般情況下，字體常用萍方常規(guī)，或者萍方中等。字號(hào)14-16-18px（最小12最大60不等需要看層級(jí)關(guān)系，除banner標(biāo)題外）。

盡量避免標(biāo)題用大紅色，如上圖所示。

注意各個(gè)層級(jí)標(biāo)題的字體層級(jí)關(guān)系，主標(biāo)題的字體大小、顏色、字號(hào)要與此標(biāo)題區(qū)別開來。

（改版后）

3.顏色、風(fēng)格把握

（改版前）

改版前顏色較為低調(diào)，偏黑白灰為主，整個(gè)網(wǎng)頁沒有情緒在，顏色平平風(fēng)格平平。

玩顏色需要大膽。教育類很多網(wǎng)站走扁平、卡通風(fēng)格，大多數(shù)網(wǎng)站都是黃藍(lán)互補(bǔ)色的調(diào)調(diào)。

類似于這種

或者這種


每個(gè)版塊顏色最好不要太復(fù)雜（除了banner部分），避免整體網(wǎng)站視覺流不清晰，給用戶一種雜亂的感覺，采用兩到三種色系，例如藍(lán)色和黃色系，其他顏色都通過改變這兩個(gè)色系的明度和飽和度來調(diào)整。目的是為了讓界面有整體性。例如圖

（改版后）

4.排版

（改版前）

像這種有關(guān)于類似分級(jí)的標(biāo)題，1234的數(shù)字排版，應(yīng)該用圖形去表示，一二三四點(diǎn)的去排版很呆板，并且一般在這種數(shù)字標(biāo)題下還需要有二級(jí)三級(jí)四級(jí)標(biāo)題，不用圖形進(jìn)去，就很容易排版成下圖的情況。

文字太多，太繁瑣，層級(jí)不明顯，排版只是單獨(dú)的梯形居中。更好的方式是用圖形去簡化文字的內(nèi)容，即使通過前后圖層層級(jí)關(guān)系（透明度）來疊蓋，也不會(huì)顯得繁瑣。

（改版后）

5.細(xì)節(jié)

細(xì)節(jié)。

大到背景圖的選擇，構(gòu)圖，排版，顏色，字體，圖標(biāo)，布局，控件。

小到元素中的一個(gè)圓形的透明度調(diào)整。