做改版設計大體思路很簡單，只需要做好兩件事：發現問題與解決問題。

上一期我們做了改版設計的第一步 —— 發現問題，今天我們來做第二步 —— 解決問題！

經過分析，我發現一個很有趣的事情，就是上期提出的問題與問題之間還有很多其他維度的共性，于是我再次分類，得到以下三種類型：

1、規范統一類問題

例如：文字、顏色、控件、圖標有太多的不統一、不規范。

2、設計風格類問題

例如：圖標、卡片風格陳舊。

3、信息層級類問題

例如：信息布局層級、卡片文字層級。

我們來分別講解，并給出相應的解決思路。

1. 規范統一類問題

圖標線條粗細不一致，文字各種大小，顏色各種亂用，其實這些都是規范沒有制定好的原因，也就是我所講的規范類問題。

如何解決呢？

我們需要先定好一個前期規范，然后隨著場景的增加，再不斷調整規范，但是千萬不能在沒有任何指導原則、目標的情況下就開始天馬行空的設計，那樣最后一定會亂作一團，尤其是在團隊合作的情況下。

舉幾個例子（上期的問題）：

1.1 文字各種大小、顏色

如下圖：

我們需要拉通所有場景，來進行分類，最后給出一個前期規范：

比如定義一級標題的文字為24pt，二級標題的文字為18pt，正文為14pt，輔助性文字為12pt。

文字的顏色，重要型文字使用#333333，普通型文字使用#666666，輔助型文字使用#999999。

對于文字的加粗問題，整個頁面，要么主標題都加粗，要么都不加粗，如果有些加粗有些又不加粗，別人也許就會覺得我們做的不夠嚴謹（當然特殊場景除外）！

1.2 圖標線條粗細不一致

這是一個非常不應該發生的錯誤，在具體設計執行前，需要將描邊粗細的規范提前制定好，例如統一為2px。

如下圖：

1.3 顏色亂用

顏色也需要我們輸出前期的基礎規范，考慮好他們的使用場景，以免在設計的時候胡亂用色，使最后產出的頁面雜亂無章。

比如主色、輔助色、灰度色等等。

以前有寫過一篇關于規范的模板，有需要的可以去看看，這里就不具體展示了：《UI 設計規范的制作思路+常見問題總結》

1.4 控件樣式不統一

明明是一個控件，卻要用兩種樣式。

我們需要擇優做好一個，然后放進控件庫中，等到需要的時候直接調取。

通過上面幾個例子，大家會發現，如果前期規范沒有做好鋪墊，后面的設計就會很難把控，尤其是當頁面越來越多的時候。

2. 設計風格類問題

這一類問題都發生在具體設計的時候，

如何解決呢？

我的解決思路如下（其實這個思路適用于大部分問題）：

（1）分析自己產品的問題（上一期已經分析過）

（2）看看競品都是怎么做的

（3）結合自己產品的屬性、業務需求等因素進行優化

舉例開始

2.1 卡片樣式不夠精致

先看看我們的卡片：

?

上一期我們已經分析出這個排行榜卡片的問題：前三名的序號過于搶眼，且樣式不美觀。

接下來我們需要做的就是看看競品都是怎么處理的，因為看競品是我們做設計必須要經歷的一步，千萬不要憑空想，會浪費很多時間。

我找了幾個競品網站的排行榜卡片設計，部分截圖如下：

我們會發現競品的卡片前三名序號顏色都是統一的（當然有些網站也不是這樣的），雖然網易新聞官網的卡片用了紅色，但是為了避免過于刺眼，它沒有用色塊的形式，而是僅僅使數字加大變紅。

我們可以結合競品的優點來進行我們的卡片設計，最后得到下圖：

不過這只是自己主觀針對視覺問題來做的優化，我們解決了顏色花哨搶眼及標簽樣式繁瑣的問題，但實際工作中你還需要結合需求方的要求去進行調整，在這個過程中，溝通方式比較關鍵，恰當的溝通可以讓你和需求方成為共同解決問題的戰友，而不恰當的溝通方式也許會讓你們成為互相排斥的敵人，所以很多時候心態和處事方法更加重要。

2.2 圖標顏色花哨、風格陳舊

你也可以按照上面的步驟來進行優化，只不過說起來容易，真的想做得好還是需要經驗的沉淀、審美的提高，只有不斷地練習，才能做的得心應手。

由于工作內容不能拿出來分享，所以改版的圖標都是臨時在網上下載直接用的，大家可不能這樣做哦！

雖然是下載的圖標，但是基本的問題我們已經解決，例如視覺大小不一致，圖標顏色過于搶眼等等，如下圖：

優化前

優化后

如果是剛入行的朋友，建議可以先從模仿，借鑒開始，因為如果沒有經歷過大量的臨摹做基礎，直接就想創新，是很難做到的。

但也不能照搬抄襲，這個度一定要把控好。

3. 信息層級類問題

這一類問題為什么要單獨拿出來說呢？

因為層級區分不明顯是導致頁面沒有主次、混亂的最重要原因，我們在做設計的時候，一定要隨時提醒自己，哪個是最主要的，哪些是次要的，當什么都重要的時候，也許做出來的效果就是什么都不重要了。

說幾個例子：

3.1 布局層級問題

上圖讓我覺得重點是個人信息和5個圖標，但其實最重要的是課程導航，針對這個問題，我們可以：

（1）隱藏個人信息，將其收在導航欄頭像里面，鼠標經過時展示即可

（2）弱化圖標（例如：使用線性圖標或降低圖標顏色的飽和度等）

最后得到結果如下圖：

3.2 ?文字層級

我們的卡片標題與輔助信息對比不明顯，解決方案就是加大標題，弱化輔助信息，最后得到結果如下圖：

這個問題也屬于層級類問題，標題與輔助信息對比不明顯，解決方案就是加大標題，縮小輔助信息，最后得到結果如下圖：

以上就是今天分享的內容，希望在思路上能給大家一點啟發，菜心的說法不一定對，不過你可以用來參考，取其精華去其糟粕！

最后看一下改版后的首頁界面，如下圖：

對了，為什么上一期的柵格問題沒有說呢，因為柵格系統是一個很大的知識點，打算下一期單獨寫一篇來和大家分享。

未經原作者授權請勿轉載。

歡迎關注作者的微信公眾號：「菜心設計鋪」

「干貨超足的5個改版實戰經驗總結」

1. LOGO 改版：《揭秘LOGO設計流程！超詳細的騰訊云LOGO 改版記錄全過程》
2. 官網改版：《QQ官網全新蛻變！IM QQ 改版（第一期）設計總結》
3. Pinterest 改版：《改版實戰！聊聊PINTEREST官網再設計過程的經驗思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設計故事》
5. 提升數據：《騰訊ISUX丨通過優化，我們將QQ會員付費用戶數提高了5倍！》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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