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

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

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

3. 顏色層級(jí)一定要分明

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

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

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

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

但這根本行不通，看起來(lái)像是未完成的交互稿，一點(diǎn)設(shè)計(jì)感都沒(méi)有。

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

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

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

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

但被說(shuō)到這個(gè)結(jié)構(gòu)是亂畫(huà)的，哈哈，一下戳到了我的痛點(diǎn)，確實(shí)是胡亂畫(huà)的，各種圓圈沒(méi)什么邏輯。

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

一層底托

一層中間層放主形象

一層修飾層放在最外面

效果如下：

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

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

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

后面因?yàn)檎w調(diào)性需要可愛(ài)一點(diǎn)，所以把翅膀改成了比較圓潤(rùn)的造型：

效果還算不錯(cuò)。

3. 顏色層級(jí)一定要分明

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

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

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

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

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

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

確實(shí)還可以。

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

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

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

于是嘗試了幾個(gè)不一樣的灰度：

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

我們看下最終效果：

再看下過(guò)程稿吧：

調(diào)整了很對(duì)次，過(guò)程還是挺值得記錄的，回頭一看，很有成就感，說(shuō)下我對(duì)設(shè)計(jì)工具軟件的看法，目前oursketch.com和figma等軟件確實(shí)不錯(cuò)，但是國(guó)產(chǎn)軟件目前發(fā)展比較快，目前還是比較推薦國(guó)產(chǎn)軟件。

總結(jié)

以上就是這個(gè)小需求過(guò)程中總結(jié)的一些知識(shí)點(diǎn)，后面還會(huì)加入一些微動(dòng)效，增加氛圍感。

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