移動(dòng)應用多屏幕開(kāi)發(fā)策略：開(kāi)發(fā)默認參考設計
2012/02/01
身為一個(gè)移動(dòng)web網(wǎng)站的設計師，除非你只是針對某種特定的設備設計，否則你應該會(huì )常常碰到這樣的問(wèn)題：如何清楚地了解網(wǎng)站運行設備的屏幕尺寸大小?這個(gè)問(wèn)題一直困擾著(zhù)移動(dòng)設備上的設計師。
例如：
iPhone的高度是480個(gè)像素，寬320像素。
許多Nokia N系列設備的寬度為240像素，高度為320像素。
許多更新款的設備支持寬度和高度顛倒的視圖。
舊款的Nokia(目前仍然比較流行)設備屏幕的尺寸從176×208到352×416不等。
Blackberry屏幕的分辨率也是從160×160到324×352各種尺寸都有。
本文意在說(shuō)明如何針對豐富的移動(dòng)設備和屏幕尺寸，合理地設計應用視圖。首先提出兩個(gè)小屏幕設計中的關(guān)鍵問(wèn)題——屏幕和像素大小的多樣性。
處理多樣性
現在你可能會(huì )問(wèn)自己“我的設計真的需要滿(mǎn)足所有這些不同的屏幕尺寸嗎?”，或者是“我是否應該為每種不同的設備專(zhuān)門(mén)設計一個(gè)版本?”這完全取決于你的項目的商業(yè)要求，有的設計可能只需要滿(mǎn)足一種屏幕尺寸——或者說(shuō)是一種設備就足夠了。但如果項目要求你的設計必須支持大多數的主流設備，那么你就必須找到一種處理多種屏幕尺寸的有效方法了。
不用慌張，事情沒(méi)有那么可怕。在設計移動(dòng)web時(shí)，你完全可以假設頁(yè)面是可以上下滾動(dòng)的——就像桌面瀏覽器中的應用一樣。這樣就不用考慮屏幕的高度問(wèn)題了，你可以將主要的精力集中在處理設備屏幕的寬度上了。幸運的是，DeviceAtlas Explorer已經(jīng)提供了大量已有設備的屏幕寬度統計信息了。
正如圖表所示，大多數的屏幕寬度主要集中在128,240和176像素這幾種類(lèi)型中——而剩余的集中類(lèi)型：120,130,160,208和220像素—— 和最多的三種類(lèi)型值也相差不大。還有一小部分的屏幕尺寸寬度為96,101,320或是大于320像素。屏幕寬度低于128像素的設備只占了很小的比例，總共有469個(gè)設備。
還有一點(diǎn)，不到5%的設備寬度大于320個(gè)像素。但這一數字可能會(huì )在未來(lái)有所提升，目前已經(jīng)可以看到，小屏幕(128，176等)設備正逐漸被大屏幕(240+)設備所代替。下面的圖表給出了相關(guān)的分析。
屏幕的分辨率的確很重要，但還有一點(diǎn)同樣也必須考慮——屏幕的物理尺寸。
像素問(wèn)題
這些年來(lái)，設計師主要是針對大型的桌面設備設計視圖。盡管顯示器的物理尺寸可能不盡相同，但屏幕的尺寸基本都為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。
為了支持多種設備，像素密度的不同將帶來(lái)新的問(wèn)題;像素的大小也將影響整個(gè)設計的效果。
下圖顯示了在像素密度為72,144和240ppi的設備上，100×100像素的圖像的顯示效果。隨著(zhù)圖片越來(lái)越小，圖像的形狀和一些細節都有所變形。
幸運的是，追求高像素密度的風(fēng)潮似乎已經(jīng)過(guò)去了，目前超過(guò)200 ppi的設備還并不多見(jiàn)了。這意味著(zhù)，你并不是真的需要支持上圖中列出的所有的像素密度。但是，在設計的時(shí)候，你需要記住，不能想當然地認為所有的設備的像素都是相等的。需要做到以下幾點(diǎn)：
確定你需要支持的像素密度的范圍。
在真實(shí)設備上檢測你的設計，以防某些極端的情況被你忽略了。
使用相對單位設計和定義布局元素，比如ems或是百分百。這將提供一個(gè)更真實(shí)的布局元素尺寸和位置信息。
由于制造商想要提升操作系統的靈活性，因此‘像素問(wèn)題’將受到越來(lái)越多的關(guān)注。事實(shí)上，Google的Android系統已經(jīng)實(shí)現了一個(gè)“>potentially interesting solution”方案來(lái)解決像素的問(wèn)題。Android操作系統采用了一個(gè)抽象的‘dp’(獨立像素密度)單位，它是基于160 ppi屏幕尺寸的。這樣一來(lái)，設計人員就能使用相對大小定義字體以及其他界面元素了，從而根據設備的真是尺寸自動(dòng)調節視圖了。
在認識了屏幕尺寸和像素密度的多樣性后，接下來(lái)將介紹具體的設計策略了。
策略1:定義設備分組
正如文章之前提到的，盡管目前各種移動(dòng)設備成百上千，但是要處理這種多樣性并沒(méi)有想象中的可怕。事實(shí)上，完全可以將這些設備按照相近的屏幕寬度劃分為若干組，大致可以分為五組：
微小： 84, 96, 101, 128, 130, 132
小： 160, 176
中等： 208, 220, 240
大： 320, 360, 480+
臺式： 800+
這樣的劃分只是一個(gè)示例，你完全可以根據自己的需要重新對設備進(jìn)行劃分。例如：iPhone劃分為320像素，其他常見(jiàn)的瀏覽器劃分為240像素，舊款設備劃分為128像素。最終，具體的劃分還是由設計目標和項目用戶(hù)決定的。你應該定期訪(fǎng)問(wèn)DeviceAtlas查看設備布局情況，然后再重新評估你的分組是否合理。
你可能還會(huì )發(fā)現開(kāi)發(fā)團隊會(huì )根據設備的處理能力進(jìn)行分組。這種分組常常是按照分級制度區分的，每個(gè)級別會(huì )規定一些技術(shù)功能(或是限制)，滿(mǎn)足相應功能的設備將被劃分到相應的等級之中。例如，一個(gè)‘A等’設備應該能夠支持高級的CSS標準，能夠處理DOM和JavaScript——而‘C等’的設備可能只能處理簡(jiǎn)單的XHTML-MP和最基本的CSS。記得定期與開(kāi)發(fā)人員進(jìn)行交流，確保你的設計分組與技術(shù)人員的分組是吻合的。
策略2:開(kāi)發(fā)一個(gè)默認的參考設計
確定好你的設備分組(并咨詢(xún)了相應的開(kāi)發(fā)人員)以后，你接下來(lái)要做的就是選定一個(gè)參考設備。在你的設計過(guò)程中，將使用這個(gè)參考設備創(chuàng )作你的參考設計。根據你的商業(yè)需求，你可能會(huì )選擇一個(gè)中等屏幕尺寸(240 px)的設備開(kāi)發(fā)你的參考設計版本。這可以簡(jiǎn)單地適應更小屏幕的設備，也能在更大的設備上留有更多的創(chuàng )作空間。當然，也可以選擇多種參考設備，創(chuàng )造多個(gè)參考設計版本(通常是根據設備分組情況決定的)，這有助于你：
可以適應更高級的設備并逐步提升設計方案(例如：利用GPS，感應器或是CSS3)能夠處理各種操作模式的設備(例如：觸摸設備)，或者能夠根據設備的限制條件調整設計方案。
策略3:內容和設計制定規則
完成了參考設計方案后，你還需要給出這個(gè)設計適應其他屏幕尺寸的指南。類(lèi)似于一個(gè)可視化設計文檔，這些指南應該能夠指導開(kāi)發(fā)團隊用編程的方式實(shí)現你的設計方案。例如：
網(wǎng)站的圖標應該能夠根據不同的設備組調整合適的大小：
使用了背景圖片后，網(wǎng)站的標題應能能夠100%占滿(mǎn)屏幕的寬度。
默認分組的內容圖像不應該超過(guò)200px(或者是設備屏幕寬度的80%)。
內容圖像應該能夠根據屏幕的寬度自動(dòng)調整大小和布局。
當屏幕尺寸小于默認設備時(shí)，最好不要顯示列表圖標，從而為有效內容預留出更多的空間。
使用動(dòng)態(tài)樣式表單設置設備的版式信息，并正確地緩存相關(guān)數據。
雖然以上的幾點(diǎn)并非官方的建議，但卻是是一些通用的策略，可以提升小屏幕的設計。應該根據你的項目目標(以及挑戰)和特定的用戶(hù)確定你的設計方案。
策略4:選擇web標準和一個(gè)靈活的布局方案
制定了參考設計和適應規則以后，介紹的最后一個(gè)策略就是使用XHTML和CSS構建一個(gè)通用的標準視圖。實(shí)際上，這就是指使用標簽和基于 HTML(比如，頭，段落，列表和分區)的語(yǔ)言定義你的頁(yè)面結構。最直接的好處就是——所有能夠識別HTML的瀏覽器都能夠顯示你的設計內容，并能夠呈現出可視化效果(盡管只能呈現一些基本的效果)。考慮到移動(dòng)設備的龐大數量，這一好處是不容小視的，它使得你的設計能夠被大量的用戶(hù)訪(fǎng)問(wèn)。通過(guò)使用瀏覽器或是設備的CSS、制圖工具以及腳本，你還能在此基礎上進(jìn)一步針對各種不同的設備提升你的設計方案。
正如前文所述，你的內容和設計的適應性取決于你的項目需求。究竟應該選用固定的寬度設計還是選擇靈活可變的寬度設計，這個(gè)問(wèn)題一直是web設計人員爭論的焦點(diǎn)。而其中關(guān)鍵的一點(diǎn)就是如何優(yōu)化文本的顯示長(cháng)度，使得瀏覽器能夠適應整個(gè)屏幕的大小，當窗口變大時(shí)仍然能夠適當地顯示。
在移動(dòng)web領(lǐng)域，這些爭論沒(méi)有那么激烈。通常單行文本的長(cháng)度是非常長(cháng)小的，以至于沒(méi)有足夠的空間容納多于一個(gè)的瀏覽器打開(kāi)窗口。事實(shí)上，靈活可變的設計非常適合移動(dòng)設備，它利用了低帶寬設計技術(shù)，并充分運用了CSS和XHTML技術(shù)優(yōu)化設計。具體包括：
并不規定具體的寬度，這樣使得設計能夠根據屏幕的實(shí)際尺寸靈活調整。
充分利用塊元素，因為它具備很好的可伸縮性。
使用CSS背景色以及平鋪圖像(注：編者譯，原文為tiled images)控制布局和內容元素的風(fēng)格。
使用百分百比定義布局元素的大小，這樣它們就能夠根據頁(yè)面的寬度靈活地伸縮了。
綜合運用
下面給出了bbc.co.uk的一個(gè)示例，它使用了前文介紹的設計和適應策略。首先看看它用到的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
BBC的代碼非常簡(jiǎn)單，它使用了XHTML標記來(lái)定義內容的結構。這樣確保它的基本內容(包括一些頭，body，圖像和一個(gè)無(wú)序的列表)能夠得到最廣泛的支持——無(wú)論是在哪種設備或是哪種瀏覽器上。然后還用到了CSS來(lái)設計內容的風(fēng)格。
h1 {
padding: 3px;
background: url(/mobile/images/hp-colours/banner-bak_greenblue.gif);
background-repeat: repeat-x;
background-color: #00594d;
color: white; font-weight: bold;
font-size: small;
}
h2 {
color: #027063;
font-weight: normal;
font-size: medium;
padding: 2px;
background: url(/mobile/images/newimgs/h2-bak.gif);
background-repeat: repeat-x;
background-color: #ecedee;
border-bottom: 1px solid #c1c0c0;
}
h2 a:link, h2 a:visited {color: #027063;
font-weight: bold;
text-decoration: none;
}
h2 a:hover, h2 a:active {
color: #333333;
text-decoration: underline;
}
<;/pre>;
<;pre id=”line”>;/* New promos */
#topPromo {
background-color: #000000;
}
#topPromo p {
color: white;
font-size: small;
border-top: 1px solid #757474;
padding: 2px;
}
#topPromo a:link, #topPromo a:visited {
color: white;
font-size: small;
display: block;
text-decoration: none;
}
#topPromo a:hover, #topPromo a:active {
color: #8ad3ca;
font-size: small;
display: block;
text-decoration: underline;
}
.linkList ul {
border-bottom: 1px solid #c1c0c0;
}
.linkList li {
padding: 2px;
padding-left: 19px;
margin: 2px;
}
.listTxt {
background: url(/mobile/images/newimgs/ico_txt_on-fff.gif);
background-repeat: no-repeat;
background-position: top left;
}
你可能已經(jīng)注意到了，它的布局設計完全是靈活的。在頁(yè)面中各個(gè)部分并沒(méi)有限定寬度的大小。在下面的例子中可以看到，這樣設計的布局具有很好的靈活性，能夠適應不同的屏幕寬度。
其余的風(fēng)格和內容則是針對服務(wù)器端調整適應各種設備。
圖：圖標根據設備屏幕的寬度調整大小。
報頭使用了一個(gè)平鋪和彩色的背景。像Nokia 6680這類(lèi)舊款的設備不支持渲染平鋪背景的功能，但是它能夠顯示背景的色彩。一些更簡(jiǎn)單的設備，比如只支持WAP2.0(XHTML-MP)的設備，可能直接忽略樣式屬性，而是簡(jiǎn)單地顯示一個(gè)圖標而已。(還是以BBC為例，它可能導致在白色的背景上顯示白色的圖標;顯示的效果有時(shí)會(huì )難以辨認)。
BBC還可以為特定的設備(或是一組設備)重新編排一些內容。iPhone有非常豐富的功能，因此iPhone版的BBC還有音樂(lè )下載選項，而其他的設備可能只會(huì )顯示今天最熱門(mén)的‘BBC新聞’。可以根據數據的大小，多媒體的處理能力甚至是屏幕的尺寸決定是否需要針對iPhone提供更加豐富的內容。以Nokia 6680上的‘特色’顯示為例，它大部分的顯示內容是讓用戶(hù)滾動(dòng)屏幕查看今天最熱門(mén)新聞故事。iPhone上顯示了三個(gè)新聞故事，而其中只有一篇配有插入。這使得用戶(hù)無(wú)需滾動(dòng)屏幕就可以大致了解全部的咨詢(xún)。
在更大一點(diǎn)的設備上，每個(gè)列表條目都會(huì )配有一個(gè)圖標。但是當屏幕尺寸較小時(shí)，可以將一些風(fēng)格元素剔除從而使得列表的顯示更加合理。
均衡策略
BBC的web網(wǎng)站是一個(gè)很好的例子，它闡述了如何使用一個(gè)簡(jiǎn)潔的框架支持盡可能多的設備，然后再加入樣式和編輯策略從而針對不同的設備提供更加合理的用戶(hù)體驗。最終，你的設計、適應方案和編輯選擇將取決于你的預算，用戶(hù)的預期以及移動(dòng)網(wǎng)站的功能。說(shuō)到底，你的設計就是在加載及時(shí)、顯示優(yōu)美和滿(mǎn)足用戶(hù)需求中達到一個(gè)平衡。
Web App Trend
相關(guān)閱讀:
亚洲精品网站在线观看不卡无广告,国产a不卡片精品免费观看,欧美亚洲一区二区三区在线,国产一区二区三区日韩
武夷山市|
吴江市|
治县。|
青铜峡市|
江安县|
睢宁县|
高碑店市|
锦屏县|
南和县|
昌黎县|
临海市|
淳安县|
临高县|
武陟县|
马鞍山市|
海淀区|
小金县|
沾化县|
大同市|
比如县|
石首市|
新建县|
息烽县|
开化县|
普格县|
湖口县|
柳州市|
五台县|
夏津县|
中牟县|
长海县|
台北县|
宁南县|
临泉县|
保山市|
鄂托克旗|
德格县|
蛟河市|
博罗县|
鄂尔多斯市|
新营市|
http://444
http://444
http://444
http://444
http://444
http://444