身為一個(gè)移動(dòng)web網(wǎng)站的設(shè)計(jì)師，除非你只是針對(duì)某種特定的設(shè)備設(shè)計(jì)，否則你應(yīng)該會(huì)常常碰到這樣的問(wèn)題：如何清楚地了解網(wǎng)站運(yùn)行設(shè)備的屏幕尺寸大小?這個(gè)問(wèn)題一直困擾著移動(dòng)設(shè)備上的設(shè)計(jì)師。
例如：
iPhone的高度是480個(gè)像素，寬320像素。
許多Nokia N系列設(shè)備的寬度為240像素，高度為320像素。
許多更新款的設(shè)備支持寬度和高度顛倒的視圖。
舊款的Nokia(目前仍然比較流行)設(shè)備屏幕的尺寸從176×208到352×416不等。
Blackberry屏幕的分辨率也是從160×160到324×352各種尺寸都有。
處理多樣性
現(xiàn)在你可能會(huì)問(wèn)自己“我的設(shè)計(jì)真的需要滿足所有這些不同的屏幕尺寸嗎?”，或者是“我是否應(yīng)該為每種不同的設(shè)備專門(mén)設(shè)計(jì)一個(gè)版本?”這完全取決于你的項(xiàng)目的商業(yè)要求，有的設(shè)計(jì)可能只需要滿足一種屏幕尺寸——或者說(shuō)是一種設(shè)備就足夠了。但如果項(xiàng)目要求你的設(shè)計(jì)必須支持大多數(shù)的主流設(shè)備，那么你就必須找到一種處理多種屏幕尺寸的有效方法了。
不用慌張，事情沒(méi)有那么可怕。在設(shè)計(jì)移動(dòng)web時(shí)，你完全可以假設(shè)頁(yè)面是可以上下滾動(dòng)的——就像桌面瀏覽器中的應(yīng)用一樣。這樣就不用考慮屏幕的高度問(wèn)題了，你可以將主要的精力集中在處理設(shè)備屏幕的寬度上了。幸運(yùn)的是，DeviceAtlas Explorer已經(jīng)提供了大量已有設(shè)備的屏幕寬度統(tǒng)計(jì)信息了。
像素問(wèn)題
這些年來(lái)，設(shè)計(jì)師主要是針對(duì)大型的桌面設(shè)備設(shè)計(jì)視圖。盡管顯示器的物理尺寸可能不盡相同，但屏幕的尺寸基本都為1024×768像素;常見(jiàn)的像素密度為85 ppi(pixels-per-inch).但是最近，顯示的視圖開(kāi)始發(fā)生了一些變化：
Asus Eee PC 900上網(wǎng)本的分辨率為1024×600像素，像素密度約為133ppi。
Apple iPhone的分辨率為320×480像素，其中像素密度為160ppi。
Nokia的E60屏幕的分辨率為416×352，而像素密度是240ppi。
為了支持多種設(shè)備，像素密度的不同將帶來(lái)新的問(wèn)題;像素的大小也將影響整個(gè)設(shè)計(jì)的效果。
下圖顯示了在像素密度為72,144和240ppi的設(shè)備上，100×100像素的圖像的顯示效果。隨著圖片越來(lái)越小，圖像的形狀和一些細(xì)節(jié)都有所變形。
幸運(yùn)的是，追求高像素密度的風(fēng)潮似乎已經(jīng)過(guò)去了，目前超過(guò)200 ppi的設(shè)備還并不多見(jiàn)了。這意味著，你并不是真的需要支持上圖中列出的所有的像素密度。但是，在設(shè)計(jì)的時(shí)候，你需要記住，不能想當(dāng)然地認(rèn)為所有的設(shè)備的像素都是相等的。需要做到以下幾點(diǎn)：
確定你需要支持的像素密度的范圍。
在真實(shí)設(shè)備上檢測(cè)你的設(shè)計(jì)，以防某些極端的情況被你忽略了。
使用相對(duì)單位設(shè)計(jì)和定義布局元素，比如ems或是百分百。這將提供一個(gè)更真實(shí)的布局元素尺寸和位置信息。
由于制造商想要提升操作系統(tǒng)的靈活性，因此‘像素問(wèn)題’將受到越來(lái)越多的關(guān)注。事實(shí)上，Google的Android系統(tǒng)已經(jīng)實(shí)現(xiàn)了一個(gè)“>potentially interesting solution”方案來(lái)解決像素的問(wèn)題。Android操作系統(tǒng)采用了一個(gè)抽象的‘dp’(獨(dú)立像素密度)單位，它是基于160 ppi屏幕尺寸的。這樣一來(lái)，設(shè)計(jì)人員就能使用相對(duì)大小定義字體以及其他界面元素了，從而根據(jù)設(shè)備的真是尺寸自動(dòng)調(diào)節(jié)視圖了。
在認(rèn)識(shí)了屏幕尺寸和像素密度的多樣性后，接下來(lái)將介紹具體的設(shè)計(jì)策略了。
策略1:定義設(shè)備分組
正如文章之前提到的，盡管目前各種移動(dòng)設(shè)備成百上千，但是要處理這種多樣性并沒(méi)有想象中的可怕。事實(shí)上，完全可以將這些設(shè)備按照相近的屏幕寬度劃分為若干組，大致可以分為五組：
微小： 84, 96, 101, 128, 130, 132
小： 160, 176
中等： 208, 220, 240
大： 320, 360, 480+
臺(tái)式： 800+
這樣的劃分只是一個(gè)示例，你完全可以根據(jù)自己的需要重新對(duì)設(shè)備進(jìn)行劃分。例如：iPhone劃分為320像素，其他常見(jiàn)的瀏覽器劃分為240像素，舊款設(shè)備劃分為128像素。最終，具體的劃分還是由設(shè)計(jì)目標(biāo)和項(xiàng)目用戶決定的。你應(yīng)該定期訪問(wèn)DeviceAtlas查看設(shè)備布局情況，然后再重新評(píng)估你的分組是否合理。
你可能還會(huì)發(fā)現(xiàn)開(kāi)發(fā)團(tuán)隊(duì)會(huì)根據(jù)設(shè)備的處理能力進(jìn)行分組。這種分組常常是按照分級(jí)制度區(qū)分的，每個(gè)級(jí)別會(huì)規(guī)定一些技術(shù)功能(或是限制)，滿足相應(yīng)功能的設(shè)備將被劃分到相應(yīng)的等級(jí)之中。例如，一個(gè)‘A等’設(shè)備應(yīng)該能夠支持高級(jí)的CSS標(biāo)準(zhǔn)，能夠處理DOM和JavaScript——而‘C等’的設(shè)備可能只能處理簡(jiǎn)單的XHTML-MP和最基本的CSS。記得定期與開(kāi)發(fā)人員進(jìn)行交流，確保你的設(shè)計(jì)分組與技術(shù)人員的分組是吻合的。
策略2:開(kāi)發(fā)一個(gè)默認(rèn)的參考設(shè)計(jì)
確定好你的設(shè)備分組(并咨詢了相應(yīng)的開(kāi)發(fā)人員)以后，你接下來(lái)要做的就是選定一個(gè)參考設(shè)備。在你的設(shè)計(jì)過(guò)程中，將使用這個(gè)參考設(shè)備創(chuàng)作你的參考設(shè)計(jì)。根據(jù)你的商業(yè)需求，你可能會(huì)選擇一個(gè)中等屏幕尺寸(240 px)的設(shè)備開(kāi)發(fā)你的參考設(shè)計(jì)版本。這可以簡(jiǎn)單地適應(yīng)更小屏幕的設(shè)備，也能在更大的設(shè)備上留有更多的創(chuàng)作空間。當(dāng)然，也可以選擇多種參考設(shè)備，創(chuàng)造多個(gè)參考設(shè)計(jì)版本(通常是根據(jù)設(shè)備分組情況決定的)，這有助于你：
可以適應(yīng)更高級(jí)的設(shè)備并逐步提升設(shè)計(jì)方案(例如：利用GPS，感應(yīng)器或是CSS3)能夠處理各種操作模式的設(shè)備(例如：觸摸設(shè)備)，或者能夠根據(jù)設(shè)備的限制條件調(diào)整設(shè)計(jì)方案。
網(wǎng)站的圖標(biāo)應(yīng)該能夠根據(jù)不同的設(shè)備組調(diào)整合適的大小：
使用了背景圖片后，網(wǎng)站的標(biāo)題應(yīng)能能夠100%占滿屏幕的寬度。
默認(rèn)分組的內(nèi)容圖像不應(yīng)該超過(guò)200px(或者是設(shè)備屏幕寬度的80%)。
內(nèi)容圖像應(yīng)該能夠根據(jù)屏幕的寬度自動(dòng)調(diào)整大小和布局。
當(dāng)屏幕尺寸小于默認(rèn)設(shè)備時(shí)，最好不要顯示列表圖標(biāo)，從而為有效內(nèi)容預(yù)留出更多的空間。
使用動(dòng)態(tài)樣式表單設(shè)置設(shè)備的版式信息，并正確地緩存相關(guān)數(shù)據(jù)。
雖然以上的幾點(diǎn)并非官方的建議，但卻是是一些通用的策略，可以提升小屏幕的設(shè)計(jì)。應(yīng)該根據(jù)你的項(xiàng)目目標(biāo)(以及挑戰(zhàn))和特定的用戶確定你的設(shè)計(jì)方案。
策略4:選擇web標(biāo)準(zhǔn)和一個(gè)靈活的布局方案
制定了參考設(shè)計(jì)和適應(yīng)規(guī)則以后，介紹的最后一個(gè)策略就是使用XHTML和CSS構(gòu)建一個(gè)通用的標(biāo)準(zhǔn)視圖。實(shí)際上，這就是指使用標(biāo)簽和基于 HTML(比如，頭，段落，列表和分區(qū))的語(yǔ)言定義你的頁(yè)面結(jié)構(gòu)。最直接的好處就是——所有能夠識(shí)別HTML的瀏覽器都能夠顯示你的設(shè)計(jì)內(nèi)容，并能夠呈現(xiàn)出可視化效果(盡管只能呈現(xiàn)一些基本的效果)。考慮到移動(dòng)設(shè)備的龐大數(shù)量，這一好處是不容小視的，它使得你的設(shè)計(jì)能夠被大量的用戶訪問(wèn)。通過(guò)使用瀏覽器或是設(shè)備的CSS、制圖工具以及腳本，你還能在此基礎(chǔ)上進(jìn)一步針對(duì)各種不同的設(shè)備提升你的設(shè)計(jì)方案。
正如前文所述，你的內(nèi)容和設(shè)計(jì)的適應(yīng)性取決于你的項(xiàng)目需求。究竟應(yīng)該選用固定的寬度設(shè)計(jì)還是選擇靈活可變的寬度設(shè)計(jì)，這個(gè)問(wèn)題一直是web設(shè)計(jì)人員爭(zhēng)論的焦點(diǎn)。而其中關(guān)鍵的一點(diǎn)就是如何優(yōu)化文本的顯示長(zhǎng)度，使得瀏覽器能夠適應(yīng)整個(gè)屏幕的大小，當(dāng)窗口變大時(shí)仍然能夠適當(dāng)?shù)仫@示。
在移動(dòng)web領(lǐng)域，這些爭(zhēng)論沒(méi)有那么激烈。通常單行文本的長(zhǎng)度是非常長(zhǎng)小的，以至于沒(méi)有足夠的空間容納多于一個(gè)的瀏覽器打開(kāi)窗口。事實(shí)上，靈活可變的設(shè)計(jì)非常適合移動(dòng)設(shè)備，它利用了低帶寬設(shè)計(jì)技術(shù)，并充分運(yùn)用了CSS和XHTML技術(shù)優(yōu)化設(shè)計(jì)。具體包括：
并不規(guī)定具體的寬度，這樣使得設(shè)計(jì)能夠根據(jù)屏幕的實(shí)際尺寸靈活調(diào)整。
充分利用塊元素，因?yàn)樗邆浜芎玫目缮炜s性。
使用CSS背景色以及平鋪圖像(注：編者譯，原文為tiled images)控制布局和內(nèi)容元素的風(fēng)格。
使用百分百比定義布局元素的大小，這樣它們就能夠根據(jù)頁(yè)面的寬度靈活地伸縮了。
綜合運(yùn)用
下面給出了bbc.co.uk的一個(gè)示例，它使用了前文介紹的設(shè)計(jì)和適應(yīng)策略。首先看看它用到的XHTML部分。
src=”/mobile/images/hp-colours/tiles_greenblue.gif” width=”75″ height=”34″ alt=”" border=”0″ />
Featured
id=”topPromo”> src=”20081201180906.musicnews_mobile.jpg” width=”170″ height=”96″ alt=”" border=”0″ />
href=”radio/6music/podcasts/index.shtml”>Latest episode: La Roux, Kasabian and Jack Penate
href=”bbc_news/index.shtml?”>BBC News
src=”http://news.bbc.co.uk/media/images/45348000/jpg/_45348804_tank_getty226x260.jpg” width=”66″ height=”49″ alt=”" border=”0″ />
href=”http://news.bbc.co.uk/mobile/bbc_news/top_stories/781/78129/story7812979.shtml?”>Israel ‘expands’ Gaza offensive
>
> href=”http://news.bbc.co.uk/mobile/bbc_news/top_stories/781/78128/story7812860.shtml?”>European gas supplies disrupted
> href=”http://news.bbc.co.uk/mobile/bbc_news/top_stories/781/78128/story7812861.shtml?”>Warnings issued amid Arctic chill
> href=”http://news.bbc.co.uk/mobile/bbc_news/top_stories/index.shtml?”>More top stories
共 2 頁(yè)：1 2
Web App Trend
