項(xiàng)目總結(jié):大型PC官網(wǎng)視頻中心頁(yè)面改版
本篇文章作者對(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:
- 在視頻標(biāo)題后加分享功能,而不是在別的區(qū)域,因?yàn)榉窒硎菍?duì)“視頻基本信息”及視頻內(nèi)容的分享,所以放在本區(qū)域內(nèi)更加明確了功能分區(qū);
- 增加視頻分享功能,有利于本產(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é),感謝閱讀!
學(xué)長(zhǎng)????
請(qǐng)教一下視頻的標(biāo)題為什么要放在視頻的下方
首先:標(biāo)題+視頻分類+視頻tag+描述,其實(shí)是相關(guān)性較強(qiáng)的一組字段,不太建議分開(kāi);然后,那如果將這組字段放在播放器上面的話,第一不太美觀(區(qū)域太高),第二,主要這組字段有描述,會(huì)涉及到展開(kāi)收起,如果展開(kāi)可能會(huì)把播放器下壓,不太符合體驗(yàn)。最后,還有一個(gè)原因是我們視頻中心原頁(yè)面也是標(biāo)題放在下面,也是為了降低開(kāi)發(fā)成本。(不知道我理解的是不是你問(wèn)的 /哈哈)