做改版設(shè)計(jì)大體思路很簡(jiǎn)單膜眠，只需要做好兩件事：發(fā)現(xiàn)問(wèn)題與解決問(wèn)題。
上一期我們做了改版設(shè)計(jì)的第一步──發(fā)現(xiàn)問(wèn)題，今天我們來(lái)做第二步──解決問(wèn)題环戈！
經(jīng)過(guò)分析，我發(fā)現(xiàn)一個(gè)很有趣的事情澎灸，就是上期提出的問(wèn)題與問(wèn)題之間還有很多其他維度的共性院塞，于是我再次分類，得到以下三種類型：
1性昭、規(guī)范統(tǒng)一類問(wèn)題
例如：文字拦止、顏色、控件糜颠、圖標(biāo)有太多的不統(tǒng)一汹族、不規(guī)范。
2其兴、設(shè)計(jì)風(fēng)格類問(wèn)題
例如：圖標(biāo)顶瞒、卡片風(fēng)格陳舊。
3元旬、信息層級(jí)類問(wèn)題
例如：信息布局層級(jí)榴徐、卡片文字層級(jí)守问。
我們來(lái)分別講解，并給出相應(yīng)的解決思路箕速。
1.規(guī)范統(tǒng)一類問(wèn)題
圖標(biāo)線條粗細(xì)不一致酪碘，文字各種大小，顏色各種亂用盐茎，其實(shí)這些都是規(guī)范沒(méi)有制定好的原因兴垦，也就是我所講的規(guī)范類問(wèn)題。
如何解決呢字柠？
我們需要先定好一個(gè)前期規(guī)范探越，然后隨著場(chǎng)景的增加，再不斷調(diào)整規(guī)范窑业，但是千萬(wàn)不能在沒(méi)有任何指導(dǎo)原則钦幔、目標(biāo)的情況下就開(kāi)始天馬行空的設(shè)計(jì)，那樣最后一定會(huì)亂作一團(tuán)常柄，尤其是在團(tuán)隊(duì)合作的情況下鲤氢。
舉幾個(gè)例子（上期的問(wèn)題）：
1.1.文字各種大小、顏色
如下圖：
我們需要拉通所有場(chǎng)景西潘，來(lái)進(jìn)行分類卷玉，最后給出一個(gè)前期規(guī)范：
比如定義一級(jí)標(biāo)題的文字為24pt，二級(jí)標(biāo)題的文字為18pt喷市，正文為14pt相种，輔助性文字為12pt。
文字的顏色品姓，重要型文字使用#333333寝并，普通型文字使用#666666，輔助型文字使用#999999腹备。
對(duì)于文字的加粗問(wèn)題衬潦，整個(gè)頁(yè)面，要么主標(biāo)題都加粗植酥，要么都不加粗镀岛，如果有些加粗有些又不加粗，別人也許就會(huì)覺(jué)得我們做的不夠嚴(yán)謹(jǐn)（當(dāng)然特殊場(chǎng)景除外）惧互！
1.2.圖標(biāo)線條粗細(xì)不一致
這是一個(gè)非常不應(yīng)該發(fā)生的錯(cuò)誤哎媚，在具體設(shè)計(jì)執(zhí)行前，需要將描邊粗細(xì)的規(guī)范提前制定好喊儡，例如統(tǒng)一為2px拨与。
如下圖：
1.3.顏色亂用
顏色也需要我們輸出前期的基礎(chǔ)規(guī)范，考慮好他們的使用場(chǎng)景艾猜，以免在設(shè)計(jì)的時(shí)候胡亂用色买喧，使最后產(chǎn)出的頁(yè)面雜亂無(wú)章捻悯。
比如主色、輔助色淤毛、灰度色等等今缚。
以前有寫過(guò)一篇關(guān)于規(guī)范的模板，有需要的可以去看看低淡，這里就不具體展示了姓言。
網(wǎng)址如下：核桃App界面設(shè)計(jì)及設(shè)計(jì)規(guī)范
1.4.控件樣式不統(tǒng)一
明明是一個(gè)控件，卻要用兩種樣式蔗蹋。
我們需要擇優(yōu)做好一個(gè)何荚，然后放進(jìn)控件庫(kù)中，等到需要的時(shí)候直接調(diào)取猪杭。
通過(guò)上面幾個(gè)例子餐塘，大家會(huì)發(fā)現(xiàn)，如果前期規(guī)范沒(méi)有做好鋪墊皂吮，后面的設(shè)計(jì)就會(huì)很難把控戒傻，尤其是當(dāng)頁(yè)面越來(lái)越多的時(shí)候。
2.設(shè)計(jì)風(fēng)格類問(wèn)題
這一類問(wèn)題都發(fā)生在具體設(shè)計(jì)的時(shí)候蜂筹，
如何解決呢需纳？
我的解決思路如下（其實(shí)這個(gè)思路適用于大部分問(wèn)題）：
（1）分析自己產(chǎn)品的問(wèn)題（上一期已經(jīng)分析過(guò)）
（2）看看競(jìng)品都是怎么做的
（3）結(jié)合自己產(chǎn)品的屬性、業(yè)務(wù)需求等因素進(jìn)行優(yōu)化
舉例開(kāi)始
2.1 卡片樣式不夠精致
先看看我們的卡片：
上一期我們已經(jīng)分析出這個(gè)排行榜卡片的問(wèn)題：前三名的序號(hào)過(guò)于搶眼狂票，且樣式不美觀候齿。
接下來(lái)我們需要做的就是看看競(jìng)品都是怎么處理的熙暴，因?yàn)榭锤?jìng)品是我們做設(shè)計(jì)必須要經(jīng)歷的一步闺属，千萬(wàn)不要憑空想，會(huì)浪費(fèi)很多時(shí)間周霉。
我找了幾個(gè)競(jìng)品網(wǎng)站的排行榜卡片設(shè)計(jì)掂器，部分截圖如下：
我們會(huì)發(fā)現(xiàn)競(jìng)品的卡片前三名序號(hào)顏色都是統(tǒng)一的（當(dāng)然有些網(wǎng)站也不是這樣的），雖然網(wǎng)易新聞官網(wǎng)的卡片用了紅色俱箱，但是為了避免過(guò)于刺眼国瓮，它沒(méi)有用色塊的形式，而是僅僅使數(shù)字加大變紅狞谱。
我們可以結(jié)合競(jìng)品的優(yōu)點(diǎn)來(lái)進(jìn)行我們的卡片設(shè)計(jì)乃摹，最后得到下圖：
不過(guò)這只是自己主觀針對(duì)視覺(jué)問(wèn)題來(lái)做的優(yōu)化，我們解決了顏色花哨搶眼及標(biāo)簽樣式繁瑣的問(wèn)題跟衅，但實(shí)際工作中你還需要結(jié)合需求方的要求去進(jìn)行調(diào)整孵睬，在這個(gè)過(guò)程中，溝通方式比較關(guān)鍵伶跷，恰當(dāng)?shù)臏贤梢宰屇愫托枨蠓匠蔀楣餐鉀Q問(wèn)題的戰(zhàn)友掰读，而不恰當(dāng)?shù)臏贤ǚ绞揭苍S會(huì)讓你們成為互相排斥的敵人秘狞，所以很多時(shí)候心態(tài)和處事方法更加重要。
2.2 圖標(biāo)顏色花哨蹈集、風(fēng)格陳舊
你也可以按照上面的步驟來(lái)進(jìn)行優(yōu)化烁试，只不過(guò)說(shuō)起來(lái)容易，真的想做得好還是需要經(jīng)驗(yàn)的沉淀拢肆、審美的提高减响，只有不斷地練習(xí)，才能做的得心應(yīng)手郭怪。
由于工作內(nèi)容不能拿出來(lái)分享辩蛋，所以改版的圖標(biāo)都是臨時(shí)在網(wǎng)上下載直接用的，大家可不能這樣做哦移盆！
雖然是下載的圖標(biāo)悼院，但是基本的問(wèn)題我們已經(jīng)解決，例如視覺(jué)大小不一致咒循，圖標(biāo)顏色過(guò)于搶眼等等据途，如下圖：
優(yōu)化前
優(yōu)化后
如果是剛?cè)胄械呐笥眩ㄗh可以先從模仿叙甸，借鑒開(kāi)始颖医，因?yàn)槿绻麤](méi)有經(jīng)歷過(guò)大量的臨摹做基礎(chǔ)，直接就想創(chuàng)新裆蒸，是很難做到的熔萧。
但也不能照搬抄襲，這個(gè)度一定要把控好僚祷。
3.信息層級(jí)類問(wèn)題
這一類問(wèn)題為什么要單獨(dú)拿出來(lái)說(shuō)呢佛致？
因?yàn)閷蛹?jí)區(qū)分不明顯是導(dǎo)致頁(yè)面沒(méi)有主次、混亂的最重要原因辙谜，我們?cè)谧鲈O(shè)計(jì)的時(shí)候俺榆，一定要隨時(shí)提醒自己，哪個(gè)是最主要的装哆，哪些是次要的罐脊，當(dāng)什么都重要的時(shí)候，也許做出來(lái)的效果就是什么都不重要了蜕琴。
說(shuō)幾個(gè)例子：
3.1 布局層級(jí)問(wèn)題
上圖讓我覺(jué)得重點(diǎn)是個(gè)人信息和5個(gè)圖標(biāo)萍桌，但其實(shí)最重要的是課程導(dǎo)航，針對(duì)這個(gè)問(wèn)題凌简，我們可以：
（1）隱藏個(gè)人信息上炎，將其收在導(dǎo)航欄頭像里面，鼠標(biāo)經(jīng)過(guò)時(shí)展示即可
（2）弱化圖標(biāo)（例如：使用線性圖標(biāo)或降低圖標(biāo)顏色的飽和度等）
最后得到結(jié)果如下圖：
3.2 ?文字層級(jí)
我們的卡片標(biāo)題與輔助信息對(duì)比不明顯号醉，解決方案就是加大標(biāo)題反症，弱化輔助信息辛块，最后得到結(jié)果如下圖：
這個(gè)問(wèn)題也屬于層級(jí)類問(wèn)題，標(biāo)題與輔助信息對(duì)比不明顯铅碍，解決方案就是加大標(biāo)題润绵，縮小輔助信息，最后得到結(jié)果如下圖：
以上就是今天分享的內(nèi)容胞谈，希望在思路上能給大家一點(diǎn)啟發(fā)尘盼，菜心的說(shuō)法不一定對(duì)，不過(guò)你可以用來(lái)參考烦绳，取其精華去其糟粕卿捎！
最后看一下改版后的首頁(yè)界面，如下圖：
對(duì)了径密，為什么上一期的柵格問(wèn)題沒(méi)有說(shuō)呢午阵，因?yàn)闁鸥裣到y(tǒng)是一個(gè)很大的知識(shí)點(diǎn)，打算下一期單獨(dú)寫一篇來(lái)和大家分享享扔，這回不留言我也寫底桂，哈哈！（你要非留言我也不攔你）
更多干貨歡迎關(guān)注我的微信公眾號(hào)惧眠，具體請(qǐng)查看簡(jiǎn)書主頁(yè)籽懦。
