SPARKFUL
죄송합니다. 이 페이지는 해당 언어로 번역이 되어 있지 않습니다. 열심히 노력 중이니 조금만 기다려주시면 감사하겠습니다!

Blog

Insights from the SPARKFUL teams

【ASO 指南】5 步驟教你如何做螢幕截圖優化!

Cara Huangdev-notes
name

「一圖勝過千言萬語。」

根據 Statista 統計,目前在 App Store 與 Google Play 中,各有 200 多萬個 App 可以提供使用者下載。如何在這片紅海中脫穎而出,是令所有開發者感到頭痛的問題。

其實,無論是在 App 商店的搜尋頁面,還是在 App 自己的商品頁面,「螢幕截圖(Screenshot)」的畫面佔比都超過一半以上;而比起落落長的文字,使用者的注意力更容易受到精美的圖像所吸引,因此螢幕截圖的優化,是 App 開發者、行銷人員與設計師需要共同努力的指標。

15 秒好文回顧:App Store 改版影響

在之前的文章【App 開發者與行銷人必讀】iOS 11 全新 App Store 優化指南 中,我們針對 App Store 大改版分享了許多關於 ASO(App Store Optimization) 的具體建議,其中對於「搜尋」結果而言,作為吸睛主力的「螢幕截圖」更是使用者決定是否下載的關鍵性因素。讓我們花個 15 秒做重點回顧:

  • 搜尋結果頁顯示的螢幕截圖從 2 張變成 3 張
  • 畫面占比變小,更簡潔有力的表達變得重要

搜尋結果頁會同時出現 3 張截圖,讓開發者們有更多空間:透過跨螢幕的延展性或一致性來抓住使用者的眼球;而更小的畫面除了精簡標題字數外,重點是如何設計更清晰的圖面,讓使用者一目瞭然。另外,值得一提的是,如果選擇以預覽影片(Preview Video)搭配螢幕截圖的的話,在搜尋結果頁會以:影片 > 第一張螢幕截圖 > 第二張螢幕截圖 … 的方式呈現,目前最多可以上傳三則預覽影片。

螢幕截圖:結合畫面、文案和設計的魔法

在 ASO 的諸多元素中,如果說關鍵字和標題的目標,是讓使用者更精準「找到」你的產品,螢幕截圖就扮演著「推動下載」的重要角色。

由於一個螢幕截圖中包含了以下 3 大元素:畫面(真實使用的畫面截圖)、文案(包含重要關鍵字的標題或 Call-to-action )、設計(跨螢幕或者放入裝置來強調情境感),因此非常需要負責人員結合不同的素材來發揮創意,並透過持續的 A/B Test 進行優化。

根據 Rovio 對《Angry Bird》所進行的實驗結果得知,強化角色有提高轉換率的具體效果。為了了解這樣的效果是否也在其他產品能夠實現,我們透過強化《Walkr-口袋裡的銀河冒險》中兩位主要角色「豆子」和「柯林斯」的視覺(比例放大且表現出開心正能量),同時增加呼籲性標題的比重(移至視線上方並調整字型設計)。根據實際測試結果,的確有效地提升了 App Store 的下載量。

Just do it!螢幕截圖優化的 5 個步驟

除了妥善的規劃與觀察,如何將你的想法儘可能具體的傳達給設計師,共同創作出符合產品核心價值、吸睛又能提高下載量與轉換率的螢幕截圖,也是非常重要的一環。以下就拋磚引玉來分享一下我們的作法:)

步驟一:了解產品特色

1-1 確定核心價值

在開始規劃螢幕截圖的執行細項之前,先試著分別用一句話來回答以下問題: 1. 你的「產品 / App」在做什麼? 2. 你的「產品 / App」預期產生的使用者行為是? 3. 你的「產品 / App」可以為使用者帶來什麼(好處 / 效益)?

透過回答以上問題,可以再次確定產品的核心價值,以《記帳城市》為例: 1. 最好玩的遊戲化記帳 App。 2. 用每筆收支,建造你的城市。 3. 透過經營城市的樂趣,養成記帳好習慣。

1-2 選擇重點功能截圖

善用 App Store 提供的所有空間吧!目前 Apple 提供 5 張螢幕截圖,而 Google Play 提供 8 張螢幕截圖的空間。提供「真實」的使用畫面很重要,這可以幫助使用者建立具體的想像、形塑出預期的使用體驗,進而決定下載。

首先是順序,僅有前 2 至 3 張的螢幕截圖會出現在搜尋結果頁,並影響使用者是否願意點擊進入「產品檢視頁面」,因此請毫不猶豫地將重點功能放在最前面吧!其次,想想你願意花多少時間看一張螢幕截圖呢?應該不超過 5 秒吧?在使用者瀏覽時間有限的情況下,建議掌握「1 screenshot = 1 feature」的原則,每一張螢幕截圖溝通一個重點功能即可。

以《記帳城市》為例,我們將想要溝通的功能配置如下:

另外,如果產品 / App 的定位僅強調單一核心功能的話,也可以嘗試用同一功能的不同角度切入。例如「Shazam 音樂神搜」的核心功能是透過聲音辨識來查詢歌名,在螢幕截圖中,他就接續找歌名、搜尋歌詞、追蹤喜愛歌手等功能做詳細介紹。再以「Google Map」為例,除了強調「即時和快速查詢」的使用者效益外,也透過搜尋美食餐廳與景點的畫面,明確呈現使用情境。

小結:截圖空間很寶貴要善用,同時避免塞入太多資訊。

步驟二:參考競品設計

參考優秀案例或競品,一直都是很棒的資訊以及創意來源。

回到設計螢幕截圖的初衷,我們的目標是:引起使用者的興趣甚至直接下載,因此對「使用者偏好」的了解也相當重要。在觀察其他 App 的做法時,建議可以搭配 2 個問題持續思考:(1) 使用者容易被哪種文案或視覺觸動? (2) 同類 App 之中,是否有共同強調的效益或痛點?

舉例來說,我們針對《記帳城市》主要使用地區的競品 App 進行觀察,彙整出以下幾個特點:

  • 強調使用人數:例如累積下載量,以增加記帳 App 的專業形象。
  • 展現過往成就與得獎記錄:強調優良評價、獲獎紀錄等成就。
  • 以「月曆圖示」來幫助使用者想像逐日使用的情境、以及好習慣的養成(日本市場特別明顯)。
  • 「輕鬆」、「簡單」、「懶人」等形容詞,搭配一目瞭然的簡潔介面。

小結:藉由觀察其他 App,推測出使用者偏好和他們追求的效益。

步驟三:與設計團隊溝通

有了好的規劃之後,在實際執行製作時就要仰賴設計團隊了。每個團隊都有不同的分工方式,以我們而言,會由行銷人員擔任 ASO 的主要負責人,包含關鍵字、敘述、螢幕截圖等規劃,並由設計師支援製作。一份簡單的企劃架構可以幫助設計師更容易了解設計需求,內容包含:

  • 清晰的優化目標:可以幫助設計人員在明確的範圍內提出具體想法和建議。
  • 有趣的參考案例:接續步驟二,分享行銷人員覺得有趣的螢幕截圖,有時可以激發更多巧思。
  • 畫出 Mockup:無論使用手繪或電腦工具,將你想像中的畫面用簡單的線條來呈現吧!除了可以幫助你自己掌握文案比例外,也可以幫助設計師思考如何安排視覺中心與瀏覽動線。
  • 多溝通:確保最後產品能滿足行銷人員與設計師雙方的構想。

最後要考量的則是文案,如同我們在《 藏於字句間的創作:產品中的在地化翻譯》分享的,針對不同國家的推廣以及在地化的翻譯,一直是 App 推廣的重要課題,同樣的文意,使用某些語言會佔用較長的版面,是設計師需要注意的細節(例如俄文通常會較長、要小心韓文和泰文的斷句位置䓁)。

舉例來說,我們之前覺得「intergalactic(星際旅行)」這個詞很帥氣,也有不錯的搜尋量,不過當這組文案放入螢幕截圖中時,由於字數太多,因此設計師不容易進行排版;也是在這次經驗之後,建立了以「精簡的單詞」來撰寫標題的共識。

小結:Mockup 是行銷和設計人員建立共識的好朋友。

步驟四:善用 A/B test

設計完成後,在全面地更新 App 商店資訊前,我們要如何確定:新的螢幕截圖表現優於現有的版本?或者若我們提出了不只一種版本的螢幕截圖設計,要如何決定更新順序?這時候就該使用 A/B Test 進行測試了。

通常我們會先使用 Google Play Console 的內建功能進行測試,將表現較佳的結果套用至 iTunes;不過,考量兩個平台的受眾仍然有些許差異,儘管 iTunes Connect 系統中目前沒有提供類似的實驗功能,市面上仍有很多相關服務可以參考,例如Splitmertrics(需付費)。

透過 Google Play Console > 商店發布 > Google Play 商店資訊實驗功能,我們可以針對已經發布的 App 商店資訊進行不同版本的測試。透過與目前版本的比較,再根據下載數據來判斷哪一組效果最佳。以本地化實驗為例,一次最多可以同時進行 5 組不同的實驗。每組實驗中為了將影響因素單純化,建議調整 1-2 組變項來進行測試,包含:螢幕截圖、宣傳影片、簡短說明、完整說明等,並建議將至多 50% 的受眾導流至新版本來進行測試。

由於 Google Play Console 的測試是免費的,建議大家可多加善用這個功能,持續進行多組 A/B test 並套用表現較佳的版本;如果才剛起步,考量 Visuals Over Words 的大原則,可以先測試圖像設計、再測試文案效果。

小結:每個產品的目標族群都有不同偏好和特色,一定要透過 A/B test 持續優化。

步驟五:追蹤再優化、優化再追蹤

回歸初衷,如同產品需要透過不斷的迭代進行優化、ASO 和螢幕截圖的效果也需要不斷的累積。 根據我們過往的操作經驗,最後提供幾個設計建議給大家參考:

  • 置入產品內的「角色」:利用有知名度或吸睛的 IP,提升使用者對產品的興趣和了解意願(這也是為什麼遊戲的影音廣告都會主打帥氣或美麗角色的原因。)
  • 在視覺中放入「裝置」:有留意到螢幕截圖中,幾乎都會出現手機螢幕、甚至使用者的手指頭嗎?這可以幫助使用者預先想像可能的使用情境,且有「容易上手」的感受。
  • 以「動詞」開頭:相較於形容詞或名詞,動詞更有迫切感、和行動呼籲(Call-to-action)感。

小結:提出假設、實驗測試、追蹤效果、再次優化(和我們一起加油吧!)

結語

「螢幕截圖」是產品、行銷、設計師的創意結晶,也是產品本身的門面擔當;在瞬息萬變的市場中,如何透過持續的觀察和優化來掌握使用者偏好,一直是令人興奮又責任重大的課題。歡迎大家透過留言來跟我們分享你的做法,或是告訴我們你感興趣的主題吧!


你也可以:

參考資料:

  1. Image via 《家計簿マネーフォワード-自動連携で簡単-人気の家計簿》, 2017
  2. Image via 《家計簿 人気 使いやすさ No.1 〜簡単!家計簿〜》, 2017
  3. Image via 《家計簿~操作簡單又可愛的卡娜赫拉家計簿幫您節約~》, 2017
Cara Huang
Cara Huang
Marketing Lead @ Fourdesire
divider
관련 게시물
name

在 Unity 打造簡易的動作系統

在產品的介面中,適當的提供有意義並精細的動畫,實用性上能直覺的讓使用者理解目前系統的狀態、取得回饋、幫助探索產品,更能在情感上提供愉悅的體驗。此篇將介紹如何在 Unity 環境中建構一個簡易的動作系統,來幫助快速開發介面的動態效果。動...더 많은 기사 읽기
name

用 Particle System 實作模糊效果的圓形進度條

實現圓形進度條的方式有很多種,最簡易的方式就是調整 Image 的參數: Image Type - Filled 、Fill Method - Radial 360、Fill Origin - Top,這篇文章 裡有更詳細的介紹。但這個方式無法符合所有設計稿的需求,例如模糊效果、圓角、流動效果...더 많은 기사 읽기
name

在 Unity 裡做 TDD -- FDMonoBehav Framework 的誕生

這篇文章主要是在說明我們如何在 Unity 專案中導入 TDD 開發方法。開發環境主要使用 C# 語言在 Unity 2017.4.4f1 + Visual Studio for Mac Community 7.5.1,並使用 NUnit 和 NSubstitute 來作為開發單元測試專案...더 많은 기사 읽기