淺談啟動頁/廣告頁/引導頁設計思想

2020-12-25 人人都是產品經理

作者結合實際的產品經驗，總結了啟動頁/廣告頁/引導頁的一些設計思想，希望能夠給你帶來啟發。

1.啟動頁設計

啟動頁設計思想

用戶第一次打開APP，第一眼看到的頁面是啟動頁，啟動頁面主要是告訴用戶「我」（產品）是誰，我是做什麼的（一句話告訴用戶產品定位是什麼）。

一個好的啟動頁面設計會給用戶留下良好的「第一印象」反之差的啟動頁面，會給用戶留下差的印象。啟動頁好比男女相親，初次見面自我介紹（以下案例分析）。

啟動頁面設計三要素：logo、產品名稱、產品定位。

通過三要素告訴用戶「我是誰」、「我是做什麼的」，像KEEP啟動頁面通過標語「自律給我自由」傳遞情感給用戶產生共鳴。可以根據產品的定位以及要想傳遞的信息，展示給用戶。

  • 展示方式：啟動頁面展示方式目前主要以圖文方式，也有部分採用動畫方式。
  • 展示頻率：每次啟動顯示。
  • 啟動頁配置：由前端載顯示。

2.廣告頁設計

廣告頁面目前主流顯示方式是加載在啟動頁之後給用戶展示的，優勢自然是爆光率最高。簡單來說下目前啟動頁面與廣告頁面的互動設計（案例分析）。

啟動頁面與廣告頁面互動設計有兩種

  • 啟動頁面加載完之後進入廣告頁面（二級）。
  • 啟動頁面加載完之後，跟廣告頁面組合顯示（如上圖）目前組合顯示的方式使用最多。

展示方式：根據業務需求以圖文或者動畫的方式展示給用戶，圖1至圖3圖文方式，圖4動畫方式，動畫呈現方式趣味性更高一些，開發成本相對也會高一些。

廣告頁目的

  • 根據廣告主業務需求產生推廣收益，後臺需要支持廣告主可以查詢推廣數據。
  • 展示平臺重要活動或者資訊。

廣告頁面數據埋點設計

點擊率—頁面停留時長—分享次數（若該頁面沒有分享功能，則忽略）—轉換率。後臺需要支持可以查詢數據統計，通過數據統計分析廣告頁面質量，以便下次優化。

廣告祥情頁面配置：廣告祥情頁面配置在後臺配置H5連結，前端請求H5連結進入祥情頁面，採用H5方式便於操作靈活，不用更新一次整個APP都需要更新送審（後續文章會講到版本更新）。

展示頻率：每次啟動顯示（根據業務需求）。

3.引導頁設計

引導頁設計思想

前面介紹啟動頁面告訴用戶「我是誰」「我是做什麼的」，開頭跟用戶做了自我介紹，引導頁的目的主要是告訴用戶：「我該怎麼使用」或者是「我有什麼亮點」（重點宣傳的功能），借用男女相親例子，雙方介紹完自己之後，開始展示自己有什麼優勢，好的引導頁設計直接關係到用戶是否「對你有興趣」想一進「了解你」。

引導頁設計要點

  • 引導頁重佔強調產品的核心功能與優勢，上一頁與下一頁啟到承上啟下的作用，好的文案配上動畫會使引導頁更加生動有吸引力。

引導頁設計方式

  • 靜態設計：採用靜態頁面展示，以傳遞信息為主，劣勢：用戶無互動感，優勢：開發成本較低；
  • 動態設計：目前大部分傾向於動態設計，還可以加入用戶對動態頁面進行點擊互動，優勢：增加用戶參與感，劣勢：開發成本較高。

引導頁配置

  • 優勢：引導頁建議由前端加載顯示，不需要在後臺上傳推送給前端，若採用後臺推送的方式，用戶打開APP前端請求加載會比較慢，對用戶體驗不友好（用戶是沒有耐心等待的）
  • 劣勢：因是前端加載顯示，每次更新引導頁面需要前端換頁面，重新打包上傳送審，流程比較繁瑣不建義引導頁頻繁更新。

展示頻率規則

用戶第一次打開當前版本展示，後續打開不再展示，當檢測到有新版本更新時再展示（根據業務需求調整展示頻率），引導面一般採用3-4個頁面為佳，因每個頁面需要手動滑動所以用戶每次啟動都展示會造成用戶的反感，增加進入首頁成本。

最後總結

啟動頁/廣告頁/引導頁設計主要是根據產品自身的業務屬性跟定位來選擇適合的設計思路呈現給用戶。以上是作者結合實際的產品經驗，總結的設計思想分享給大家！

 

本文由 @行走的魚 原創發布於人人都是產品經理。未經許可，禁止轉載。

題圖來自unsplash，基於CC0協議

相關焦點

  • 歡迎頁/新手引導頁設計:建立良好的產品第一印象
    歡迎頁/新手引導頁如何設計，才能建立良好的產品第一印象呢？一、定義Onboarding英文入職指引，個人翻譯成——新用戶歡迎頁（新手引導頁），指的是啟動App的啟動頁（Launch Screen）之後的歡迎頁面，是用戶對產品的第一印象。
  • APP引導頁設計!引導的藝術
    文/稅夢瑤 初次使用一款移動產品，用戶經常會看見各種各樣的引導頁設計，,引導頁的作用是在用戶使用產品前，告訴其使用方式、產品功能及特色。引導頁界面的設計不僅是操作步驟的設計，更應該是流暢、舒適、愉悅體驗的設計，是充分利用使用者好奇心關注產品的設計。①基本功能類。
  • APP引導頁的用戶體驗設計!
    情感體驗式的移動APP引導頁使用以情動人的方法，通過在引導頁設計中融入產品本身的特質，注入設計師的意識和情感，使用一些能引起用戶共鳴的內容，對現實生活中的痛點進行渲染等方式，引起用戶自身的聯想、回憶，引導用戶去思考移動APP的價值。APP引導頁出現在用戶正式開始使用應用前，一般來說不超過5個頁面。
  • APP界面設計中的引導頁!
    ①前置引導。所謂前置引導即在用戶安裝完成軟體應用，並第一次打開的時候出現的引導頁，該引導頁一般由2到6頁連續或不連續的相關頁面構成，某些應用引導頁可達10頁。設計中多用卡通形象進行引導，以對話的方式逐步提示使用戶帶入感更強，更利於引導內容的呈現，避免了用戶的反感。①合理化原則。只做必要的內容引導，根據引導頁的目的，出發點不同，大致可以將其分為產品說明類、使用說明類、推廣類和問題解決類。
  • APP設計中關於引導頁的設計方法
    引導頁，顧名思義就是指引用戶如何使用產品，或者告知用戶產品與競品有哪些差異的界面。目前常見的引導頁的製作形式有產品介紹型、操作指引型、故事型三種。引導頁產品介紹型產品介紹型引導頁受邀作用是對產品進行簡單的介紹，讓用戶對產品有一個大致的了解，其次是體現產品的格調
  • 產品魅力釋放的舞臺:引導頁設計窺探
    拿app來說，他們對這款產品的第一印象起始於引導頁。第一印象產生的時間極短，但是它所帶來的影響卻要長遠的多。如果說給用戶構建一個完美的用戶體驗體系是我們的「千裡」，那麼引導頁就是我們「足下」的第一步。所以一款app的引導頁對於用戶和產品之間紐帶的建立是十分重要的。什麼是引導頁？引導頁英文Onboarding原文意為新員工的入職培訓。
  • 麥哥說電商:二類電商廣告創意入口圖和落地頁創意的設計技巧
    二類電商投放的廣告以信息流廣告為主，在信息流廣告中出現的圖片主要出現在這兩個位置：入口創意圖和落地頁。兩者都非常的重要，入口創意題圖的主要職能是吸引用戶點擊落地頁；而落地頁的作用在於承接流量、促進用戶轉化。
  • 詳情頁設計的邏輯思路
    首先大家了解詳情頁的設計技巧與思路嗎？當我們拿到一個詳情頁設計需求的時候，我們不要急著去做，而是先分析詳情頁的邏輯大框架，詳情頁的邏輯很重要。一、寶貝描述頁的框架打造一個詳情頁，前期需要花多點時間去調查，構思，確定好一個方向，再去做設計。詳情頁是提高轉化率的入口，所以寶貝詳情頁是店鋪產品是否能夠交易成功的關鍵因素。一個成功的詳情頁是如何吸引客戶的購買慾望，如何才能牢牢抓住客戶的消費心理？我們要從買家的購買心理，買家的瀏覽習慣，購物邏輯去分析。
  • 144頁初中英語課本6頁是廣告 出版方不做明確回應
    記者暗訪發現，中學英語教材中夾雜整頁廣告 本版供圖/視頻截圖　　在大部分人的印象中，課堂上的課本與廣告本是風馬牛不相及的，一般人都會說「課本裡怎麼可能有廣告」？但事實上現在課本中已經出現了廣告。
  • App開屏頁如何設計?來看這五個常用的方法
    合理的啟動頁能激發用戶的潛意識，有助於吸引和留存合適的用戶。 在深入研究設計策略之前，先來了解一下啟動畫面的基本知識。 什麼是啟動畫面？ 啟動畫面指一系列連續的使用體驗——從用戶點擊應用圖標開始到內容加載完成為止。
  • Axure入門案例系列:APP首次引導頁
    編輯導讀：用戶在初次安裝或者更新APP的時候，第一印象就來自於APP首次引導頁。那麼，如何做好APP首次引導頁呢？本文作者將基於自身工作經驗，梳理了整套APP首次引導頁的Axure教程。APP更新或用戶首次安裝APP引導頁是必不可少的一部分。準備Axure 8（或Axure 9）軟體已安裝。掌握基本的軟體使用。熟悉動態面板。
  • 電商大促攻略頁設計指南
    而電商大促活動中的攻略頁，可不僅僅是一篇資訊文章那麼簡單，除了要向用戶傳達促銷信息，往往承載著引流，預約，發券，傳播等營銷目，同時存在很多交互操作。所以電商攻略頁可被視為一個獨立的小型產品，在設計這樣的產品時，有什麼設計方法可尋呢？本文內容即為筆者在多次大促攻略頁設計經驗中總結出來的一套方法，希望能對要設計促銷攻略頁的運營同學和交互同學有所幫助。
  • PPT五大元素之封面頁設計
    封面頁還有一個作用，就是決定整個PPT的風格。因此，本文將介紹一些關於封面頁設計的技巧！總的來說，如果封面頁只採用線條線條設計的話，整個頁面就會顯得簡潔，不會影響觀眾了解內容，但是有時候會過於單調。所以這樣的封面頁適合於學校教學使用。
  • 學員作品欣賞|引導頁,與用戶的第一次親密接觸!
    哈嘍，各位大佬們好啊現在的APP數量越來越多製作也是越來越精美，特別是引導頁每個APP都希望能在設計上與其他APP區分開從而給用戶留下美好的第一印象因此在引導頁的設計上就需要更多的創意今天的學員作品欣賞時間苗苗老師將為大家帶來設計學院學員們的引導頁設計一起來欣賞吧~
  • Axure教程:以微信為例,製作APP啟動頁的效果
    每次手機打開微信，進入到首頁之前，都需要等待一段時間，等待時我們看到的那張人站在星球上的圖片實際上就是微信的啟動頁。啟動頁的作用除了緩和用戶等待的焦慮情緒外，還有為APP定調性的作用，現在有很多APP的引導頁已經變成了廣告位，用以實現盈利。今天我們以微信為例，一起來看下這種效果的實現方法。
  • 《黑金》新引導頁上線 開啟全球打造計劃
    9月16日，蝸牛旗下蒸汽朋克AMMO大作《黑金》官網全新引導頁上線。引導頁是玩家瀏覽《黑金》官網的第一站，帳號註冊、激活碼預訂等操作都可以在該頁面進行。
  • 高轉化的落地頁到底有何「魔力」?
    當我們把廣告精準展現給用戶，並吸引目標用戶點擊之後，落地頁此時便擁有一個神聖的使命——承載流量轉化，它也是實現低成本高效獲客的重要一環。那麼，今天我們就來說說，高轉化的落地頁到底有何「魔力」呢？回歸到廣告落地頁的設計上，有一個「3秒原則」，即首屏突出主題，內容闡釋重點，做到結構清晰，且頁面加載要快，讓用戶在黃金3秒內，接收到想要的信息，並執行轉化行動。二、5大核心要素通過大量的落地頁測試發現，合格的落地頁，一般包含這5個核心要素：可信度、適配性、重要性、稀缺性和價值感。
  • 海南出版社出版的《風吹哪頁讀哪頁》獲國際設計大獎
    原題：海南出版社出版的《風吹哪頁讀哪頁》獲國際設計大獎匠心設計滿滿「海南風」5月22日，有著「設計界奧斯卡」之稱的第99屆紐約藝術指導協會（ADC）年度獎揭曉，由著名書籍裝幀設計師劉曉翔團隊傾心打造、海南出版社出版的《風吹哪頁讀哪頁——第一屆中國最美旅遊圖書設計大賽優秀作品選》（以下簡稱《風吹哪頁讀哪頁》）獲得書籍設計銅獎。
  • 攻略內容頁改版測試頁-無攻略集
    第 2 頁：陪葬品及人物屬性功能介紹第 3 頁：序章-灰之墓所（1）第 4 頁：序章-灰之墓所（2）第 5 頁：序章-灰之墓所（3）第 6 頁：BOSS戰-灰之審判者（1）第 7 頁：BOSS戰-灰之審判者（2）
  • 單頁還是分頁?理智分析網站設計思路!
    用戶藉助單頁內的導航同樣可以快速定位，滾動瀏覽也很容易。單頁網站在為用戶提供內容的時候，其信息和內容都是經過篩選和管控的，確保更適宜閱讀和瀏覽。這也是為什麼絕大多數的產品頁面、作品集和事件相關的頁面會採用單頁設計。在這樣的情況下使用單頁設計能夠最大程度降低信息噪音的影響，讓用戶專注於最重要的內容。1.