在信息流產(chǎn)品中，個(gè)人資料卡是一個(gè)很重要的頁(yè)面。一方面，創(chuàng)作者通過(guò)這個(gè)頁(yè)面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)用戶(hù)關(guān)注；另一方面，消費(fèi)型用戶(hù)通過(guò)這個(gè)頁(yè)面了解創(chuàng)作者，查看創(chuàng)作者更多內(nèi)容，是眾多消費(fèi)型用戶(hù)消費(fèi)內(nèi)容中重要的一環(huán)。只有把這個(gè)循環(huán)做好才能長(zhǎng)期促進(jìn)平臺(tái)生態(tài)發(fā)展。

這個(gè)頁(yè)面承載著這么多的價(jià)值，該如何設(shè)計(jì)？本篇將以 QB 看點(diǎn)號(hào)資料卡升級(jí)的設(shè)計(jì)思路為例，進(jìn)行分析解答。

前言

在前期分析過(guò)程中，我們發(fā)現(xiàn)當(dāng)前版本存在諸多問(wèn)題。

從數(shù)據(jù)上看，對(duì)比公司內(nèi)同類(lèi)產(chǎn)品，關(guān)注按鈕轉(zhuǎn)化率較低（出于數(shù)據(jù)保護(hù)，數(shù)據(jù)隱藏）。

從樣式上看，信息布局較亂，重點(diǎn)不突出。

基于以上背景，我們開(kāi)始對(duì)資料卡進(jìn)行改版升級(jí)。

設(shè)計(jì)前應(yīng)該思考什么

做任何一個(gè)設(shè)計(jì)前，都應(yīng)該思考設(shè)計(jì)目標(biāo)，否則設(shè)計(jì)出來(lái)的結(jié)果沒(méi)有意義，也缺乏過(guò)程依據(jù)和支撐。那么資料卡的設(shè)計(jì)目標(biāo)是什么呢？這要從資料卡在信息流產(chǎn)品中的使命和價(jià)值說(shuō)起。

一方面，消費(fèi)型用戶(hù)通過(guò)這個(gè)頁(yè)面了解創(chuàng)作者，查看更多內(nèi)容；另一方面，創(chuàng)作者通過(guò)這個(gè)頁(yè)面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)瀏覽者關(guān)注。

如果創(chuàng)作者能夠在資料卡充分展現(xiàn)自己的才華和魅力，帶來(lái)了更多瀏覽者的“關(guān)注”，那他們就更有動(dòng)力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進(jìn)而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶(hù)的瀏覽、留存。

更多新用戶(hù)的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來(lái)之后再進(jìn)行商業(yè)化。這樣對(duì)消費(fèi)型用戶(hù)、內(nèi)容生產(chǎn)者、平臺(tái)方都有利，進(jìn)而處于良性循環(huán)。

如何進(jìn)行資料卡設(shè)計(jì)

了解了資料卡的使命和價(jià)值，設(shè)計(jì)目標(biāo)也呼之欲出，作為平臺(tái)方，我們需要幫創(chuàng)作者解決兩個(gè)問(wèn)題：輔助創(chuàng)作者吸粉 & 助力商業(yè)化變現(xiàn)

當(dāng)然，創(chuàng)作者產(chǎn)出優(yōu)質(zhì)的內(nèi)容才是吸粉的關(guān)鍵，平臺(tái)方只能助攻。但不同的信息流產(chǎn)品有著不同的定位和側(cè)重點(diǎn)，吸引著不同的用戶(hù)，所以資料卡設(shè)計(jì)的樣式也不盡相同。

1. 輔助創(chuàng)作者吸粉

在輔助創(chuàng)作者吸粉這里，有兩個(gè)維度可以思考：

• 內(nèi)容展示維度
• 用戶(hù)關(guān)注維度

內(nèi)容展示分析

在資料卡中，有三個(gè)大區(qū)域：頭圖區(qū)、信息區(qū)和作品區(qū)。

• 頭圖區(qū)：指的是頂部的頭圖區(qū)域，這里可以讓創(chuàng)作者設(shè)置個(gè)性化頭圖，展示個(gè)性。
• 個(gè)人信息區(qū)：主要是作者的基本信息，包括昵稱(chēng)、賬號(hào)名、簡(jiǎn)介、粉絲數(shù)、認(rèn)證信息等…這里通常還承載著一些等級(jí)、榜單，屬于信息展示和官方背書(shū)區(qū)。
• 作品區(qū)：主要展示賬號(hào)發(fā)布的內(nèi)容，這部分通常是瀏覽者最關(guān)注、瀏覽時(shí)間最長(zhǎng)的部分。

通過(guò)對(duì)比市面 20+信息流產(chǎn)品，我們發(fā)現(xiàn)了一些有趣的規(guī)律：

① 頭圖區(qū)：越是社區(qū)類(lèi)產(chǎn)品，對(duì)頭圖個(gè)性化重視程度越高，而資訊類(lèi)的產(chǎn)品則不太重視。

從產(chǎn)品功能上來(lái)看，越是偏向于社區(qū)類(lèi)屬性產(chǎn)品，頭圖區(qū)域越大，可自定義替換的范圍也越廣。從用戶(hù)使用角度來(lái)看，社區(qū)類(lèi)產(chǎn)品的用戶(hù)也更愛(ài)展示自我，頭圖替換的比例也更大，風(fēng)格更多樣化。而資訊類(lèi)產(chǎn)品的創(chuàng)作者大多使用默認(rèn)頭圖，并不進(jìn)行個(gè)性化設(shè)置，自定義頭圖的比例很小。

所以我們?cè)谠O(shè)計(jì)頁(yè)面布局時(shí)，需要思考自身產(chǎn)品定位以及創(chuàng)作者需求，把有限的空間利用在刀刃上。

② 信息區(qū)：越是追求多元化收益商業(yè)化的產(chǎn)品，信息區(qū)承載量越大。

創(chuàng)作者不是活雷鋒，想讓他長(zhǎng)久的留在平臺(tái)必然需要給到創(chuàng)作者更多收益（收益除了顯性也有隱形的，比如 B 站，很多創(chuàng)作者在 B 站發(fā)文平臺(tái)收益相比其他平臺(tái)少，但因?yàn)槠放坡暳看?、氛圍好，獲得了巨大的關(guān)注和曝光，所以即使收益低，創(chuàng)作者也會(huì)持續(xù)在平臺(tái)投稿）。

除了流量分成外，平臺(tái)們也在幫助創(chuàng)作者實(shí)現(xiàn)多元化的收益，比如商鋪、直播、付費(fèi)課程粉絲圈等。甚至抖音很多創(chuàng)作者直接把商務(wù)合作寫(xiě)在了個(gè)人簡(jiǎn)介中招商引資。所以這個(gè)區(qū)域，隨著多元化商業(yè)收入的更多嘗試，信息承載量也越來(lái)越大。

③ 內(nèi)容區(qū)：越是長(zhǎng)內(nèi)容，越傾向于展示更多作品和更多信息；越是短內(nèi)容，越是“看就完了”。

對(duì)比多款產(chǎn)品我們發(fā)現(xiàn)，越是長(zhǎng)內(nèi)容的產(chǎn)品，在內(nèi)容區(qū)越是注重效率選擇。通常會(huì)顯示更多內(nèi)容，且單條內(nèi)容會(huì)顯示更多維度幫助瀏覽者決策是否點(diǎn)擊查看。猜測(cè)可能是因?yàn)閮?nèi)容較長(zhǎng)，瀏覽者通常會(huì)花費(fèi)更多精力在選擇上。而越是短內(nèi)容，把單條內(nèi)容放大，促進(jìn)瀏覽者點(diǎn)擊，直接“看就完了”，反正一條也沒(méi)太長(zhǎng)時(shí)間。

所以設(shè)計(jì)資料卡時(shí)，需要設(shè)計(jì)者清晰了解自己平臺(tái)內(nèi)容特征以及用戶(hù)行為偏好，做出更合適自己平臺(tái)風(fēng)格的設(shè)計(jì)。

綜上，在做內(nèi)容布局展示時(shí)，需要綜合考慮產(chǎn)品定位，思考這些區(qū)域?qū)τ诋a(chǎn)品和創(chuàng)作者瀏覽者意味著什么。

比如頭圖區(qū)域，資訊類(lèi)產(chǎn)品并不重視，畢竟賬號(hào)還是靠?jī)?nèi)容說(shuō)話(huà)，即便是放張個(gè)性化頭圖，瀏覽者也不會(huì)因此而關(guān)注。而且大家都使用默認(rèn)頭圖，個(gè)性化無(wú)從說(shuō)起，就更沒(méi)有什么意義了。

那么如何讓頭圖有價(jià)值？創(chuàng)作者愿意為此更換，而瀏覽者看到能夠感受到帳號(hào)的特殊性？

筆者提供一個(gè)思路拋磚引玉，參考 App Store 的編輯精選：只有精選的 APP 才可以有頭圖權(quán)利，其他 APP 都是默認(rèn)樣式。而稀缺性和被認(rèn)可，正是人類(lèi)所追逐和渴望的。如果平臺(tái)選出一些精選帳號(hào)，賦予其設(shè)置頭圖資格。作為創(chuàng)作者，非常有意愿去更換，因?yàn)榭梢泽w現(xiàn)出和其他賬號(hào)的不同。瀏覽者也可以通過(guò)頭圖感受到當(dāng)前賬號(hào)的優(yōu)質(zhì)屬性。

用戶(hù)行為關(guān)注調(diào)研

既然要幫賬號(hào)吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據(jù)哪些內(nèi)容判斷是否關(guān)注該賬號(hào)。這里我們線(xiàn)下調(diào)研了 12 名用戶(hù)，了解他們?cè)谛畔⒘鳟a(chǎn)品中（產(chǎn)品不限于 B 站、抖音、小紅書(shū)、知乎、快手等）進(jìn)入資料卡后，通過(guò)哪些信息和元素來(lái)決策是否關(guān)注賬號(hào)。

通過(guò)訪(fǎng)談，我們得到了 12 名用戶(hù)的原始表述。

我們發(fā)現(xiàn)，瀏覽者在關(guān)注賬號(hào)的時(shí)候，主要在意“內(nèi)容是不是感興趣” 、“粉絲量多少” 和 “內(nèi)容領(lǐng)域”。少量同學(xué)提到了會(huì)關(guān)注下作品數(shù)，其他信息基本不看。

原話(huà)摘錄：

• 主要看作者發(fā)的內(nèi)容，把高播放量的看一下，如果都比較感興趣就會(huì)關(guān)注。會(huì)看一下粉絲量，粉絲量多代表質(zhì)量比較好，關(guān)注不會(huì)踩坑。作品數(shù)會(huì)看一眼，如果作品太少，比如5個(gè)以下就不關(guān)注了直接看。
• 只看內(nèi)容，其他作者資料基本都不看，偶爾看一下粉絲數(shù)。教程不看粉絲數(shù)，教程如果是我需要的內(nèi)容，就算粉絲少我也會(huì)關(guān)注。
• 主要看作者別的視頻，關(guān)注主要是為收藏，不看別的只看所有視頻。會(huì)關(guān)注最近內(nèi)容的播放量怎么樣，其他基本不看。
• 那肯定是看內(nèi)容是不是感興趣啊，關(guān)鍵還是看內(nèi)容，粉絲量和點(diǎn)贊作品數(shù)會(huì)看一下，但不會(huì)作為關(guān)注的主要原因。如果粉絲量作品數(shù)多的話(huà)，關(guān)注動(dòng)力會(huì)大一些。其他的都不看。
• 還是看內(nèi)容是不是感興趣。粉絲量分情況，特別需要的內(nèi)容不關(guān)注粉絲量，搞笑類(lèi)生活類(lèi)的會(huì)看下粉絲量再考慮是不是關(guān)注。有一些作者如果只看個(gè)別內(nèi)容感興趣但整個(gè)領(lǐng)域不感興趣的話(huà)不會(huì)關(guān)注。通過(guò)標(biāo)題大概判斷是不是自己喜歡的類(lèi)型，最主要的還是內(nèi)容，其他的不看，粉絲量會(huì)看一下別太差就行。

而在操作路徑上，進(jìn)入資料卡后：先到作品區(qū)查看內(nèi)容列表 → 拖動(dòng)頁(yè)面向上查看更多內(nèi)容 → 返回信息區(qū)查看粉絲量 → 關(guān)注賬號(hào)。呈現(xiàn)先下后上的操作路徑。

行為路徑結(jié)合關(guān)注決策，有三個(gè)關(guān)鍵元素是形成操作鏈條并綁定在一起：內(nèi)容、 粉絲數(shù) 、關(guān)注按鈕，且內(nèi)容為高播放量?jī)?nèi)容。所以高播放量?jī)?nèi)容，粉絲數(shù)是決策關(guān)鍵，激發(fā)下一步關(guān)注行為。

而且我們?cè)谠L(fǎng)談中發(fā)現(xiàn)，關(guān)注行為也是一個(gè)偏沖動(dòng)行為，用戶(hù)通常在進(jìn)入資料卡的幾分鐘內(nèi)做出決定，在頁(yè)面停留時(shí)間越長(zhǎng)，越不容易發(fā)生關(guān)注行為。所以在設(shè)計(jì)中，盡量縮短決策路徑，減少?zèng)Q策時(shí)間。

基于以上結(jié)論我們做了兩個(gè)方案再次進(jìn)行測(cè)試：

• 方案1：傳統(tǒng)樣式
• 方案2：高播放量?jī)?nèi)容，粉絲量，關(guān)注按鈕放置在同一區(qū)域，縮短決策路徑

為什么做一個(gè)傳統(tǒng)方案進(jìn)行對(duì)比測(cè)試也是因?yàn)楝F(xiàn)在很多產(chǎn)品資料卡頁(yè)面趨同，大家已經(jīng)形成了認(rèn)知慣性，而尊重用戶(hù)習(xí)慣也是產(chǎn)品設(shè)計(jì)中需要考量的因素。接下來(lái)，我們又找了 12 名同學(xué)進(jìn)行訪(fǎng)談和測(cè)試。

出乎意料的是，大家對(duì)于新事物的接受程度很高，有八名同學(xué)選擇方案 2。雖然只是理論上的選擇，并沒(méi)有延伸到實(shí)際行為，但也佐證了大家對(duì)于高播放量?jī)?nèi)容確實(shí)存在很高的需求。對(duì)于選擇方案 1（傳統(tǒng)樣式）的同學(xué)來(lái)說(shuō)，主要是不喜歡橫滑操作和不想改變既有習(xí)慣。

原話(huà)摘錄：

• 喜歡方案1，不喜歡橫滑，習(xí)慣豎著操作，標(biāo)題清晰
• 喜歡方案1，橫著這樣展示好像沒(méi)有豎著這樣展示清晰，喜歡這種長(zhǎng)條的樣式
• 喜歡方案2，喜歡這個(gè)，重點(diǎn)突出，符合我的習(xí)慣，如果高播放量?jī)?nèi)容都不錯(cuò)我就會(huì)關(guān)注，省得找來(lái)找去了
• 喜歡方案2，上面這個(gè)類(lèi)似youtube的popular uploads的東西能讓你第一眼看出這個(gè)UP主牛在哪

不管哪種樣式，內(nèi)容都是重中之重。既然是重中之重，大家也會(huì)注意到，有些內(nèi)容區(qū)視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區(qū)別呢？會(huì)對(duì)關(guān)注產(chǎn)生影響嗎？

基于兩種樣式進(jìn)行訪(fǎng)談，比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來(lái)講，雙列的形態(tài)展示的內(nèi)容更多，而且對(duì)視頻更加友好，預(yù)覽圖比較大。所以如果是視頻內(nèi)容，可以使用雙列大預(yù)覽圖樣式。

以上是關(guān)注吸粉的部分，設(shè)計(jì)時(shí)需要綜合考慮產(chǎn)品定位和用戶(hù)行為特征進(jìn)行頁(yè)面布局。

2. 助力商業(yè)化變現(xiàn)

商業(yè)化能力是創(chuàng)作者與平臺(tái)形成強(qiáng)關(guān)系的紐帶。平臺(tái)為幫助創(chuàng)作者變現(xiàn)，不僅通過(guò)各類(lèi)扶持政策給予補(bǔ)貼， 更是通過(guò)整合各類(lèi)商業(yè)資源，不斷拓展商業(yè)化渠道，打通全流程商業(yè)鏈條，幫助創(chuàng)作者實(shí)現(xiàn)內(nèi)容價(jià)值最大化。

一般平臺(tái)提供商業(yè)化有三種類(lèi)型：

基礎(chǔ)工具

• 商業(yè)基礎(chǔ)：平臺(tái)提供流量分成、現(xiàn)金獎(jiǎng)勵(lì)等
• 商業(yè)化功能：打賞、電商功能、內(nèi)容付費(fèi)功能、直播功能等
• 精準(zhǔn)推送功能：粉絲分組推送、粉絲必達(dá)等

平臺(tái)政策

• 扶持計(jì)劃：出臺(tái)各類(lèi)流量扶持政策，賦能變現(xiàn)
• 獎(jiǎng)勵(lì)政策：MCN 簽約、創(chuàng)作活動(dòng)

資源整合

商業(yè)資源整合：整合平臺(tái)內(nèi)外部的廣告主資源、商業(yè)活動(dòng)資源、投融資服務(wù)、新媒體賬號(hào)孵化等各類(lèi)資源

資料卡涉及到的商業(yè)化展示主要為：電商能力，內(nèi)容付費(fèi)，粉絲圈/粉絲付費(fèi)。當(dāng)有這些商業(yè)化內(nèi)容的時(shí)候，通常占用信息區(qū)一行區(qū)域，大多數(shù)信息流產(chǎn)品多如此。

但當(dāng)多種商業(yè)化能力同時(shí)提供時(shí)，不同的產(chǎn)品給出了不同的解決方案。比如大多數(shù)產(chǎn)品合并在信息區(qū)的一行，通過(guò)橫劃展示更多，以保證其他內(nèi)容的露出。畢竟對(duì)于瀏覽者來(lái)講，內(nèi)容才是最重要的。

有一些產(chǎn)品則沒(méi)有選擇合并的方式而每個(gè)占用一行空間，與此同時(shí)，把創(chuàng)作者的信息展示的也更為詳細(xì)，可能和本身社區(qū)類(lèi)產(chǎn)品的定位有關(guān)，希望更能關(guān)注除了內(nèi)容以外，創(chuàng)作者自身的獨(dú)特價(jià)值。

還有一些產(chǎn)品則利用了內(nèi)容 tab 區(qū)域承載櫥窗和付費(fèi)服務(wù)，減少信息區(qū)的占用，還可以通過(guò)邏輯把不同渠道或不同場(chǎng)景的用戶(hù)引導(dǎo)不同 tab，讓瀏覽者看到更適合自己的內(nèi)容。

總結(jié)

資料卡里承載了很多的信息，從創(chuàng)作者的個(gè)性展示到內(nèi)容到商業(yè)化變現(xiàn)，需要我們不斷平衡每個(gè)區(qū)域的關(guān)系。

別的產(chǎn)品這么做，并不一定適合自己的業(yè)務(wù)，需要我們找準(zhǔn)自己產(chǎn)品的定位，結(jié)合當(dāng)下業(yè)務(wù)重點(diǎn)去綜合考慮。

業(yè)務(wù)是偏資訊的還是偏社區(qū)的？是偏短內(nèi)容平臺(tái)還是長(zhǎng)內(nèi)容？有沒(méi)有提供足夠多的商業(yè)變現(xiàn)能力給到創(chuàng)作者？商業(yè)化能力做的如何？不同模塊的用戶(hù)數(shù)據(jù)怎么樣？只有對(duì)現(xiàn)有業(yè)務(wù)充分了解，才知道哪些是現(xiàn)階段的重點(diǎn)，才能對(duì)一個(gè)頁(yè)面做出更有依據(jù)的設(shè)計(jì)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：優(yōu)設(shè)   作者：騰訊設(shè)計(jì) 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)