本篇文章作者對視頻中心改版項目進行了復盤總結，展示了項目中一些細節點的設計思考，將一些設計經驗分享給有需要的小伙伴作為參考。

一、設計界定

需求背景

視頻動態頁，是承載京東云官網關于產品及解決方案視頻、品牌、活動視頻的頁面。

隨著京東云平臺的發展，原有的視頻中心設計框架兼容性不足的問題愈加明顯，該頁面目前已不能承載現有的業務和用戶需求。

本次改版得重中之重是點擊列表頁后進入的視頻詳情頁。

由于需求方為市場部門，所以需求會夾雜該部的部分業務考量，故重點在于怎樣平衡需求方的業務訴求與官網用戶體驗之間的關系。

換句話說重點就是以我們現有的官網規范模式和設計風格（降低用戶的認知成本），去合理表達出市場部的需求。并且在做方案的過程中，考慮盡量做到不同分類視頻的詳情，不做差異模板，方便后續CMS平臺功能的實現，并且要考慮方案的更多擴展性。

設計目標

故在前期溝通過程中，我們對本次產品改版的初步定位逐漸清晰：京東云視頻中心是一個承載業務需求的官網業務展示型頁面，后續設計需考慮解決方案模板的可復用性。（下圖為本項目梗概）

二、需求深化

用戶行為

在明確了兩個頁面（列表+詳情）的功能后，我首先進行了對設計對象的研究：包括目前市場上的競品分析+用戶行為分析+小范圍用戶訪談。

競品分析：

1）首先調研各大云廠商的視頻模塊（如果有此模塊的話），發現華為云相對京東云的需求更為貼近，故對華為云視頻中心頁面進行觀察，總結出華為云視頻頁的優勢為：設計簡潔，不同分類下的視頻差異度幾乎為0，但是在拓展性方面較差；

2）第二個部分，調研各大視頻網站的主流視頻詳情頁設計模式，通過共性提取、聚類的方法研究視頻詳情頁用戶行為順序。

3）（雖然不屬于競品分析但是也歸于這一類了）通過觀察典型用戶瀏覽目標網頁的行為特征，企圖得到設計啟發。（下圖為熱心市民小張同學瀏覽相關視頻詳情頁）

通過以上的初步研究最終得到下面的——視頻詳情頁用戶瀏覽模型圖（根據模塊顏色飽和度，色彩飽和度越高，用戶視線越早注意，用戶行為越高發）序號1234為用戶瀏覽順序，如下圖：

用戶訪談

范圍主要集中在京東云官網UED組內進行，所以調研用戶和人群更偏向于專家類型互聯網從業人員，人群更具代表性。

設置問題：

1）你看過哪些云廠商有視頻中心類似頁面？

2）你再進入視頻列表頁之后，首先關注的頁面元素是什么？隨著注意的改變會產生什么樣的行為？

3）你希望在視頻詳情頁獲知什么信息？

4）你希望在列表頁展示更多關于視頻信息嗎？

5）你在視頻詳情頁的瀏覽順序是什么？

以下截取@熱心市民小張同學的部分回答：

1）“騰訊云和華為云的視頻頁面做的不錯”；

2）“我作為一個視覺設計師肯定最關注的是視頻略縮圖、其次是標題，其他信息不想看到”；

3）“想看的視頻、推薦的東西”；

4）“希望啊”；

5）“肯定先看自己最關心的視頻內容，其次看看視頻下方的介紹，最后看別的”。

訪談結論：

視頻列表頁：在normal狀態下保持頁面的整潔度，展示更少的信息。在用戶進行第一步篩選之后，有了想閱讀下去的動力，鼠標會hover至該視頻下，此時，要展示視頻相關的別的詳細信息（抓住關鍵時間點），點擊后跳轉至視頻詳情頁；

視頻詳情：詳情頁由于其自身展示型頁面的屬性，主要是信息展示的排版問題，根據需求的重要度依次以從左至右、從上至下的方式進行排布，如下圖：

三、結構層設計&可行性評估

在收集了充足的調研信息后，進行初步方案的設計，明確了產品的部分功能架構。在此期間和同事、需求方適時溝通，促進最終方案設計的形成。（字丑勿噴.jpg）

方案可行性評估：此次項目主要的可行性風險集中在兩點：

1）前臺展示部分，展示的效果；

2）主要為CMS后臺配置系統的可行性，要考慮模板的統一化，要考慮后續的拓展性。

四、方案設計

概念方案分解釋義

視頻列表頁

列表頁方案釋義：Normal狀態下顯示兩行視頻標題+分類+發布時間；鼠標移入時，顯示完整標題遮蓋視頻分類和發布時間，并顯示視頻tag+視頻時長和播放視頻的icon。

此方案從交互角度主要考慮的是讓視頻列表頁在Normal狀態下更加干凈，讓用戶獲知最重要、最直接的信息，剔除更深級的干擾信息；而鼠標移入后顯示單個視頻的詳細信息，此時表明用戶對該視頻感興趣，那么干擾信息就變成了有用信息。

要做出Hover狀態和Normal狀態下的區分度（包含信息展示量的區分和樣式上的區分）。

下圖為用戶在視頻列表頁內的詳細的認知——行為分析：

視頻詳情頁

詳情頁按照前文所提到的用戶瀏覽模型圖，將業務方的需求聚類后，按重要度排序，依次“填入”此模型之中。

視頻詳情頁細節1：視頻標題后加分享icon

視頻標題后加分享icon：

1. 在視頻標題后加分享功能，而不是在別的區域，因為分享是對“視頻基本信息”及視頻內容的分享，所以放在本區域內更加明確了功能分區；
2. 增加視頻分享功能，有利于本產品拉新\促活\留存。

視頻詳情頁細節2：增加公眾號微信二維碼 & 聯系我們

在“相關產品”區域下，加入輔助推薦內容，可以抓住用戶瀏覽行為的Aha Moment：在瀏覽完視頻和相關產品后，給予無助的用戶以反饋，給予想得到更多信息的用戶以幫助。

CMS后臺設計

為滿足業務方需求，使視頻增加區分度，后臺配置系統增加了“標簽”字段，可更靈活得配置視頻的更多特征feature；

并且，關于推薦視頻、相關產品，后臺可直接調用原有接口，通過勾選的方式直接進行選擇，從而生成前臺的相關推薦產品、視頻；

最后，增加了一個按鈕，可配置文案、URL與埋點，使視頻中心能更直觀得監測頁面轉化率。（由于涉及到后臺系統，故不放出CMS截圖）

RWD.M端設計（列表+詳情）

M端的視頻中心列表、詳情頁主要也是以展示功能為主，故信息排布也是設計重點?；诰〇|云官網RWD響應式網頁設計規范，將PC頁面轉化成移動端頁面，保證功能的實現。

其中兩個特殊交互：

1. 視頻描述超出限高后怎么查看全部的問題，這里采用的我們原有移動端處理超出限制字符的方式，加一個展開按鈕（當然還有很多別的處理方式，比如點擊出現浮層，方案見仁見智）；

2. “其他視頻推薦”部分，由于有很多推薦視頻，所以豎向排列不太符合輕量化的體驗（我們底部還有個長Footer \捂臉），故采用了橫向拓展的方式，用戶可左右滑動查看更多推薦視頻。

以上是我對京東云官網視頻中心改版的項目總結，感謝閱讀！