2021-4-9 高勁
今天這個需求是直播間 pk 后，主播勝利與失敗的兩個狀態設計，過程經歷了很多次修改，現在來分享一下自己的感受。
其實最開始我有點天真了，以為這種狀態直接畫個圈圈，寫個勝、敗兩個字，然后做下顏色區分就完事了：
但這根本行不通，看起來像是未完成的交互稿，一點設計感都沒有。
于是我開始思考如何增加設計感了。
如何增加設計感？
其實無非就是給這個狀態增加細節唄，尤其是這個勝利的狀態，我想到麥穗、翅膀等元素，最后選用了翅膀的元素，繪制了一個樣例如下：
但被說到這個結構是亂畫的，哈哈，一下戳到了我的痛點，確實是胡亂畫的，各種圓圈沒什么邏輯。
于是后來仔細思考了一下，把圓圈分為三層：
效果如下：
然后最中間放主形象，兩邊放翅膀，頂部放皇冠，最終效果如下：
這樣整體看起來結構就是清晰的。
我們可以看下結構清晰和不清晰的對比：
后面因為整體調性需要可愛一點，所以把翅膀改成了比較圓潤的造型：
效果還算不錯。
其實這個點是我經常和大家強調的，但有時候確實是當局者迷，自己也容易犯這樣的錯，比如最開始的那個效果，很明顯中間暗部和周邊亮部沒有拉開層次：
所以在后面的取色上，會把中間暗部做的很深，形成鮮明對比：
這樣層次才會更加明顯，不然就會糊在一起。
最開始本來想用圓形來做失敗的狀態，但是后來發現有點太慘淡了，于是想著還是加點細節吧，怎么加呢？
這時候是需求方那邊給的一點靈感，說失敗不就是很頹的樣子，就拿把翅膀下沉和勝利形成反差不就可以了，我感覺說的挺有道理，于是就嘗試做了下：
確實還可以。
本來想著勝利用紫色、失敗用藍綠色：
但是發現藍綠色多少還是會有點分散“勝利”的注意力，于是就在思考，失敗是表達一種負向的情緒，那是不是可以用灰一點的顏色？
于是嘗試了幾個不一樣的灰度：
最后選擇最后最后那個幾乎接近灰色的版本，干脆一點，對比強烈一點。
我們看下最終效果：
再看下過程稿吧：
調整了很對次，過程還是挺值得記錄的，回頭一看，很有成就感！
以上就是這個小需求過程中總結的一些知識點，后面還會加入一些微動效，增加氛圍感。
希望可以給大家一點靈感和啟發。
文章來源：優設網 作者：菜心設計鋪
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務