如何用數(shù)據(jù)優(yōu)化設(shè)計？快手的保姆級案例來了！

更多快手案例：

一、前言

一般談及運營活動設(shè)計，大家往往側(cè)重視覺表現(xiàn)層的優(yōu)化與迭代。但至于怎么優(yōu)化、為何優(yōu)化？就需要借助用戶數(shù)據(jù)，讓其為設(shè)計提供方案支撐及后期驗證。以數(shù)據(jù)作為依據(jù)，運營設(shè)計師才能精準(zhǔn)洞察用戶行為背后的心理密碼。從數(shù)據(jù)波動里明晰優(yōu)劣，有依據(jù)地進(jìn)行設(shè)計優(yōu)化。持續(xù)進(jìn)行“設(shè)計-數(shù)據(jù)復(fù)盤-優(yōu)化”的循環(huán)，后續(xù)歸納出相關(guān)規(guī)范并執(zhí)行，才能打造出不僅顏值出眾，更能深度黏合用戶、驅(qū)動業(yè)務(wù)增長的優(yōu)質(zhì)運營設(shè)計作品。

所以，今天就為大家完整分享快手運營設(shè)計是怎樣利用數(shù)據(jù)完成設(shè)計優(yōu)化的。

二、通過數(shù)據(jù)發(fā)現(xiàn)問題

首先我們可以通過運營活動的數(shù)據(jù)趨勢特點與用戶行為數(shù)據(jù)來發(fā)現(xiàn)運營活動的一些主要特點

1、活動流量趨勢&作品生產(chǎn)趨勢分析

快手運營活動頁的內(nèi)容主要可以分為兩大模塊：

1）促產(chǎn)活動模塊：用戶參與相關(guān)話題發(fā)布作品贏取流量、獎品等獎勵
2）消費活動模塊：圖文展示、直播、抽獎等等

選擇近期不同垂類的十個活動 (如上圖所示)，分析他們上線后約兩個月范圍內(nèi)的數(shù)據(jù),歸納總結(jié)了如下的數(shù)據(jù)曲線：

活動流量趨勢可以總結(jié)為以下幾點：

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

作品生產(chǎn)趨勢可以總結(jié)為以下幾點：

1、大部分作品生產(chǎn)趨勢與活動流量趨勢呈現(xiàn)正相關(guān)
2、所選擇的7個樣本中，每日生產(chǎn)者的占比（發(fā)布作品數(shù)/UV）比例并不高

2、用戶行為數(shù)據(jù)分析

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

我們分析上文提到的10個活動頁樣本，可以發(fā)現(xiàn)如下圖所示效果：

可以總結(jié)為以下幾點:

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

2、當(dāng)首屏內(nèi)容有文字信息時，用戶在文字信息部分停留時間更長

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

通過上面兩個數(shù)據(jù)的結(jié)論，我們大致可以勾勒出常規(guī)運營活動的特點：

根據(jù)運營活動的特點，我們歸納了這次頁面優(yōu)化的主要三個目標(biāo)：

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

并根據(jù)這三個目標(biāo)提出了一些想要解決的問題：

三、通過數(shù)據(jù)解決問題

1、首屏內(nèi)容框架優(yōu)化

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

快手的后臺運營活動數(shù)據(jù)類型很多，某些看上去只是服務(wù)于運營側(cè)的數(shù)據(jù)其實可以側(cè)面的反應(yīng)出設(shè)計上的可優(yōu)化點，舉個例子：

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

本身瀏覽用戶熱力圖是作為觀察頁面內(nèi)各板塊的訪問人群的一個數(shù)據(jù)指標(biāo)

但我們觀察可發(fā)現(xiàn)：100%用戶都會訪問到的高度=這個活動所有用戶手機的平均首屏高度

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

可發(fā)現(xiàn)如下一些現(xiàn)象：

1、大部分用戶的首屏展示區(qū)域約為828*1792尺寸（絕大數(shù)iPhone機型首屏尺寸）
2、三農(nóng)活動的首屏展示區(qū)會更短，展示區(qū)域約為828*1406

這個現(xiàn)象可能是因為：三農(nóng)垂類用戶群體為年齡約40+的農(nóng)村用戶群體，他們使用的手機多為基礎(chǔ)款（尺寸更接近于扣除底部導(dǎo)航欄的1080*1920的安卓機型）

所以我們就可以在下一階段制定優(yōu)化方案的時候，針對三農(nóng)的垂類進(jìn)行特殊設(shè)計：

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

問題2：首屏內(nèi)，主視覺頭圖與活動內(nèi)容的比例為多少更合適？

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

可以發(fā)現(xiàn)如下圖所示的結(jié)論：
1、常規(guī)主視覺高度約為首屏展示區(qū)的60%
2、短主視覺高度約為首屏展示區(qū)的54%

*總結(jié)：制定首屏設(shè)計框架規(guī)范

根據(jù)以上兩個問題數(shù)據(jù)分析后的結(jié)論，制定了首屏設(shè)計框架的規(guī)范，并投入設(shè)計使用

2、活動模塊布局優(yōu)化

問題1：參與活動的按鈕放頁面哪個位置，更能促進(jìn)用戶活動參與度？

讓我們先來了解一下組件曝光及點擊數(shù)據(jù)：

如下圖所示，此數(shù)據(jù)是選擇的時間范圍內(nèi)，某個組件的曝光與點擊數(shù)據(jù)情況
簡單來講，如果轉(zhuǎn)化CTR值比較高，說明這個組件的點擊率很高

所以我們把活動參與入口按鈕設(shè)計了三種不同位置的方案，并設(shè)計相關(guān)活動投入使用

每組方案選擇5個活動樣本，并選擇同一時間范圍內(nèi)（如活動上線一周區(qū)間內(nèi)）形成對照組，觀察三個組的轉(zhuǎn)化ctr值情況如下：

可發(fā)現(xiàn)如下結(jié)論：

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

*總結(jié):制定活動參與入口設(shè)計規(guī)范

根據(jù)以上問題數(shù)據(jù)分析后的結(jié)論，制定了活動參與入口的設(shè)計規(guī)范，并投入設(shè)計使用

問題2：活動頁最常用的活動組件是什么？

想知道有哪些模塊更吸引人，就要先調(diào)研活動頁最常見的有哪幾種活動模塊。我們選取了各垂類40個活動頁進(jìn)行歸納總結(jié)：

可以發(fā)現(xiàn)：

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

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

我們將上述的活動樣本的數(shù)據(jù)設(shè)定為活動上線一個月的數(shù)據(jù)量，并取該活動組件轉(zhuǎn)化CTR排名最高的前三名進(jìn)行數(shù)據(jù)調(diào)研

下面截取部分?jǐn)?shù)據(jù)表作為參考：

我們將全部樣本的活動組件轉(zhuǎn)化CTR除以平均值，進(jìn)行順序排布，可以發(fā)現(xiàn)如下結(jié)論：

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

*總結(jié):通過CTR數(shù)據(jù)，整理活動組件用戶點擊偏好

通過以上結(jié)論可將組件的點擊率情況如下圖從左至右排布，也可作為指導(dǎo)運營同學(xué)調(diào)整模塊順序更好提升用戶留存的參考信息：

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

3、字號排版優(yōu)化

問題：頁面字號設(shè)定為多少，才能更多的覆蓋各種手機尺寸、用戶群體？

從相關(guān)文獻(xiàn)可知：我們手機距離眼睛的閱讀距離（30cm左右）以及最佳閱讀角度（30°左右）

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

帶入到我們設(shè)計稿標(biāo)準(zhǔn)尺寸iPhone 11 （分辨率 828×1792? 326PPI）

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

但在實際應(yīng)用中，快手的運營頁面大部分為切圖搭建

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

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

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

可以發(fā)現(xiàn)過半的機型，實際瀏覽的字號要小于設(shè)計稿字號。

我們將舊規(guī)范的一組字號帶入計算：

可以發(fā)現(xiàn)：20、22號字中有多數(shù)字號在其他型號手機中顯示大小低于20px

*總結(jié)：制定頁面字號規(guī)范

根據(jù)以上內(nèi)容制定了新的文字規(guī)范：

• 刪除原始規(guī)范內(nèi)的22、20號字體，最小字號為24號字
• 正文從28號字改為30號字

四、總結(jié)

通過對活動頁數(shù)據(jù)分析歸納出的結(jié)論整理后，便可形成一套完整的、有數(shù)據(jù)依據(jù)的運營設(shè)計規(guī)范，如下圖所示：

但這樣一套設(shè)計規(guī)范并不是一成不變的，當(dāng)我們將新的遵循設(shè)計規(guī)范的活動頁投入使用時，又會獲得更多新的數(shù)據(jù)。

通過這些數(shù)據(jù)，我們還是會繼續(xù)整理更多的可以優(yōu)化的設(shè)計點，并形成一種循環(huán)迭代：

將有數(shù)據(jù)支撐的有效優(yōu)化內(nèi)容繼續(xù)迭代更新，才能做真正有價值、符合時代趨勢的好設(shè)計！