本篇文章作者對(duì)視頻中心改版項(xiàng)目進(jìn)行了復(fù)盤(pán)總結(jié)，展示了項(xiàng)目中一些細(xì)節(jié)點(diǎn)的設(shè)計(jì)思考，將一些設(shè)計(jì)經(jīng)驗(yàn)分享給有需要的小伙伴作為參考。

一、設(shè)計(jì)界定

需求背景

視頻動(dòng)態(tài)頁(yè)，是承載京東云官網(wǎng)關(guān)于產(chǎn)品及解決方案視頻、品牌、活動(dòng)視頻的頁(yè)面。

隨著京東云平臺(tái)的發(fā)展，原有的視頻中心設(shè)計(jì)框架兼容性不足的問(wèn)題愈加明顯，該頁(yè)面目前已不能承載現(xiàn)有的業(yè)務(wù)和用戶需求。

本次改版得重中之重是點(diǎn)擊列表頁(yè)后進(jìn)入的視頻詳情頁(yè)。

由于需求方為市場(chǎng)部門(mén)，所以需求會(huì)夾雜該部的部分業(yè)務(wù)考量，故重點(diǎn)在于怎樣平衡需求方的業(yè)務(wù)訴求與官網(wǎng)用戶體驗(yàn)之間的關(guān)系。

換句話說(shuō)重點(diǎn)就是以我們現(xiàn)有的官網(wǎng)規(guī)范模式和設(shè)計(jì)風(fēng)格（降低用戶的認(rèn)知成本），去合理表達(dá)出市場(chǎng)部的需求。并且在做方案的過(guò)程中，考慮盡量做到不同分類視頻的詳情，不做差異模板，方便后續(xù)CMS平臺(tái)功能的實(shí)現(xiàn)，并且要考慮方案的更多擴(kuò)展性。

設(shè)計(jì)目標(biāo)

故在前期溝通過(guò)程中，我們對(duì)本次產(chǎn)品改版的初步定位逐漸清晰：京東云視頻中心是一個(gè)承載業(yè)務(wù)需求的官網(wǎng)業(yè)務(wù)展示型頁(yè)面，后續(xù)設(shè)計(jì)需考慮解決方案模板的可復(fù)用性。（下圖為本項(xiàng)目梗概）

二、需求深化

用戶行為

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

競(jìng)品分析：

1）首先調(diào)研各大云廠商的視頻模塊（如果有此模塊的話），發(fā)現(xiàn)華為云相對(duì)京東云的需求更為貼近，故對(duì)華為云視頻中心頁(yè)面進(jìn)行觀察，總結(jié)出華為云視頻頁(yè)的優(yōu)勢(shì)為：設(shè)計(jì)簡(jiǎn)潔，不同分類下的視頻差異度幾乎為0，但是在拓展性方面較差；

2）第二個(gè)部分，調(diào)研各大視頻網(wǎng)站的主流視頻詳情頁(yè)設(shè)計(jì)模式，通過(guò)共性提取、聚類的方法研究視頻詳情頁(yè)用戶行為順序。

3）（雖然不屬于競(jìng)品分析但是也歸于這一類了）通過(guò)觀察典型用戶瀏覽目標(biāo)網(wǎng)頁(yè)的行為特征，企圖得到設(shè)計(jì)啟發(fā)。（下圖為熱心市民小張同學(xué)瀏覽相關(guān)視頻詳情頁(yè)）

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

用戶訪談

范圍主要集中在京東云官網(wǎng)UED組內(nèi)進(jìn)行，所以調(diào)研用戶和人群更偏向于專家類型互聯(lián)網(wǎng)從業(yè)人員，人群更具代表性。

設(shè)置問(wèn)題：

1）你看過(guò)哪些云廠商有視頻中心類似頁(yè)面？

2）你再進(jìn)入視頻列表頁(yè)之后，首先關(guān)注的頁(yè)面元素是什么？隨著注意的改變會(huì)產(chǎn)生什么樣的行為？

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

4）你希望在列表頁(yè)展示更多關(guān)于視頻信息嗎？

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

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

1）“騰訊云和華為云的視頻頁(yè)面做的不錯(cuò)”；

2）“我作為一個(gè)視覺(jué)設(shè)計(jì)師肯定最關(guān)注的是視頻略縮圖、其次是標(biāo)題，其他信息不想看到”；

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

4）“希望啊”；

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

訪談結(jié)論：

視頻列表頁(yè)：在normal狀態(tài)下保持頁(yè)面的整潔度，展示更少的信息。在用戶進(jìn)行第一步篩選之后，有了想閱讀下去的動(dòng)力，鼠標(biāo)會(huì)hover至該視頻下，此時(shí)，要展示視頻相關(guān)的別的詳細(xì)信息（抓住關(guān)鍵時(shí)間點(diǎn)），點(diǎn)擊后跳轉(zhuǎn)至視頻詳情頁(yè)；

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

三、結(jié)構(gòu)層設(shè)計(jì)&可行性評(píng)估

在收集了充足的調(diào)研信息后，進(jìn)行初步方案的設(shè)計(jì)，明確了產(chǎn)品的部分功能架構(gòu)。在此期間和同事、需求方適時(shí)溝通，促進(jìn)最終方案設(shè)計(jì)的形成。（字丑勿噴.jpg）

方案可行性評(píng)估：此次項(xiàng)目主要的可行性風(fēng)險(xiǎn)集中在兩點(diǎn)：

1）前臺(tái)展示部分，展示的效果；

2）主要為CMS后臺(tái)配置系統(tǒng)的可行性，要考慮模板的統(tǒng)一化，要考慮后續(xù)的拓展性。

四、方案設(shè)計(jì)

概念方案分解釋義

視頻列表頁(yè)

列表頁(yè)方案釋義：Normal狀態(tài)下顯示兩行視頻標(biāo)題+分類+發(fā)布時(shí)間；鼠標(biāo)移入時(shí)，顯示完整標(biāo)題遮蓋視頻分類和發(fā)布時(shí)間，并顯示視頻tag+視頻時(shí)長(zhǎng)和播放視頻的icon。

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

要做出Hover狀態(tài)和Normal狀態(tài)下的區(qū)分度（包含信息展示量的區(qū)分和樣式上的區(qū)分）。

下圖為用戶在視頻列表頁(yè)內(nèi)的詳細(xì)的認(rèn)知——行為分析：

視頻詳情頁(yè)

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

視頻詳情頁(yè)細(xì)節(jié)1：視頻標(biāo)題后加分享icon

視頻標(biāo)題后加分享icon：

1. 在視頻標(biāo)題后加分享功能，而不是在別的區(qū)域，因?yàn)榉窒硎菍?duì)“視頻基本信息”及視頻內(nèi)容的分享，所以放在本區(qū)域內(nèi)更加明確了功能分區(qū)；
2. 增加視頻分享功能，有利于本產(chǎn)品拉新\促活\留存。

視頻詳情頁(yè)細(xì)節(jié)2：增加公眾號(hào)微信二維碼 & 聯(lián)系我們

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

CMS后臺(tái)設(shè)計(jì)

為滿足業(yè)務(wù)方需求，使視頻增加區(qū)分度，后臺(tái)配置系統(tǒng)增加了“標(biāo)簽”字段，可更靈活得配置視頻的更多特征feature；

并且，關(guān)于推薦視頻、相關(guān)產(chǎn)品，后臺(tái)可直接調(diào)用原有接口，通過(guò)勾選的方式直接進(jìn)行選擇，從而生成前臺(tái)的相關(guān)推薦產(chǎn)品、視頻；

最后，增加了一個(gè)按鈕，可配置文案、URL與埋點(diǎn)，使視頻中心能更直觀得監(jiān)測(cè)頁(yè)面轉(zhuǎn)化率。（由于涉及到后臺(tái)系統(tǒng)，故不放出CMS截圖）

RWD.M端設(shè)計(jì)（列表+詳情）

M端的視頻中心列表、詳情頁(yè)主要也是以展示功能為主，故信息排布也是設(shè)計(jì)重點(diǎn)?；诰〇|云官網(wǎng)RWD響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，將PC頁(yè)面轉(zhuǎn)化成移動(dòng)端頁(yè)面，保證功能的實(shí)現(xiàn)。

其中兩個(gè)特殊交互：

1. 視頻描述超出限高后怎么查看全部的問(wèn)題，這里采用的我們?cè)幸苿?dòng)端處理超出限制字符的方式，加一個(gè)展開(kāi)按鈕（當(dāng)然還有很多別的處理方式，比如點(diǎn)擊出現(xiàn)浮層，方案見(jiàn)仁見(jiàn)智）；

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

以上是我對(duì)京東云官網(wǎng)視頻中心改版的項(xiàng)目總結(jié)，感謝閱讀！