国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

一、設(shè)計界定

需求背景

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

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

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

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

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

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

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

二、需求深化

用戶行為

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

競品分析：

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

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

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

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

用戶訪談

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

設(shè)置問題：

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

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

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

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

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

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

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

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

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

4）“希望啊”；

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

訪談結(jié)論：

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

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

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

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

方案可行性評估：此次項目主要的可行性風(fēng)險集中在兩點：

1）前臺展示部分，展示的效果；

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

四、方案設(shè)計

概念方案分解釋義

視頻列表頁

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

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

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

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

視頻詳情頁

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

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

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

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

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

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

CMS后臺設(shè)計

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

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

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

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

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

其中兩個特殊交互：

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

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

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