今天要講的是一個能量榜排行榜入口需求，主要的要求就是希望和普通廣告條的形式能有所區(qū)分。

分享一下過程中的感悟點。

1. 區(qū)別于普通廣告條的形式

普通廣告條，大家應(yīng)該都懂，比如下面這種形式：

于是為了做區(qū)分，我稍微把形象和元素做出一點破界的形式，效果如下：

沒想到還是我太天真，還是被說有點像平時廣告條，于是我就從排行榜想到了領(lǐng)獎臺，于是就在右側(cè)延伸出了一個臺子，然后把頭像放在了臺在上面，讓人有一種站在講臺上的感覺：

大家都覺得形式還可以。

2. 為了轉(zhuǎn)化率還是要提高點擊感

本來已經(jīng)定稿了，但是后來策略有變，頭像框之前是不能單獨點擊的，只有一整個大的點擊區(qū)域，但為了給每位主播增加曝光，于是把頭像變得可點擊，那問題就來了，頭像入口和排行榜入口離的太近，很容易誤操作：

并且頭像的點擊區(qū)域也太小了。

所以思來想去，決定把結(jié)構(gòu)重新布局，左側(cè)放頭像，右側(cè)放排行榜入口：

整體為了增強吸引力，還是希望把形象用上，右側(cè)放一個盒子，然后形象從盒子出來，大概效果如下：

后來為了更加有點擊感，在盒子上面加了一個按鈕：

這樣可點擊的感覺就更明確了。

3. 對于一些視覺表現(xiàn)的細(xì)節(jié)調(diào)整

其實現(xiàn)在來看，也沒什么大問題，但是嚴(yán)格來說，其實右側(cè)的形象表情還是稍微有點復(fù)雜了，因為整體感覺都是大面塊的，比較簡潔的風(fēng)格，復(fù)雜的和簡潔的放在一起，難免會有點違和：

于是就思考怎么把表情變得簡化一些。

倒是有一個好方法，就是把形象下移，收到盒子里去，這樣會適當(dāng)減少復(fù)雜度：

但這個大笑的表情如果沒有整個嘴巴，著實有點難受，后來就直接去掉了嘴巴，只留下可愛的眼睛，然后把盒子加高一點，使整體更加飽滿：

嗯，這樣整體的一致性就統(tǒng)一多了，最后再加點增強氛圍的修飾物：

大功告成。

總結(jié)

除了上面介紹的這些內(nèi)容，其實整個設(shè)計js.design里面最重要的一個原則就是增強形式感，比如

• 整體分成兩段，每一段的顏色和形狀都是不同的。

• 運用形象和形狀的搭配融合，使整體更加生動。

• 利用一些破出界限的方式，比如 123 數(shù)字在頭像左上角的破出，形象從盒子里的破出。

這些都是增加形式感的方式，希望后面可以積累更多手段和技巧。

這又是一個經(jīng)歷無數(shù)過程稿的需求：

每次出圖，基本都是無數(shù)次的推翻和打磨細(xì)節(jié)，痛苦并快樂著！