2021-8-15 資深UI設計者
在信息流產(chǎn)品中，個人資料卡是一個很重要的頁面。一方面，創(chuàng)作者通過這個頁面展示賬號價值，突顯賬號魅力，引導用戶關注；另一方面，消費型用戶通過這個頁面了解創(chuàng)作者，查看創(chuàng)作者更多內(nèi)容，是眾多消費型用戶消費內(nèi)容中重要的一環(huán)。只有把這個循環(huán)做好才能長期促進平臺生態(tài)發(fā)展。
這個頁面承載著這么多的價值，該如何設計？本篇將以 QB 看點號資料卡升級的設計思路為例，進行分析解答。
在前期分析過程中，我們發(fā)現(xiàn)當前版本存在諸多問題。
從數(shù)據(jù)上看，對比公司內(nèi)同類產(chǎn)品，關注按鈕轉化率較低（出于數(shù)據(jù)保護，數(shù)據(jù)隱藏）。
從樣式上看，信息布局較亂，重點不突出。
基于以上背景，我們開始對資料卡進行改版升級。
做任何一個設計前，都應該思考設計目標，否則設計出來的結果沒有意義，也缺乏過程依據(jù)和支撐。那么資料卡的設計目標是什么呢？這要從資料卡在信息流產(chǎn)品中的使命和價值說起。
一方面，消費型用戶通過這個頁面了解創(chuàng)作者，查看更多內(nèi)容；另一方面，創(chuàng)作者通過這個頁面展示賬號價值，突顯賬號魅力，引導瀏覽者關注。
如果創(chuàng)作者能夠在資料卡充分展現(xiàn)自己的才華和魅力，帶來了更多瀏覽者的“關注”，那他們就更有動力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。
更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來之后再進行商業(yè)化。這樣對消費型用戶、內(nèi)容生產(chǎn)者、平臺方都有利，進而處于良性循環(huán)。
了解了資料卡的使命和價值，設計目標也呼之欲出，作為平臺方，我們需要幫創(chuàng)作者解決兩個問題：輔助創(chuàng)作者吸粉 & 助力商業(yè)化變現(xiàn)
當然，創(chuàng)作者產(chǎn)出優(yōu)質(zhì)的內(nèi)容才是吸粉的關鍵，平臺方只能助攻。但不同的信息流產(chǎn)品有著不同的定位和側重點，吸引著不同的用戶，所以資料卡設計的樣式也不盡相同。
在輔助創(chuàng)作者吸粉這里，有兩個維度可以思考：
內(nèi)容展示分析
在資料卡中，有三個大區(qū)域：頭圖區(qū)、信息區(qū)和作品區(qū)。
通過對比市面 20+信息流產(chǎn)品，我們發(fā)現(xiàn)了一些有趣的規(guī)律：
① 頭圖區(qū)：越是社區(qū)類產(chǎn)品，對頭圖個性化重視程度越高，而資訊類的產(chǎn)品則不太重視。
從產(chǎn)品功能上來看，越是偏向于社區(qū)類屬性產(chǎn)品，頭圖區(qū)域越大，可自定義替換的范圍也越廣。從用戶使用角度來看，社區(qū)類產(chǎn)品的用戶也更愛展示自我，頭圖替換的比例也更大，風格更多樣化。而資訊類產(chǎn)品的創(chuàng)作者大多使用默認頭圖，并不進行個性化設置，自定義頭圖的比例很小。
所以我們在設計頁面布局時，需要思考自身產(chǎn)品定位以及創(chuàng)作者需求，把有限的空間利用在刀刃上。
② 信息區(qū)：越是追求多元化收益商業(yè)化的產(chǎn)品，信息區(qū)承載量越大。
創(chuàng)作者不是活雷鋒，想讓他長久的留在平臺必然需要給到創(chuàng)作者更多收益（收益除了顯性也有隱形的，比如 B 站，很多創(chuàng)作者在 B 站發(fā)文平臺收益相比其他平臺少，但因為品牌聲量大、氛圍好，獲得了巨大的關注和曝光，所以即使收益低，創(chuàng)作者也會持續(xù)在平臺投稿）。
除了流量分成外，平臺們也在幫助創(chuàng)作者實現(xiàn)多元化的收益，比如商鋪、直播、付費課程粉絲圈等。甚至抖音很多創(chuàng)作者直接把商務合作寫在了個人簡介中招商引資。所以這個區(qū)域，隨著多元化商業(yè)收入的更多嘗試，信息承載量也越來越大。
③ 內(nèi)容區(qū)：越是長內(nèi)容，越傾向于展示更多作品和更多信息；越是短內(nèi)容，越是“看就完了”。
對比多款產(chǎn)品我們發(fā)現(xiàn)，越是長內(nèi)容的產(chǎn)品，在內(nèi)容區(qū)越是注重效率選擇。通常會顯示更多內(nèi)容，且單條內(nèi)容會顯示更多維度幫助瀏覽者決策是否點擊查看。猜測可能是因為內(nèi)容較長，瀏覽者通常會花費更多精力在選擇上。而越是短內(nèi)容，把單條內(nèi)容放大，促進瀏覽者點擊，直接“看就完了”，反正一條也沒太長時間。
所以設計資料卡時，需要設計者清晰了解自己平臺內(nèi)容特征以及用戶行為偏好，做出更合適自己平臺風格的設計。
綜上，在做內(nèi)容布局展示時，需要綜合考慮產(chǎn)品定位，思考這些區(qū)域?qū)τ诋a(chǎn)品和創(chuàng)作者瀏覽者意味著什么。
比如頭圖區(qū)域，資訊類產(chǎn)品并不重視，畢竟賬號還是靠內(nèi)容說話，即便是放張個性化頭圖，瀏覽者也不會因此而關注。而且大家都使用默認頭圖，個性化無從說起，就更沒有什么意義了。
那么如何讓頭圖有價值？創(chuàng)作者愿意為此更換，而瀏覽者看到能夠感受到帳號的特殊性？
筆者提供一個思路拋磚引玉，參考 App Store 的編輯精選：只有精選的 APP 才可以有頭圖權利，其他 APP 都是默認樣式。而稀缺性和被認可，正是人類所追逐和渴望的。如果平臺選出一些精選帳號，賦予其設置頭圖資格。作為創(chuàng)作者，非常有意愿去更換，因為可以體現(xiàn)出和其他賬號的不同。瀏覽者也可以通過頭圖感受到當前賬號的優(yōu)質(zhì)屬性。
用戶行為關注調(diào)研
既然要幫賬號吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據(jù)哪些內(nèi)容判斷是否關注該賬號。這里我們線下調(diào)研了 12 名用戶，了解他們在信息流產(chǎn)品中（產(chǎn)品不限于 B 站、抖音、小紅書、知乎、快手等）進入資料卡后，通過哪些信息和元素來決策是否關注賬號。
通過訪談，我們得到了 12 名用戶的原始表述。
我們發(fā)現(xiàn)，瀏覽者在關注賬號的時候，主要在意“內(nèi)容是不是感興趣” 、“粉絲量多少” 和 “內(nèi)容領域”。少量同學提到了會關注下作品數(shù)，其他信息基本不看。
原話摘錄：
而在操作路徑上，進入資料卡后：先到作品區(qū)查看內(nèi)容列表 → 拖動頁面向上查看更多內(nèi)容 → 返回信息區(qū)查看粉絲量 → 關注賬號。呈現(xiàn)先下后上的操作路徑。
行為路徑結合關注決策，有三個關鍵元素是形成操作鏈條并綁定在一起：內(nèi)容、 粉絲數(shù) 、關注按鈕，且內(nèi)容為高播放量內(nèi)容。所以高播放量內(nèi)容，粉絲數(shù)是決策關鍵，激發(fā)下一步關注行為。
而且我們在訪談中發(fā)現(xiàn)，關注行為也是一個偏沖動行為，用戶通常在進入資料卡的幾分鐘內(nèi)做出決定，在頁面停留時間越長，越不容易發(fā)生關注行為。所以在設計中，盡量縮短決策路徑，減少決策時間。
基于以上結論我們做了兩個方案再次進行測試：
為什么做一個傳統(tǒng)方案進行對比測試也是因為現(xiàn)在很多產(chǎn)品資料卡頁面趨同，大家已經(jīng)形成了認知慣性，而尊重用戶習慣也是產(chǎn)品設計中需要考量的因素。接下來，我們又找了 12 名同學進行訪談和測試。
出乎意料的是，大家對于新事物的接受程度很高，有八名同學選擇方案 2。雖然只是理論上的選擇，并沒有延伸到實際行為，但也佐證了大家對于高播放量內(nèi)容確實存在很高的需求。對于選擇方案 1（傳統(tǒng)樣式）的同學來說，主要是不喜歡橫滑操作和不想改變既有習慣。
原話摘錄：
不管哪種樣式，內(nèi)容都是重中之重。既然是重中之重，大家也會注意到，有些內(nèi)容區(qū)視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區(qū)別呢？會對關注產(chǎn)生影響嗎？
基于兩種樣式進行訪談，比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來講，雙列的形態(tài)展示的內(nèi)容更多，而且對視頻更加友好，預覽圖比較大。所以如果是視頻內(nèi)容，可以使用雙列大預覽圖樣式。
以上是關注吸粉的部分，設計時需要綜合考慮產(chǎn)品定位和用戶行為特征進行頁面布局。
商業(yè)化能力是創(chuàng)作者與平臺形成強關系的紐帶。平臺為幫助創(chuàng)作者變現(xiàn)，不僅通過各類扶持政策給予補貼， 更是通過整合各類商業(yè)資源，不斷拓展商業(yè)化渠道，打通全流程商業(yè)鏈條，幫助創(chuàng)作者實現(xiàn)內(nèi)容價值最大化。
一般平臺提供商業(yè)化有三種類型：
基礎工具
平臺政策
資源整合
商業(yè)資源整合：整合平臺內(nèi)外部的廣告主資源、商業(yè)活動資源、投融資服務、新媒體賬號孵化等各類資源
資料卡涉及到的商業(yè)化展示主要為：電商能力，內(nèi)容付費，粉絲圈/粉絲付費。當有這些商業(yè)化內(nèi)容的時候，通常占用信息區(qū)一行區(qū)域，大多數(shù)信息流產(chǎn)品多如此。
但當多種商業(yè)化能力同時提供時，不同的產(chǎn)品給出了不同的解決方案。比如大多數(shù)產(chǎn)品合并在信息區(qū)的一行，通過橫劃展示更多，以保證其他內(nèi)容的露出。畢竟對于瀏覽者來講，內(nèi)容才是最重要的。
有一些產(chǎn)品則沒有選擇合并的方式而每個占用一行空間，與此同時，把創(chuàng)作者的信息展示的也更為詳細，可能和本身社區(qū)類產(chǎn)品的定位有關，希望更能關注除了內(nèi)容以外，創(chuàng)作者自身的獨特價值。
還有一些產(chǎn)品則利用了內(nèi)容 tab 區(qū)域承載櫥窗和付費服務，減少信息區(qū)的占用，還可以通過邏輯把不同渠道或不同場景的用戶引導不同 tab，讓瀏覽者看到更適合自己的內(nèi)容。
資料卡里承載了很多的信息，從創(chuàng)作者的個性展示到內(nèi)容到商業(yè)化變現(xiàn)，需要我們不斷平衡每個區(qū)域的關系。
別的產(chǎn)品這么做，并不一定適合自己的業(yè)務，需要我們找準自己產(chǎn)品的定位，結合當下業(yè)務重點去綜合考慮。
業(yè)務是偏資訊的還是偏社區(qū)的？是偏短內(nèi)容平臺還是長內(nèi)容？有沒有提供足夠多的商業(yè)變現(xiàn)能力給到創(chuàng)作者？商業(yè)化能力做的如何？不同模塊的用戶數(shù)據(jù)怎么樣？只有對現(xiàn)有業(yè)務充分了解，才知道哪些是現(xiàn)階段的重點，才能對一個頁面做出更有依據(jù)的設計。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：優(yōu)設 作者：騰訊設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.wnxcall.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務