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

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

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

清晰看到數據反饋：說白了，banner 就是廣告形式的一種，在一款 APP 中，除 banner 外還存在很多形式的廣告比如開屏廣告、彈窗廣告、落地頁內嵌廣告等。而對于運營同學來說，他們需要清晰的了解每一條廣告，每一種投放形式的數據反饋，根據數據對每次活動的內容進行復盤、優化。應對以后的不同的活動形式。

優質 banner 的特點，由于 banner 的位置和大小都屬于產品中的絕對的巔峰，但用戶在此頁面停留的時間往往很短暫，所以在整個產品頁面中，視覺層面會呈現鮮明的中心，設計層面需明確視覺層級關系，以最短的文案加上圖像形式直擊目標用戶內心，使用戶快速獲取信息。

三秒原則，通過對市面上大多數產品 banner 進行研究，發現輪播中每一張 banner 停留時間不超過三秒，在這里我們需要做的就是在三秒內傳遞用戶所有重要信息。

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

二、Banner設計的核心目標

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

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

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

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

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

二、實現用戶轉化

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

當下我們方方面面都在體現著良好的用戶體驗，由此我們在設計 banner 后，我們可以模擬用戶去檢查我們的 Banner，是否能直觀感受到畫面內容，內容是否吸引我們，是否第一眼就想了解畫面內容參與其中。如果以上問題都是否定的，那可以說是相當失敗了！

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

分享名稱：Banner設計全方位教學！
本文網址：http://www.js-pz168.com/news8/319758.html

成都網站建設公司_創新互聯，為您提供建站公司、云服務器、、用戶體驗、網站內鏈、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯