<dd id="pdtpp"></dd>
<progress id="pdtpp"><track id="pdtpp"><video id="pdtpp"></video></track></progress>

<button id="pdtpp"></button>
<rp id="pdtpp"></rp>
  • <rp id="pdtpp"></rp>
      數極客首頁

      項目總結:大型PC官網視頻中心頁面改版

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

      項目總結:大型PC官網視頻中心頁面改版

      一、設計界定

      需求背景

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

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

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

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

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

      設計目標

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

      項目總結:大型PC官網視頻中心頁面改版

      二、需求深化

      用戶行為

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

      競品分析:

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

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

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

      項目總結:大型PC官網視頻中心頁面改版

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

      項目總結:大型PC官網視頻中心頁面改版

      用戶訪談

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

      設置問題:

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

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

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

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

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

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

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

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

      3)“想看的視頻、推薦的東西”;

      4)“希望啊”;

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

      訪談結論:

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

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

      項目總結:大型PC官網視頻中心頁面改版

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

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

      項目總結:大型PC官網視頻中心頁面改版

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

      1)前臺展示部分,展示的效果;

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

      四、方案設計

      概念方案分解釋義

      視頻列表頁

      項目總結:大型PC官網視頻中心頁面改版

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

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

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

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

      項目總結:大型PC官網視頻中心頁面改版

      視頻詳情頁

      項目總結:大型PC官網視頻中心頁面改版

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

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

      視頻標題后加分享icon:

      1. 在視頻標題后加分享功能,而不是在別的區域,因為分享是對“視頻基本信息”及視頻內容的分享,所以放在本區域內更加明確了功能分區;
      2. 增加視頻分享功能,有利于本產品拉新促活留存。
      項目總結:大型PC官網視頻中心頁面改版

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

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

      項目總結:大型PC官網視頻中心頁面改版

      CMS后臺設計

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

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

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

      RWD.M端設計(列表+詳情)

      項目總結:大型PC官網視頻中心頁面改版

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

      其中兩個特殊交互:

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

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

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

      新一代大數據用戶行為分析與數據智能平臺:數極客(http://www.fm341.com),是支持無埋點、前端埋點、后端埋點、API導入四種混合數據采集方式,整合分析用戶行為數據和業務數據,可以自動監測網站、APP、小程序等多種渠道推廣效果分析,是增長黑客們必備的互聯網數據分析軟件。數極客支持實時多維分析、漏斗分析、留存分析、路徑分析等十大數據分析方法以及APP數據分析網站統計網站分析小程序數據統計用戶畫像等應用場景,業內首創了六種提升轉化率的數據分析模型,是數據分析軟件領域首款應用定量分析與定性分析方法的數據分析產品

      發表評論

      評論已關閉。

      相關文章

      女主播直播