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

一、設計界定

需求背景

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

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

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

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

換句話說重點就是以我們現有的官網規範模式和設計風格（降低用戶的認知成本），去合理表達出市場部的需求。并且在做方案的過程中，考慮盡量做到不同分類視頻的詳情，不做差異模闆，方便後續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 \捂臉），故采用了橫向拓展的方式，用戶可左右滑動查看更多推薦視頻。

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

,