3招搞定數(shù)字元素在Banner及專題頁設(shè)計中的運用！

2017/4/28 11:34:28來源：站酷網(wǎng)

做電商設(shè)計的人都知道，我們的文案里時常會出現(xiàn)類似“滿200減100”／“5折”／“30%OFF”／“39元起”“4月1號預(yù)售”之類的帶有數(shù)字利益點的文案，而數(shù)字比文字也顯得更加直觀更加吸引眼球，所以對于該如何合理利用這些數(shù)字做設(shè)計也是很值得研究的一個話題，接下來我就帶大家看看咯！～

1／我們常見的會用到數(shù)字元素的設(shè)計有哪些呢？

比如我們的很多電商Banner或?qū)ｎ}頁面里，經(jīng)常會出現(xiàn)活動日期／搶購時間／商品價格／位數(shù)排名／剩余或已售個數(shù)／步驟序號／完成進(jìn)度等跟數(shù)字有關(guān)的元素，而這些數(shù)字他所要傳遞的信息重要性和作用都是不一樣的，所以在設(shè)計上也會有所差異。

（1）在頭部banner部分的數(shù)字

像活動日期／價格折扣信息／搶購時間／件數(shù)等等常出現(xiàn)于頭部Banner部分，一般來說這個數(shù)字信息如果很重要，那么都會做得特別大特別突出，如果不是那么重要的信息，那么就會在大小或色彩等上面對其進(jìn)行弱化處理。

舉些例子：

還有優(yōu)惠券的一些設(shè)，基本都是將數(shù)額顯示的大大的：

（2）出現(xiàn)在樓層部分的數(shù)字

像搶購時間／倒計時／位數(shù)排名／步驟序號等等這些往往是出現(xiàn)在頁面樓層里，很少出現(xiàn)在頭部Banner部分（以前給大家說過專題主要有頭部Banner以及很多樓層組成大家還記得嗎？），同時他們的位置／大?。梢姸鹊膹娙醯纫卜磻?yīng)了他們在這畫面里的重要程度。

舉些例子：

2／有數(shù)字的設(shè)計需求可以從哪幾個角度去思考呢？

（1）從功能的角度出發(fā)，無非就是強調(diào)這個數(shù)字信息的重要性／使整體畫面風(fēng)格統(tǒng)一／增強畫面視覺沖擊力／引導(dǎo)用戶閱讀等作用，我們往往會對其做以下處理：

放大處理

顏色突出

將數(shù)字作為一個形狀容器利用起來：

鋪滿整個畫面

保持風(fēng)格統(tǒng)一，它既是主要信息，也是畫面里不可或缺的一個主題元素而存在

起到視覺引導(dǎo)的作用

（2）從表現(xiàn)形式的角度出發(fā)

根據(jù)不同的設(shè)計需要，肯定是會有很多不同的表現(xiàn)形式的，比如3D建模／手繪／手工／攝影／手寫毛筆字等，同時他們的質(zhì)感和排版形式也會大不一樣：

比如雙12/雙11/618等比較大的電商節(jié)日，既要體現(xiàn)出綜合賣貨的性質(zhì)，也要重點體現(xiàn)節(jié)日時間，所以這種數(shù)字常作為骨架出現(xiàn)，以鼠繪或建模的方式，用各種商品圖來堆砌而成。

手繪

手工／攝影／三維建模

這種手寫毛筆字效果，給人感覺非常瀟灑有緊迫感，適合促銷倒計時活動設(shè)計

而且排版多以居中的形式為主：

偶爾也有左對齊或右對齊的方式：

（3）從裝飾的角度出發(fā)，數(shù)字可以作為點綴元素出現(xiàn)其實在很多時候，無論是文字還是數(shù)字等都只是一種點綴元素而已，最常見的就是在海報設(shè)計里的運用咯,比如像我之前給我拍的那些模特做的一些照片海報，可以說里面的所有元素都只是點綴而已，里面我寫的一些日期數(shù)字其實都只是點綴而已，對我來說并不太重要，因為我的重點是模特展示以及我對整體畫面情緒的表達(dá)。