編輯導語：好看視頻是一個緻力于打造泛知識的短視頻平台，如今已上線2年多的時間。本文作者團隊在近期的自查過程中，發現首頁視頻效率較低，于是便發起專項提升PC站體驗，并對項目流程進行了闡述，一起來看一下吧。

好看視頻是一個緻力于打造泛知識短視頻平台。自PC站點19年上線，已有将近2年多的時間。在近期的自查過程中，我們發現首頁視頻篩選效率較低，相比競品采用響應式布局結合推薦FEED流的模式，内容展現和功能體驗上差距明顯。于是設計側發起專項提升PC站體驗。

1. 競對體驗對比

屏幕适配差：通過産品後台數據發現，浏覽好看視頻PC站的用戶屏幕尺寸比例中，67%的用戶屏幕尺寸在1920px以上，32%的用戶在1700px-1280px，但舊版官網隻基于1200px，沒有更好的利用PC空間。對于更大的屏幕内容呈現更顯低效。

反觀頭部競品，都按照栅格系統支持了響應式布局，對于任意屏幕尺寸都能很好的适配，保證内容展現的完整與高效，對于不同設備的兼容也有很好的效果。

導航效率低：舊版好看采用頂部導航的形式，固定展示15個頻道列表，後期拓展了更多的頻道都收起在二級導航内，不方便拓展與篩選；一些常用的功能如：曆史觀看、我的收藏也都收起在二級菜單内，不利于用戶使用。

大部分頭部競品都采用了固定導航的形式，将常用功能與頻道放置左側，用戶不論在站内的任何頁面，都可以快速在左側切換頁面，提升了篩選效率與擴展性。

内容展現少：頂部個性視頻推薦隻展示6個，需要手動點擊左右切換按鈕才能查看更多推薦視頻；下方各垂類頻道每個也隻推薦了5個視頻，如需查看更多需要再點擊進入頻道頁查看。用戶如果不能在首頁這種關鍵場景快速篩選出自己想看的視頻，那基本就會退出頁面造成用戶的流失。

頭部競品基本選擇了瀑布流的形式，直接通過算法推薦給用戶喜歡的視頻，用戶僅需要滑動頁面就能看到更多推薦内容，展現效率高。

2. 圍繞問題确立設計目标

• 建立響應式布局：網頁設計最基本原則就是有序，一個清晰有序的布局可以給用戶帶來嚴謹、專業的感受。應用栅格化響應式布局設計，可以充分利用屏幕尺寸帶來更多的展現與更自由的适配。
• 提升浏覽篩選效率：通過框架重構，視覺降噪等手段，體驗升級，幫助用戶快速達成目标。

1. 栅格系統：頁面響應式适配

選擇響應式網頁設計可以很好的保證跨平台與多屏幕尺寸下的顯示效果；而且隻開發隻需要開發一套代碼，不需要單獨維護不同設備站點。且對于好看視頻這類視頻浏覽網站，用戶交互操作少，能帶來更多的視頻展現。

建立有序的栅格，可以有規律的把頁面元素排列，保證頁面的嚴謹和一緻的韻律性，同時也可以讓網頁的信息更加美觀易讀。

好看視頻官網本次采用左側固定寬度導航，右側1920px區域設置栅格的混合響應式布局形式。整體最大頁面寬度2160px，保證大尺寸屏幕浏覽體驗，采用24栅格，水槽寬度16px，頁邊距32px，列寬62px，均為8的倍數，符合偶數原則，不會出現小數點或半像素情況，方便開發還原效果。

通過設置不同屏幕寬度的斷點，右側視頻封面等比縮放，其餘内容尺寸間距字号保持不變，小于斷點寬度後縮減列數，最少保證4列。

2. 框架重構：增加擴展性及浏覽體驗

在整個網站基礎框架上，我們采用了側邊導航欄形式，擁有更好的功能拓展性，不光可以展示豐富的頻道頁，還能承接更多類型的功能，如熱門視頻榜單、放映廳、觀看曆史查看及收藏内容的快速查看，關注作者的最新内容也可以透出在左側導航欄區域，幫助用戶及時發現喜愛作者更新的内容。

右側視頻篩選區域也變成無限加載feed流，相較原先頂部左右切換的推薦形式，篩選效率更高，僅需滾動鼠标即可看到更多視頻，提升更多優質視頻曝光的可能性。這種框架浏覽習慣也和移動端類似，更适合現在快節奏短視頻時代。

1. 字号字色縮減：提升浏覽可讀性

重新梳理了站内的字色字号來降低冗餘視覺影響，從原先8種字号優化為全站僅4種；灰階的字色也在保證清晰度對比度的情況下降為3種，采用藍灰色階保證閱讀舒适體驗，且遵循WCAG2.0标準進行可用性測試，保證視障用戶使用。視頻落地頁評論區作為用戶信息浏覽的主要場景，改版過後浏覽更清晰統一。

2. icon重繪：更簡潔清晰

站内icon也經過重新繪制，各頻道新增雙色icon，風格統一，中性簡潔，表義明确。

首頁AB實驗數據對比：

我們首先挑選了官網首頁進行測試驗證，經過1個月AB測試後，實驗組的頁面帶來了更多内容的展現和更舒适的屏幕适配，所以全站的内容展現和點展比及視頻落地頁展現和點展比均相對對照組均有小幅提升；用戶對于新版頁面接受程度也較高，留存數據變化穩定，長留還呈現正向上升的趨勢。于是繼續推動其餘頁面逐步改版落地，提升網站整體體驗與感受。

AB實驗是最常用、成本低的設計驗證方式，可以快速幫助設計判斷效果，方便後續方案改進和改版推進。

在日常的工作中其實可以從單點體驗優化升級為整個項目的改版升級，要時刻站着用戶視角洞察問題，考慮不同邊界情況對于設計展示的影響，在體驗優先的時代，用戶的流失可能僅僅是因為一個很小的體驗問題。

擁有更好的用戶思維，能讓你的設計更值得推敲與易用。随着移動設備及各種全面屏折疊屏的普及，PC網站的設計更加需要響應式布局設計，利用較少資源保證網站的适配與展示效果；在效率為先的互聯網時代，響應式布局與内容推薦形式是很好的組合手段，非常契合短視頻網站場景，展現更多的内容，提升篩選和決策效率。

希望本次項目的體驗升級經驗可以給大家帶來幫助。

作者：百度MEUX

來源公衆号：百度MEUX（ID：baidumeux），百度移動生态用戶體驗設計中心，負責百度移動生态體系的用戶/商業産品的全鍊路體驗設計。

本文由人人都是産品經理合作媒體 @百度MEUX 授權發布，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!