學UI設計,大廠這用戶體驗設計改版案例真是絕了!
在內容消費趨勢之中,用戶越發(fā)在意瀏覽內容的體驗與獲得的價值。
借此萌生了淘寶評價、問大家產品的改版想法。
▲ 問大家(左)評價(右)
設計改版怎么做呢?基礎UGC(User generated-content,用戶生產內容)產品又該如何積極面對年輕化的內容趨勢?又兼顧十數(shù)年來養(yǎng)成的用戶習慣呢?
#01
情緒設定幫助體驗改版
01.挑戰(zhàn):老產品改版顧慮多
老產品體驗改版的難度在于突破歷史束縛,團隊需要凝聚共識,找到一個契機來做出改變,單純的樣式優(yōu)化和圖標替換并不能說服團隊投入資源。
所以我們希望通過找到大家都有感的「感覺」,不僅是描繪出愿景,更可以作為改版依據(jù),指導結構框架、瀏覽動線、視覺畫面等方面的改進。

▲ 評價UGC卡片(改版前)

▲ 問大家UGC卡片(改版前)
02.積極的感覺:交流、個性、活力
透過「情緒設定」,團隊對評價、問大家這類平臺基礎UGC產品有了這樣的體驗發(fā)展期待:
消費社區(qū)體驗是呈現(xiàn)出好多人討論、真誠地分享自己對商品的感覺,一個大家共同交流的活力UGC社區(qū)。
評價產品一直以來承載了消費者購買商品后,包含評分以及對商品及店家的想法,是潛力消費者決定購買的因素之一。
如果用戶的困惑在評價產品無法得到答案時,問大家產品讓用戶可以直接對已購買者發(fā)起回答邀約,形成更加寬泛甚至玩梗的氛圍。
業(yè)務產品發(fā)展至今早不只是平臺評估店家販售好壞的工具,更有著「用戶幫用戶 User helps user」氣息,體驗改版就是想塑造一套更適合這股積極力量的框架。

▲ 情緒版
因此交流、個性、活力,3個關鍵詞成為了體驗衡量標準,作為評價、問大家40多個界面改版的指導原則,影響:
設計主要目標制定
用戶瀏覽動線調整
持續(xù)發(fā)展的迭代方向
#02
目標結合業(yè)務指標
對于基礎UGC產品而言,存在兩種經典的用戶行為即「瀏覽消費內容」及「生產發(fā)布內容」。
01.業(yè)務指標是設計改版推動的關鍵
從基礎體驗的改善到略大幅度的框架重組,我們努力在業(yè)務指標預期提升的前提下,兼顧老用戶習慣,盡量縮短改版陣痛期,逐步迭代逐漸達到從「僅消費決策」到「逛內容種草」的心智變化。
UGC用戶滿意度是綜合性的指標,包含了內容可信度、內容參考性、發(fā)布便捷性,根據(jù)用戶行為可以拆分得更細:
瀏覽體驗-點擊率、停留時長、互動深度
發(fā)布體驗-發(fā)布成功率、有內容率、優(yōu)質內容率
02.設計目標要帶來直接或間接的指標提升
對應用戶行為,除了改善瀏覽體驗跟升級發(fā)布體驗以外,還加強了互動功能,讓寫內容的人收獲更多正向反饋,看內容的人更容易發(fā)現(xiàn)有價值的內容,讓「雞生蛋—蛋生雞」的內容循環(huán)得更快。
「看」改善-優(yōu)化字號行距、減少樣式 ,舍棄圖文穿插讓閱讀體感更簡單、舒適

▲ 瀏覽體驗設計目標
「寫」升級-統(tǒng)一評價/問大家發(fā)布器,重組簡化結構讓用戶能寫得更有品質、寫得更多
▲ 發(fā)布體驗設計目標
「互動」促進-鼓勵評論,將「有用」升級為「表態(tài)」,使用戶之間更能相互激勵

▲ 互動體驗設計目標
#03
改版實踐
根據(jù)目標及「交流、個性、活力」的出發(fā)點,在為期近一年幾十個版本反復溝通與線上實驗,我們不斷地調整及權衡效果確保從圖標組件到框架鏈路,逐步實現(xiàn)的體驗效果。
01.視覺系統(tǒng)煥新鏈路感受
簡單、去雕飾的直觀感受,讓用戶能夠便利且舒適地使用產品各項功能。移除過往復雜的視覺噪聲,注重清晰的功能表達、符合內容瀏覽的易用性,建立一套可以滿足各式各樣圖文、視頻展示的視覺樣式邏輯。
字級放大、適合長文閱讀的1.6行距等優(yōu)化外,并在符合平臺規(guī)范的同時,增添漸變等細節(jié),呈現(xiàn)新穎感。
▲ 視覺樣式制定
針對內容瀏覽,我們調研了年輕用戶的內容閱讀喜好,且結合了業(yè)務強調「人」的需求,調整與統(tǒng)一評價、問大家產品框架:
內容列表-強調發(fā)言以卡片突出「交流內容」,內容縮進的做法使用戶信息更加明顯。
內容詳情-用戶的個性往往在圖片中一覽無遺,其他人通過圖片也能更快的接收到信息,所以相比圖文穿插的專業(yè)感,先圖后文更加適合我們想提供的簡單體驗。
內容互動-UGC產品自然是鼓勵用戶評論,除此提供更輕量的表態(tài)互動,以活潑的表情設計來激發(fā)用戶表達情緒。
▲ 內容瀏覽鏈路
02.交互重組讓內容好看好寫
長期內容發(fā)展趨勢顯示圖片、視頻必然是比文字更能提升閱讀者體驗,在展示突出圖片的背后,我們采取了重組發(fā)布器交互框架,來鼓勵用戶多發(fā)布圖片、視頻等富媒體內容。
▲ 評價(左)問大家(右)改版前發(fā)布器界面
▲ 發(fā)布器交互重組
評價、問大家發(fā)布器與一般的創(chuàng)作型發(fā)布器不同。
其內容發(fā)布具有獨特的電商特色,是用戶之間基于商品的內容交流,如用戶發(fā)布評價是為了給其他用戶選購提供經驗分享,購買種草;問大家產品則是用戶與用戶之間的直接互助。因此,針對不同的內容交流場景,發(fā)布器進行了相應的改造升級。
評價發(fā)布器在鼓勵富媒體內容發(fā)布的基礎上,尊重不同用戶的輸入習慣,用戶可以自行選擇打分與評價描述的輸入順序,并根據(jù)用戶輸入意愿與能力,提供快速打分、沉浸書寫、進階編輯的分層能力,讓不同的用戶更愿意發(fā)布評價,愿意發(fā)布有信息價值的評價。
▲ 評價發(fā)布器升級界面
問大家產品主要為文本內容交流場景,因此在交互上便利文字輸入任務,直接拉起鍵盤減少用戶操作。同時,突出“人”與“對話感”,強化用戶之間的情感連結。此外,我們發(fā)現(xiàn)在生產引導方面,問更好才能答更好,提問精細化能幫助用戶獲得更精準的回答。
▲ 問大家發(fā)布器升級界面
針對不同發(fā)布情況生產出的用戶內容,在評價內容詳情(首次評價、追加評價)、問大家問答詳情,設計了強調時序的閱讀動線,提高內容可信度。兼容各種狀態(tài),盡最大可能保障未來幾年內框架適用性,不去反復改版折騰用戶。
▲ 評價(左)問大家(右)改版前詳情界面
▲ 詳情交互重組
▲ 彈性的框架設計
#04
初衷:為每一個人設計
縱使改版起始于「年輕化」,但包容性是我們非常在意的,通過大屏手機適配、暗黑模式適配、無障礙版適配、長輩版大字適配,提供語音輸入能力、連續(xù)多拍圖片等功能。
兼顧多樣人群需求,提升每一個人的體驗才能做到我們的初衷,真正打造出讓大家都能參與的活力UGC社區(qū)。
▲ 暗黑模式適配
要營造活力十足的UGC社區(qū)感,上線了全新的表態(tài)功能,是原有的「有用」功能的升級版。我們希望這個輕量的功能可以激發(fā)用戶在評論時有更多的互動想法和內容靈感。
探索了每個人不同正負向情緒,以及有電商特色的交流表情。
▲ 全新表態(tài)功能
為了持續(xù)且穩(wěn)定地提供良好體驗,也為了避免重蹈覆轍過去樣式復雜,產生的負面感受。
迭代過程里設計資產管理不僅起到在兩個業(yè)務產品雙軌同步發(fā)展中,設計師、產品經理及研發(fā)之間的協(xié)作順暢,更能保持住用戶體驗的理解認知及一致。
▲ 設計資產管理
寫在最后
有些設計是隱形的。
平時UGC產品的用戶根本不在意界面設計,它應該讓用戶專注于UGC內容而不是引起注意。
評價、問大家改版僅僅是個起點,開始改變了老化感受來打好年輕化基礎,提高愉悅體感。用戶滿意度及關鍵數(shù)據(jù)的提升,激勵我們持續(xù)打磨閱讀及發(fā)布體驗,挖掘促進交流的互動可能性,甚至是結合電商特色提供創(chuàng)新的功能。