手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

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

2017-4-26    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


寫在前面

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



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

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


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

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


舉些例子:

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

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


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

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


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

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


舉些例子:

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



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

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


放大處理

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

顏色突出

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


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

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


鋪滿整個畫面

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


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

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


起到視覺引導的作用

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

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



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

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


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

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

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

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


手繪

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


手工/攝影/三維建模

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


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

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


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

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


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

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

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


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

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




3/針對有數(shù)字元素的排版設(shè)計有哪些方向可選呢?

關(guān)鍵詞一:放大

我們做設(shè)計講求韻律和節(jié)奏感,所以畫面里的各個元素之間最好有大有?。惺栌忻埽猩钣袦\/有明有暗等的變化,畫面才會顯得比較耐看。


而數(shù)字相較于文字來說,由于筆畫少/形狀優(yōu)美的緣故,導致它也更具有記憶性更吸引眼球,所以我們常常將文案里的數(shù)字提取出來放大處理。

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

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

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

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



關(guān)鍵詞二:切割

我們在做設(shè)計的時候也經(jīng)常會用到一種破圖的手法,也就是說故意把完整的一個元素或圖形切割開,再按需要或美感重新組合,甚至丟棄一部分(也就是格式塔原理,缺失某一部分并不影響其閱讀性)。

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

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


關(guān)鍵詞三:切割后再重組

有時候完整的東西會顯得過于單調(diào),那么不妨試一下先把它切碎了,再組裝起來咯(其實跟前面的用實物組裝成一個數(shù)字形狀是一個道理)

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


關(guān)鍵詞四:疊加

有時直接打字會顯得有點單調(diào),但是做其他效果有比較費時或技術(shù)達不到做不出其他效果的時候,不妨試下給你的數(shù)字加個跟背景相似的圖案疊加效果咯。

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

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

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

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



關(guān)鍵詞五:拼接

在數(shù)字上拼接一些花草/液體/粉末等等效果,會顯得比較有視覺沖擊力或有代入感。

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


關(guān)鍵詞六:立體(模擬)

立體效果給人更有場景代入感,給人感覺是可以囊括更多信息的(你想象一下3D比2D多了一個維度,是不是感覺可展示的東西會更多一些?。?/span>

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

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


關(guān)鍵詞七:穿插錯疊

將數(shù)字與其他元素結(jié)合玩出一種前后交錯的感覺,可以使畫面更加生動和有層次感

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

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

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

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


關(guān)鍵詞八:變色或加背景色塊

想要讓自己突穎而出或與眾不同一點的話,就給它換個區(qū)別于背景色的互補色或?qū)Ρ壬?,給它加背景色塊也是一種方式。

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

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


藍藍設(shè)計m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔