大廠案例｜優(yōu)酷如何通過智能 UI 設(shè)計(jì)讓用戶和內(nèi)容更高效鏈接
▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長
轉(zhuǎn)自：AlibabaDesign
編輯：章欣怡
共 3738 字，預(yù)計(jì)閱讀 10 分鐘
01
背景
為進(jìn)一步提升長視頻內(nèi)容分發(fā)效率，優(yōu)酷平臺(tái)設(shè)計(jì)團(tuán)隊(duì)發(fā)起智能 UI 項(xiàng)目，我們進(jìn)行了為期半年的一系列測試，在核心數(shù)據(jù)上已長期取得正向收益。
借鑒集團(tuán)在這個(gè)方向的探索經(jīng)驗(yàn)，我們沉淀了中臺(tái)能力，總結(jié)了符合文娛特性的智能UI設(shè)計(jì)方法供大家探討。
02
提效多場景的消費(fèi)決策
不同用戶 “連接” 不同內(nèi)容
長視頻內(nèi)容推薦是智能 UI 的核心發(fā)力場景，我們通過智能 UI 讓用戶和內(nèi)容能夠更高效的連接。
1. 不同的用戶：多元化的消費(fèi)者，差異化的決策
因年齡、地域、性別、收入的差異，用戶在視頻消費(fèi)決策時(shí)會(huì)被不同的 “推薦維度” 和 “UI 樣式” 所影響，智能 UI 會(huì)根據(jù)用戶不同的 “易感度” 不斷嘗試更有效的 UI 設(shè)計(jì)。
2. 不同的內(nèi)容：新熱視頻宣發(fā)+庫存視頻分發(fā)
優(yōu)酷的視頻由 “新熱” 和 “庫存” 組成，“新熱” 強(qiáng)調(diào)宣傳和消費(fèi)的時(shí)效性，“庫存” 的特征是量級(jí)大、類型多元。
智能 UI 可以幫助單一內(nèi)容多樣化表達(dá)，快速引起不同用戶的消費(fèi)意愿，同時(shí)可以根據(jù)不同內(nèi)容特點(diǎn)調(diào)整 UI 上信息的優(yōu)先級(jí)和形式，例如明星題材、互動(dòng)熱度、觀看品質(zhì)、行業(yè)評價(jià)、圈層喜好、價(jià)格優(yōu)惠等等。
03
“3 步” 搭建優(yōu)酷智能 UI 系統(tǒng)
1. 建立設(shè)計(jì)目標(biāo)
2. 搭建生產(chǎn)閉環(huán)：前臺(tái)、中臺(tái)、后臺(tái)
按照不同使用對象和功能，智能 UI 的生產(chǎn)鏈路可以拆分成 3 個(gè)部分。
前臺(tái)：設(shè)計(jì)元素的數(shù)字
前臺(tái)包含智能 UI 方案對 “用戶的展示” 和 “前端能力”，設(shè)計(jì)師需要和前端開發(fā)共建，把視覺樣式翻譯成代碼，顆粒度越細(xì)越意味著面對用戶展示的方案在復(fù)雜度和靈活性上可以更高。
中臺(tái)：設(shè)計(jì)經(jīng)驗(yàn)沉淀+方案存儲(chǔ)+方案決策
中臺(tái)的功能是讓機(jī)器智能進(jìn)行 UI 方案的生產(chǎn)、存儲(chǔ)、呈現(xiàn)，并且提供給業(yè)務(wù)方、個(gè)人工運(yùn)營或機(jī)器智能做出投放決策。
確立構(gòu)成 UI 方案的公式
中臺(tái)搭建前期，設(shè)計(jì)師需要拆解所有構(gòu)成 UI 方案的設(shè)計(jì)元素并梳理結(jié)構(gòu)化分類，同時(shí)，形成一套穩(wěn)定組合元素的公式，當(dāng)前公式由 “內(nèi)容”、“形式”、“組合方式” 三部分組成。
“內(nèi)容” 即視頻的 “推薦理由和圖像源”，“形式” 是圖像的 “布局” 和文字的 “視覺樣式”，還有頁面背景元素，如背景色，圓角，字號(hào)，間距，“組合” 是內(nèi)容和形式的多種結(jié)合方式變量。
個(gè)性化 UI 投放需要方案個(gè)數(shù)滿足一定量級(jí)，同時(shí)在視覺樣式上要拉開差異，這樣投放給不同用戶才能獲得差異化數(shù)據(jù)，幫助算法成長。
設(shè)計(jì)師需要根據(jù)專業(yè)經(jīng)驗(yàn)幫助算法建立方案的矩陣：洞察并假設(shè)不同方案和不同用戶之間的關(guān)系，將各種方案按照各自特征歸納和區(qū)分，最后將最核心的特征提煉并形成矩陣上的向限。
我們可以建立基礎(chǔ) 3 個(gè)向限圖，分別是 “用戶” 分類，“決策類型” 分類，“UI 方案” 分類，思考 3 個(gè)向限之間的關(guān)聯(lián)，觀察方案在象限上的分布，可以模糊的找到測試的方向，幫機(jī)器劃定測試的優(yōu)先級(jí)。
每次投放前后，我們可以觀察方案集中在向限的哪一部分，對應(yīng)結(jié)果如何，測試是否有效。接下來，重點(diǎn)放在探索矩陣上的盲區(qū)，從方案最大差異化的角度去嘗試對不同用戶的吸引力和收益，最終逐步沉淀真正能帶來長期效果的 UI 方案組合。
后臺(tái)：沉淀數(shù)據(jù)資產(chǎn)
后臺(tái)面對的主要是業(yè)務(wù)方、運(yùn)營、設(shè)計(jì)師，功能是解讀數(shù)據(jù)形成結(jié)論和策略，結(jié)論是 “是否有效”，策略是 “因何起效”，機(jī)器算法生成的設(shè)計(jì)可能會(huì)帶來意料之外的收益，從而補(bǔ)充設(shè)計(jì)師假設(shè)之外的經(jīng)驗(yàn)。
不同的業(yè)務(wù)需求，可通過數(shù)據(jù)報(bào)表可視化直觀看到方案對應(yīng)的用戶畫像，反之也可以看到用戶對不同方案的度敏感。比起以前設(shè)計(jì)師憑借經(jīng)驗(yàn)和表述能力去反推業(yè)務(wù)，數(shù)據(jù)佐證更簡單直觀，這降低了多方溝通成本，也更清晰的衡量了設(shè)計(jì)的價(jià)值。
3. 明確 UI 設(shè)計(jì)原則
長視頻娛樂是各種故事、熱鬧的場景、影劇綜是一個(gè)個(gè)虛擬的世界，混雜著多重感官刺激，智能 UI 作為包裝它們的容器，應(yīng)持續(xù)圍繞著內(nèi)容特性出發(fā)，隨著創(chuàng)意元素和機(jī)器生成方案的量級(jí)變大，需要明確設(shè)計(jì)原則劃定創(chuàng)意的邊界，我們從平時(shí)大家經(jīng)常說的一些關(guān)鍵詞總結(jié)原則，檢查 UI 方案是否符合初衷、有無偏離。
從受眾用戶特性出發(fā)
差異化、品質(zhì)感、易感知
從視頻內(nèi)容類型出發(fā)
沉浸感、故事性、情緒化
4. 一些實(shí)踐經(jīng)驗(yàn)
多 UI 模塊之間的流量分配
智能 UI 的測試一般從小范圍開始，從單個(gè)模塊向多個(gè)模塊擴(kuò)展，最終覆蓋整個(gè)頁面。前期測試，核心關(guān)注單一模塊的新老效果對比，隨著局部數(shù)據(jù)提升，測試的多個(gè)模塊會(huì)互相爭搶流量，這需要我們重新明確當(dāng)前頁面的整體目標(biāo)，通過調(diào)整模塊上下次序或出現(xiàn)頻次去達(dá)成。
宣發(fā)和分發(fā)型 UI 模塊的平衡
“宣發(fā)型 UI” 包含排行榜，合集等服務(wù)于用戶的功能，大多數(shù)用戶已有固定使用心智，可以在不損失使用效率的同做到 “視覺有差異” 但 “占比小”，以幫助其余 “分發(fā)型 UI” 有更多曝光空間。
信息的密度和模塊的高度，影響瀏覽深度
長視頻內(nèi)容宣發(fā)存在密集期和空檔期，通過控制 “信息曝光密度” 和 “模塊高度” 兩者的相互關(guān)系，可以根據(jù)業(yè)務(wù)需求引導(dǎo)用戶瀏覽深度，例如，信息密度變低，促進(jìn)用戶下滑去分發(fā)庫存內(nèi)容，信息密度變高，減少下滑更多曝光新內(nèi)容。
“點(diǎn)擊” 和 “轉(zhuǎn)化” 的平衡
點(diǎn)擊量和最終轉(zhuǎn)化在漏斗上的比例，需要根據(jù)業(yè)務(wù)訴求維持在合理的范圍。“點(diǎn)擊” 升高，“轉(zhuǎn)化” 降低，意味著個(gè)性化的 UI 讓用戶有了更大的探索欲望，“點(diǎn)擊” 降低，“轉(zhuǎn)化“ 升高，意味著個(gè)性化 UI 讓用戶更短路徑獲得了自己預(yù)期的內(nèi)容，“點(diǎn)擊” 升高，“轉(zhuǎn)化” 升高，提升了用戶對頁面總體的興趣，每一種點(diǎn)擊轉(zhuǎn)化比例都是有利有弊的需要根據(jù)業(yè)務(wù)情況去使用。
04
4 個(gè)趨勢：智能 UI 的未來
移動(dòng)端的競爭日益激烈，人口紅利見頂，新用戶增長放緩，個(gè)人使用時(shí)長接近極限。越來越多的服務(wù)和信息在用戶流量集中的移動(dòng)端app中復(fù)雜交織。“精細(xì)化分發(fā)” 成為基礎(chǔ)底層需求，這需要 “UI 設(shè)計(jì)” 更加匹配對應(yīng)的 “人群”。
1. 更圍繞用戶 “個(gè)體” 的 UI 設(shè)計(jì)
用戶側(cè)：獲取的主動(dòng)性降低
面對信息的沖擊，用戶在不斷降低為 “信息獲取” 所付出的成本。觸達(dá)界面減少，瀏覽碎片化，操作路徑固化且行為單一，瀏覽深度和耐心持續(xù)降低。
平臺(tái)側(cè)：推薦的效率提升
為了更多商業(yè)空間，業(yè)務(wù)的服務(wù)不斷精細(xì)的區(qū)分用戶類型，試圖對用戶 “需求、意愿” 進(jìn)行更準(zhǔn)確的 “理解、預(yù)判”，提升精準(zhǔn)的服務(wù)。
2. 不斷的精細(xì)化：從 “推薦維度” 個(gè)性化到 “推薦形式” 多元化
5G、社區(qū)化、內(nèi)容化等讓曾經(jīng)主流的 “圖文” 向 “視頻” 轉(zhuǎn)變，商品 “個(gè)性化” 過渡到 “推薦維度” 和 “形式” 的 “個(gè)性化”。
3. 重新定義設(shè)計(jì)師和設(shè)計(jì)工作 — UI 生產(chǎn)方式 “智能” VS “人工”
UI 設(shè)計(jì)“傳統(tǒng)流程”
線性的工作流：時(shí)間成本
傳統(tǒng) UI 設(shè)計(jì)是強(qiáng)業(yè)務(wù)訴求驅(qū)動(dòng)，設(shè)計(jì)處于工作鏈條上的中下游。決策方通過競對和成本等條件去判斷多套 UI 方案的優(yōu)劣，評估過程時(shí)間較長。
只能投放單一方案：用戶流失
當(dāng)業(yè)務(wù)的用戶量級(jí)較大、構(gòu)成復(fù)雜時(shí)，單一方案對全量用戶的做法會(huì)犧牲部分用戶的體驗(yàn)，在流量價(jià)值越來越高的時(shí)代，無法服務(wù)更多類型用戶意味著難以實(shí)現(xiàn)最大規(guī)模的留存。
決策缺乏數(shù)據(jù)支撐：設(shè)計(jì)返工
方案投放后沒有得到理想的數(shù)據(jù)，意味著需要重新評估各方策略，設(shè)計(jì)在這一刻容易失焦，原因是缺乏量化且精準(zhǔn)的數(shù)據(jù)指導(dǎo)修改。
UI 設(shè)計(jì)“智能流程”
發(fā)揮人與機(jī)器各自的優(yōu)勢
在智能 UI 項(xiàng)目中，設(shè)計(jì)師的優(yōu)勢在于 “經(jīng)驗(yàn)，假設(shè)，情感，直覺，用戶的角度”，機(jī)器智能的優(yōu)勢是 “自動(dòng)投放、海量精細(xì)數(shù)據(jù)回收、數(shù)據(jù)存儲(chǔ)、策略生成、生成設(shè)計(jì)、產(chǎn)能提升（速度，規(guī)模）”。
設(shè)計(jì)師的角色和定位改變
傳統(tǒng) UI 的設(shè)計(jì)師憑借 “經(jīng)驗(yàn)和技能” 直接產(chǎn)生設(shè)計(jì)方案，而智能 UI 要求設(shè)計(jì)師重點(diǎn)在于設(shè)計(jì)一個(gè) “產(chǎn)生方案” 的 “設(shè)計(jì)系統(tǒng)”，將設(shè)計(jì)環(huán)節(jié) “工程化"，通過多方案追求整體提升，而不是追求某一設(shè)計(jì)方案本身。
減少設(shè)計(jì)內(nèi)耗，專注設(shè)計(jì)專業(yè)，明確設(shè)計(jì)價(jià)值
通過智能 UI 能力，設(shè)計(jì)師也可以減少人力消耗，更專注于新技能開發(fā)、設(shè)計(jì)策略沉淀和準(zhǔn)確選擇，同時(shí)，在業(yè)務(wù)大目標(biāo)不變的情況下，設(shè)計(jì)師可以借數(shù)據(jù)和智能 UI 的能力主動(dòng)自驅(qū)，不必完全等待需求。
4. 更科學(xué)的降低設(shè)計(jì)成本 — 一次性投入，長期積累
區(qū)別于傳統(tǒng) UI 在成本上的反復(fù)投入，智能 UI 的投入是一次性的，投入后即成為積累。
05
寫在結(jié)尾
由于以前的技術(shù)限制，我們沒有能力去實(shí)現(xiàn)個(gè)體的在 UI 上的體驗(yàn)差異，隨著中國人口比例和移動(dòng)互聯(lián)網(wǎng)用戶構(gòu)成的變化，商業(yè)和個(gè)性化體驗(yàn)會(huì)關(guān)聯(lián)的越發(fā)緊密。業(yè)務(wù)需要通過更精細(xì)精準(zhǔn)的服務(wù)完成營收，隨著數(shù)據(jù)帶寬和技術(shù)不斷提升，UI 設(shè)計(jì)從生產(chǎn)方式到方案勢必不斷變革。
隨著更人性化的需求在各領(lǐng)域的滲透，相信越來越多垂類場景的智能UI項(xiàng)目會(huì)出現(xiàn)在我們身邊，影響每一個(gè)人。
?? 我們一起聊設(shè)計(jì) ???♂?
微信行業(yè)交流群
期待與更多優(yōu)秀設(shè)計(jì)師一起成長
??
PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）
?? 星標(biāo)公眾號(hào)方法
點(diǎn)開下方公眾號(hào) ?? 點(diǎn)擊右上角【...】 ?? 設(shè)為星標(biāo)
