沒想到這個設計這么簡單，效果卻這么好！

菜心的第252篇原創(chuàng)

2021年的第31篇

距離2021年小目標100篇原創(chuàng)還剩69

今天這個案例，在技術層面沒多復雜，但是上線效果卻非常不錯，所以就寫出來和大家分享一下。

 先兩三句說下背景 

下圖是一個新人進入才會看到模塊，領取“限免卡“：

需求方提過來的訴求就是希望這個模塊的點擊率能夠有所提升，現(xiàn)在很多用戶沒有發(fā)現(xiàn)這個模塊，希望能夠在原有框架不變的情況下進行優(yōu)化提升。

咔咔我就是一頓分析 

在原有框架，那能改的就是只有按鈕這個切圖：

不過之前的這個按鈕確實優(yōu)化空間比較大，因為沒有看出是按鈕，也沒有領卡的感覺，所以這個按鈕的優(yōu)化就是這次改版的突破口了。

有方向了，咱就開整

從視覺層面，這個按鈕的優(yōu)化空間非常大，所以很容易發(fā)揮，我們只需要把按鈕做的更像按鈕，然后再有一點領取卡片的感覺就可以了，大概做了以下三種效果：

最后選擇第二種方式，我們看下前后的效果對比：

在表意上和按鈕精致度上都有很大的提高。

這里當時有個小細節(jié)，就是需求方希望卡片上的文字也能夠看清楚，比如七天限免卡，既然想讓這幾個字能看清楚，那黃色卡片上就不能放淺色了，不然明度太接近，會導致文字看不清，所以把文字調整成暗色系的，而且還要足夠暗，否則也還是看不清，前后對比如下：

做到這，按鈕的優(yōu)化就完成了。

如果只是靜態(tài)的，效果肯定還是不明顯

如果只是做到這，那估計上線效果也不會好太多，所以打算還是融入一些簡單的動效，來吸引注意力，于是加了一個卡片從按鈕彈出的效果：

但是有個文字，因為我們的動效只播放一次，如果動效的時間很短，那用戶幾乎也是看不到的，于是我又想辦法加長這個動效。

思來想去，要不就彈出來之后，來回抖動以下吧，所以最后的效果就變成了這樣：

這個延展性還蠻高的，如果需求方還嫌動效時間不夠，那咱們就多抖動一會，即可搞定。

兄弟們，我來簡單總結一下子

本來我以為這是一個沒什么值得說的需求，但后來發(fā)現(xiàn)上線效果反饋還不錯，所以就拿出來和大家分享一下。

過程中只做了兩個點，一個是讓識別度提高上來，比如按鈕像按鈕，卡片像卡片，卡片上的信息要清晰可見，另外一個點就是利用動效來吸引用戶的注意力，就這么簡單。

從技術層面來講沒有多大難度，但卻給產品起到了一定的助力作用，這也會讓自己去思考，有一些場景，設計不用太復雜，只要合適、并且沒有基礎性問題，就很ok了，千萬別過度設計，么么扔！

重要提示

工作的前五年，一定要注重這件事，不然以后肯定會迷茫后悔：