起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識好看視頻PC站瀏覽體驗升級
編輯導(dǎo)語：好看視頻是一個致力于打造泛知識的短視頻平臺，如今已上線2年多的時間。本文作者團隊在近期的自查過程中，發(fā)現(xiàn)首頁視頻效率較低，于是便發(fā)起專項提升PC站體驗，并對項目流程進行了闡述，一起來看一下吧。
一、項目背景
好看視頻是一個致力于打造泛知識短視頻平臺。自PC站點19年上線，已有將近2年多的時間。在近期的自查過程中，我們發(fā)現(xiàn)首頁視頻篩選效率較低，相比競品采用響應(yīng)式布局結(jié)合推薦FEED流的模式，內(nèi)容展現(xiàn)和功能體驗上差距明顯。于是設(shè)計側(cè)發(fā)起專項提升PC站體驗。
1. 競對體驗對比
屏幕適配差：通過產(chǎn)品后臺數(shù)據(jù)發(fā)現(xiàn)，瀏覽好看視頻PC站的用戶屏幕尺寸比例中，67%的用戶屏幕尺寸在1920px以上，32%的用戶在1700px-1280px，但舊版官網(wǎng)只基于1200px，沒有更好的利用PC空間。對于更大的屏幕內(nèi)容呈現(xiàn)更顯低效。
反觀頭部競品，都按照柵格系統(tǒng)支持了響應(yīng)式布局，對于任意屏幕尺寸都能很好的適配，保證內(nèi)容展現(xiàn)的完整與高效，對于不同設(shè)備的兼容也有很好的效果。
導(dǎo)航效率低：舊版好看采用頂部導(dǎo)航的形式，固定展示15個頻道列表，后期拓展了更多的頻道都收起在二級導(dǎo)航內(nèi)，不方便拓展與篩選；一些常用的功能如：歷史觀看、我的收藏也都收起在二級菜單內(nèi)，不利于用戶使用。
大部分頭部競品都采用了固定導(dǎo)航的形式，將常用功能與頻道放置左側(cè)，用戶不論在站內(nèi)的任何頁面，都可以快速在左側(cè)切換頁面，提升了篩選效率與擴展性。
內(nèi)容展現(xiàn)少：頂部個性視頻推薦只展示6個，需要手動點擊左右切換按鈕才能查看更多推薦視頻；下方各垂類頻道每個也只推薦了5個視頻，如需查看更多需要再點擊進入頻道頁查看。用戶如果不能在首頁這種關(guān)鍵場景快速篩選出自己想看的視頻，那基本就會退出頁面造成用戶的流失。
頭部競品基本選擇了瀑布流的形式，直接通過算法推薦給用戶喜歡的視頻，用戶僅需要滑動頁面就能看到更多推薦內(nèi)容，展現(xiàn)效率高。
2. 圍繞問題確立設(shè)計目標
- 建立響應(yīng)式布局：網(wǎng)頁設(shè)計最基本原則就是有序，一個清晰有序的布局可以給用戶帶來嚴謹、專業(yè)的感受。應(yīng)用柵格化響應(yīng)式布局設(shè)計，可以充分利用屏幕尺寸帶來更多的展現(xiàn)與更自由的適配。
- 提升瀏覽篩選效率：通過框架重構(gòu)，視覺降噪等手段，體驗升級，幫助用戶快速達成目標。
二、設(shè)計方案
1. 柵格系統(tǒng)：頁面響應(yīng)式適配
選擇響應(yīng)式網(wǎng)頁設(shè)計可以很好的保證跨平臺與多屏幕尺寸下的顯示效果；而且只開發(fā)只需要開發(fā)一套代碼，不需要單獨維護不同設(shè)備站點。且對于好看視頻這類視頻瀏覽網(wǎng)站，用戶交互操作少，能帶來更多的視頻展現(xiàn)。
建立有序的柵格，可以有規(guī)律的把頁面元素排列，保證頁面的嚴謹和一致的韻律性，同時也可以讓網(wǎng)頁的信息更加美觀易讀。
好看視頻官網(wǎng)本次采用左側(cè)固定寬度導(dǎo)航，右側(cè)1920px區(qū)域設(shè)置柵格的混合響應(yīng)式布局形式。整體最大頁面寬度2160px，保證大尺寸屏幕瀏覽體驗，采用24柵格，水槽寬度16px，頁邊距32px，列寬62px，均為8的倍數(shù)，符合偶數(shù)原則，不會出現(xiàn)小數(shù)點或半像素情況，方便開發(fā)還原效果。
通過設(shè)置不同屏幕寬度的斷點，右側(cè)視頻封面等比縮放，其余內(nèi)容尺寸間距字號保持不變，小于斷點寬度后縮減列數(shù)，最少保證4列。
2. 框架重構(gòu)：增加擴展性及瀏覽體驗
在整個網(wǎng)站基礎(chǔ)框架上，我們采用了側(cè)邊導(dǎo)航欄形式，擁有更好的功能拓展性，不光可以展示豐富的頻道頁，還能承接更多類型的功能，如熱門視頻榜單、放映廳、觀看歷史查看及收藏內(nèi)容的快速查看，關(guān)注作者的最新內(nèi)容也可以透出在左側(cè)導(dǎo)航欄區(qū)域，幫助用戶及時發(fā)現(xiàn)喜愛作者更新的內(nèi)容。
右側(cè)視頻篩選區(qū)域也變成無限加載feed流，相較原先頂部左右切換的推薦形式，篩選效率更高，僅需滾動鼠標即可看到更多視頻，提升更多優(yōu)質(zhì)視頻曝光的可能性。這種框架瀏覽習慣也和移動端類似，更適合現(xiàn)在快節(jié)奏短視頻時代。
三、視覺降噪
1. 字號字色縮減：提升瀏覽可讀性
重新梳理了站內(nèi)的字色字號來降低冗余視覺影響，從原先8種字號優(yōu)化為全站僅4種；灰階的字色也在保證清晰度對比度的情況下降為3種，采用藍灰色階保證閱讀舒適體驗，且遵循WCAG2.0標準進行可用性測試，保證視障用戶使用。視頻落地頁評論區(qū)作為用戶信息瀏覽的主要場景，改版過后瀏覽更清晰統(tǒng)一。
2. icon重繪：更簡潔清晰
站內(nèi)icon也經(jīng)過重新繪制，各頻道新增雙色icon，風格統(tǒng)一，中性簡潔，表義明確。
四、方案上線與設(shè)計驗證
首頁AB實驗數(shù)據(jù)對比：
我們首先挑選了官網(wǎng)首頁進行測試驗證，經(jīng)過1個月AB測試后，實驗組的頁面帶來了更多內(nèi)容的展現(xiàn)和更舒適的屏幕適配，所以全站的內(nèi)容展現(xiàn)和點展比及視頻落地頁展現(xiàn)和點展比均相對對照組均有小幅提升；用戶對于新版頁面接受程度也較高，留存數(shù)據(jù)變化穩(wěn)定，長留還呈現(xiàn)正向上升的趨勢。于是繼續(xù)推動其余頁面逐步改版落地，提升網(wǎng)站整體體驗與感受。
AB實驗是最常用、成本低的設(shè)計驗證方式，可以快速幫助設(shè)計判斷效果，方便后續(xù)方案改進和改版推進。
五、寫在最后
在日常的工作中其實可以從單點體驗優(yōu)化升級為整個項目的改版升級，要時刻站著用戶視角洞察問題，考慮不同邊界情況對于設(shè)計展示的影響，在體驗優(yōu)先的時代，用戶的流失可能僅僅是因為一個很小的體驗問題。
擁有更好的用戶思維，能讓你的設(shè)計更值得推敲與易用。隨著移動設(shè)備及各種全面屏折疊屏的普及，PC網(wǎng)站的設(shè)計更加需要響應(yīng)式布局設(shè)計，利用較少資源保證網(wǎng)站的適配與展示效果；在效率為先的互聯(lián)網(wǎng)時代，響應(yīng)式布局與內(nèi)容推薦形式是很好的組合手段，非常契合短視頻網(wǎng)站場景，展現(xiàn)更多的內(nèi)容，提升篩選和決策效率。
希望本次項目的體驗升級經(jīng)驗可以給大家?guī)韼椭?/p>
作者：百度MEUX
來源公眾號：百度MEUX（ID：baidumeux），百度移動生態(tài)用戶體驗設(shè)計中心，負責百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議
確實比之前強了一些，但整個頁面的推薦系統(tǒng)依然是一團糟。跟沒做差不多。
在效率為先的互聯(lián)網(wǎng)時代，響應(yīng)式布局與內(nèi)容推薦形式是很好的組合手段，非常契合短視頻網(wǎng)站場景，展現(xiàn)更多的內(nèi)容，提升篩選和決策效率。