【 設計理論】詳細解析網頁Banner設計的心得技巧 - PS筆刷工廠PS筆刷工廠

詳細解析網頁Banner設計的心得技巧

這一次的教學是屬於設計理論領域中的設計理論的相關教學。

文章出處是來自新浪微博UDC的設計理論類文章，寫教學的作者是佚名，感謝佚名提供設計理論的實作教學。

教學大綱:

關於Banner的設計，相信已經有很多人都看過這方面經驗的分享了，我來公司也做過了一些Banner的設計，那在這其中通過不斷的學習、實踐積累了自己的一些小小經驗和方法，下面給大家淺淺的分享下我總結的Banner設計經驗。如有錯誤，儘管拍磚，小女子虛心請教學習

設計理論教學開始

關於Banner的設計，相信已經有很多人都看過這方面經驗的分享了，我來公司也做過了一些Banner的設計，那在這其中通過不斷的學習、實踐積累了自己的一些小小經驗和方法，下面給大家淺淺的分享下我總結的Banner設計經驗。如有錯誤，儘管拍磚，小女子虛心請教學習。

Banner設計其實是我們接觸互聯網工作后，最常見一種工作。那麼Banner到底是什麼呢?Banner的核心使命其實是吸引用戶關注，然後被點擊。他的主旨就是主題明確，突出關鍵內容，抓住用戶眼球。一個Banner他是由“背景、主視覺和標題文字”三部分組成，在我剛剛接到需求的時候，我首先分析他的重點詞、字，想要表達什麼，分析好了后可以在紙上畫下草稿，在大腦里有個大概的視覺效果，想法多的話可以畫幾版不一樣的，最後根據草稿定一個定稿，接下來就可以找素材着手做了。在做期間，還要注意整體的美觀，讓人看起來舒服。

下面從這三部分逐一給大家分享下。

一、背景

我們畫畫的同學可能都知道，一個畫面不可能都面面俱到，重點的需要細緻刻畫，有的一筆帶過即可。設計一個Banner有時候就像畫畫似的，首先要有大的環境，那Banner的背景就好比大環境，其實主要是起到襯托、烘托氣氛的作用。一個新需求過來，首先我們考慮要營造一個什麼樣的環境，什麼樣的氣氛，是歡快的、悲傷的、可愛的還是…比如過年，可能就用紅橙色，比如兒童類的，顏色上就要純一點，活潑點等等。

但是需要注意一點，背景不能太花，否則會影響整體的一個可讀識性，簡單，清晰即可。

二、主視覺元素

Banner中的主視覺要清楚，符合主題，元素不可太多，否則看起來跟人感覺就會亂。有的人在做時只要是有地，就全放滿，其實頁面適當的“留白”也是提升畫面品質的一個好方法。視覺元素不論是人物，還是其他，一定要清晰，在我們找素材的時候也要找像素質量高的，我一般會去站酷、昵圖網、花瓣或者直接google搜，不要太多。還有一點注意的是不可盜用他人的作品，頭像等等。大家都懂的：)

下面的這個Banner看起來就比較亂，東西太多，想表達的也太多，這時候需要用戶去花時間思考它想告訴我們什麼，而往往這時候用戶是不願意是思考的，一是畫面不知道他要表達什麼，二是整體上沒有吸引住用戶的眼睛，這種情況下這個Banner是做到比較失敗的。

三、標題文字

標題文字非常重要，是整個Banner的主題，重點文字一定要在背景中突出出來，不論用顏色對比、放大、變形設計還是即便做立體效果等等。(這裡我分享一個經驗，就是在頁面上新建一個黑色的圖層，樣式改成飽和度，整體上成黑白的效果后一眼就能看出來了)

這個Banner標題用了描邊和投影，從背景中出來了，但還是看起來不舒服，主要是他的文字有用曲線、斜線的方式，讓人不禁會順着字的排版順讀下去，他這裡面不同方向的斜線用的還比較多，這種方式看多了就會比較累，沒有形成統一。

這個Banner看起來比較清新，沒有過多的元素，但重點是文字，由於背景用的淺色，文字也用的淺色，用戶是很難看出來的，影響用戶的閱讀性。

最後總結幾點

1.畫面整體統一，顏色搭配的看起來舒服;

2.頁面元素要以組為單位;(如文字和文字之間的間距不要過大，讓人看起來是一組)

3.採用吸引力的用語，或者添加“火速參與”等刺激性的詞語按鈕等，讓用戶在最短的時間內有去點擊他的慾望。

4.主次對比分明，合理安排頁面布局;

5.輸出K數不宜過大，否則加載速度會慢;

6.最後最重要的一點是，前期工作一定要與需求方溝通好，要知道，在工作中，溝通是非常重要的一件事情。

以上是自己在平時工作中總結的一點點小經驗吧，希望對初學設計的同學來說有點幫助，還望大師們多多指點，我會虛心學習。有部分圖是從網上找的，在這裡借用下，如果侵犯您的權了，請告知下。謝謝。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析網頁Banner設計的心得技巧