起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識項目總結：大型PC官網視頻中心頁面改版
本篇文章作者對視頻中心改版項目進行了復盤總結，展示了項目中一些細節點的設計思考，將一些設計經驗分享給有需要的小伙伴作為參考。
一、設計界定
需求背景
視頻動態頁，是承載京東云官網關于產品及解決方案視頻、品牌、活動視頻的頁面。
隨著京東云平臺的發展，原有的視頻中心設計框架兼容性不足的問題愈加明顯，該頁面目前已不能承載現有的業務和用戶需求。
本次改版得重中之重是點擊列表頁后進入的視頻詳情頁。
由于需求方為市場部門，所以需求會夾雜該部的部分業務考量，故重點在于怎樣平衡需求方的業務訴求與官網用戶體驗之間的關系。
換句話說重點就是以我們現有的官網規范模式和設計風格（降低用戶的認知成本），去合理表達出市場部的需求。并且在做方案的過程中，考慮盡量做到不同分類視頻的詳情，不做差異模板，方便后續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：
- 在視頻標題后加分享功能，而不是在別的區域，因為分享是對“視頻基本信息”及視頻內容的分享，所以放在本區域內更加明確了功能分區；
- 增加視頻分享功能，有利于本產品拉新\促活\留存。
視頻詳情頁細節2：增加公眾號微信二維碼 & 聯系我們
在“相關產品”區域下，加入輔助推薦內容，可以抓住用戶瀏覽行為的Aha Moment：在瀏覽完視頻和相關產品后，給予無助的用戶以反饋，給予想得到更多信息的用戶以幫助。
CMS后臺設計
為滿足業務方需求，使視頻增加區分度，后臺配置系統增加了“標簽”字段，可更靈活得配置視頻的更多特征feature；
并且，關于推薦視頻、相關產品，后臺可直接調用原有接口，通過勾選的方式直接進行選擇，從而生成前臺的相關推薦產品、視頻；
最后，增加了一個按鈕，可配置文案、URL與埋點，使視頻中心能更直觀得監測頁面轉化率。（由于涉及到后臺系統，故不放出CMS截圖）
RWD.M端設計（列表+詳情）
M端的視頻中心列表、詳情頁主要也是以展示功能為主，故信息排布也是設計重點。基于京東云官網RWD響應式網頁設計規范，將PC頁面轉化成移動端頁面，保證功能的實現。
其中兩個特殊交互：
1. 視頻描述超出限高后怎么查看全部的問題，這里采用的我們原有移動端處理超出限制字符的方式，加一個展開按鈕（當然還有很多別的處理方式，比如點擊出現浮層，方案見仁見智）；
2. “其他視頻推薦”部分，由于有很多推薦視頻，所以豎向排列不太符合輕量化的體驗（我們底部還有個長Footer \捂臉），故采用了橫向拓展的方式，用戶可左右滑動查看更多推薦視頻。
以上是我對京東云官網視頻中心改版的項目總結，感謝閱讀！
學長????
請教一下視頻的標題為什么要放在視頻的下方
首先：標題+視頻分類+視頻tag+描述，其實是相關性較強的一組字段，不太建議分開；然后，那如果將這組字段放在播放器上面的話，第一不太美觀（區域太高），第二，主要這組字段有描述，會涉及到展開收起，如果展開可能會把播放器下壓，不太符合體驗。最后，還有一個原因是我們視頻中心原頁面也是標題放在下面，也是為了降低開發成本。（不知道我理解的是不是你問的 /哈哈）