您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 交互設(shè)計 >> 瀏覽設(shè)計教程

迅雷云播頁面重構(gòu)心得

隨著迅雷云播客戶端2.0版本的上線,迅雷云播實現(xiàn)了(網(wǎng)頁版、PC客戶端)共用一套html結(jié)構(gòu)的目標!感謝項目組,感謝擊哥,讓自己有機會負責(zé)云播各終端的重構(gòu)工作。從重構(gòu)的角度來講,我們做著:精度還原設(shè)計稿,代碼的標準化、模塊化、語義化,為開發(fā)童鞋提供代碼注釋,學(xué)習(xí)應(yīng)用Javascript提高輸出頁面的實現(xiàn)效果,圖片優(yōu)化等等工作。

多終端html統(tǒng)一難實現(xiàn)難點現(xiàn)狀:

  1. 技術(shù)上:方案需求方的不同,設(shè)計師的不同,設(shè)計稿結(jié)構(gòu)差異,歷史遺留版本,工作難統(tǒng)一。
  2. 自身:項目團隊不同,重構(gòu)負責(zé)人不同,開發(fā)童鞋不同。

迅雷云播 可以搜索關(guān)鍵字:云點播,云播放,云播特權(quán)。

<meta name=”keywords” content=”云點播 云播放 視頻 在線 免下載 播放 迅雷 免費 離線下載 迅雷客戶端 快速播放 BT種子 下載鏈接 轉(zhuǎn)碼 iphone ipad 安卓 破解版“/>

<meta name=”description” content=”迅雷云播是迅雷公司推出的BT種子、視頻下載鏈接在線快速播放的服務(wù),有BT種子、視頻下載鏈接即可快速播放,支持多瀏覽器、蘋果和安卓系統(tǒng)、ipad等移動設(shè)備“/>

pc客戶端請看截圖:

客戶端
a

網(wǎng)頁版請看截圖:

云播-我的收藏
云播-我的收藏b

以播放頁內(nèi)嵌html結(jié)構(gòu)為例講解云播項目頁面重構(gòu)方面的知識點

需求分析:

  1. 1、二欄寬高自適應(yīng)布局
  2. 2、左側(cè)nav固定寬度可伸縮,右側(cè)自適應(yīng)屏幕寬度。
  3. 3、flash嵌套html應(yīng)注意
  4. 4、背景圖片清緩存問題
二欄布局

二欄布局的結(jié)構(gòu)我們一般會這樣寫:

<div class="yb_c_wp" id="mainwrap">
   <div class="yb_cloud_play">
        <div class="yb_imgbox">
            <div>播放頁部分</div>
        </div>
    </div>
    <div class="wp_navAside">
        <div>左邊欄內(nèi)容</div>
    </div>
</div>

高度自適應(yīng)瀏覽器全屏解決方法:

a)、用樣式表控制

.yb_c_wp{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
height: 100%;
overflow: hidden;
background:#232632;
}

以上代碼使最外層容器絕對定位之后,上下左右四邊都與瀏覽器可視化邊框貼緊,從而做到了適配各種屏幕,但此方法不適用于ie低端瀏覽器。

b)、用js動態(tài)讀取瀏覽器可視化高度并賦值與外層容器class=”yb_c_wp”

高度自適應(yīng)js代碼

function fn(){
var mainwrap = $(‘#mainwrap’); // 定義變量
window.onresize = function();{ // 調(diào)用onresize事件在窗口或框架被調(diào)整大小時發(fā)生
var wHeight = $(window).height();// 獲取瀏覽器可是化窗口高度
mainwrap.height(wHeight);// 外層容器高度賦值
};}
fn();

考慮兼容高低端瀏覽器,a方案不適用,b方案可以使用用

二欄寬度自適應(yīng)布局(左側(cè)定寬)方法:

方法一:負邊距

樣式表代碼:

.wp_navAside{
float:left;
clear:left;
width:144px;
height:100%;
};
.yb_cloud_play{
float:right;
width:100%;
margin-left:-144px
}
.yb_imgbox{
margin-left:144px
};

方法二:絕對定位用Js動態(tài)獲取右側(cè)可變寬度

樣式表代碼:

.wp_navAside {
position: absolute;
bottom: 0;
left: 0;
top: 0;
width: 144px;
height: 100%;
background: #232632;
border-right:1px solid #000000;
}
.yb_cloud_play{
position: absolute;
height: 100%;
width: 100%;
};
.yb_imgbox{
position: absolute;
bottom: 0;
left: 144px;
top: 0;
right:0;
}

右側(cè)寬度取值js代碼

function fn(){
var mainwrap = $(‘#mainwrap’); // 定義變量
var width_box = $(‘#XL_CLOUD_VOD_PLAYER’); // 定義變量
window.onresize = function();{ //調(diào)用onresize事件在窗口或框架被調(diào)整大小時發(fā)生
var width_spread = $(window).width()-$(“.wp_navAside”).width(); // 獲取右側(cè)寬度=瀏覽器寬度-左側(cè)變化寬度(伸縮狀態(tài))
$(width_box).width(width_spread); // 右側(cè)寬度賦值
};}
fn();

方案一、二實現(xiàn)效果無兼容性差異。方案一簡單易懂的css樣式表,但無法滿足播放頁右側(cè)單一內(nèi)容撐開全屏的要求,這里推薦使用方案二。

(綜上所述:播放頁自適應(yīng)寬高二欄布局我們推薦使用的最終方案為:方案b+方案二 )

nav欄伸縮問題,主頁面海報右側(cè)內(nèi)容間距自適應(yīng)各種分辨率

關(guān)于左側(cè)欄伸縮解與右側(cè)海報內(nèi)容間距匹配不同分辨率問題,別無它法為兼容低端瀏覽器,我們只能通過添加不同的全局類名控制局部變化。這里需要細心,耐心整理各種分類情況!(以常用分辨率劃分,右側(cè)內(nèi)容間距我們需要考慮的情況=2(伸開/收縮狀態(tài))*【3(好友/海報/縮略圖)*【(1920)+(1440)+(1366)+(1280)+(1010)+(990)】】)

客戶端播放頁flash嵌套html優(yōu)化

查看效果請下載demo用瀏覽器打開。

demo1:播放器頁面

demo2:播放器頁面優(yōu)化

內(nèi)容在flash上的幾種方法總結(jié)

a) 空標簽空背景方法:

定位a標簽到對應(yīng)flash上邊某一位置
a{
background:url(about:block) no-repeat; // 對標簽背景如下設(shè)置
zoom:100;
}

b) iframe方法:

內(nèi)容模塊同級添加iframe結(jié)構(gòu):
<iframe src="transparent.html"> 
//transparent.html為空文件,iframe需有背景顏色,ie不支持透明顏色iframe結(jié)構(gòu)在flash上.
</iframe>
背景圖片清緩存問題

同一套結(jié)構(gòu),背景圖片清緩存你還在手動添加版本號嗎?如果是,那么有點落后了。用less和sass的變量幫你一步修改項目中所有版本號。既方便,又好維護!

例子:
@version: ~` “” `; // 版本號
@suffix: ~` “?” + “@{version}” `; // 后綴名
@yb_bgimage: ~` “../img/wp_bg.png” + “@{suffix}” `;
.yb_bgimage{background:url(@yb_bgimage) no-repeat -2px -95px;}

學(xué)習(xí)請查看: Less   Sass

結(jié)語:

工作的樂趣是需要自己創(chuàng)造的。樂趣何在?靠自己發(fā)現(xiàn)!為你的團隊提供更高效的解決方案,在工作中積累、思考,探索更好的規(guī)范、流程、工具、方法等等。分享是一種快樂!積極的心態(tài)讓我們永遠充滿活力!加油!

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id2117.html
從用戶行為打造活動交互設(shè)計閉環(huán)—2014年世界杯競猜活動設(shè)計總結(jié)
用戶體驗設(shè)計和UI設(shè)計的10個不同點
圖趣網(wǎng)微信
建議反饋
×