淺談Banner應(yīng)用&交互設(shè)計(jì)

2024-7-12    資深UI設(shè)計(jì)者

 
 

“Banner是每個(gè)UI設(shè)計(jì)師家常便飯的項(xiàng)目,聊聊banner的那些事。全文6635個(gè)字,閱讀時(shí)間16分鐘”。

 

undefined         

前言

 

banner翻譯成中文是橫幅或旗幟,為了體現(xiàn)產(chǎn)品的中心意旨,利用鮮明的內(nèi)容去表達(dá)最主要的情感思想或宣傳中心,從而給整個(gè)產(chǎn)品起到宣傳的效果。在互聯(lián)網(wǎng)時(shí)代,banner被廣泛應(yīng)用在pc網(wǎng)頁、app設(shè)計(jì)等互聯(lián)網(wǎng)平臺間,作為設(shè)計(jì)師做一張banner乃家常便飯,如何才能設(shè)計(jì)一張高質(zhì)量的banner呢?

 

一、設(shè)計(jì)風(fēng)格

 

創(chuàng)意新穎、風(fēng)格貼切的banner能第一時(shí)間吸引用戶眼球,有利于banner的觸達(dá),帶來高效率的點(diǎn)擊,創(chuàng)造更高的價(jià)值。

 

1. 素雅文藝型

關(guān)鍵詞:文藝、氣質(zhì)、素雅、安靜、格調(diào)

畫面大量的留白;色彩以高級灰為主,飽和度和純度低,明度高;字體多采用襯線體,標(biāo)題文案突出,輔助文案偏小,整體突出高級感;畫面點(diǎn)綴多采用精細(xì)的線條。     undefined         

 

2. 時(shí)尚高冷型

關(guān)鍵詞:高冷、時(shí)尚、大氣、品質(zhì)

色彩多以黑白灰;文字清晰簡潔內(nèi)容少;焦點(diǎn)主圖很大,突出表現(xiàn)細(xì)節(jié);畫面精簡,無點(diǎn)綴物。       undefined         

 

3. 傳統(tǒng)國風(fēng)型

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

畫面采用對稱式構(gòu)圖,文字排版有采用豎排;色彩上采用中國傳統(tǒng)顏色,采用物體的固有色,避免艷麗刺激的色彩;字體多采用書法字體,書法主要分為篆、隸、楷、行、草五種書體;圖形活用中國風(fēng)元素,剪紙、燈籠、折扇、祥云、梅花、水墨等作為輔助元素。       undefined         

4.  青春活力型

關(guān)鍵詞:青春、活力、年輕、動感、時(shí)尚

色彩飽和度和純度高;排版多樣性,視覺沖擊力強(qiáng);運(yùn)用幾何圖形裝飾在產(chǎn)品、背景、氛圍裝飾上。       undefined         

 

5. 可愛甜美型

關(guān)鍵詞:可愛、甜美、卡哇伊、Q、呆萌

色彩鮮亮透明,營造軟萌可愛的感覺;字體采用少年字體、手寫字體、卡通字體;點(diǎn)綴元素多使用卡通小元素。    undefined         

 

6. 促銷活動型

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

畫面整體氛圍熱鬧,內(nèi)容飽滿,很少留白;色彩豐富,紅色、黃色、橙色、紫色偏多;主標(biāo)題文字偏大,字體剛硬,視覺沖擊力強(qiáng),點(diǎn)綴元素有光效、舞臺、五彩的漸變、沖擊性的線條或多邊形等。       undefined         

 

7. 未來科技型

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

科技類banner,文字和背景圖非常具有科技感,畫面具有空間感;色彩以冷色調(diào)為主,常見有藍(lán)色、紫色、黑色;點(diǎn)綴元素有光效、金屬、線條、光點(diǎn)。      undefined         

 

8. 手繪風(fēng)格

關(guān)鍵詞:場景、趣味、手繪感、扁平

畫面具有故事性和趣味性;色彩扁平的配色,上色沒有高光和陰影;字體偏向年輕化,圓潤、無襯線體字體;點(diǎn)綴元素以涂鴉的小裝飾為主。       undefined         

 

二、設(shè)計(jì)流程

 

1. 創(chuàng)意監(jiān)控

1.1 創(chuàng)意監(jiān)控

產(chǎn)品在用戶心中需要良好的正面形象,banner傳播對內(nèi)容需要進(jìn)行嚴(yán)格控制,把握好政治導(dǎo)向關(guān)、價(jià)值取向關(guān)和格調(diào)品味關(guān)。廣告內(nèi)容需真實(shí)準(zhǔn)確,不引起歧義。      undefined         

 

1.2 情景約束

用戶體驗(yàn)產(chǎn)品需要有愉悅感,banner需呈現(xiàn)積極陽光的正面情景,素材圖片傳達(dá)正向的情緒和氛圍。       undefined         

 

1.3 版權(quán)約束

避免法律糾紛,圖片素材、文字等內(nèi)容應(yīng)該要有版權(quán),banner中不使用來源不明的字體、圖片、視頻等素材。      undefined         

 

 

2. 前期溝通

2.1 確定文案

文案盡量簡潔明了,用詞準(zhǔn)確、文案通順、語言生動。用詞準(zhǔn)確是最基本要求,活動、權(quán)益、業(yè)務(wù)表述文字內(nèi)容符合業(yè)務(wù)方需求,無錯(cuò)別字。文案通順、表述清晰,適合產(chǎn)品目標(biāo)群體閱讀與理解。語言生動、精簡、有吸引力,集中核心訴求點(diǎn),亮點(diǎn)突出。

       undefined       

 

 

3. 設(shè)計(jì)執(zhí)行

3.1 板式

3.1.1排版結(jié)構(gòu)

banner由多元素組成,banner內(nèi)在包含:色彩、構(gòu)圖、風(fēng)格等,外在包括文案、產(chǎn)品配圖、背景、點(diǎn)綴這幾個(gè)部分組成,設(shè)計(jì)過程通過拆分一步步執(zhí)行,思路清晰且效率高。

 

3.1.2構(gòu)圖方式

對齊構(gòu)圖

畫面中相關(guān)內(nèi)容遵循對齊原則,便于用戶視線快速瀏覽,接受重要信息。常見的對齊方式左對齊、右對齊、居中對齊,建議banner中只使用一種對齊方式,多種對齊方式用戶閱讀視線分散,增加用戶認(rèn)知成本。       undefined         

 

聚攏構(gòu)圖

畫面內(nèi)容拆分為文字區(qū)、圖片區(qū)、氛圍區(qū),相關(guān)內(nèi)容聚集在一個(gè)區(qū)域,其次聚焦一個(gè)視覺重點(diǎn),弱化其他元素,視覺出現(xiàn)層級。      undefined         

 

留白構(gòu)圖

根據(jù)產(chǎn)品頁面留出適當(dāng)?shù)陌踩吘啵WCbanner在適配過程中不會出現(xiàn)重要信息看不全的情況。排版時(shí),元素之間需要留出空隙,畫面看起來有透氣感,減少用戶認(rèn)知信息的負(fù)擔(dān)。       undefined         

 

降噪構(gòu)圖

色彩、文字的種類不宜過多,點(diǎn)綴圖形運(yùn)用不合理,會分散讀者注意力,成為用戶閱讀的“噪音”。      undefined         

 

重復(fù)構(gòu)圖

排版注意整體設(shè)計(jì)的一致性和連貫性,避免出現(xiàn)不同類型的視覺元素,使畫面出現(xiàn)跳躍。       undefined         

 

對比構(gòu)圖

banner中重點(diǎn)信息加大與周圍元素間的視覺差異,通過顏色對比、字體的大小字重對比、構(gòu)成的面積對比等方式,以便于用戶快速獲取重點(diǎn)信息,豐富banner的視覺層級,吸引用戶。       undefined         

 

3.1.3 構(gòu)圖樣式

對稱構(gòu)圖

通過對畫面的平均分割保證畫面的平衡,對稱構(gòu)圖給人有力、穩(wěn)固的視覺感受。       undefined         

 

居中構(gòu)圖

居中構(gòu)圖很好的突出主題,畫面中規(guī)中矩,活躍感較弱。用戶視覺焦點(diǎn)會聚集中心位置,視覺焦點(diǎn)需要重點(diǎn)刻畫,周圍元素弱化處理。       undefined         

 

左右構(gòu)圖

左右構(gòu)圖分為2種,左文右圖、左圖右文。2種構(gòu)圖樣式,區(qū)別在于用戶的瀏覽過程中是先看文字還是先看圖片。

 

·當(dāng)配圖示意不明確時(shí),建議使用左文右圖的排版。

配圖主要是根據(jù)文案內(nèi)容繪制的輔助圖形,用戶只看圖無法明確活動內(nèi)容,建議采用左文右圖的板式。根據(jù)“F形”閱讀模式,瀏覽習(xí)慣往往從左向右從上往下,將文字信息放在左邊有助于用戶快速瀏覽,獲取重點(diǎn)信息。       undefined         

 

·當(dāng)配圖示意明確,圖比文字更加重要時(shí),建議使用左圖右文的排版。

用戶根據(jù)圖片即可明白活動內(nèi)容,運(yùn)營或業(yè)務(wù)方希望有吸引力的活動圖片獲取用戶的注意力。       undefined         

 

衍生構(gòu)圖

基于banner受限尺寸和高度,會衍生出一些構(gòu)圖方式,例如放射性構(gòu)圖、傾斜構(gòu)圖等。不規(guī)則的構(gòu)圖,設(shè)計(jì)上具有層次感,豐富的視覺呈現(xiàn)給人眼前一亮,更容易吸引用戶眼球。       undefined         

 

3.1.4構(gòu)成比例

banner大多為左右排版,圖文比例4:6,接近黃金分割比例0.618,文案標(biāo)題比例約2:1。畫面中文案占比一定要大于配圖,用戶更關(guān)注是是內(nèi)容本身。      undefined         

 

3.2 配色

3.2.1 色彩體系

暖色系

暖色系主要由紅、黃、橙等構(gòu)成的色調(diào)。容喲聯(lián)想到陽光、火焰、熱血等場景,給用戶積極、活潑、溫暖的感覺。暖色系色彩的飽和度越高,溫暖屬性越突出,用于電商活動,渲染氣氛。      undefined         

 

冷色系

冷色系主要由青、藍(lán)等構(gòu)成的色調(diào)。容易聯(lián)想到海洋、冰雪等場景,給用戶寒冷等感覺,適宜表現(xiàn)恬靜、低沉、嚴(yán)肅、理性的內(nèi)容,比如科技類產(chǎn)品。       undefined         

 

同色系

同色系又稱單色,這種色系的搭配在產(chǎn)品本身顏色比較統(tǒng)一的情況下,提取產(chǎn)品鄰近色,作為畫面的搭配色,讓整體畫面變得統(tǒng)一和諧。       undefined         

 

類似色系

類似色相比同色系,它具有豐富性和可變化性,基于banner整體的主色調(diào)以后通過添加與主色相近的輔助色,是整個(gè)畫面變得豐富活躍起來,同時(shí)這些配色方式也相對容易。       undefined         

 

對比色系

對比色系,色相環(huán)上相距120度-180度之間的2種顏色(180度則為互補(bǔ)色),對比色之間的搭配能夠給畫面帶來華麗、跳躍、濃郁的視覺美感,高純度、高明度、等面積的搭配,會產(chǎn)生強(qiáng)烈的刺激感,干擾用戶視覺體驗(yàn)。畫面中往往會考慮補(bǔ)色之間的面積比例、純度比例、明度比例、空間間隔的比例,平衡畫面之間的視覺感。      undefined         

 

創(chuàng)新配色

除了基本的色系配色系外,還可以嘗試更多的配色風(fēng)格。畫面中有目的地運(yùn)用色彩元素,豐富畫面的色調(diào)。       undefined         

 

3.2.2 色彩比例

banner色彩需要考慮頁面統(tǒng)一性;banner尺寸較小,信息色彩不宜過多,2-3種即可。畫面主要由主色、輔色、點(diǎn)綴色組成,色彩的黃金法則60:30:10的法則,60%左右的主色、30%左右的輔助色、10%左右的點(diǎn)綴色。       undefined         

 

3.3 字體

3.3.1 字體類型

無襯線體

粗的黑體,具有官方嚴(yán)肅氣質(zhì),自帶有力量感,視覺沖擊強(qiáng)烈,與速度線條、碎片、劃痕等設(shè)計(jì)手法十分搭配。細(xì)的黑體,具有年輕、簡約、細(xì)致的感覺。無襯線體易讀性較強(qiáng),常用于科技類banner中。       undefined         

 

襯線體

襯線體裝飾性較強(qiáng),給人帶來活潑、輕松的感覺。比較適用于文化、文藝、美食、女性、時(shí)尚等行業(yè)。       undefined         

 

圓體/卡通字體

具有趣味性和活潑感,適用于兒童、寵物類、休閑食品、家居等行業(yè)。       undefined         

 

書法體

有韻味和藝術(shù)感,視覺張力豐富,適用于中國風(fēng)、藝術(shù)感等畫面。硬筆書法字體:優(yōu)雅、有親切感,適合傳統(tǒng)、文化等畫面。       undefined         

 

3.3.2 字體樣式

考慮字體大小、字重、顏色。文案有主文案和副文案之分,需要有對比性。字體的顏色選擇需要考慮與背景色的搭配效果、banner主題間的關(guān)聯(lián),選擇合適的顏色能凸顯文案。       undefined         

         

 

3.4 輔助圖形

3.4.1 幾何圖形

幾何圖形是banner設(shè)計(jì)中常見的輔助元素,它的多樣性和簡約性設(shè)計(jì)師十分著迷。幾何圖形可以創(chuàng)作無線的可能,用戶對其有意無意地進(jìn)行自我詮釋。

 

圓形

圓形象征著圓滿、融合、自然、和諧、無窮,在設(shè)計(jì)中具有非常強(qiáng)的包容性,由于其自身的可拓展性,將圓形進(jìn)行拉伸、疊加、重復(fù)可獲取豐富的圖形。       undefined         

 

三角形

三角形具有方向感、變化感,它的銳利給以垂直、剛強(qiáng)、莊嚴(yán)、向上的感覺,其長度有穿透感,象征崇高和無限。       undefined

方形

方形具有對稱、有序、平靜、專業(yè)屬性,給人穩(wěn)定安全統(tǒng)一感。

多邊形

多邊形的形狀會給人帶來穩(wěn)重感,通過多邊形凸顯產(chǎn)品的尊貴感。

不規(guī)則圖形

不規(guī)則的圖形營造畫面的氛圍,突出主體元素,激發(fā)用戶點(diǎn)擊欲望。

3.4.2流暢的線條

流暢的線條給畫面帶來韻律感。

3.4.3 立體幾何圖

立體幾何載體讓整體畫面格調(diào)顯得品質(zhì)高。

 

3.5 動效

展現(xiàn)商品質(zhì)感和工藝或者展示同商品不同狀態(tài)時(shí),動態(tài)banner比靜態(tài)banner點(diǎn)擊率高。呈現(xiàn)商品多樣性和系列感需要靜態(tài)廣告。

 

4 審核       undefined         

4.1 傳達(dá)

呈現(xiàn)出來的畫面鮮明地表達(dá)活動主旨,文案內(nèi)容,可用性。

4.2 美感

板式設(shè)計(jì)、配色、字體設(shè)計(jì)、風(fēng)格、插圖、點(diǎn)綴圖案以及動效這些運(yùn)用是否合理。

4.3 效率

整體復(fù)雜程度,后期banner修改和加工工作難度,可不可重復(fù)利用。

4.4 創(chuàng)意

畫面主題是否突出,具有吸引力,刺激用戶點(diǎn)擊。

 

 

三. 設(shè)計(jì)應(yīng)用

 

3.1 輪播banner

現(xiàn)實(shí)中多是單張banner圖,而互聯(lián)網(wǎng)產(chǎn)品中大多采用多張輪播banner。有限的屏幕內(nèi)采用多張輪播提高空間的利用率,其次用戶長時(shí)間盯單一廣告會疲憊,輪播banner有利于吸引用戶注意,激發(fā)用戶探索欲望。      undefined

 

3.2 膠囊banner

電商產(chǎn)品用得比較多,全圓角矩形或不規(guī)則矩形,此類banner運(yùn)用在促銷活動中,實(shí)效性特別強(qiáng)。  

 

3.3 白底banner

運(yùn)營強(qiáng)度較弱,banner在頁面權(quán)重較低的專題活動會用到白底模版化banner。排版左文右圖,內(nèi)容由主標(biāo)題、副標(biāo)題和小插圖組成,例如支付寶首頁中間位置banner。

        

 

3.4 懸浮banner

需要吸引用戶來參與運(yùn)營活動,可以采用懸浮圖標(biāo)的形式,吸引用戶的注意力,對頁面布局不產(chǎn)生影響。

        

 

3.5 廣告組合

用于產(chǎn)品中同一個(gè)功能模塊,多個(gè)不同入口,或者不同服務(wù)類型的商品入口。商城或者熱門板塊使用。包括:兩個(gè)入口、三個(gè)入口、四個(gè)入口、五個(gè)入口、六個(gè)入口。

         

 

四、交互設(shè)計(jì)

 

1. 交互需求

        

1.1 功能

banner在頁面中所承擔(dān)的責(zé)任是什么,活動運(yùn)營、功能區(qū)入口、系統(tǒng)公告、還是第三方廣告。

 

1.2 數(shù)量

banner位置所承載內(nèi)容數(shù)量是多少,同時(shí)存在幾個(gè)內(nèi)容。

 

1.3 頻率

banner采用的是靜態(tài)banner還是輪播的方式。固定banner多久更換一次,輪播形式的banner,幾個(gè)banner輪播,輪播的速率是多少。

 

1.4 層級

banner在頁面中與其他功能區(qū)相比,banner位所屬的信息層級是什么樣。

 

2. 交互思考

2.1 靜態(tài)/動態(tài)

靜態(tài)banner。如果內(nèi)容中有一個(gè)非常重量級的,其他的都是差不多的不怎么重要的,可以考慮只將重量級內(nèi)容放在顯眼位置的Banner上,且靜態(tài)不輪播,其余內(nèi)容放在別的運(yùn)營位里。

動態(tài)輪播。輪播banner圖注意幀數(shù)不宜過多,加上輪播指示器,提示用戶banner的個(gè)數(shù)以及banner可以左右滑動。

 

2.2 尺寸

屏幕占比大的banner有更強(qiáng)的營銷感和氛圍感,常見電商平臺的頂部banner。

屏幕占比小的banner會低調(diào)些,不會干擾用戶閱讀瀏覽頁面,例如金融類平臺。

 

3. 設(shè)計(jì)輸出

3.1 圖片大小

保證產(chǎn)品啟動加載時(shí)間和操作流暢,上傳廣告圖的大小建議在300kb以內(nèi)。

 

3.2 圖片格式

輸出的格式:JPG、PNG、JPEG、BMP、GIF。

 

 

寫在最后

 

通過收集和閱讀了大量的資料,結(jié)合自己的工作積累,寫了一篇banner設(shè)計(jì)知識總結(jié)。內(nèi)容比較多,涉及到banner設(shè)計(jì)的方方面面,單個(gè)知識點(diǎn)拿出來都能寫一篇短文。撰寫的過程中領(lǐng)悟到知識是需要自己不斷挖掘和總結(jié),最后輸出并分享出來,才能真正成為自己的知識。關(guān)于banner設(shè)計(jì)的知識就分享到這里,歡迎留言糾正,感謝閱讀。

 

 

作者:界白
鏈接:https://www.zcool.com.cn/article/ZMTI0NDM0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(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開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

 

 

 

 

 

 

 

日歷

鏈接

個(gè)人資料

存檔