哈嘍各位小伙伴，我們應(yīng)該都要有概念，即使是一個(gè)很小的需求，也可以結(jié)合平時(shí)的理論只是，讓一個(gè)小需求精益求精！ 千萬不要小瞧“小需求”哦！   今天來分享一個(gè)小案例吧~

• 1.一個(gè)按鈕需求
• 2.融入品牌基因
• 3.對(duì)顏色的選擇
• 4.字體的融合度
• 5.一些細(xì)節(jié)調(diào)整
• 6.配合適當(dāng)動(dòng)效

1.一個(gè)按鈕需求 

今天的需求是做一個(gè)發(fā)布按鈕，并且是懸浮在頁面右下角的那種： 

其實(shí)這是一個(gè)很好發(fā)揮視覺價(jià)值的觸點(diǎn)，所以我們必須要有決心把它做的不一樣一點(diǎn)，之前不能像下面這種直接一個(gè)加號(hào)，或者直接寫上發(fā)布兩個(gè)字： 

畢竟我們是動(dòng)漫平臺(tái)，怎么也得有點(diǎn)趣味性。  

2.融入品牌基因 

什么樣的設(shè)計(jì)會(huì)比較普通，比如一說發(fā)布，我們就畫一只筆，這種就比較普通，像小面這種： 

想不一樣，最直接的方法就是從自己的品牌基因出發(fā)，比如自己的吉祥物。 所以這一次打算把發(fā)布與吉祥物相互結(jié)合，讓吉祥物指著發(fā)帖兩個(gè)字，大致效果如下： 

這樣的思路就可以產(chǎn)品一定的差異化，并且挺有趣味性。 但是如果是這樣就會(huì)感覺不太協(xié)調(diào)，所以可以把形象漏出的比例適當(dāng)調(diào)整，比如只展示一半，效果如下: 

這樣就和諧多了。  

3.對(duì)于顏色的選擇

對(duì)于顏色，我們一共有三種選擇。 首先橙色和黑色： 

這種肯定不太行，顯的太臟了。 其次是黑色和白色： 

雖然單獨(dú)看起來還可以，但是對(duì)于一個(gè)發(fā)布按鈕，有點(diǎn)弱。 最后就是橙色和白色： 

看起來還，所以就先選這個(gè)了。  

4.字體的融合度 

如果想讓整體變的更好，還可以突破的地方就是字體，我們可以不用這種普通字體，我們選一個(gè)有點(diǎn)設(shè)計(jì)感的： 

但是還是感覺有點(diǎn)問題，比如我們的形象圓潤(rùn)可愛，但是字體有點(diǎn)尖銳。 干脆自己重新修一下算了，讓整體圓潤(rùn)飽滿一些，不斷的調(diào)整細(xì)節(jié)，得到如下結(jié)果： 

還算比較滿意。  

5.一些細(xì)節(jié)調(diào)整

做到這，大體已經(jīng)差不多了，但是看久了會(huì)發(fā)現(xiàn)有一點(diǎn)問題，就是感覺整體有點(diǎn)平，像貼在屏幕上的紙片，畢竟這是一個(gè)按鈕，所以希望還是有點(diǎn)懸浮的感覺，所以可以在形象后面以及按鈕圓圈后面加一點(diǎn)投影，對(duì)比效果如下： 

這樣就會(huì)有點(diǎn)鼓起來的感覺，會(huì)讓人有點(diǎn)擊感。  

6.配合適當(dāng)?shù)膭?dòng)效

好了，錦上添花的事來了，大家都知道，動(dòng)效可以增加一定的趣味性，所以如果給按鈕增加一點(diǎn)動(dòng)效，那肯定是更好的事。 動(dòng)效不用太復(fù)雜，形象從下面出來，指著發(fā)布，然后發(fā)布簡(jiǎn)單彈出，就可以了，效果如下: 

當(dāng)然，這里的動(dòng)效只會(huì)動(dòng)一次，不會(huì)反復(fù)動(dòng)，不然太影響用戶閱讀了。  

總結(jié)

以上就是這個(gè)小需求的所有思考過程了，其實(shí)就是把整體拆分成很多小點(diǎn)，然后一個(gè)一個(gè)擊破，如果那個(gè)小細(xì)節(jié)都做的還可以，那整體肯定就不會(huì)差。 我們平時(shí)讀過很多知識(shí)點(diǎn)，不能讀完就完事了，一定要實(shí)踐，實(shí)踐過的才是你的，不然就是紙上談兵了。

本期內(nèi)容就到這里啦，希望對(duì)各位小伙伴有所幫助~

轉(zhuǎn)載聲明：本文來源于網(wǎng)絡(luò)，不作任何商業(yè)用途