多屏?xí)r代下WebUI設(shè)計(jì)研究
2013-12-31 00:00:00周沭玲
計(jì)算機(jī)光盤軟件與應(yīng)用 2013年16期
摘 要：本文主要探討多屏?xí)r代下Web頁面設(shè)計(jì)的發(fā)展趨勢，文章通過探討流式布局、CSS3、響應(yīng)式布局等方法，提升不同終端的瀏覽體驗(yàn)，重點(diǎn)分析了不同分辨率、不同設(shè)備下分欄布局、圖片顯示、視頻瀏覽等應(yīng)用的設(shè)計(jì)思路。
關(guān)鍵詞：多屏；HTML5；CSS；JQuery
中圖分類號：TP315
1 多屏?xí)r代到來
電視節(jié)目不斷創(chuàng)新、生活節(jié)奏不斷加快，移動互聯(lián)網(wǎng)快速盛行，當(dāng)下我們可以把目前的屏幕劃分為三類：第一屏——電視屏，在傳統(tǒng)的娛樂習(xí)慣中，看電視是一個最習(xí)以為常的家庭娛樂習(xí)慣；第二屏——電腦屏，互聯(lián)網(wǎng)的出現(xiàn)，把一部分人從電視屏前拉到了電腦屏前，人們獲取資訊開始從門戶網(wǎng)站開始；第三屏——手機(jī)屏和平板電腦屏，移動式屏幕已經(jīng)形影不離，尤其是移動互聯(lián)網(wǎng)的帶寬逐步提升，這一趨勢越加明顯。當(dāng)下，一些電視盒子的出現(xiàn)，使電視大屏瀏覽網(wǎng)站也成為可能，于是對于WebUI設(shè)計(jì)師來說，不得不考慮不同尺寸的屏幕，不同分辨率的屏幕，甚至平板的橫屏和豎屏等一些列情況下的網(wǎng)頁呈現(xiàn)效果。
2 多屏帶來的一些問題
第一，Android的碎片化，加速了多屏趨勢，從3.5寸到10寸的手機(jī)和平板電腦屏各式各樣。網(wǎng)頁在手機(jī)上呈現(xiàn)，越來越糟糕。
第二，移動設(shè)備的橫屏豎屏切換廣泛應(yīng)用，人們或豎屏單手持握手機(jī)瀏覽網(wǎng)頁，或橫屏寬屏瀏覽網(wǎng)頁，瀏覽器總是導(dǎo)致橫向滾動。
第三，瀏覽器種類繁多，無論是PC瀏覽器，還是手機(jī)瀏覽器種類越來越多，傳統(tǒng)設(shè)計(jì)難以駕馭。
第四，網(wǎng)頁對手觸交互支持較差，PC上鼠標(biāo)操作較為方便，而切換到手機(jī)或平板電腦上，觸控操作不在準(zhǔn)確。
3 實(shí)現(xiàn)多屏設(shè)計(jì)的常用方法
3.1 使用HTML5
Windows7以后的微軟的瀏覽器都已經(jīng)廣泛支持HTML5，不但在網(wǎng)頁呈現(xiàn)性能方面越來越強(qiáng)，而且大有替代Flash的趨勢，一直以來蘋果公司始終不支持Flash，設(shè)計(jì)師不得不為iPhone和iPad考慮另一套設(shè)計(jì)方案。HTML5出現(xiàn)，不用再考慮這些問題，大大提高了設(shè)計(jì)師的開發(fā)效率。
3.2 使用“流式布局”
自從Div+Css這種設(shè)計(jì)模式出現(xiàn)后，流式布局就成為網(wǎng)頁設(shè)計(jì)的主流，它可以充分實(shí)現(xiàn)內(nèi)容、布局、樣式的分離，是開發(fā)者更好的維護(hù)整個設(shè)計(jì)，也能使網(wǎng)頁更好的符合搜索引擎搜索規(guī)范。在多屏?xí)r代下，“流式布局”仍然會成為整體設(shè)計(jì)規(guī)劃時一種好的選擇。
3.3 使用百分比代替px（像素）定義盒子的寬度
橫向滾動條的出現(xiàn)，大大降低了網(wǎng)頁瀏覽的體驗(yàn)（大多數(shù)情況如此），因?yàn)橛脩粼陔娮釉O(shè)備上的閱讀習(xí)慣不再是左右滾動，而是上下滾動，用戶往往會忘記有橫向滾動這回事，從而瀏覽時會丟掉很多信息。百分比是以父容器的寬度為參照，所以始終不會超出父容器的寬度，即使用戶切換到不同的屏幕的電子設(shè)備，也不會出現(xiàn)橫向滾動。這樣的選擇往往適用于文本內(nèi)容的顯示。
3.4 使用MediaQuery技術(shù)
從CSS3開始，我們可以通過使用媒體查詢（MediaQuery）技術(shù)，實(shí)現(xiàn)多屏顯示的差異支持。我們可以在頁面中添加如下代碼：
以上代碼表示當(dāng)我們屏幕分辨率寬度最大為480像素時，加載link.css外部樣式文件。
3.5 使用JQuery或者Javascript
早期的IE不支持MediaQuery技術(shù)，通過JQuery或Javascript去處理，雖然JQuery本質(zhì)上就是Javascript技術(shù)，但是其對Javascript進(jìn)一步封裝，使Javascript得學(xué)習(xí)和開發(fā)成本大大降低。通過JQuery可以判斷出IE的版本，從而加載不同的外部樣式表。步驟如下：
第一，導(dǎo)入JQuery庫。
第二，使用JQuery方法處理加載樣式表。
其中IE7.css為針對IE7瀏覽器設(shè)計(jì)的樣式表。
4 常見場景舉例
4.1 多欄處理
不同屏幕尺寸大小不一，所以需要事先為各種大小尺寸的屏幕做好設(shè)計(jì)準(zhǔn)備。在電腦上，往往很大的寬屏顯示器，可以顯示多欄（3-4欄），但是當(dāng)用戶切換到移動手持設(shè)備上多欄就顯得很擠，所以不得不變成單欄或兩欄。一般來說我們往往以480px、960px寬度為界對屏幕進(jìn)行分類，劃分為3類：小于或等于480px為一類；大于480px并且小于等于960px為一類；大于960px為一類。所以使用MediaQuery技術(shù)，可以寫出如下樣式代碼：
@mediascreenand（max-width：480px）{
……
}
@mediascreenand（min-width：481px）and（max-width：960px）{
……
}
@mediascreenand（min-width：961px）{
……
}
其中省略號部分為不同屏幕寬度的樣式代碼。當(dāng)然需要將傳統(tǒng)的像素寬度換算成百分比寬度，以免出現(xiàn)橫向滾動。
4.2 圖片處理
屏幕寬度決定設(shè)計(jì)，但是很多圖片為了追求很好的視覺效果，通過使用高清或大尺寸，以提高可視面積，但是在小的屏幕上瀏覽起來卻十分麻煩。針對這一問題，我們可以將一些圖片以背景方式加載到頁面，然后在不同的屏幕寬度下，選擇加載不同的縮放比例，或縮放或裁剪。這種縮放方式一般都是等比例的縮放，所以圖片能很好的適應(yīng)屏幕大小，同時也能很好的滿足橫豎屏的切換。如果屏幕過小或過大，可以使用JQuery加載縮微圖片或高清圖片，以滿足用戶需要。
4.3 視頻處理
由于視頻的處理方式與圖片不同，在線視頻播放器本身控制著播放界面的尺寸，即使我們改變了它的寬度也不能很好的去適應(yīng)高度。所以一般對于在線播放的視頻，在一定寬度之上（譬如480px以上）的屏幕上，固定其尺寸，在一定寬度（譬如480px以下），設(shè)定其“max-width：100%；”值，從而在一定程度保證其瀏覽體驗(yàn)。
綜上所述，多屏?xí)r代已經(jīng)到來，WebUI設(shè)計(jì)必將面臨新的挑戰(zhàn)，多屏合一給頁面設(shè)計(jì)提出了很多新的要求，使用HTML5等一些列新技術(shù)和新的設(shè)計(jì)方式也必將能給PC的Web用戶和移動的Web用戶提供更好的視覺體驗(yàn)。
參考文獻(xiàn)：
[1]SteveFulton，JeffFulton.HTML5Canvas開發(fā)詳解[M].任旻，譯.北京：人民郵電出版社，2013.
[2]TimKadlec.響應(yīng)式Web設(shè)計(jì)實(shí)踐[M].侯鴻儒，譯.北京：人民郵電出版社，2013.
