如何系統(tǒng)的進(jìn)行改版設(shè)計(jì)（上）

我個(gè)人覺(jué)得會(huì)有三種不同類型的設(shè)計(jì)師：

1.感覺(jué)型

他說(shuō)：我感覺(jué)這個(gè)頁(yè)面太亂。

你問(wèn)他亂在哪里，他說(shuō)不出來(lái)，僅僅是感覺(jué)！這種設(shè)計(jì)師可能剛剛踏入設(shè)計(jì)行業(yè)，或者做了很久但每天混日子的那種。

2.混亂型

他說(shuō)：這個(gè)圖標(biāo)重心不穩(wěn)，頁(yè)面顏色有點(diǎn)臟，banner有點(diǎn)丑，圖標(biāo)描邊粗細(xì)不一致。

這種設(shè)計(jì)師有一定的經(jīng)驗(yàn)與見(jiàn)解，但是不善于總結(jié)與梳理，所以你會(huì)發(fā)現(xiàn)他們雖然能夠說(shuō)出問(wèn)題，但都是零散的點(diǎn)，沒(méi)有邏輯。

3.體系型

他說(shuō)：?jiǎn)栴}出現(xiàn)在以下幾個(gè)方面：顏色、圖標(biāo)、布局等等，其中顏色問(wèn)題有....、圖標(biāo)問(wèn)題有.....

他們能夠先從大的方向?qū)?wèn)題歸類，然后再闡述細(xì)節(jié)問(wèn)題，思路非常清晰。

大家應(yīng)該都希望成為第三種類型的設(shè)計(jì)師，但如何能成為體系型的設(shè)計(jì)師呢？

其實(shí)無(wú)非就是將結(jié)構(gòu)化思維用好，找問(wèn)題也一樣，不要上來(lái)就說(shuō)一推零散的點(diǎn)，這樣會(huì)讓人覺(jué)得你毫無(wú)邏輯。

如果別人讓你挑毛病，首先我們要禁止說(shuō)“憑感覺(jué)"三個(gè)字，其次即使你能說(shuō)出問(wèn)題所在，說(shuō)之前也要先思考一下，你所說(shuō)的問(wèn)題夠不夠系統(tǒng)，是否先從大的方向?qū)⑵錃w類，然后才具體闡述。

例如就拿上面這個(gè)網(wǎng)站來(lái)說(shuō)，我會(huì)從以下5個(gè)方面來(lái)挑出視覺(jué)層面的問(wèn)題（僅供參考），大綱如下：

1.布局

2.文字

3.顏色

4.圖標(biāo)

5.控件

1 布局

1.1關(guān)于柵格分欄

我會(huì)挑戰(zhàn)整個(gè)網(wǎng)站的柵格系統(tǒng)，5等分欄的布局方式使整體內(nèi)容過(guò)于密集，并且很多內(nèi)容并沒(méi)有按照柵格來(lái)布局（比如中部的5個(gè)圖標(biāo)），如下圖：

2 文字

2.1 文字規(guī)范

文字的大小及顏色的種類太多，個(gè)別還出現(xiàn)加粗情況，例如僅首頁(yè)的字體大小有12、14、16、18、20、24這么多種，根本沒(méi)有統(tǒng)一的規(guī)范與邏輯，如下圖：

仔細(xì)觀察，我們的卡片，標(biāo)題與輔助信息視覺(jué)層級(jí)很接近，幾乎看不出主次，而競(jìng)品的卡片，標(biāo)題與輔助信息對(duì)比很強(qiáng)烈，很容易就知道要突出標(biāo)題。

3 顏色

3.1 整體顏色雜亂，缺少品牌感

顏色過(guò)于雜亂，沒(méi)有規(guī)則，導(dǎo)致視覺(jué)流不清晰，根本無(wú)法聚焦內(nèi)容本身，并且你幾乎無(wú)法判斷那個(gè)顏色是品牌色，因?yàn)閷?shí)在太亂太雜了，如下圖：

舉個(gè)例子，前三名的序號(hào)真的需要那么搶眼嗎？就算用三種顏色是否可以適當(dāng)降低一下飽和度？我看了很多競(jìng)品，他們是怎么做的呢？下期再說(shuō)！

4 圖標(biāo)

4.1 圖標(biāo)視覺(jué)大小不統(tǒng)一

4.3 圖標(biāo)風(fēng)格比較陳舊

這個(gè)就是仁者見(jiàn)仁智者見(jiàn)智了，個(gè)人覺(jué)得圖標(biāo)風(fēng)格已經(jīng)是很多年前的了，所以可以整體優(yōu)化！

5 控件

5.1 標(biāo)簽樣式陳舊且不夠明顯

請(qǐng)看下圖，能看見(jiàn)標(biāo)簽在哪嗎？感覺(jué)已經(jīng)和背景圖融為一體，毫無(wú)違和感，厲害了！