2015-6-16 博博
藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源：優設網
世界看臉，網站看Banner，門面當然要漂亮，不過很多同學以為做Banner是門技術活兒，自己學藝不精做不了。如果你看了今天這篇文，就會明白，技術于Banner，就像刀法于人，雖有招式，但無內功支撐，久戰必敗。而這篇好文，就是Banner的內功修煉心法，按6個步驟來，速成可待。
資深交互設計師 ：團隊小伙伴問到這個問題，發了一封郵件分享自己的思路，順便貼過來。
適用前提：
所以，先擺脫一個錯誤的認識：banner僅僅是用來裝飾用的，僅僅是為了吸引人注意啥的想法。
所以，我們既然是非專業設計師，就要回歸到做banner的本源，為了達到以上效果，同時兼顧美觀、大方、好看。
大方和好看的banner未必需要高深的視覺技巧，和繁瑣的PS功能，但是要兼顧視覺的幾個原則，我稍后會列出。
這一步，和視覺、審美什么的都沒關系。
比如，半月談，我們要傳達的信息有：
以上就是我們要傳達的核心信息了。你也可以認為這就是一個BANNER，只是——看起來沒那么好看而已。
但是，我們發現信息還不夠，我們還想要傳達：
所以，我們把信息又放出來。現在我們有4類信息。
雖然我們有4類信息，但是優先級肯定不一樣的，所以對應到設計上，我們給它放的版塊的大小、顏色的突出是不一樣的。
也即你想引導用戶先看哪里，再看哪里，然后再做什么。
通常，用戶的閱讀從上到下，從左到右邊，所以一般重要的內容會放到左上角。
不過這個規則可以用醒目的圖片、刺眼的顏色輕易打破，但是我建議你不要輕易這么做，所有的圖片和顏色都要有意義，為什么要用這個圖片為什么要用這個顏色。
確保用戶一開始有視覺中心，如果用戶一眼不知道先看什么，那么這個banner就是失敗的。
有了視覺焦點后，你可以從視覺焦點引申開來，使用視覺里的親密性原則（把內容相近的地理位置靠近一些、對比原則等等），引導用戶從視覺焦點進而關注到其他細節、或者促使行動的東西。
既然我們要傳達品牌形象，請確保用色從我們的標準VI色盤中選擇，而不要隨便用。
記住，品牌傳達，重復性很重要。就像我們看到紅、黃、白配色會想到麥當勞，看到綠和黑就想到星巴克一樣。
（不要考慮太多設計技能，否則就陷入到：我不是專業的，所以我不會做設計上）
排版上，信息已經完整，優先級已經出來，無非就是把它變得好看一些而已。
讓banner好看的幾個要訣：
1. 對齊
很好辦吧，讓內容縱向、橫向都有一條線，可以對齊。要么居中，要么底部。盡量確保頁面上不要有一個元素，沒有任何元素和它能夠形成對齊的關系。
2. 親密
不要讓所有內容都沒有聚集地堆在一起，讓那些關系比較親密的內容聚合成一個區域，不要讓一個banner上的區域超過4個。
3. 簡單質感：
千萬不要加任何PS的濾鏡、陰影、能不漸變就不漸變，因為已經不流行了，不要盲目使用各種樣式。
4. 如果要用圖標，盡量選擇樣式統一，且能夠保持你的優先級次序的圖表。比如我們引導用戶先看左邊，再看右邊，結果你在右邊的圖標里選擇了一個血紅的，可能用戶的視線立馬被吸引過來了。
5. 不要讓字體超過3種。盡量用宋體、黑體、方正黑體，不要用什么魏碑體、行楷等，一看就比較山寨。
如果你不想做，其實上面也可以了。
想做的話，我們可以：
綜上所述，做banner有一大半的精力是梳理信息、設定優先級、設定用戶瀏覽次序，和PS的技能沒有太多關系，所以，每個人都可以去嘗試做好一張看似很有設計感，但是實際上又沒花什么精力的banner。
Banner設計武功秘笈：
