2024-7-12 資深UI設(shè)計(jì)者
“Banner是每個(gè)UI設(shè)計(jì)師家常便飯的項(xiàng)目，聊聊banner的那些事。全文6635個(gè)字，閱讀時(shí)間16分鐘”。
banner翻譯成中文是橫幅或旗幟，為了體現(xiàn)產(chǎn)品的中心意旨，利用鮮明的內(nèi)容去表達(dá)最主要的情感思想或宣傳中心，從而給整個(gè)產(chǎn)品起到宣傳的效果。在互聯(lián)網(wǎng)時(shí)代，banner被廣泛應(yīng)用在pc網(wǎng)頁(yè)、app設(shè)計(jì)等互聯(lián)網(wǎng)平臺(tái)間，作為設(shè)計(jì)師做一張banner乃家常便飯，如何才能設(shè)計(jì)一張高質(zhì)量的banner呢？
創(chuàng)意新穎、風(fēng)格貼切的banner能第一時(shí)間吸引用戶眼球，有利于banner的觸達(dá)，帶來(lái)高效率的點(diǎn)擊，創(chuàng)造更高的價(jià)值。
關(guān)鍵詞：文藝、氣質(zhì)、素雅、安靜、格調(diào)
畫面大量的留白；色彩以高級(jí)灰為主，飽和度和純度低，明度高；字體多采用襯線體，標(biāo)題文案突出，輔助文案偏小，整體突出高級(jí)感；畫面點(diǎn)綴多采用精細(xì)的線條。 
關(guān)鍵詞：高冷、時(shí)尚、大氣、品質(zhì)
色彩多以黑白灰；文字清晰簡(jiǎn)潔內(nèi)容少；焦點(diǎn)主圖很大，突出表現(xiàn)細(xì)節(jié)；畫面精簡(jiǎn)，無(wú)點(diǎn)綴物。 
關(guān)鍵詞：傳統(tǒng)、中國(guó)風(fēng)、意境、韻律
畫面采用對(duì)稱式構(gòu)圖，文字排版有采用豎排；色彩上采用中國(guó)傳統(tǒng)顏色，采用物體的固有色，避免艷麗刺激的色彩；字體多采用書法字體，書法主要分為篆、隸、楷、行、草五種書體；圖形活用中國(guó)風(fēng)元素，剪紙、燈籠、折扇、祥云、梅花、水墨等作為輔助元素。 
關(guān)鍵詞：青春、活力、年輕、動(dòng)感、時(shí)尚
色彩飽和度和純度高；排版多樣性，視覺(jué)沖擊力強(qiáng)；運(yùn)用幾何圖形裝飾在產(chǎn)品、背景、氛圍裝飾上。 
關(guān)鍵詞：可愛(ài)、甜美、卡哇伊、Q、呆萌
色彩鮮亮透明，營(yíng)造軟萌可愛(ài)的感覺(jué)；字體采用少年字體、手寫字體、卡通字體；點(diǎn)綴元素多使用卡通小元素。 
關(guān)鍵詞：促銷、活動(dòng)、節(jié)日、熱鬧
畫面整體氛圍熱鬧，內(nèi)容飽滿，很少留白；色彩豐富，紅色、黃色、橙色、紫色偏多；主標(biāo)題文字偏大，字體剛硬，視覺(jué)沖擊力強(qiáng)，點(diǎn)綴元素有光效、舞臺(tái)、五彩的漸變、沖擊性的線條或多邊形等。 
關(guān)鍵詞：未來(lái)、科技
科技類banner，文字和背景圖非常具有科技感，畫面具有空間感；色彩以冷色調(diào)為主，常見(jiàn)有藍(lán)色、紫色、黑色；點(diǎn)綴元素有光效、金屬、線條、光點(diǎn)。 
關(guān)鍵詞：場(chǎng)景、趣味、手繪感、扁平
畫面具有故事性和趣味性；色彩扁平的配色，上色沒(méi)有高光和陰影；字體偏向年輕化，圓潤(rùn)、無(wú)襯線體字體；點(diǎn)綴元素以涂鴉的小裝飾為主。 
產(chǎn)品在用戶心中需要良好的正面形象，banner傳播對(duì)內(nèi)容需要進(jìn)行嚴(yán)格控制，把握好政治導(dǎo)向關(guān)、價(jià)值取向關(guān)和格調(diào)品味關(guān)。廣告內(nèi)容需真實(shí)準(zhǔn)確，不引起歧義。 
用戶體驗(yàn)產(chǎn)品需要有愉悅感，banner需呈現(xiàn)積極陽(yáng)光的正面情景，素材圖片傳達(dá)正向的情緒和氛圍。 
避免法律糾紛，圖片素材、文字等內(nèi)容應(yīng)該要有版權(quán)，banner中不使用來(lái)源不明的字體、圖片、視頻等素材。 
文案盡量簡(jiǎn)潔明了，用詞準(zhǔn)確、文案通順、語(yǔ)言生動(dòng)。用詞準(zhǔn)確是最基本要求，活動(dòng)、權(quán)益、業(yè)務(wù)表述文字內(nèi)容符合業(yè)務(wù)方需求，無(wú)錯(cuò)別字。文案通順、表述清晰，適合產(chǎn)品目標(biāo)群體閱讀與理解。語(yǔ)言生動(dòng)、精簡(jiǎn)、有吸引力，集中核心訴求點(diǎn)，亮點(diǎn)突出。
banner由多元素組成，banner內(nèi)在包含：色彩、構(gòu)圖、風(fēng)格等，外在包括文案、產(chǎn)品配圖、背景、點(diǎn)綴這幾個(gè)部分組成，設(shè)計(jì)過(guò)程通過(guò)拆分一步步執(zhí)行，思路清晰且效率高。
畫面中相關(guān)內(nèi)容遵循對(duì)齊原則，便于用戶視線快速瀏覽，接受重要信息。常見(jiàn)的對(duì)齊方式左對(duì)齊、右對(duì)齊、居中對(duì)齊，建議banner中只使用一種對(duì)齊方式，多種對(duì)齊方式用戶閱讀視線分散，增加用戶認(rèn)知成本。 
畫面內(nèi)容拆分為文字區(qū)、圖片區(qū)、氛圍區(qū)，相關(guān)內(nèi)容聚集在一個(gè)區(qū)域，其次聚焦一個(gè)視覺(jué)重點(diǎn)，弱化其他元素，視覺(jué)出現(xiàn)層級(jí)。 
根據(jù)產(chǎn)品頁(yè)面留出適當(dāng)?shù)陌踩吘啵ＷCbanner在適配過(guò)程中不會(huì)出現(xiàn)重要信息看不全的情況。排版時(shí)，元素之間需要留出空隙，畫面看起來(lái)有透氣感，減少用戶認(rèn)知信息的負(fù)擔(dān)。 
色彩、文字的種類不宜過(guò)多，點(diǎn)綴圖形運(yùn)用不合理，會(huì)分散讀者注意力，成為用戶閱讀的“噪音”。 
排版注意整體設(shè)計(jì)的一致性和連貫性，避免出現(xiàn)不同類型的視覺(jué)元素，使畫面出現(xiàn)跳躍。 
banner中重點(diǎn)信息加大與周圍元素間的視覺(jué)差異，通過(guò)顏色對(duì)比、字體的大小字重對(duì)比、構(gòu)成的面積對(duì)比等方式，以便于用戶快速獲取重點(diǎn)信息，豐富banner的視覺(jué)層級(jí)，吸引用戶。 
通過(guò)對(duì)畫面的平均分割保證畫面的平衡，對(duì)稱構(gòu)圖給人有力、穩(wěn)固的視覺(jué)感受。 
居中構(gòu)圖很好的突出主題，畫面中規(guī)中矩，活躍感較弱。用戶視覺(jué)焦點(diǎn)會(huì)聚集中心位置，視覺(jué)焦點(diǎn)需要重點(diǎn)刻畫，周圍元素弱化處理。 
左右構(gòu)圖分為2種，左文右圖、左圖右文。2種構(gòu)圖樣式，區(qū)別在于用戶的瀏覽過(guò)程中是先看文字還是先看圖片。
·當(dāng)配圖示意不明確時(shí)，建議使用左文右圖的排版。
配圖主要是根據(jù)文案內(nèi)容繪制的輔助圖形，用戶只看圖無(wú)法明確活動(dòng)內(nèi)容，建議采用左文右圖的板式。根據(jù)“F形”閱讀模式，瀏覽習(xí)慣往往從左向右從上往下，將文字信息放在左邊有助于用戶快速瀏覽，獲取重點(diǎn)信息。 
·當(dāng)配圖示意明確，圖比文字更加重要時(shí)，建議使用左圖右文的排版。
用戶根據(jù)圖片即可明白活動(dòng)內(nèi)容，運(yùn)營(yíng)或業(yè)務(wù)方希望有吸引力的活動(dòng)圖片獲取用戶的注意力。 
基于banner受限尺寸和高度，會(huì)衍生出一些構(gòu)圖方式，例如放射性構(gòu)圖、傾斜構(gòu)圖等。不規(guī)則的構(gòu)圖，設(shè)計(jì)上具有層次感，豐富的視覺(jué)呈現(xiàn)給人眼前一亮，更容易吸引用戶眼球。 
banner大多為左右排版，圖文比例4:6，接近黃金分割比例0.618，文案標(biāo)題比例約2:1。畫面中文案占比一定要大于配圖，用戶更關(guān)注是是內(nèi)容本身。 
暖色系主要由紅、黃、橙等構(gòu)成的色調(diào)。容喲聯(lián)想到陽(yáng)光、火焰、熱血等場(chǎng)景，給用戶積極、活潑、溫暖的感覺(jué)。暖色系色彩的飽和度越高，溫暖屬性越突出，用于電商活動(dòng)，渲染氣氛。 
冷色系主要由青、藍(lán)等構(gòu)成的色調(diào)。容易聯(lián)想到海洋、冰雪等場(chǎng)景，給用戶寒冷等感覺(jué)，適宜表現(xiàn)恬靜、低沉、嚴(yán)肅、理性的內(nèi)容，比如科技類產(chǎn)品。 
同色系又稱單色，這種色系的搭配在產(chǎn)品本身顏色比較統(tǒng)一的情況下，提取產(chǎn)品鄰近色，作為畫面的搭配色，讓整體畫面變得統(tǒng)一和諧。 
類似色相比同色系，它具有豐富性和可變化性，基于banner整體的主色調(diào)以后通過(guò)添加與主色相近的輔助色，是整個(gè)畫面變得豐富活躍起來(lái)，同時(shí)這些配色方式也相對(duì)容易。 
對(duì)比色系，色相環(huán)上相距120度-180度之間的2種顏色（180度則為互補(bǔ)色），對(duì)比色之間的搭配能夠給畫面帶來(lái)華麗、跳躍、濃郁的視覺(jué)美感，高純度、高明度、等面積的搭配，會(huì)產(chǎn)生強(qiáng)烈的刺激感，干擾用戶視覺(jué)體驗(yàn)。畫面中往往會(huì)考慮補(bǔ)色之間的面積比例、純度比例、明度比例、空間間隔的比例，平衡畫面之間的視覺(jué)感。 
除了基本的色系配色系外，還可以嘗試更多的配色風(fēng)格。畫面中有目的地運(yùn)用色彩元素，豐富畫面的色調(diào)。 
banner色彩需要考慮頁(yè)面統(tǒng)一性；banner尺寸較小，信息色彩不宜過(guò)多，2-3種即可。畫面主要由主色、輔色、點(diǎn)綴色組成，色彩的黃金法則60:30:10的法則，60%左右的主色、30%左右的輔助色、10%左右的點(diǎn)綴色。 
粗的黑體，具有官方嚴(yán)肅氣質(zhì)，自帶有力量感，視覺(jué)沖擊強(qiáng)烈，與速度線條、碎片、劃痕等設(shè)計(jì)手法十分搭配。細(xì)的黑體，具有年輕、簡(jiǎn)約、細(xì)致的感覺(jué)。無(wú)襯線體易讀性較強(qiáng)，常用于科技類banner中。 
襯線體裝飾性較強(qiáng)，給人帶來(lái)活潑、輕松的感覺(jué)。比較適用于文化、文藝、美食、女性、時(shí)尚等行業(yè)。 
具有趣味性和活潑感，適用于兒童、寵物類、休閑食品、家居等行業(yè)。 
有韻味和藝術(shù)感，視覺(jué)張力豐富，適用于中國(guó)風(fēng)、藝術(shù)感等畫面。硬筆書法字體：優(yōu)雅、有親切感，適合傳統(tǒng)、文化等畫面。 
考慮字體大小、字重、顏色。文案有主文案和副文案之分，需要有對(duì)比性。字體的顏色選擇需要考慮與背景色的搭配效果、banner主題間的關(guān)聯(lián)，選擇合適的顏色能凸顯文案。 
幾何圖形是banner設(shè)計(jì)中常見(jiàn)的輔助元素，它的多樣性和簡(jiǎn)約性設(shè)計(jì)師十分著迷。幾何圖形可以創(chuàng)作無(wú)線的可能，用戶對(duì)其有意無(wú)意地進(jìn)行自我詮釋。
圓形象征著圓滿、融合、自然、和諧、無(wú)窮，在設(shè)計(jì)中具有非常強(qiáng)的包容性，由于其自身的可拓展性，將圓形進(jìn)行拉伸、疊加、重復(fù)可獲取豐富的圖形。 
三角形具有方向感、變化感，它的銳利給以垂直、剛強(qiáng)、莊嚴(yán)、向上的感覺(jué)，其長(zhǎng)度有穿透感，象征崇高和無(wú)限。 
方形具有對(duì)稱、有序、平靜、專業(yè)屬性，給人穩(wěn)定安全統(tǒng)一感。
多邊形的形狀會(huì)給人帶來(lái)穩(wěn)重感，通過(guò)多邊形凸顯產(chǎn)品的尊貴感。
不規(guī)則的圖形營(yíng)造畫面的氛圍，突出主體元素，激發(fā)用戶點(diǎn)擊欲望。
流暢的線條給畫面帶來(lái)韻律感。
立體幾何載體讓整體畫面格調(diào)顯得品質(zhì)高。
展現(xiàn)商品質(zhì)感和工藝或者展示同商品不同狀態(tài)時(shí)，動(dòng)態(tài)banner比靜態(tài)banner點(diǎn)擊率高。呈現(xiàn)商品多樣性和系列感需要靜態(tài)廣告。
呈現(xiàn)出來(lái)的畫面鮮明地表達(dá)活動(dòng)主旨，文案內(nèi)容，可用性。
板式設(shè)計(jì)、配色、字體設(shè)計(jì)、風(fēng)格、插圖、點(diǎn)綴圖案以及動(dòng)效這些運(yùn)用是否合理。
整體復(fù)雜程度，后期banner修改和加工工作難度，可不可重復(fù)利用。
畫面主題是否突出，具有吸引力，刺激用戶點(diǎn)擊。
現(xiàn)實(shí)中多是單張banner圖，而互聯(lián)網(wǎng)產(chǎn)品中大多采用多張輪播banner。有限的屏幕內(nèi)采用多張輪播提高空間的利用率，其次用戶長(zhǎng)時(shí)間盯單一廣告會(huì)疲憊，輪播banner有利于吸引用戶注意，激發(fā)用戶探索欲望。 
電商產(chǎn)品用得比較多，全圓角矩形或不規(guī)則矩形，此類banner運(yùn)用在促銷活動(dòng)中，實(shí)效性特別強(qiáng)。 
運(yùn)營(yíng)強(qiáng)度較弱，banner在頁(yè)面權(quán)重較低的專題活動(dòng)會(huì)用到白底模版化banner。排版左文右圖，內(nèi)容由主標(biāo)題、副標(biāo)題和小插圖組成，例如支付寶首頁(yè)中間位置banner。
需要吸引用戶來(lái)參與運(yùn)營(yíng)活動(dòng)，可以采用懸浮圖標(biāo)的形式，吸引用戶的注意力，對(duì)頁(yè)面布局不產(chǎn)生影響。
用于產(chǎn)品中同一個(gè)功能模塊，多個(gè)不同入口，或者不同服務(wù)類型的商品入口。商城或者熱門板塊使用。包括：兩個(gè)入口、三個(gè)入口、四個(gè)入口、五個(gè)入口、六個(gè)入口。
banner在頁(yè)面中所承擔(dān)的責(zé)任是什么，活動(dòng)運(yùn)營(yíng)、功能區(qū)入口、系統(tǒng)公告、還是第三方廣告。
banner位置所承載內(nèi)容數(shù)量是多少，同時(shí)存在幾個(gè)內(nèi)容。
banner采用的是靜態(tài)banner還是輪播的方式。固定banner多久更換一次，輪播形式的banner，幾個(gè)banner輪播，輪播的速率是多少。
banner在頁(yè)面中與其他功能區(qū)相比，banner位所屬的信息層級(jí)是什么樣。
靜態(tài)banner。如果內(nèi)容中有一個(gè)非常重量級(jí)的，其他的都是差不多的不怎么重要的，可以考慮只將重量級(jí)內(nèi)容放在顯眼位置的Banner上，且靜態(tài)不輪播，其余內(nèi)容放在別的運(yùn)營(yíng)位里。
動(dòng)態(tài)輪播。輪播banner圖注意幀數(shù)不宜過(guò)多，加上輪播指示器，提示用戶banner的個(gè)數(shù)以及banner可以左右滑動(dòng)。
屏幕占比大的banner有更強(qiáng)的營(yíng)銷感和氛圍感，常見(jiàn)電商平臺(tái)的頂部banner。
屏幕占比小的banner會(huì)低調(diào)些，不會(huì)干擾用戶閱讀瀏覽頁(yè)面，例如金融類平臺(tái)。
保證產(chǎn)品啟動(dòng)加載時(shí)間和操作流暢，上傳廣告圖的大小建議在300kb以內(nèi)。
輸出的格式：JPG、PNG、JPEG、BMP、GIF。
通過(guò)收集和閱讀了大量的資料，結(jié)合自己的工作積累，寫了一篇banner設(shè)計(jì)知識(shí)總結(jié)。內(nèi)容比較多，涉及到banner設(shè)計(jì)的方方面面，單個(gè)知識(shí)點(diǎn)拿出來(lái)都能寫一篇短文。撰寫的過(guò)程中領(lǐng)悟到知識(shí)是需要自己不斷挖掘和總結(jié)，最后輸出并分享出來(lái)，才能真正成為自己的知識(shí)。關(guān)于banner設(shè)計(jì)的知識(shí)就分享到這里，歡迎留言糾正，感謝閱讀。
藍(lán)藍(lán)設(shè)計(jì)(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com