熱評 二郎神 · 楊戩

第一次看見運營設計相關的基于數據分析的設計規范,很棒!!

如何用數據優化設計?快手的保姆級案例來了!

更多快手案例:

一、前言

一般談及運營活動設計,大家往往側重視覺表現層的優化與迭代。但至于怎么優化、為何優化?就需要借助用戶數據,讓其為設計提供方案支撐及后期驗證。以數據作為依據,運營設計師才能精準洞察用戶行為背后的心理密碼。從數據波動里明晰優劣,有依據地進行設計優化。持續進行“設計-數據復盤-優化”的循環,后續歸納出相關規范并執行,才能打造出不僅顏值出眾,更能深度黏合用戶、驅動業務增長的優質運營設計作品。

所以,今天就為大家完整分享快手運營設計是怎樣利用數據完成設計優化的。

二、通過數據發現問題

首先我們可以通過運營活動的數據趨勢特點與用戶行為數據來發現運營活動的一些主要特點

1、活動流量趨勢&作品生產趨勢分析

快手運營活動頁的內容主要可以分為兩大模塊:

1)促產活動模塊:用戶參與相關話題發布作品贏取流量、獎品等獎勵
2)消費活動模塊:圖文展示、直播、抽獎等等

如何用數據優化設計?快手的保姆級案例來了!

選擇近期不同垂類的十個活動 (如上圖所示),分析他們上線后約兩個月范圍內的數據,歸納總結了如下的數據曲線:

如何用數據優化設計?快手的保姆級案例來了!

活動流量趨勢可以總結為以下幾點:

1、大部分活動都是在上線后短時間有大量訪問流量,幾天后平均維持一段時間常量,再之后逐漸減少
2、某些大型活動會劃分不同時間階段,在新活動模塊上線時也會突增訪問流量

作品生產趨勢可以總結為以下幾點:

1、大部分作品生產趨勢與活動流量趨勢呈現正相關
2、所選擇的7個樣本中,每日生產者的占比(發布作品數/UV)比例并不高

2、用戶行為數據分析

通過用戶瀏覽頁面時長熱力圖,可以獲取用戶對頁面各板塊的興趣程度。

如何用數據優化設計?快手的保姆級案例來了!

我們分析上文提到的10個活動頁樣本,可以發現如下圖所示效果:

如何用數據優化設計?快手的保姆級案例來了!

可以總結為以下幾點:

1、活動頁人均瀏覽時長峰值約為65.78秒,首屏后瀏覽時長會驟降50%以上,也就是說用戶在首屏平均停留1分鐘左右,隨著頁面深度增高,停留時長逐漸降低

2、當首屏內容有文字信息時,用戶在文字信息部分停留時間更長

3、頁面深度很深時,如果有抽獎/投票等模塊,停留時長會回升

通過上面兩個數據的結論,我們大致可以勾勒出常規運營活動的特點:

如何用數據優化設計?快手的保姆級案例來了!

根據運營活動的特點,我們歸納了這次頁面優化的主要三個目標:

1、找到首屏的最佳展示區域與方式
2、提升用戶活動參與度
3、優化頁面排布與閱讀體驗

并根據這三個目標提出了一些想要解決的問題:

如何用數據優化設計?快手的保姆級案例來了!

三、通過數據解決問題

1、首屏內容框架優化

問題1:一個適合大部分用戶的活動頁首屏高度為多少?

快手的后臺運營活動數據類型很多,某些看上去只是服務于運營側的數據其實可以側面的反應出設計上的可優化點,舉個例子:

比如觀察瀏覽用戶熱力圖:

如何用數據優化設計?快手的保姆級案例來了!

本身瀏覽用戶熱力圖是作為觀察頁面內各板塊的訪問人群的一個數據指標

但我們觀察可發現:100%用戶都會訪問到的高度=這個活動所有用戶手機的平均首屏高度

所以我們帶著這個結論,總結了快手運營各垂類(比如時尚、健康、青春娛樂、三農、泛知識等)的各種活動頁面瀏覽用戶熱力圖

如何用數據優化設計?快手的保姆級案例來了!

可發現如下一些現象:

1、大部分用戶的首屏展示區域約為828*1792尺寸(絕大數iPhone機型首屏尺寸)
2、三農活動的首屏展示區會更短,展示區域約為828*1406

這個現象可能是因為:三農垂類用戶群體為年齡約40+的農村用戶群體,他們使用的手機多為基礎款(尺寸更接近于扣除底部導航欄的1080*1920的安卓機型)

所以我們就可以在下一階段制定優化方案的時候,針對三農的垂類進行特殊設計:

1、三農用戶的首屏瀏覽高度更小,所以就要盡量壓矮頭圖高度,更多的露出關鍵內容信息
2、三農的用戶群體年齡偏大,頁面字號就要相對普通活動更大一些,方便用戶閱讀
3、盡量少的使用過于有設計感的排版

問題2:首屏內,主視覺頭圖與活動內容的比例為多少更合適?

我們將上文制定的兩種首屏展示高度分別列兩組方案
收集行業內以及快手內部數據量較好的活動頁案例投入到方案中

可以發現如下圖所示的結論:
1、常規主視覺高度約為首屏展示區的60%
2、短主視覺高度約為首屏展示區的54%

如何用數據優化設計?快手的保姆級案例來了!

*總結:制定首屏設計框架規范

根據以上兩個問題數據分析后的結論,制定了首屏設計框架的規范,并投入設計使用

如何用數據優化設計?快手的保姆級案例來了!

2、活動模塊布局優化

問題1:參與活動的按鈕放頁面哪個位置,更能促進用戶活動參與度?

讓我們先來了解一下組件曝光及點擊數據:

如下圖所示,此數據是選擇的時間范圍內,某個組件的曝光與點擊數據情況
簡單來講,如果轉化CTR值比較高,說明這個組件的點擊率很高

如何用數據優化設計?快手的保姆級案例來了!

所以我們把活動參與入口按鈕設計了三種不同位置的方案,并設計相關活動投入使用

每組方案選擇5個活動樣本,并選擇同一時間范圍內(如活動上線一周區間內)形成對照組,觀察三個組的轉化ctr值情況如下:

如何用數據優化設計?快手的保姆級案例來了!

可發現如下結論:

● 按鈕位于【首屏】時比按鈕【吸底&首屏以外】點擊率更好
● 其中按鈕在【首屏外】點擊率最差

*總結:制定活動參與入口設計規范

根據以上問題數據分析后的結論,制定了活動參與入口的設計規范,并投入設計使用

問題2:活動頁最常用的活動組件是什么?

想知道有哪些模塊更吸引人,就要先調研活動頁最常見的有哪幾種活動模塊。我們選取了各垂類40個活動頁進行歸納總結:

如何用數據優化設計?快手的保姆級案例來了!

可以發現:

1、【參與相關話題發布作品 贏取獎勵】是最常見的活動主模塊,要遠多于純圖文內容展示的活動
2、其中部分體量大的活動會匹配【抽獎活動/熱門用戶關注面板/直播預約】等功能模塊,具體使用占比如上圖所示

問題3:什么活動組件點擊量更高更受歡迎?

我們將上述的活動樣本的數據設定為活動上線一個月的數據量,并取該活動組件轉化CTR排名最高的前三名進行數據調研

下面截取部分數據表作為參考:

如何用數據優化設計?快手的保姆級案例來了!

我們將全部樣本的活動組件轉化CTR除以平均值,進行順序排布,可以發現如下結論:

1、如圖中紅色標記數值所示:兩種活動類型,抽獎與投票的CTR值都明顯高過于其他任何組件
2、【參與話題發布作品】型活動中,參與活動按鈕的平均CTR值一般為除了【抽獎與投票】組件外,點擊率最高的組件
3、其他組件相對沒有明顯突出的點擊率,個別組件因不同運營活動的側重點不同會有偶發點擊率很高的情況,所以不作為參考

*總結:通過CTR數據,整理活動組件用戶點擊偏好

通過以上結論可將組件的點擊率情況如下圖從左至右排布,也可作為指導運營同學調整模塊順序更好提升用戶留存的參考信息:

  • 抽獎跟榜單/投票的模塊點擊率最高,內容少的活動頁一般可以將抽獎作為頭部吸引點擊
  • 內容多的活動頁可以將抽獎放第二屏,吸引用戶繼續下滑查看更多內容

3、字號排版優化

問題:頁面字號設定為多少,才能更多的覆蓋各種手機尺寸、用戶群體?

從相關文獻可知:我們手機距離眼睛的閱讀距離(30cm左右)以及最佳閱讀角度(30°左右)

使用視角計算公式,我們能識別到的最低的文字大小為 h= 2*30·tan(0.3/2) ≈ 0.157cm

帶入到我們設計稿標準尺寸iPhone 11 (分辨率 828×1792? 326PPI)

可以得出在828寬度下,最小的可識別字號約為20px

如何用數據優化設計?快手的保姆級案例來了!

但在實際應用中,快手的運營頁面大部分為切圖搭建

與需要技術搭建的UI頁面不同,運營活動的UI頁面是將整個切圖等比縮放到各個機型的手機屏幕內顯示

即便使用的是同一字號,在不同尺寸的手機下也會有不同的字號顯示:

如何用數據優化設計?快手的保姆級案例來了!

舉例,如果在設計稿寬度828的屏幕下,28px的字號在不同手機型號下會變成如下圖所示的字號大小。

可以發現過半的機型,實際瀏覽的字號要小于設計稿字號。

我們將舊規范的一組字號帶入計算:

如何用數據優化設計?快手的保姆級案例來了!

可以發現:20、22號字中有多數字號在其他型號手機中顯示大小低于20px

*總結:制定頁面字號規范

根據以上內容制定了新的文字規范:

  • 刪除原始規范內的22、20號字體,最小字號為24號字
  • 正文從28號字改為30號字

四、總結

通過對活動頁數據分析歸納出的結論整理后,便可形成一套完整的、有數據依據的運營設計規范,如下圖所示:

如何用數據優化設計?快手的保姆級案例來了!

但這樣一套設計規范并不是一成不變的,當我們將新的遵循設計規范的活動頁投入使用時,又會獲得更多新的數據。

通過這些數據,我們還是會繼續整理更多的可以優化的設計點,并形成一種循環迭代:

如何用數據優化設計?快手的保姆級案例來了!

將有數據支撐的有效優化內容繼續迭代更新,才能做真正有價值、符合時代趨勢的好設計!

收藏 75
點贊 42

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。