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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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