做改版設(shè)計大體思路很簡單，只需要做好兩件事：發(fā)現(xiàn)問題與解決問題。今天我們先來搞定第一件事：發(fā)現(xiàn)問題。

給你下面這樣的網(wǎng)站首頁，讓你找視覺層面的問題，你會怎么闡述？（注意：本文只討論視覺層面問題。）

我個人覺得會有三種不同類型的設(shè)計師：

1. 感覺型

他說：我感覺這個頁面太亂。

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

2. 混亂型

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

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

3. 體系型

他說：問題出現(xiàn)在以下幾個方面：顏色、圖標(biāo)、布局等等，其中顏色問題有....、圖標(biāo)問題有.....

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

大家應(yīng)該都希望成為第三種類型的設(shè)計師，但如何能成為體系型的設(shè)計師呢？其實(shí)無非就是將結(jié)構(gòu)化思維用好，找問題也一樣，不要上來就說一推零散的點(diǎn)，這樣會讓人覺得你毫無邏輯。如果別人讓你挑毛病，首先我們要禁止說“憑感覺"三個字，其次即使你能說出問題所在，說之前也要先思考一下，你所說的問題夠不夠系統(tǒng)，是否先從大的方向?qū)⑵錃w類，然后才具體闡述。

例如就拿上面這個網(wǎng)站來說，我會從以下5個方面來挑出視覺層面的問題（僅供參考），大綱如下：

1. 布局
2. 文字
3. 顏色
4. 圖標(biāo)
5. 控件

1. 布局

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

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

1.2 布局層級問題

很多需求方希望傳遞很多內(nèi)容信息，并且每一個都是重點(diǎn)，最后就會導(dǎo)致用戶根本不知道看什么，我們的這個網(wǎng)站就存在這個問題，重點(diǎn)應(yīng)該是課程的導(dǎo)航，然而個人信息和快捷入口的圖標(biāo)區(qū)已經(jīng)完全搶走的我們的視線。我覺得布局層級一定要清晰，該收的應(yīng)該收起來，比如個人信息；該輕的應(yīng)該輕一點(diǎn)，比如快捷入口的圖標(biāo)區(qū)，如下圖：

2. 文字

2.1 文字規(guī)范

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

2.2 文字層級

文字層級區(qū)分不明顯，我們看下圖：

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

3. 顏色

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

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

3.2 顏色飽和度過高，種類偏多

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

4. 圖標(biāo)

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

4.2 描邊粗細(xì)不一致

非常低級的錯誤！

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

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

5. 控件

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

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

5.2 選項(xiàng)卡樣式缺乏統(tǒng)一性

排行榜的選項(xiàng)卡有兩種樣式，沒有進(jìn)行統(tǒng)一設(shè)計，差評，如下圖：

5.3 樣式的細(xì)節(jié)過于復(fù)雜

都說現(xiàn)在的設(shè)計要簡潔，比如今年很流行的無線化分割等等，來看下圖：

這是網(wǎng)站的一塊截圖，我至少看到了10條分割線，包括卡片的線條，選項(xiàng)卡的線條等等，這么復(fù)雜的細(xì)節(jié)，你說網(wǎng)站能不亂嗎？以上就是改版的第一步——發(fā)現(xiàn)問題，也許問題覆蓋的并不全面，但是思路是清晰的，可以在真正進(jìn)行設(shè)計的時候查缺補(bǔ)漏，我也僅僅只是提供一種思考方式，至于你怎么找問題，不一定用我的方法，只要能夠系統(tǒng)的解決問題，那就是正確的。

未經(jīng)原作者授權(quán)請勿轉(zhuǎn)載。

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」

「干貨超足的5個改版實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)」

1. LOGO 改版：《揭秘LOGO設(shè)計流程！超詳細(xì)的騰訊云LOGO 改版記錄全過程》
2. 官網(wǎng)改版：《QQ官網(wǎng)全新蛻變！IM QQ 改版（第一期）設(shè)計總結(jié)》
3. Pinterest 改版：《改版實(shí)戰(zhàn)！聊聊PINTEREST官網(wǎng)再設(shè)計過程的經(jīng)驗(yàn)思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設(shè)計故事》
5. 提升數(shù)據(jù)：《騰訊ISUX丨通過優(yōu)化，我們將QQ會員付費(fèi)用戶數(shù)提高了5倍！》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com