QQ Live 大界面改版背景

左右分體模式使得播放器和視頻庫均受到限制，視頻庫尺寸小，用戶找片不方便。

QQ Live原來版本為分體式左右兩個模塊結(jié)構(gòu)（播放器寬565，視頻庫寬490，總高511）占據(jù)分辨率為1280×1024的屏幕不足50%的空間。

一、四種用戶場景

經(jīng)過用戶研究，我們得出了QQ Live的四大用戶場景：

二、嘗試設(shè)計方案稿

我們嘗試了幾個配色方案之后，最終確定了采用含有Logo品牌色的暖色調(diào)的配色方案。整體皮膚為深色，是保證用戶在觀影的時候圖像周圍有一個安靜穩(wěn)定，無干擾的環(huán)境，讓視線只專注于影片。

最終方案效果：

三、看片與找片的切換表現(xiàn)

我們嘗試了幾種切換表現(xiàn)方式，來探索更加理想的看片和選片的方案：

方案一 借鑒電視節(jié)目的畫中畫方式

?

方案二 button/tab的切換方式

四、嘗試的幾種播放控制條方案

第一種是形式獨(dú)立于窗體的浮層式控制條，帶有半透明效果，在鼠標(biāo)停留在畫面上一段時間的情況下才出現(xiàn)，鼠標(biāo)離開響應(yīng)區(qū)域后則自動消失。這樣的處理方式使的播放控制區(qū)域面積小，比較輕盈和有靈動；不過這種浮層式的最好有一定的透明度，但這在XP系統(tǒng)下比較難以實現(xiàn)；

第二種是類似Windows media player的播放控制方式，這里通欄的進(jìn)度條能讓用戶對影片進(jìn)行精準(zhǔn)的控制和定位，但是這種進(jìn)度條和控制按鈕分離，控制按鈕獨(dú)立浮層的方式在畫面上看起來會稍顯零亂；

第三種方式是現(xiàn)在選定的方案，繼續(xù)延用了原來的方式，窗口底部的控制bar和頂部的head bar上下呼應(yīng)，使播放器整體感更強(qiáng)，而且控制按鈕在實體的bar上，當(dāng)窗口拖拉縮放時它們的位置變化會給用戶有一個穩(wěn)定的心理預(yù)期。

五、寬屏尺寸的確定

根據(jù)現(xiàn)在用戶各分辨率顯示器的使用比例，經(jīng)討論決定視頻庫窗口選取最主要一些分辨率屏幕的大概80%寬度，根據(jù)多個分辨率型號的顯示器進(jìn)行平均計算，得出一個寬度值是998。

另外想到我們Live的官網(wǎng)頁面內(nèi)容的寬度為960，上面計算的寬度為998，相差不大，如果我們視頻庫大尺寸寬度選960那視頻庫內(nèi)嵌頁面幾乎可以調(diào)用官網(wǎng)現(xiàn)成的資源使用，節(jié)省大量投入。然后考慮視頻庫內(nèi)嵌頁面960的?寬度，右邊還有15pixel的滾動條以及窗口邊框厚度，（此外還參考RealOne 、iTunes、Zune、PPs 等一些產(chǎn)品的默認(rèn)尺寸都為1000pixel 左右的大界面），所有考慮寬度定為980；但是另外那39% 分辨率1024的用戶980的寬度會覺得充得太滿，不過還考慮到1024以上分辨率的用戶占到了50%以上，而且用戶顯示器分辨率使用的趨勢是越來越大的，這個更新速度現(xiàn)在也很快，所以適當(dāng)超前一點(diǎn)的設(shè)計也是可以的。

六、在Windows7下的系統(tǒng)窗框的嘗試效果

這次QQLive更換大界面是一次很重要的改版。在設(shè)計前，我們列出了用戶每一項操作的步驟以及使用場景清單，并根據(jù)清單進(jìn)行了焦點(diǎn)小組討論，集思廣益，在眾多的解決方案中尋求平衡，在平衡中挖掘亮點(diǎn)，找到最優(yōu)方案。大到切換模式、按鈕形式、列表樣式、信息彈出窗的內(nèi)容，小到對按鈕位置、數(shù)量以及冒泡的停留時間都做了相應(yīng)的設(shè)計規(guī)劃，進(jìn)而才投入設(shè)計，并在一次又一次方案中不斷優(yōu)化打磨，最終成型。最終成果是項目團(tuán)隊成員共同傾力付出的結(jié)晶，這里誠邀大家參與體驗，希望大家一如既往的關(guān)注QQLive、提出您的建議，伴QQLive繼續(xù)成長。

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時請注明出處)