兩個圖標(biāo)改了13版，我是如何逐步優(yōu)化的？

今天這個需求是直播間 pk 后，主播勝利與失敗的兩個狀態(tài)設(shè)計，過程經(jīng)歷了很多次修改，現(xiàn)在來分享一下自己的感受。

• 狀態(tài)還是需要有一些設(shè)計感的
• 結(jié)構(gòu)不能亂畫，要有基本邏輯在
• 顏色層級一定要分明
• 根據(jù)情緒設(shè)計形象
• 根據(jù)情緒選擇色系

狀態(tài)還是需要有一些設(shè)計感的

其實最開始我有點天真了，以為這種狀態(tài)直接畫個圈圈，寫個勝、敗兩個字，然后做下顏色區(qū)分就完事了：

但這根本行不通，看起來像是未完成的交互稿，一點設(shè)計感都沒有。

于是我開始思考如何增加設(shè)計感了。

結(jié)構(gòu)不能亂畫，要有基本邏輯在

如何增加設(shè)計感？

其實無非就是給這個狀態(tài)增加細(xì)節(jié)唄，尤其是這個勝利的狀態(tài)，我想到麥穗、翅膀等元素，最后選用了翅膀的元素，繪制了一個樣例如下：

但被說到這個結(jié)構(gòu)是亂畫的，哈哈，一下戳到了我的痛點，確實是胡亂畫的，各種圓圈沒什么邏輯。

于是后來仔細(xì)思考了一下，把圓圈分為三層：

• 一層底托
• 一層中間層放主形象
• 一層修飾層放在最外面

效果如下：

然后最中間放主形象，兩邊放翅膀，頂部放皇冠，最終效果如下：

這樣整體看起來結(jié)構(gòu)就是清晰的。

我們可以看下結(jié)構(gòu)清晰和不清晰的對比：

后面因為整體調(diào)性需要可愛一點，所以把翅膀改成了比較圓潤的造型：

效果還算不錯。

顏色層級一定要分明

其實這個點是我經(jīng)常和大家強(qiáng)調(diào)的，但有時候確實是當(dāng)局者迷，自己也容易犯這樣的錯，比如最開始的那個效果，很明顯中間暗部和周邊亮部沒有拉開層次：

所以在后面的取色上，會把中間暗部做的很深，形成鮮明對比：

這樣層次才會更加明顯，不然就會糊在一起。

根據(jù)情緒設(shè)計形象

最開始本來想用圓形來做失敗的狀態(tài)，但是后來發(fā)現(xiàn)有點太慘淡了，于是想著還是加點細(xì)節(jié)吧，怎么加呢？

這時候是需求方那邊給的一點靈感，說失敗不就是很頹的樣子，就拿把翅膀下沉和勝利形成反差不就可以了，我感覺說的挺有道理，于是就嘗試做了下：

確實還可以。

根據(jù)情緒選擇色系

本來想著勝利用紫色、失敗用藍(lán)綠色：

但是發(fā)現(xiàn)藍(lán)綠色多少還是會有點分散“勝利”的注意力，于是就在思考，失敗是表達(dá)一種負(fù)向的情緒，那是不是可以用灰一點的顏色？

于是嘗試了幾個不一樣的灰度：

最后選擇最后最后那個幾乎接近灰色的版本，干脆一點，對比強(qiáng)烈一點。

我們看下最終效果：

再看下過程稿吧：

調(diào)整了很對次，過程還是挺值得記錄的，回頭一看，很有成就感！

總結(jié)

以上就是這個小需求過程中總結(jié)的一些知識點，后面還會加入一些微動效，增加氛圍感。

希望可以給大家一點靈感和啟發(fā)。

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