用設(shè)計(jì)詮釋搜索熱點(diǎn)

2022-6-17    seo達(dá)人



圖片

 

設(shè)計(jì)思考及詮釋方法

我們先要去了解用戶是如何消費(fèi)熱點(diǎn)內(nèi)容的,基于用戶情景認(rèn)知鏈路分析用戶在事件消費(fèi)的鏈路,可以分為三個(gè)重要節(jié)點(diǎn):1.熱點(diǎn)環(huán)境的感知;2.熱點(diǎn)事件的理解;3.事件觀點(diǎn)的產(chǎn)生。

圖片

結(jié)合用戶的消費(fèi)路徑,我們將設(shè)計(jì)邏輯框架拆分為三個(gè)層級(jí):

1.氛圍背景層:分層呈現(xiàn)熱度氛圍,輔助用戶感知熱點(diǎn)環(huán)境;

2.信息內(nèi)容層:精細(xì)化拼裝管理,幫助用戶理解熱點(diǎn)事件;

3.功能互動(dòng)層:輕互動(dòng)玩法設(shè)計(jì),激發(fā)用戶參與抒發(fā)事件觀點(diǎn)

圖片

 

1. 熱點(diǎn)環(huán)境感知:分層呈現(xiàn)熱度氛圍

從氛圍表現(xiàn)層面,助力用戶更快速的辨別事件的熱度及重要程度。設(shè)計(jì)師結(jié)合搜索熱點(diǎn)使用場(chǎng)景以及業(yè)務(wù)時(shí)效性配置訴求,歸類了兩種設(shè)計(jì)表現(xiàn)層次:1.日常熱度氛圍  2. 大事件熱度氛圍

1)第一個(gè)層次:日常熱度氛圍

主要應(yīng)用于熱點(diǎn)新聞場(chǎng)景,時(shí)效性要求高,同時(shí)事件熱度也會(huì)在:“發(fā)酵爆發(fā)消退” 間實(shí)時(shí)變化,設(shè)計(jì)根據(jù)熱度“強(qiáng)弱”程度需求,劃分兩檔視覺展現(xiàn)階梯,以自動(dòng)化的方式展現(xiàn),滿足熱度的實(shí)時(shí)變化需求,輔助用戶感知當(dāng)前事件熱度?!暗蜔岱諊比鯓?biāo)簽設(shè)計(jì)用以展現(xiàn)上升/今日熱點(diǎn),“高熱氛圍”色彩背景通頂效果+上榜標(biāo)簽用以展現(xiàn)上榜熱點(diǎn)。

如,“馬斯克收購(gòu)?fù)铺亍?/strong>,搜索熱度持續(xù)上升,以第一階梯-標(biāo)簽方式展示低熱氛圍;在 “馬斯克收購(gòu)?fù)铺亍?的事件熱度不斷增長(zhǎng),成為熱榜事件后,以第二階梯 – 高熱氛圍自動(dòng)匹配 ,通過背景及榜單標(biāo)簽的呈現(xiàn),明確告知用戶當(dāng)前事件的火熱程度。 

圖片

 

2)第二個(gè)層次:大事件熱度氛圍

主要應(yīng)用于熱點(diǎn)大事件或運(yùn)營(yíng)活動(dòng)場(chǎng)景,個(gè)性化展現(xiàn)要求高,同時(shí)事件關(guān)注度及重要程度也不同,設(shè)計(jì)根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯,以人工配置的方式展現(xiàn),超強(qiáng)的運(yùn)營(yíng)氛圍,可以讓用戶充分感知當(dāng)前事件的重要程度,“A級(jí)氛圍”頭部疊加場(chǎng)景元素設(shè)計(jì)用以展現(xiàn)大事件,“S級(jí)氛圍”整頁沉浸式視覺設(shè)計(jì)用以展現(xiàn)重大事件。

如,冬奧會(huì),重大事件,選用第二階梯 S級(jí)氛圍,打造超強(qiáng)的運(yùn)營(yíng)大事件會(huì)場(chǎng)認(rèn)知。

圖片

 

前置突發(fā)大事件氛圍設(shè)計(jì)

近幾年我們不斷的經(jīng)歷各類突發(fā)大事件,如:疫情/暴雨/名人逝世等等,每次突然發(fā)生的事件都讓設(shè)計(jì)師措手不及,匆忙產(chǎn)出運(yùn)營(yíng)氛圍設(shè)計(jì)方案緊急上線,保時(shí)效就很難保障質(zhì)量,因此我們?cè)谙肽懿荒芸偨Y(jié)事件類型提前儲(chǔ)備設(shè)計(jì),以備不時(shí)之需。

不同突發(fā)事件會(huì)牽動(dòng)網(wǎng)友不同的情感情緒,比如河南暴雨,我們?yōu)槭茈y同胞擔(dān)心,為救助工作加油,為逝者哀悼;火箭發(fā)射成功,我們驕傲喝彩;名人結(jié)婚,我們送上溫馨的祝福。不同事件帶來不同的情感情緒,也要求設(shè)計(jì)師要用準(zhǔn)確的視覺語言表達(dá)。

因此我們?cè)谇爸迷O(shè)計(jì)時(shí)也充分考慮了事件情感因素,通過對(duì)近一年突發(fā)大事件的歸類梳理,并推導(dǎo)不同細(xì)分場(chǎng)景下的用戶情緒,通過情緒分類的方式,總結(jié)兩種視覺設(shè)計(jì)表達(dá)形式:1.實(shí)景圖合成效果滿足嚴(yán)肅/莊重/權(quán)威場(chǎng)景情感需求;2.手繪效果滿足積極/歡快/慶祝場(chǎng)景的情感需求。結(jié)合以上思路我們共儲(chǔ)備6大類20個(gè)子分類場(chǎng)景的前置氛圍+金剛位等運(yùn)營(yíng)物料設(shè)計(jì),保障突發(fā)熱點(diǎn)運(yùn)營(yíng)設(shè)計(jì)質(zhì)效。

圖片

圖片

截至22年Q1,前置設(shè)計(jì)已在38個(gè)熱點(diǎn)場(chǎng)景應(yīng)用:

圖片

 

2. 熱點(diǎn)事件理解:內(nèi)容精細(xì)化拼裝管理

為滿足用戶不同事件場(chǎng)景下的信息需求,設(shè)計(jì)結(jié)合百度搜索:主要內(nèi)容區(qū)(主要需求滿足)+ 延展內(nèi)容區(qū)(延展需求滿足)的綜合聚合能力,通過組件分區(qū)布局+精細(xì)化規(guī)則管理,為熱點(diǎn)場(chǎng)景內(nèi)容的高效拼裝打好體驗(yàn)基礎(chǔ)。

1)主要內(nèi)容區(qū)

主要內(nèi)容區(qū),能夠幫助用戶快速了解事件的主題、時(shí)間及主要內(nèi)容,結(jié)合熱點(diǎn)事件長(zhǎng)期的需求沉淀,設(shè)計(jì)將主要內(nèi)容區(qū)又細(xì)分為主題區(qū)域及內(nèi)容區(qū)域。主題區(qū)域可承載拼裝事件主題、事件倒計(jì)時(shí)、會(huì)場(chǎng)分發(fā)導(dǎo)航等主題類組件;內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過不同區(qū)域內(nèi)組件拼裝規(guī)則的制定,業(yè)務(wù)可以快速選擇所需組件進(jìn)行頁面組織拼裝,達(dá)成分場(chǎng)景個(gè)性化滿足用戶主需求的目標(biāo)。

如:元宵晚會(huì),熱點(diǎn)主要內(nèi)容區(qū) 以“ 晚會(huì)直播時(shí)間倒計(jì)時(shí)+ 各衛(wèi)視晚會(huì)分會(huì)場(chǎng)導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會(huì)預(yù)熱期的事件主需求滿足。

圖片

因?yàn)橛性O(shè)計(jì)拼裝規(guī)則,不同大事件活動(dòng),各場(chǎng)景內(nèi)容可個(gè)性化滿足需求,交互布局設(shè)計(jì)上又可兼顧橫向一致性。

圖片

 

2)延展內(nèi)容區(qū)

延展內(nèi)容區(qū),能夠幫助用戶了解事件相關(guān)知識(shí)信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場(chǎng)景需求,選擇多個(gè)延展內(nèi)容模板與主要內(nèi)容區(qū)進(jìn)行拼裝,搭建完整頁面以呈現(xiàn)不同熱點(diǎn)事件內(nèi)容。

如:俄烏戰(zhàn)爭(zhēng)-戰(zhàn)事場(chǎng)景,脈絡(luò)卡幫助用戶快速了解事件進(jìn)展 ;冬奧會(huì)-賽事場(chǎng)景,數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進(jìn)展;博鰲亞洲論壇-會(huì)議場(chǎng)景,百科卡幫助用戶科普相關(guān)名詞知識(shí)。

圖片

 

3. 事件觀點(diǎn)產(chǎn)生-輕互動(dòng)玩法強(qiáng)化參與感

通過氛圍打造和內(nèi)容組織,已經(jīng)達(dá)成用戶需求滿足的目標(biāo),但到此截止,搜索結(jié)果的體驗(yàn)還是理智疏遠(yuǎn)單向的,搜索場(chǎng)景與用戶、用戶與用戶間也無法產(chǎn)生對(duì)當(dāng)前熱點(diǎn)的討論與態(tài)度表達(dá)。因此設(shè)計(jì)師對(duì)用戶的互動(dòng)行為認(rèn)知習(xí)慣進(jìn)行分析,并采取具體的設(shè)計(jì)策略逐步引導(dǎo)用戶參與互動(dòng)。

圖片

 

1)互動(dòng)喚醒 – 吸引圍觀增強(qiáng)互動(dòng)意愿

優(yōu)化前的熱搜結(jié)果頁,用戶的討論內(nèi)容都是隱藏在資訊落地頁評(píng)論區(qū)內(nèi),需要點(diǎn)擊進(jìn)內(nèi)容落地頁內(nèi)才能參與“圍觀”或“討論”,除互動(dòng)氛圍已脫離當(dāng)前場(chǎng)景外,也削弱了用戶對(duì)此事件表態(tài)的參與積極性。

通過彈幕滾動(dòng)+輸入框組件組合外顯的交互設(shè)計(jì)方式,將用戶討論外露,不僅豐富熱點(diǎn)事件搜索場(chǎng)景的內(nèi)容維度,同時(shí)基于從眾心理,進(jìn)一步刺激用戶的參與欲望。彈幕結(jié)合事件類型配色來更好貼合熱點(diǎn)事件整體環(huán)境氛圍。

圖片

 

2)情緒抒發(fā)-輕互動(dòng)玩法降低互動(dòng)門檻

而投票表態(tài)+彈幕輕互動(dòng)組合效果設(shè)計(jì),能進(jìn)一步降低用戶交互心理門檻,讓用戶動(dòng)一動(dòng)手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時(shí)也可以發(fā)彈幕聊聊對(duì)當(dāng)前熱點(diǎn)事件的看法,使用戶互動(dòng)情緒表達(dá)更充分。

圖片

 

3)驚喜反饋-強(qiáng)化視效打造記憶點(diǎn)

原有設(shè)計(jì)風(fēng)格,無法在去世祭奠、頒發(fā)勛章等莊重嚴(yán)肅場(chǎng)景精準(zhǔn)的表達(dá)視覺情感,無互動(dòng)反饋狀態(tài)僅有互動(dòng)前后狀態(tài)變化。

結(jié)合熱點(diǎn)場(chǎng)景積極外放情緒及莊重內(nèi)斂情緒,視覺主要從形/質(zhì)兩個(gè)維度進(jìn)行優(yōu)化升級(jí),并增加互動(dòng)反饋動(dòng)效,同時(shí)運(yùn)營(yíng)可結(jié)合具體事件主題配置,綜合提升互動(dòng)驚喜效果,打造產(chǎn)品記憶點(diǎn)。

視覺層:通過更立體的形態(tài)和更豐富的層次質(zhì)感,更精準(zhǔn)的表達(dá)情感

圖片

動(dòng)效反饋層:以主圖形+輔助元素,通過符合場(chǎng)景氛圍的動(dòng)態(tài)效果設(shè)計(jì),更充分的表達(dá)情感

[優(yōu)化輸出圖像]

[優(yōu)化輸出圖像]

運(yùn)營(yíng)主題配置:在日常反饋基礎(chǔ)上,增加運(yùn)營(yíng)主題配置層級(jí),為特定主題場(chǎng)景提供定制反饋效果

源圖像

 

寫在最后

通過熱點(diǎn)環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿足等設(shè)計(jì)手段,助力搜索平臺(tái)以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對(duì)全年3萬+熱點(diǎn)大事件運(yùn)營(yíng)。會(huì)場(chǎng)拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場(chǎng)景也在不斷擴(kuò)展,如營(yíng)銷活動(dòng)、品牌造節(jié)等。設(shè)計(jì)不會(huì)止步于此,我們將基于用戶需求不斷探索深耕,為用戶呈現(xiàn)更快速、準(zhǔn)確、全面、有溫度的搜索熱點(diǎn)體驗(yàn)。 

 

原文地址:百度MEUX(公眾號(hào))

作者:百度APP用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用設(shè)計(jì)詮釋搜索熱點(diǎn)

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



分享本文至:

日歷

鏈接

個(gè)人資料

存檔