感謝導(dǎo)語(yǔ)：好看視頻是一個(gè)致力于打造泛知識(shí)得短視頻平臺(tái)，如今已上線(xiàn)2年多得時(shí)間。感謝團(tuán)隊(duì)在近期得自查過(guò)程中，發(fā)現(xiàn)首頁(yè)視頻效率較低，于是便發(fā)起專(zhuān)項(xiàng)提升PC站體驗(yàn)，并對(duì)項(xiàng)目流程進(jìn)行了闡述，一起來(lái)看一下吧。

一、項(xiàng)目背景

好看視頻是一個(gè)致力于打造泛知識(shí)短視頻平臺(tái)。自PC站點(diǎn)19年上線(xiàn)，已有將近2年多得時(shí)間。在近期得自查過(guò)程中，我們發(fā)現(xiàn)首頁(yè)視頻篩選效率較低，相比競(jìng)品采用響應(yīng)式布局結(jié)合推薦FEED流得模式，內(nèi)容展現(xiàn)和功能體驗(yàn)上差距明顯。于是設(shè)計(jì)側(cè)發(fā)起專(zhuān)項(xiàng)提升PC站體驗(yàn)。

1. 競(jìng)對(duì)體驗(yàn)對(duì)比

屏幕適配差：通過(guò)產(chǎn)品后臺(tái)數(shù)據(jù)發(fā)現(xiàn)，瀏覽好看視頻PC站得用戶(hù)屏幕尺寸比例中，67%得用戶(hù)屏幕尺寸在1920px以上，32%得用戶(hù)在1700px-1280px，但舊版自己只基于1200px，沒(méi)有更好得利用PC空間。對(duì)于更大得屏幕內(nèi)容呈現(xiàn)更顯低效。

反觀(guān)頭部競(jìng)品，都按照柵格系統(tǒng)支持了響應(yīng)式布局，對(duì)于任意屏幕尺寸都能很好得適配，保證內(nèi)容展現(xiàn)得完整與高效，對(duì)于不同設(shè)備得兼容也有很好得效果。

導(dǎo)航效率低：舊版好看采用頂部導(dǎo)航得形式，固定展示15個(gè)頻道列表，后期拓展了更多得頻道都收起在二級(jí)導(dǎo)航內(nèi)，不方便拓展與篩選；一些常用得功能如：歷史觀(guān)看、我得收藏也都收起在二級(jí)菜單內(nèi)，不利于用戶(hù)使用。

大部分頭部競(jìng)品都采用了固定導(dǎo)航得形式，將常用功能與頻道放置左側(cè)，用戶(hù)不論在站內(nèi)得任何頁(yè)面，都可以快速在左側(cè)切換頁(yè)面，提升了篩選效率與擴(kuò)展性。

內(nèi)容展現(xiàn)少：頂部個(gè)性視頻推薦只展示6個(gè)，需要手動(dòng)左右切換按鈕才能查看更多推薦視頻；下方各垂類(lèi)頻道每個(gè)也只推薦了5個(gè)視頻，如需查看更多需要再進(jìn)入頻道頁(yè)查看。用戶(hù)如果不能在首頁(yè)這種關(guān)鍵場(chǎng)景快速篩選出自己想看得視頻，那基本就會(huì)退出頁(yè)面造成用戶(hù)得流失。

頭部競(jìng)品基本選擇了瀑布流得形式，直接通過(guò)算法推薦給用戶(hù)喜歡得視頻，用戶(hù)僅需要滑動(dòng)頁(yè)面就能看到更多推薦內(nèi)容，展現(xiàn)效率高。

2. 圍繞問(wèn)題確立設(shè)計(jì)目標(biāo)建立響應(yīng)式布局：網(wǎng)頁(yè)設(shè)計(jì)最基本原則就是有序，一個(gè)清晰有序得布局可以給用戶(hù)帶來(lái)嚴(yán)謹(jǐn)、可以得感受。應(yīng)用柵格化響應(yīng)式布局設(shè)計(jì)，可以充分利用屏幕尺寸帶來(lái)更多得展現(xiàn)與更自由得適配。提升瀏覽篩選效率：通過(guò)框架重構(gòu)，視覺(jué)降噪等手段，體驗(yàn)升級(jí)，幫助用戶(hù)快速達(dá)成目標(biāo)。二、設(shè)計(jì)方案1. 柵格系統(tǒng)：頁(yè)面響應(yīng)式適配

選擇響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)可以很好得保證跨平臺(tái)與多屏幕尺寸下得顯示效果；而且只開(kāi)發(fā)只需要開(kāi)發(fā)一套代碼，不需要單獨(dú)維護(hù)不同設(shè)備站點(diǎn)。且對(duì)于好看視頻這類(lèi)視頻瀏覽網(wǎng)站，用戶(hù)交互操作少，能帶來(lái)更多得視頻展現(xiàn)。

建立有序得柵格，可以有規(guī)律得把頁(yè)面元素排列，保證頁(yè)面得嚴(yán)謹(jǐn)和一致得韻律性，同時(shí)也可以讓網(wǎng)頁(yè)得信息更加美觀(guān)易讀。

好看視頻自己本次采用左側(cè)固定寬度導(dǎo)航，右側(cè)1920px區(qū)域設(shè)置柵格得混合響應(yīng)式布局形式。整體蕞大頁(yè)面寬度2160px，保證大尺寸屏幕瀏覽體驗(yàn)，采用24柵格，水槽寬度16px，頁(yè)邊距32px，列寬62px，均為8得倍數(shù)，符合偶數(shù)原則，不會(huì)出現(xiàn)小數(shù)點(diǎn)或半像素情況，方便開(kāi)發(fā)還原效果。

通過(guò)設(shè)置不同屏幕寬度得斷點(diǎn)，右側(cè)視頻封面等比縮放，其余內(nèi)容尺寸間距字號(hào)保持不變，小于斷點(diǎn)寬度后縮減列數(shù)，最少保證4列。

2. 框架重構(gòu)：增加擴(kuò)展性及瀏覽體驗(yàn)

在整個(gè)網(wǎng)站基礎(chǔ)框架上，我們采用了側(cè)邊導(dǎo)航欄形式，擁有更好得功能拓展性，不光可以展示豐富得頻道頁(yè)，還能承接更多類(lèi)型得功能，如熱門(mén)視頻榜單、放映廳、觀(guān)看歷史查看及收藏內(nèi)容得快速查看，得最新內(nèi)容也可以透出在左側(cè)導(dǎo)航欄區(qū)域，幫助用戶(hù)及時(shí)發(fā)現(xiàn)喜愛(ài)更新得內(nèi)容。

右側(cè)視頻篩選區(qū)域也變成無(wú)限加載feed流，相較原先頂部左右切換得推薦形式，篩選效率更高，僅需滾動(dòng)鼠標(biāo)即可看到更多視頻，提升更多優(yōu)質(zhì)視頻曝光得可能性。這種框架瀏覽習(xí)慣也和移動(dòng)端類(lèi)似，更適合現(xiàn)在快節(jié)奏短視頻時(shí)代。

三、視覺(jué)降噪1. 字號(hào)字色縮減：提升瀏覽可讀性

重新梳理了站內(nèi)得字色字號(hào)來(lái)降低冗余視覺(jué)影響，從原先8種字號(hào)優(yōu)化為全站僅4種；灰階得字色也在保證清晰度對(duì)比度得情況下降為3種，采用藍(lán)灰色階保證閱讀舒適體驗(yàn)，且遵循WCAG2.0標(biāo)準(zhǔn)進(jìn)行可用性測(cè)試，保證視障用戶(hù)使用。視頻落地頁(yè)評(píng)論區(qū)作為用戶(hù)信息瀏覽得主要場(chǎng)景，改版過(guò)后瀏覽更清晰統(tǒng)一。

2. icon重繪：更簡(jiǎn)潔清晰

站內(nèi)icon也經(jīng)過(guò)重新繪制，各頻道新增雙色icon，風(fēng)格統(tǒng)一，中性簡(jiǎn)潔，表義明確。

四、方案上線(xiàn)與設(shè)計(jì)驗(yàn)證

首頁(yè)AB實(shí)驗(yàn)數(shù)據(jù)對(duì)比：

我們首先挑選了自己首頁(yè)進(jìn)行測(cè)試驗(yàn)證，經(jīng)過(guò)1個(gè)月AB測(cè)試后，實(shí)驗(yàn)組得頁(yè)面帶來(lái)了更多內(nèi)容得展現(xiàn)和更舒適得屏幕適配，所以全站得內(nèi)容展現(xiàn)和點(diǎn)展比及視頻落地頁(yè)展現(xiàn)和點(diǎn)展比均相對(duì)對(duì)照組均有小幅提升；用戶(hù)對(duì)于新版頁(yè)面接受程度也較高，留存數(shù)據(jù)變化穩(wěn)定，長(zhǎng)留還呈現(xiàn)正向上升得趨勢(shì)。于是繼續(xù)推動(dòng)其余頁(yè)面逐步改版落地，提升網(wǎng)站整體體驗(yàn)與感受。

AB實(shí)驗(yàn)是最常用、成本低得設(shè)計(jì)驗(yàn)證方式，可以快速幫助設(shè)計(jì)判斷效果，方便后續(xù)方案改進(jìn)和改版推進(jìn)。

五、寫(xiě)在最后

在日常得工作中其實(shí)可以從單點(diǎn)體驗(yàn)優(yōu)化升級(jí)為整個(gè)項(xiàng)目得改版升級(jí)，要時(shí)刻站著用戶(hù)視角洞察問(wèn)題，考慮不同邊界情況對(duì)于設(shè)計(jì)展示得影響，在體驗(yàn)優(yōu)先得時(shí)代，用戶(hù)得流失可能僅僅是因?yàn)橐粋€(gè)很小得體驗(yàn)問(wèn)題。

擁有更好得用戶(hù)思維，能讓你得設(shè)計(jì)更值得推敲與易用。隨著移動(dòng)設(shè)備及各種全面屏折疊屏得普及，PC網(wǎng)站得設(shè)計(jì)更加需要響應(yīng)式布局設(shè)計(jì)，利用較少資源保證網(wǎng)站得適配與展示效果；在效率為先得互聯(lián)網(wǎng)時(shí)代，響應(yīng)式布局與內(nèi)容推薦形式是很好得組合手段，非常契合短視頻網(wǎng)站場(chǎng)景，展現(xiàn)更多得內(nèi)容，提升篩選和決策效率。

希望本次項(xiàng)目得體驗(yàn)升級(jí)經(jīng)驗(yàn)可以給大家?guī)?lái)幫助。

：百度MEUX

公眾號(hào)：百度MEUX（：baidumeux），百度移動(dòng)生態(tài)用戶(hù)體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系得用戶(hù)/商業(yè)產(chǎn)品得全鏈路體驗(yàn)設(shè)計(jì)。

感謝由人人都是產(chǎn)品經(jīng)理合作 等百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止感謝。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議