Banner設(shè)計(jì)全方位教學(xué)！

在工作中需求方往往不是設(shè)計(jì)出身，提需求時(shí)傳達(dá)上往往也沒(méi)有辦法很好的表達(dá)自己的想法，在這種需求模糊的環(huán)境中往往做的 banner 會(huì)被需求方怒懟，而追問(wèn)原因是，只會(huì)得到“不好看！”或者當(dāng)我們每天瘋狂填充自己的素材庫(kù)時(shí)，很多小朋友都會(huì)有“該如何分辨作品的好壞”這樣的疑問(wèn)，那到底什么樣的 banner 算是優(yōu)質(zhì)的 banner 呢？

一、簡(jiǎn)單了解 Banner 本質(zhì)，Banner 在運(yùn)營(yíng)工作中的作用，從需求方的角度來(lái)看 banner 的作用大致分為兩種：

便于上線(xiàn)操作：如果直接投放活動(dòng)內(nèi)容頁(yè)面，首先屏幕使用空間有限，不能多個(gè)活動(dòng)共同展示，其次每次活動(dòng)上線(xiàn)基本上都是凌晨，暫且不說(shuō)累不累，在人工成本上就會(huì)消耗大半。如果遇到大促或者重要節(jié)日，那全體運(yùn)營(yíng)需要時(shí)時(shí)刻刻更改內(nèi)容。而 banner 的定時(shí)上架和權(quán)重排序大大減少運(yùn)營(yíng)工作成成本，提高工作效率。

清晰看到數(shù)據(jù)反饋：說(shuō)白了，banner 就是廣告形式的一種，在一款 APP 中，除 banner 外還存在很多形式的廣告比如開(kāi)屏廣告、彈窗廣告、落地頁(yè)內(nèi)嵌廣告等。而對(duì)于運(yùn)營(yíng)同學(xué)來(lái)說(shuō)，他們需要清晰的了解每一條廣告，每一種投放形式的數(shù)據(jù)反饋，根據(jù)數(shù)據(jù)對(duì)每次活動(dòng)的內(nèi)容進(jìn)行復(fù)盤(pán)、優(yōu)化。應(yīng)對(duì)以后的不同的活動(dòng)形式。

優(yōu)質(zhì) banner 的特點(diǎn)，由于 banner 的位置和大小都屬于產(chǎn)品中的絕對(duì)的巔峰，但用戶(hù)在此頁(yè)面停留的時(shí)間往往很短暫，所以在整個(gè)產(chǎn)品頁(yè)面中，視覺(jué)層面會(huì)呈現(xiàn)鮮明的中心，設(shè)計(jì)層面需明確視覺(jué)層級(jí)關(guān)系，以最短的文案加上圖像形式直擊目標(biāo)用戶(hù)內(nèi)心，使用戶(hù)快速獲取信息。

三秒原則，通過(guò)對(duì)市面上大多數(shù)產(chǎn)品 banner 進(jìn)行研究，發(fā)現(xiàn)輪播中每一張 banner 停留時(shí)間不超過(guò)三秒，在這里我們需要做的就是在三秒內(nèi)傳遞用戶(hù)所有重要信息。

增強(qiáng)可讀性，由于 banner 是由文案、CTA 按鈕、配圖、裝飾元素、背景組成，增強(qiáng)識(shí)別性一般指的是文案以及按鈕元素。文案部分需要盡量精簡(jiǎn)，控制在一級(jí)標(biāo)題、二級(jí)標(biāo)題、備注標(biāo)題?三段式，針對(duì)不同的目標(biāo)用戶(hù)做到內(nèi)容可讀性，確保用戶(hù)快速獲得信息。設(shè)計(jì)部分不僅要保證頁(yè)面整體美觀、觀看舒服，更重要的是確保信息層級(jí)關(guān)系，?引導(dǎo)控制用戶(hù)視覺(jué)動(dòng)線(xiàn)?。其目的都是為引導(dǎo)用戶(hù)不斷的參與內(nèi)容，促使 banner 極大程度的轉(zhuǎn)化用戶(hù)，同時(shí)也間接提升了企業(yè)的商業(yè)價(jià)值。

二、Banner設(shè)計(jì)的核心目標(biāo)

在我看來(lái)，與文字信息相比，我們更容易被圖形化的內(nèi)容所吸引，也更加能夠快速理解圖形化內(nèi)容。產(chǎn)品頁(yè)面的 banner 也是主要展示一些產(chǎn)品最近的活動(dòng)或者一些傳遞產(chǎn)品內(nèi)容信息的圖片，而根據(jù) Jakob Nielsen（尼爾森十大可用性原則的那個(gè)男人）做了一個(gè)眼動(dòng)實(shí)驗(yàn)，發(fā)現(xiàn) 2010 年后用戶(hù)平均花費(fèi) 80.7%的閱讀時(shí)間在前三屏，其中首屏?xí)r間占總時(shí)長(zhǎng)的 57%?；谠诘谝粫r(shí)間抓住用戶(hù)注意的角度出發(fā)，我們必然將最顯眼，最突出的 banner 放在首屏的位置，這樣不僅讓我們進(jìn)入頁(yè)面后第一時(shí)間看到，而且還可以在三秒內(nèi)了解具體主要宣傳信息。

正確傳達(dá)信息：有一天你的好朋友在過(guò)生日，你拿著一個(gè)生日禮物送給他，你的朋友肯定希望打開(kāi)禮盒直接就能看到禮物，而如果里面和套娃一樣全是包裝盒，你的朋友也許只會(huì)這個(gè)表情，然后流露一絲尷尬。

有一天你的好朋友在過(guò)生日，你拿著一個(gè)生日禮物送給他，你的朋友肯定希望打開(kāi)禮盒直接就能看到禮物，而如果里面和套娃一樣全是包裝盒，你的朋友也許只會(huì)這個(gè)表情，然后流露一絲尷尬。

什么是視覺(jué)動(dòng)線(xiàn)？我們可以將一個(gè) banner 理解成你大學(xué)所在的城市的地圖，回想一下當(dāng)年你來(lái)到這所城市后，首先想到的是什么？以我來(lái)說(shuō)，我大學(xué)是穩(wěn)坐中國(guó)宜居城市榜首的城市-成都，來(lái)到這所城市后首先想到的就是吃喝玩樂(lè)感受這座城市的美好。但我又不能沒(méi)有目的的亂逛，相信喜歡旅游的朋友都做過(guò)攻略，都是想在最短的時(shí)間內(nèi)逛某個(gè)城市，我也不例外，從路線(xiàn)到景點(diǎn)大小再到美食據(jù)點(diǎn)等等安排出一條最佳線(xiàn)路。而在欣賞景區(qū)的過(guò)程中如果遇到很不錯(cuò)的的地方，肯定會(huì)記住之后頻繁到訪(fǎng)，為其消費(fèi)?；貧w到 banner 中，視覺(jué)動(dòng)線(xiàn)就是最終安排出的這一條旅游路線(xiàn)，而“做攻略的我”這個(gè)角色就相當(dāng)于在手機(jī)面前的你“設(shè)計(jì)師”這個(gè)角色，由你來(lái)安排用戶(hù)在 banner 內(nèi)觀看內(nèi)容的順序，而“不錯(cuò)的景點(diǎn)”對(duì)應(yīng)在 banner 內(nèi)是可以讓用戶(hù)進(jìn)行下一步行為，保證用戶(hù)留存，提高轉(zhuǎn)化率的亮點(diǎn)區(qū)域。

如何讓用戶(hù)跟隨視覺(jué)動(dòng)線(xiàn)觀看？應(yīng)用于 banner 內(nèi)容排布時(shí)受限于 banner 的長(zhǎng)條尺寸，視覺(jué)盲區(qū)壓縮。往往將重要的信息放在左邊，右邊放主視覺(jué)圖形和其他元素。運(yùn)用視覺(jué)元素創(chuàng)建一條虛擬的“動(dòng)線(xiàn)”，引導(dǎo)用戶(hù)實(shí)現(xiàn)從左往右移動(dòng)，符合用戶(hù)習(xí)慣性的眼動(dòng)規(guī)律。在這種左右排版是最我們最容易上手的一種排版方式，雖然不算很驚艷，但是永遠(yuǎn)不會(huì)出錯(cuò)。其中根據(jù)文字與圖形級(jí)別高低決定采用左文右圖還是右圖左文。

二、實(shí)現(xiàn)用戶(hù)轉(zhuǎn)化

我在工作中，運(yùn)營(yíng)同學(xué)經(jīng)常將 banner 稱(chēng)為“資源位”，從這個(gè)名稱(chēng)就可以看出 banner 在整體頁(yè)面中的價(jià)值所在。它對(duì)產(chǎn)品來(lái)說(shuō)起到了非常好的宣傳作用，用非常短的時(shí)間讓用戶(hù)幫助用戶(hù)了解主要內(nèi)容，通過(guò) banner 傳達(dá)出的真實(shí)有效信息為用戶(hù)提供愉快、優(yōu)惠、收入、知識(shí)等情緒價(jià)值，促使用戶(hù)做出行為。這也大大降低了企業(yè)在傳播和獲客的成本，而且可以快速增強(qiáng)產(chǎn)品競(jìng)爭(zhēng)力。

當(dāng)下我們方方面面都在體現(xiàn)著良好的用戶(hù)體驗(yàn)，由此我們?cè)谠O(shè)計(jì) banner 后，我們可以模擬用戶(hù)去檢查我們的 Banner，是否能直觀感受到畫(huà)面內(nèi)容，內(nèi)容是否吸引我們，是否第一眼就想了解畫(huà)面內(nèi)容參與其中。如果以上問(wèn)題都是否定的，那可以說(shuō)是相當(dāng)失敗了！

在整個(gè) Banner 中不光要看表面的圖形字體的美丑，更需要建立在用戶(hù)研究和事實(shí)之上貼近用戶(hù)，幫助用戶(hù)零成本了解畫(huà)面內(nèi)容，了解用戶(hù)行為，具體需求以及背后動(dòng)機(jī)，從而打入用戶(hù)內(nèi)部，激發(fā)用戶(hù)操作，提高內(nèi)容轉(zhuǎn)化率。

分享名稱(chēng)：Banner設(shè)計(jì)全方位教學(xué)！
本文網(wǎng)址：http://www.bm7419.com/news8/319758.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、云服務(wù)器、、用戶(hù)體驗(yàn)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)