2014-4-9 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
響應(yīng)式網(wǎng)頁(yè)界面設(shè)計(jì)，是一種正在流行的網(wǎng)頁(yè)開(kāi)發(fā)思想，它是利用靈活可變的柵格系統(tǒng)，令網(wǎng)頁(yè)的顯示模式可以根據(jù)訪問(wèn)設(shè)備的屏幕尺寸規(guī)格而進(jìn)行自適應(yīng)。預(yù)計(jì)2015年的時(shí)候，移動(dòng)端的用戶(hù)數(shù)量將會(huì)從目前的8億，增長(zhǎng)到19億，而這也意味著目前我們?yōu)樽烂鏋g覽器而設(shè)計(jì)的網(wǎng)頁(yè)，將會(huì)在他們的手機(jī)和平板上呈現(xiàn)出非常糟糕的使用體驗(yàn)。
但是隨著實(shí)際應(yīng)用狀況的改變，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)還是會(huì)出現(xiàn)一系列復(fù)雜的并發(fā)癥。藍(lán)藍(lán)設(shè)計(jì)本文余下的部分，就是詳細(xì)闡述如何在響應(yīng)式網(wǎng)頁(yè)中安置和處理多媒體元素，諸如圖片和視頻，最終的目的是幫你做出一個(gè)靠譜的網(wǎng)站，能讓這些元素?zé)o縫地在各種手持設(shè)備上加載運(yùn)行，提升用戶(hù)體驗(yàn)。
先說(shuō)說(shuō)響應(yīng)式圖片的處理方法。在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，圖片處理的問(wèn)題或多或少地和傳統(tǒng)網(wǎng)頁(yè)中的導(dǎo)航欄設(shè)計(jì)有相似之處。隨著新的移動(dòng)設(shè)備的普及，更高像素密度的屏幕使得網(wǎng)頁(yè)的任何一個(gè)瑕疵都顯得無(wú)比明顯，因此，圖片處理的核心問(wèn)題在于如何確保網(wǎng)站（尤其是圖片）的各個(gè)方面都能盡可能靈活，并且確保每個(gè)像素不會(huì)在高分屏下模糊。
圖片顯示的問(wèn)題
首先，當(dāng)網(wǎng)頁(yè)對(duì)設(shè)備響應(yīng)時(shí)，并不存特定的圖片發(fā)布標(biāo)準(zhǔn)。并且針對(duì)這一問(wèn)題，有大量的可選方案供你選擇。不過(guò)，這個(gè)時(shí)候，問(wèn)題出現(xiàn)了：3G模式下，在視網(wǎng)膜屏幕下的移動(dòng)設(shè)備上圖像應(yīng)該如何處理。在網(wǎng)速較差的情況下，圖片的尺寸大小是否應(yīng)該自動(dòng)優(yōu)化（降低）？這就是所謂“美術(shù)設(shè)計(jì)”的問(wèn)題。網(wǎng)站提供的圖片在不同屏幕的設(shè)備上都能夠顯示，還是遠(yuǎn)遠(yuǎn)不夠的。小屏幕設(shè)備的用戶(hù)可能完全看不清圖片的細(xì)節(jié)，那么，就應(yīng)該在“能正常顯示”的基礎(chǔ)上，為這塊小屏幕單獨(dú)裁剪一個(gè)版本，讓用戶(hù)看清細(xì)節(jié)。
有人提出，開(kāi)發(fā)者應(yīng)該將所有不同尺寸大小比例的圖片都預(yù)先上傳到網(wǎng)站頁(yè)面中，并且設(shè)置好CSS與媒體查詢(xún)功能，將過(guò)大或過(guò)小的圖片都隱藏起來(lái)，讓瀏覽器就下載像素完全匹配的圖像。然而，實(shí)際狀況并非如此，瀏覽器在加載CSS類(lèi)之前，就已經(jīng)將所有的相關(guān)圖片都下載下來(lái)，這使得網(wǎng)頁(yè)更加臃腫，加載時(shí)間更長(zhǎng)。
圖片問(wèn)題可能的解決方案
在繼續(xù)探討之前，先明確一點(diǎn)：讓每塊屏幕都完美顯示圖片的解決方案是不存在的。可是我們能夠不斷探索可行性更高的方案，盡可能地提高精度，以下是我們?yōu)轫憫?yīng)式網(wǎng)頁(yè)的圖像問(wèn)題，找到的可能的解決方案：
如果你開(kāi)始設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站，但是對(duì)于如何操作毫無(wú)頭緒，那么你應(yīng)該試試BootStrap的CSS框架。借助Bootstrap，你可以很容易達(dá)成目標(biāo)。更重要的是，Bootstrap提供的樣式以及在基礎(chǔ)的HTML元素上擴(kuò)展出的類(lèi)，將會(huì)使得圖片的響應(yīng)更容易實(shí)現(xiàn)。
Focal Point是一個(gè)框架，可以幫助你“種植”圖片并且控制焦點(diǎn)。這項(xiàng)技術(shù)僅僅使用了CSS，開(kāi)發(fā)者僅僅需要向?qū)?yīng)標(biāo)簽中添加含有目標(biāo)圖片的類(lèi)就可以了。
CSS Sprites
如果加載時(shí)間是你需要考慮的首要因素的話(huà)（它應(yīng)該是），那么你可以選擇CSS 精靈，尤其當(dāng)你需要適配帶有視網(wǎng)膜屏幕的設(shè)備之時(shí)。當(dāng)你為高分辨率屏幕適配網(wǎng)頁(yè)的時(shí)候（比如蘋(píng)果的Retina屏幕），一般會(huì)添加更大尺寸的圖片資源，并且使用CSS中的Media Query來(lái)識(shí)別并適配尺寸。但是如此一來(lái)，文件數(shù)量和大小會(huì)急劇增加，并且會(huì)增加代碼中的CSS選擇器的數(shù)量，引用更多的文件。
如果使用CSS 精靈的話(huà)，這種情況會(huì)得以改善。你可以將網(wǎng)頁(yè)所需要的圖片都包含到一張大圖中供選擇器來(lái)引用。僅僅需要一個(gè)http請(qǐng)求，你就可以將多個(gè)圖片素材獲取到本地。通過(guò)<img />標(biāo)簽引用的照片類(lèi)素材并不適宜于用CSS精靈來(lái)處理，但是你在header和footer中使用的圖標(biāo)素材和按鈕樣式之類(lèi)的東西會(huì)在CSS精靈的加持下，好用很多。
自適應(yīng)博客
自適應(yīng)圖片的解決方案可以通過(guò)檢測(cè)設(shè)備的屏幕尺寸，為html嵌入符合屏幕尺寸需求的圖片資源。這種方案是一個(gè)典型的服務(wù)器端解決方案，它需要在被本地運(yùn)行Javascript來(lái)檢測(cè)，但它最主要還是依靠Apache2 網(wǎng)絡(luò)服務(wù)器，PHP 5.x以及GD庫(kù)。
自適應(yīng)圖片的方案最贊的地方在于你不需要改變標(biāo)記。有人認(rèn)為基于標(biāo)記的解決方案是最好的，但是事實(shí)并非如此。對(duì)于Wordpress這樣的內(nèi)容管理系統(tǒng)，自適應(yīng)圖片的解決方案與之結(jié)合起來(lái)會(huì)方便很多。
如果想讓你的網(wǎng)站能圖片自適應(yīng)，那么你需要在服務(wù)器端修改或者增加.htaccess文件。此外，你還需要在你的網(wǎng)站服務(wù)器的根目錄下增加一個(gè)PHP文件，并且在網(wǎng)站頁(yè)面中增加JavaScript代碼。當(dāng)你做好這一切之后，PHP腳本會(huì)獲取對(duì)于圖片的任何需求，并且會(huì)根據(jù)需求所指定的斷點(diǎn)調(diào)整好尺寸輸出網(wǎng)頁(yè)。
在Wordpress網(wǎng)站中輸出響應(yīng)式圖片的插件
在Wordpress站點(diǎn)中，還有其他通過(guò)插件來(lái)實(shí)現(xiàn)響應(yīng)式圖片的解決方案。以下插件與 <picture> 標(biāo)簽的作用相同：
-PB Responsive Image
-WP Responsive Image
-Simple Responsive Image
-Picture Fill WP
此外，網(wǎng)上還有很多響應(yīng)式的Wordpress主題可供用戶(hù)選擇。
處理圖片的終極方案？
再?gòu)?qiáng)調(diào)一次，請(qǐng)千萬(wàn)記住，所有的這些處理圖片的可行性方案都有其局限性。比如自適應(yīng)圖片的方案，它需要Apache和PHP的結(jié)合，因此它用于內(nèi)容管理還好，但是不大可能完美適配于網(wǎng)站平臺(tái)或者主機(jī)服務(wù)器上。此外，自適應(yīng)圖片有賴(lài)于服務(wù)器通過(guò).htaccess文件獲取圖片尺寸的需求，這也就意味著，獲取的圖片不在自己的服務(wù)器上，.htaccess中的腳本就無(wú)能為力了。此外，這個(gè)腳本還無(wú)法檢測(cè)帶寬，如果你拿著3G版iPad Air訪問(wèn)這類(lèi)網(wǎng)站的話(huà)，加載速度可能會(huì)慘不忍睹。最重要的是，它并沒(méi)有解決上述的“美術(shù)設(shè)計(jì)”的問(wèn)題，它僅僅只是調(diào)整了原有圖片的尺寸而已。所以，對(duì)于這一切，你需要通過(guò)試驗(yàn)找出最合適的方案。
毫無(wú)疑問(wèn)，對(duì)于網(wǎng)站而言視頻是極其重要的營(yíng)銷(xiāo)工具。因此，對(duì)于富有彈性的響應(yīng)式視頻的需求越來(lái)越多。
就像圖片一樣，讓圖片靈活地適配網(wǎng)頁(yè)也是個(gè)頭疼的事情。這并不關(guān)乎視頻播放器的尺寸，但即使是播放按鈕這樣的的基礎(chǔ)網(wǎng)頁(yè)元素，也都需要針對(duì)千奇百怪的設(shè)備來(lái)適配和優(yōu)化。以下提供幾個(gè)解決方案：
為Wordpress中的視頻優(yōu)化
雖然wordpress提供了諸多響應(yīng)式的主題，但是一般情況下，這些內(nèi)嵌視頻并不會(huì)根據(jù)屏幕尺寸自行適配。這也是為何它們所在的網(wǎng)頁(yè)可能會(huì)出現(xiàn)拉伸，或者不對(duì)稱(chēng)的情況。FitVids這一插件完美的解決了這個(gè)問(wèn)題。這是一個(gè)jQuery插件，它能讓視頻針對(duì)屏幕尺寸自行適配。激活插件之后，Wordpress會(huì)在發(fā)布視頻內(nèi)容時(shí)，向CSS選擇器中自動(dòng)添加“.post”類(lèi)。保存修改，你可以嘗試在不同尺寸的設(shè)備中觀察網(wǎng)頁(yè)的布局，感受視頻播放的體驗(yàn)，看看它是怎么工作的。
此外，還有更多可選的Wordpress插件：
-Fluid Video Embeds
-Video Overlayer
-MarcTV Video Embed
-Responsive Video
從其他網(wǎng)站中手動(dòng)嵌入視頻
YouTube以及其他類(lèi)似的視頻托管網(wǎng)站通常以像素為單位固定寬度和高度，并且嵌入到代碼中。對(duì)于普通網(wǎng)站，這并沒(méi)有什么不妥，但是對(duì)于響應(yīng)式網(wǎng)頁(yè)，這樣的視頻是不合用的。這些使用了內(nèi)置頁(yè)框和對(duì)象標(biāo)簽的視頻網(wǎng)站代碼，用HTML5的視頻元素來(lái)處理是不可能的。簡(jiǎn)單的說(shuō)，HTML5的標(biāo)簽搞不定來(lái)自Youtube和Vimeo的嵌入視頻。
這個(gè)時(shí)候，CSS再次派上了用場(chǎng)。具體來(lái)說(shuō)，即使容器元素按比例縮小，你可又可以保持視頻的內(nèi)在比例。這種技術(shù)可以幫助你講youtube、Vimeo和SlideShare等流媒體網(wǎng)站的視頻嵌入到網(wǎng)頁(yè)中并自然地顯示。你所要做的，是使用<div>容器來(lái)嵌入代碼，并指定子元素的絕對(duì)位置，這會(huì)使得嵌入的視頻根據(jù)屏幕寬度自動(dòng)擴(kuò)展。
值得注意的是，剝離出視頻并且按照尺寸比例封裝到Div的過(guò)程并不簡(jiǎn)單，此外，這項(xiàng)技術(shù)對(duì)于多視頻的網(wǎng)站可行性并不高。不過(guò)如果你的網(wǎng)站已經(jīng)設(shè)計(jì)成響應(yīng)式的頁(yè)面，那么這項(xiàng)技術(shù)將會(huì)在你的網(wǎng)站上完美運(yùn)行。
接下來(lái)是一些實(shí)際案例，這些響應(yīng)式網(wǎng)站針對(duì)不同瀏覽器和屏幕優(yōu)化了圖片和視頻：
案例1:BootStrap+jQuery
這是一個(gè)風(fēng)格極簡(jiǎn)的博客/作品集網(wǎng)站，它使用了Bootstrap v2.2.2和jQuery。前者讓這個(gè)網(wǎng)站可以使用大量的表單、模態(tài)、提示、按鈕、轉(zhuǎn)盤(pán)并且響應(yīng)式輸出，加入jQuery之后網(wǎng)站的流布局能力又得以提升。jQuery可以讓網(wǎng)站實(shí)現(xiàn)各種不同的顯示方式（比如在桌面端瀏覽器上顯示三欄，在平板上顯示一欄，在手機(jī)屏幕上顯示一欄）。
案例2:FitVids
這是一個(gè)在Wordpress框架中通過(guò)FitVids來(lái)嵌入視頻的案例。使用這一插件的好處在于安裝方便，并且會(huì)讓視頻完美適配屏幕。
案例3：Focal Point
這一案例使用Focal point 來(lái)調(diào)整背景圖片并且突出人物照片。因此，這個(gè)案例中的網(wǎng)頁(yè)設(shè)計(jì)師并沒(méi)有提供一系列不同尺寸的圖片，他們僅僅只是改變了網(wǎng)站的視覺(jué)重心，將焦點(diǎn)移動(dòng)到最大的物體上。
案例4:自適應(yīng)圖片
最后這個(gè)案例使用了自適應(yīng)圖片的方案。開(kāi)發(fā)者使用一個(gè).htaccess文件，一個(gè)PHP文件，以及一行簡(jiǎn)單的Javascript代碼.前兩個(gè)文件可以放在服務(wù)器根目錄下，而這行Javascript代碼則需要插入index文件的文件頭中。想搞清楚這些案例，你就應(yīng)該訪問(wèn)他們的網(wǎng)站。
藍(lán)藍(lán)設(shè)計(jì)希望這篇指導(dǎo)性的文章能提高你對(duì)于響應(yīng)式網(wǎng)站設(shè)計(jì)的理解。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net