UI設(shè)計中最常見的Banner設(shè)計風(fēng)格

　　Banner圖我們經(jīng)常都能見到，就是我們常說的橫幅廣告，是網(wǎng)絡(luò)廣告的常見形式，在瀏覽各種網(wǎng)站時，我們都能發(fā)現(xiàn)它的身影。當(dāng)用戶點擊這些橫幅的時候，通?？梢蕴綇V告詳情的頁面，起著將用戶從網(wǎng)站主頁引導(dǎo)到子頁的功能。因此，要想成功做到指引的效果，banner的設(shè)計就顯得十分重要，設(shè)計師們就在設(shè)計Banner的時候就會有很多需要考慮到的因素。以下UI設(shè)計中最常見的幾種Banner設(shè)計風(fēng)格。
 

　　無論什么設(shè)計我們都需要在設(shè)計之前確定banner設(shè)計的風(fēng)格。剛開始可能很難找準(zhǔn)需要的banner風(fēng)格，首先跟大家分享banner的設(shè)計思路。對設(shè)計風(fēng)格一定要了解，要學(xué)會分析作品風(fēng)格，分析風(fēng)格找到合適的設(shè)計方向是至關(guān)重要的，它決定了整個設(shè)計的走向。
 

　　了解需求：做任何設(shè)計的前提就是了解設(shè)計需求，只有弄明白需求方到底想要什么，我們才能少改幾次稿。我剛參加工作的時候就沒少吃這方面的虧，那時候剛進(jìn)公司臉皮薄，別人讓干啥就立馬擼起袖子打開ps開始工作。不明白的地方也不敢問太多，怕打擾別人工作。事實證明，這種想法是多么大的錯誤。需要了解的需求大體可以總結(jié)成以下幾個方面。
 

　　確定文案信息、素材、尺寸大小、投放的平臺
 

　　一般接到設(shè)計需求的時候，文案和素材都是需求方確定好的。但是有的需求方會說，你可以根據(jù)你的設(shè)計需要，稍微改動文案信息。本人親身經(jīng)歷，這句話真的是一個火坑。文案的不確定會嚴(yán)重的影響設(shè)計進(jìn)程，你改得好，改得他們滿意還好，如果不滿意，那就面臨著重做。除此之外，有時候我們可以從文案和素材里獲取設(shè)計靈感，確定設(shè)計的風(fēng)格。
 

　　確定banner是為了實現(xiàn)什么目的而設(shè)計
 

　　比如需求方給到的文案信息是「金秋助學(xué)」，我們需要了解金秋助學(xué)的對象是誰，是大學(xué)生還是小學(xué)生，這會影響風(fēng)格的確定和設(shè)計元素的選擇。還要了解需求方想要這個banner起到什么作用，是想讓更多人參與到這個活動中來，還是想通過這個banner讓更多人了解某某企業(yè)熱心于慈善事業(yè)，提升企業(yè)的知名度和好感，只有確定這些才能確定你的設(shè)計風(fēng)格。
 

　　詢問需求方的建議
 

　　需求方在把這個需求給到我們之前，可能心里就已經(jīng)有了自己的想法，如果我們在設(shè)計之前可以了解到，會很大的降低改稿次數(shù)。而且我們主動詢問他們的意見，會讓他們感覺到自己的想法受到了尊重，以后交流起來也會更愉快。但是有時候他們的想法用語言可能描述不出來，這個時候我們可以用「情緒板」的方法，快速的獲取視覺信息。
 

　　確定設(shè)計時間
 

　　如果時間很緊張，就盡量選擇不易出錯的板式和風(fēng)格，如果時間比較充裕，可以細(xì)細(xì)打磨設(shè)計作品，多嘗試一些以前沒嘗試過的表現(xiàn)方法。
 

　　根據(jù)需求確定設(shè)計風(fēng)格：banner的設(shè)計風(fēng)格可以拿人作為比對很好理解。有人外向，有人內(nèi)斂。而這兩種人的穿衣風(fēng)格和舉止言行在生活中也是不盡相同。和人難過會用哭表現(xiàn)，高興會用笑表現(xiàn)一樣，不同的設(shè)計風(fēng)格，也對應(yīng)不同的表現(xiàn)方法。下面我們主要分析不同的設(shè)計風(fēng)格對應(yīng)的表現(xiàn)方法，及給大家安利的一些可參考使用的素材，覺得有用的同學(xué)別忘了做下筆記。
 

　　關(guān)鍵詞：文藝、氣質(zhì)、素雅、安靜
 

　　最明顯的特點就是留白，大量的留白。
 

　　字體多采用宋體這樣的襯線體，除一級標(biāo)題字號略大些，其他的文案都非常小，給人精致的感覺。
 

　　色彩以灰白色系為主，其他的色彩飽和度和純度低，明度高。
 

　　這類banner多運用在茶、棉麻制品、以簡潔為特色的家居用品上。
 

　　點綴物多用細(xì)線條。
 

　　關(guān)鍵詞：高冷、時尚
 

　　高冷的banner就和高冷的你一樣，最大的特點就是話少，一般就幾個字。
 

　　用色大多采用黑白灰。
 

　　素材圖一般都很大，突出細(xì)節(jié)，大牌的東西對自己的品質(zhì)還是很有信心的，所以他們會放大放大再放大他們的細(xì)節(jié)，唯恐你們看不到。
 

　　很少運用點綴物，直接一張產(chǎn)品細(xì)節(jié)放大圖，放幾個字，就是這么自信。
 

　　關(guān)鍵詞：傳統(tǒng)、中國風(fēng)、意境
 

　　字體采用書法字體，文案多用豎形排版、從右向左的順序，因為古人是這樣寫字的。
 

　　可以選用的素材有印章，中國山水畫，墨跡，扇面，剪紙，園林窗格，古紋樣，祥云，京劇，卷軸等等。
 

　　 關(guān)鍵詞：青春、活力、年輕
 

　　很突出的一點就是模特都很年輕很有活力。
 

　　色彩的飽和度和純度比較高。
 

　　排版你可以隨便玩。
 

　　關(guān)鍵詞：可愛、甜美
 

　　可愛風(fēng)格的banner最突出的特點就是他的字體，多采用少年字體、手寫字體、卡通字體。
 

　　點綴物多使用卡通小元素，以手繪和矢量圖為主，比如星星，云朵，短線條等。
 

　　色彩上多使用暖色調(diào)，營造軟萌的感覺。
 

　　關(guān)鍵詞：節(jié)日、促銷、熱鬧
 

　　色彩豐富，紅、黃、紫偏多，畫面飽滿，很少留白。
 

　　主標(biāo)題很大，多用剛硬，棱角，夸張有視覺沖擊力的字體。
 

　　可以用到的點綴物有光效、鞭炮、舞臺、燈光、五彩的漸變、沖擊性的線條和多邊形等。
 

　　關(guān)鍵詞：未來、科技
 

　　科技類的banner概括來講就兩個要點，科技感的文字+科技感的背景圖，高級一點的還包括科技感的小點綴。
 

　　用色以藍(lán)，黑色，紫等冷色調(diào)為主，畫面給人硬朗，空間感，速度和力量的感覺。
 

　　可以用到的點綴物有光效、金屬效果、線條、光點，宇宙等。
 

　　關(guān)鍵詞：嚴(yán)肅、規(guī)矩、黨
 

　　因為我們偉大的毛主席喜歡紅色，所以黨喜歡紅色，所以政府類的網(wǎng)站也好，banner也好，大多都會采用紅色，點綴色多為藍(lán)色黃色，字體多選用端莊古典的襯線體或中國風(fēng)味濃厚的毛筆字體。
 

　　可以用的背景和點綴物有紅旗、城市背景、黨徽、英雄雕塑、故宮、石獅子等。
 

　關(guān)鍵詞：手繪風(fēng)
 

　　把手繪風(fēng)格單拿出來是因為它真的很好用，而且很常用到。
 

　　手繪風(fēng)格可以用在文案上。產(chǎn)品本身也可以用手繪的形式，如上圖左一，簡單的幾筆就讓整個畫面一眼就能看懂，而且充滿樂趣。手繪風(fēng)格用的最多的是點綴物，通過不同手繪風(fēng)格的點綴物營造不一樣的氛圍。
 

　　設(shè)計的風(fēng)格該是多種多樣的，要是被局限住了很難設(shè)計出滿意的作品，但是，0基礎(chǔ)UI設(shè)計小白肯定是要從了解UI設(shè)計基礎(chǔ)知識開始的，一步一步練習(xí)形成自己的設(shè)計思路，最后熟能生巧，快速設(shè)計出符合需求的設(shè)計作品。就像一些UI設(shè)計中常見的Banner設(shè)計風(fēng)格，其他設(shè)計風(fēng)格一定是熟知才能更好的傳達(dá)信息。