感謝貸巖的邀請(qǐng)，我在本期奶茶會(huì)上做了“響應(yīng)式設(shè)計(jì)實(shí)踐”的分享，是接著上一次的話題進(jìn)一步討論“如何實(shí)現(xiàn)”。響應(yīng)式Web設(shè)計(jì)(Responsive Web design)是當(dāng)下比較流行的話題，什么是響應(yīng)式設(shè)計(jì)？簡(jiǎn)單講，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

響應(yīng)式設(shè)計(jì)聽(tīng)起來(lái)非常理想，但其技術(shù)實(shí)現(xiàn)則困難重重，因?yàn)轫憫?yīng)式設(shè)計(jì)并不僅僅包含設(shè)計(jì)本身，還包含實(shí)現(xiàn)，更進(jìn)一步講，實(shí)現(xiàn)原理固然簡(jiǎn)單，但要考慮到開(kāi)發(fā)成本、性能、可維護(hù)性方面則又是充滿了挑戰(zhàn)。比如說(shuō)，我們都知道使用MediaQuery來(lái)實(shí)現(xiàn)CSS去適配各式終端，但MediaQuery應(yīng)當(dāng)從高分辨率還是往低適配還是從低分辨率往高適配？容器樣式使用MediaQuery來(lái)作適配，那么布局是不是也適合用MediaQuery作適配？加入MediaQuery適配后的頁(yè)面體積增加了，如何在小屏幕終端里降低頁(yè)面體積？帶有復(fù)雜交互的組件如何作適配？MediaQuery增加了代碼復(fù)雜度降低了可維護(hù)性，如何讓MediaQuery來(lái)適應(yīng)變化頻繁的被運(yùn)營(yíng)的Web頁(yè)面？這些問(wèn)題不是一兩篇文章能說(shuō)明白的。我們需要提煉出一套實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的最佳實(shí)踐。為此我們成立了“變色龍”小組（響應(yīng)式設(shè)計(jì)小組），來(lái)持續(xù)對(duì)當(dāng)前方案進(jìn)行改進(jìn)，成立幾個(gè)月時(shí)間以來(lái)，淘寶新業(yè)務(wù)已經(jīng)有不少頁(yè)面開(kāi)始嘗試響應(yīng)式設(shè)計(jì)，我們將文檔中部分內(nèi)容提煉出來(lái)，分享給大家，希望對(duì)各位剛剛學(xué)習(xí)響應(yīng)式設(shè)計(jì)的同學(xué)有所幫助。

對(duì)于剛才提到的這些問(wèn)題，小組在布局和組件開(kāi)發(fā)上給出了一些思路和粗糙的實(shí)現(xiàn)，但對(duì)于設(shè)計(jì)師同學(xué)來(lái)講，挑戰(zhàn)更甚，因?yàn)樵O(shè)計(jì)師只有在充分和前端工程師溝通理解的基礎(chǔ)上才能設(shè)計(jì)出完美的響應(yīng)式UI，畢竟響應(yīng)式UI上的一點(diǎn)小改動(dòng)，將會(huì)帶入極大的開(kāi)發(fā)工作量。所以響應(yīng)式設(shè)計(jì)從某種程度上講是一種團(tuán)隊(duì)協(xié)作模式，這也給設(shè)計(jì)師和前端工程師提出了更高的要求。

PPT中提到的布局問(wèn)題稍微有點(diǎn)復(fù)雜，如果考慮到終端兼容，首先應(yīng)當(dāng)考慮容器的寬度可變，最典型的容器為圖文混排容器。和英文和拉丁語(yǔ)系的UI設(shè)計(jì)不同，中文網(wǎng)頁(yè)排版天生不靈活，圖文混排太受文案限制，因?yàn)樵谟⑽呐虐嬷校瑔卧~個(gè)數(shù)不構(gòu)成影響容器布局的關(guān)鍵因素，不同單詞的長(zhǎng)度不一樣，中文網(wǎng)頁(yè)中漢字個(gè)數(shù)則很大程度影響UI，因?yàn)槎∥暮苋菀讚伍_(kāi)圖文容器，漢字則不行，例如菜單項(xiàng)字?jǐn)?shù)限制，列表項(xiàng)不能折行，布局上就缺少流體+靈活的美感。對(duì)于視覺(jué)設(shè)計(jì)來(lái)說(shuō)，這是最大的挑戰(zhàn)。

在定寬網(wǎng)頁(yè)設(shè)計(jì)中流行的柵格，并不適用于多終端兼容的情況。因此在固定寬度的布局下，CSS網(wǎng)格布局表現(xiàn)出色，在處理浮動(dòng)元素的百分比時(shí)比較麻煩。然而，大多數(shù)的網(wǎng)格系統(tǒng)都提供浮動(dòng)屬性選項(xiàng)，這非常糟糕，當(dāng)我們?cè)诰W(wǎng)格中插入列時(shí)，網(wǎng)格樣式常常因此而扭曲變形。另外，固定寬度柵格對(duì)“響應(yīng)”的支持非常糟糕，造成這些問(wèn)題的“元兇”就是我們現(xiàn)有工具的局限性。導(dǎo)致CSS編碼缺少靈動(dòng)，一套CSS對(duì)應(yīng)一種適配。而Less則是解決CSS語(yǔ)法缺少靈活性的一種嘗試解決方案。Less讓CSS變得“可編程”，具有更靈活的適應(yīng)能力，基于此我們展開(kāi)對(duì)響應(yīng)式布局的進(jìn)一步探討。

在使用less實(shí)現(xiàn)布局時(shí)遇到了一個(gè)小問(wèn)題，由于Firefox中width等屬性最高只有3個(gè)小數(shù)點(diǎn)的精度，所以某些極端狀況下某一行上Less計(jì)算出來(lái)元素寬度總和可能會(huì)比總寬度超出0.000x個(gè)px，從而導(dǎo)致錯(cuò)位，目前采用hack的方式對(duì)每個(gè)元素的計(jì)算后的width都減去0.01px暫時(shí)規(guī)避解決，可能還會(huì)有一些可知不可知的問(wèn)題存在，需要我們不斷地去完善。而且Less.js在客戶端對(duì)CSS進(jìn)行編譯使用可能會(huì)對(duì)性能造成略微的影響。

還有一個(gè)最容易被忽略的問(wèn)題，就是智能機(jī)中的動(dòng)畫(huà)性能，在普通的PC平臺(tái)里，動(dòng)畫(huà)的實(shí)現(xiàn)大都是通過(guò)setInterval函數(shù)來(lái)完成，jQuery和YUI以及Kissy中亦是如此，只不過(guò)幀頻有所差異。后來(lái)都各自添加了對(duì)內(nèi)置css3 transition的檢測(cè)，優(yōu)先使用css3 transition，動(dòng)畫(huà)在現(xiàn)代瀏覽器中的性能又上升了一個(gè)臺(tái)階。但在iphone/ipad/android中依然不流暢，更流暢的動(dòng)畫(huà)則需要開(kāi)啟webkit的硬件加速�？梢詤⒄罩�前的一個(gè)ppt來(lái)了解js動(dòng)畫(huà)編程的一些背景知識(shí)。

css3動(dòng)畫(huà)分為兩種，transitions和transform，css3 transform本質(zhì)上是將元素的內(nèi)容作平移，而非直接對(duì)元素作屬性漸變，因此性能更好，通過(guò)Demo可以看出，移動(dòng)端的Dom操作性能要比css3 animation慢幾個(gè)數(shù)量級(jí)。因此要在動(dòng)畫(huà)中盡量減少Dom操作，而只對(duì)動(dòng)畫(huà)的內(nèi)容相對(duì)位置作平移。另外還有一個(gè)css3動(dòng)畫(huà)相關(guān)屬性就是keyframe，這個(gè)是用來(lái)輔助作復(fù)雜動(dòng)畫(huà)時(shí)用的，通過(guò)設(shè)定關(guān)鍵幀來(lái)作動(dòng)畫(huà)，在Slide控件中的簡(jiǎn)單動(dòng)畫(huà)暫時(shí)用不到。因此css3動(dòng)畫(huà)的幾個(gè)屬性小結(jié)如下：

• css3 transition：平滑的改變CSS屬性值，和setInterval原理類(lèi)似，但速度更快
• css3 2d transform：二維變換，CSS屬性值未漸變，未用到webGL加速，速度有提升，但提升程度有限
• css3 3d transform：三維變換，CSS屬性值未漸變，開(kāi)啟WebGL加速，速度明顯提升
• css3 animation：即使用keyframe來(lái)模擬動(dòng)畫(huà)，用來(lái)實(shí)現(xiàn)復(fù)雜動(dòng)畫(huà)，和性能無(wú)關(guān)

所以我們推薦使用在支持transition的平臺(tái)中使用translate3d來(lái)啟用硬件加速，注意要使用transform代替transition。

當(dāng)前我們某種程度上實(shí)現(xiàn)了響應(yīng)式設(shè)計(jì)，但后續(xù)還有很多優(yōu)化的工作，特別是頁(yè)面體積的優(yōu)化，是需要接下來(lái)著重要思考的。

附：PPT地址

文章來(lái)源：淘寶UED

標(biāo)簽： 響應(yīng)式Web WebUI設(shè)計(jì) 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。