3招搞定數字元素在Banner及專題頁設計中的運用!

      作者:做設計的面條
      分類: 觀點/經驗
      2017-04-28
      7524

      寫在前面做電商設計的人都知道,我們的文案里時常會出現類似“滿200減100”/“5折”/“30%OFF”/“39元起”“4月1號預售”之類的帶有數字利益點的文案,而數字比文字也顯得更加直觀更加吸引眼球,所以對于該如何合理利用這些數字做設計也是很值得研究的一個話題,接下來我就帶大家看看咯!~一、我們常見的會用到數字元素的設計有哪些呢?比如我們的很多電商Banner或專題頁面里,經常會出現活動日期/搶購時間/商品價格/位數排名/剩余或已售個數/步驟序號/完成進度等跟數字有關的元素,而這些數字他所要傳遞的信息重要性和作用

      寫在前面

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

      一、我們常見的會用到數字元素的設計有哪些呢?

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

      1、在頭部banner部分的數字

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

      舉些例子:

      頭部banner部分的數字.jpg

      頭部banner部分的數字.jpg

      還有優惠券的一些設,基本都是將數額顯示的大大的:

      頭部banner部分的數字 (2).jpg

      2、出現在樓層部分的數字

      像搶購時間/倒計時/位數排名/步驟序號等等這些往往是出現在頁面樓層里,很少出現在頭部Banner部分(以前給大家說過專題主要有頭部Banner以及很多樓層組成大家還記得嗎?),同時他們的位置/大小/可見度的強弱等也反應了他們在這畫面里的重要程度。

      舉些例子:

      頭部banner部分的數字.jpg

      二、有數字的設計需求可以從哪幾個角度去思考呢?

      1、從功能的角度出發

      無非就是強調這個數字信息的重要性/使整體畫面風格統一/增強畫面視覺沖擊力/引導用戶閱讀等作用,我們往往會對其做以下處理:

      出現在樓層部分的數字.png

      放大處理

      出現在樓層部分的數字.png

      顏色突出

      出現在樓層部分的數字.jpg

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

      出現在樓層部分的數字.jpg

      鋪滿整個畫面

      出現在樓層部分的數字.png

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

      起到視覺引導的作用

      出現在樓層部分的數字.jpg

      2、從表現形式的角度出發

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

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

      出現在樓層部分的數字.png

      出現在樓層部分的數字.png

      手繪.jpg

      手繪

      手繪.png

      手工/攝影/三維建模

      手工/攝影/三維建模.jpg

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

      手工/攝影/三維建模.png

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

      手工/攝影/三維建模.png

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

      手工/攝影/三維建模.jpg

      從裝飾的角度出發.jpg

      3、從裝飾的角度出發

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

      從裝飾的角度出發.jpg

      三、針對有數字元素的排版設計有哪些方向可選呢?

      關鍵詞一:放大

      我們做設計講求韻律和節奏感,所以畫面里的各個元素之間最好有大有小/有疏有密/有深有淺/有明有暗等的變化,畫面才會顯得比較耐看。

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

      放大.png

      放大.jpg

      放大.jpg

      放大.jpg


      關鍵詞二:切割

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

      放大.jpg

      切割.jpg


      關鍵詞三:切割后再重組

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

      切割后再重組.jpg

      關鍵詞四:疊加

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

      疊加.jpg

      疊加.jpg

      疊加.jpg

      疊加.jpg

      關鍵詞五:拼接

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

      拼接.jpg

      關鍵詞六:立體(模擬)

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

      立體(模擬).jpg

      立體(模擬).jpg

      關鍵詞七:穿插錯疊

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

      穿插錯疊.jpg

      穿插錯疊.jpg

      穿插錯疊.jpg

      穿插錯疊.jpg


      -end-



      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 欧美日韩精品一区二区在线视频 | 国内精品视频一区二区三区八戒| 午夜在线视频一区二区三区| 亚洲啪啪综合AV一区| aⅴ一区二区三区无卡无码| 日韩视频一区二区三区| 无码人妻久久一区二区三区蜜桃| 久久久国产精品亚洲一区| 日本一区二区三区精品国产| 日本韩国一区二区三区| 久久伊人精品一区二区三区| 亚洲国产成人一区二区精品区 | 国产视频一区二区在线播放| 日韩精品一区二区三区老鸦窝| 中文字幕一精品亚洲无线一区| 精品一区二区三区高清免费观看| 色综合视频一区二区三区| 亚洲午夜一区二区电影院| 精品国产日韩亚洲一区| 国产MD视频一区二区三区| 色婷婷亚洲一区二区三区| 无码av中文一区二区三区桃花岛| 伊人久久大香线蕉AV一区二区| 国产91久久精品一区二区| 麻豆亚洲av熟女国产一区二| 99精品一区二区免费视频 | 国产在线第一区二区三区| 九九无码人妻一区二区三区| 精品国产一区二区三区www| 国产精品一区不卡| 国内精品视频一区二区八戒| 日韩精品人妻一区二区三区四区 | 亚洲.国产.欧美一区二区三区| 中文精品一区二区三区四区| 欧美激情国产精品视频一区二区| 婷婷亚洲综合一区二区| 一区二区三区在线免费观看视频| 精品视频一区二区三区| 无码精品视频一区二区三区| 日本在线视频一区二区| 精品女同一区二区三区在线 |