首頁>>>行業(yè)應(yīng)用>>>移動　　　　　[相關(guān)廠商信息]

發(fā)表評論分享按鈕

移動應(yīng)用多屏幕開發(fā)策略：開發(fā)默認(rèn)參考設(shè)計

2012/02/01

　　身為一個移動web網(wǎng)站的設(shè)計師，除非你只是針對某種特定的設(shè)備設(shè)計，否則你應(yīng)該會常常碰到這樣的問題：如何清楚地了解網(wǎng)站運行設(shè)備的屏幕尺寸大小?這個問題一直困擾著移動設(shè)備上的設(shè)計師。

　　例如：

　　iPhone的高度是480個像素，寬320像素。

　　許多Nokia N系列設(shè)備的寬度為240像素，高度為320像素。

　　許多更新款的設(shè)備支持寬度和高度顛倒的視圖。

　　舊款的Nokia(目前仍然比較流行)設(shè)備屏幕的尺寸從176×208到352×416不等。

　　Blackberry屏幕的分辨率也是從160×160到324×352各種尺寸都有。


　　本文意在說明如何針對豐富的移動設(shè)備和屏幕尺寸，合理地設(shè)計應(yīng)用視圖。首先提出兩個小屏幕設(shè)計中的關(guān)鍵問題——屏幕和像素大小的多樣性。

　　處理多樣性

　　現(xiàn)在你可能會問自己“我的設(shè)計真的需要滿足所有這些不同的屏幕尺寸嗎?”，或者是“我是否應(yīng)該為每種不同的設(shè)備專門設(shè)計一個版本?”這完全取決于你的項目的商業(yè)要求，有的設(shè)計可能只需要滿足一種屏幕尺寸——或者說是一種設(shè)備就足夠了。但如果項目要求你的設(shè)計必須支持大多數(shù)的主流設(shè)備，那么你就必須找到一種處理多種屏幕尺寸的有效方法了。

　　不用慌張，事情沒有那么可怕。在設(shè)計移動web時，你完全可以假設(shè)頁面是可以上下滾動的——就像桌面瀏覽器中的應(yīng)用一樣。這樣就不用考慮屏幕的高度問題了，你可以將主要的精力集中在處理設(shè)備屏幕的寬度上了。幸運的是，DeviceAtlas Explorer已經(jīng)提供了大量已有設(shè)備的屏幕寬度統(tǒng)計信息了。
　　正如圖表所示，大多數(shù)的屏幕寬度主要集中在128,240和176像素這幾種類型中——而剩余的集中類型：120,130,160,208和220像素—— 和最多的三種類型值也相差不大。還有一小部分的屏幕尺寸寬度為96,101,320或是大于320像素。屏幕寬度低于128像素的設(shè)備只占了很小的比例，總共有469個設(shè)備。


　　還有一點，不到5%的設(shè)備寬度大于320個像素。但這一數(shù)字可能會在未來有所提升，目前已經(jīng)可以看到，小屏幕(128，176等)設(shè)備正逐漸被大屏幕(240+)設(shè)備所代替。下面的圖表給出了相關(guān)的分析。

　　屏幕的分辨率的確很重要，但還有一點同樣也必須考慮——屏幕的物理尺寸。

　　像素問題

　　這些年來，設(shè)計師主要是針對大型的桌面設(shè)備設(shè)計視圖。盡管顯示器的物理尺寸可能不盡相同，但屏幕的尺寸基本都為1024×768像素;常見的像素密度為85 ppi(pixels-per-inch).但是最近，顯示的視圖開始發(fā)生了一些變化：

　　Asus Eee PC 900上網(wǎng)本的分辨率為1024×600像素，像素密度約為133ppi。

　　Apple iPhone的分辨率為320×480像素，其中像素密度為160ppi。

　　Nokia的E60屏幕的分辨率為416×352，而像素密度是240ppi。

　　為了支持多種設(shè)備，像素密度的不同將帶來新的問題;像素的大小也將影響整個設(shè)計的效果。

　　下圖顯示了在像素密度為72,144和240ppi的設(shè)備上，100×100像素的圖像的顯示效果。隨著圖片越來越小，圖像的形狀和一些細節(jié)都有所變形。

　　幸運的是，追求高像素密度的風(fēng)潮似乎已經(jīng)過去了，目前超過200 ppi的設(shè)備還并不多見了。這意味著，你并不是真的需要支持上圖中列出的所有的像素密度。但是，在設(shè)計的時候，你需要記住，不能想當(dāng)然地認(rèn)為所有的設(shè)備的像素都是相等的。需要做到以下幾點：

　　確定你需要支持的像素密度的范圍。

　　在真實設(shè)備上檢測你的設(shè)計，以防某些極端的情況被你忽略了。

　　使用相對單位設(shè)計和定義布局元素，比如ems或是百分百。這將提供一個更真實的布局元素尺寸和位置信息。

　　由于制造商想要提升操作系統(tǒng)的靈活性，因此‘像素問題’將受到越來越多的關(guān)注。事實上，Google的Android系統(tǒng)已經(jīng)實現(xiàn)了一個“>potentially interesting solution”方案來解決像素的問題。Android操作系統(tǒng)采用了一個抽象的‘dp’(獨立像素密度)單位，它是基于160 ppi屏幕尺寸的。這樣一來，設(shè)計人員就能使用相對大小定義字體以及其他界面元素了，從而根據(jù)設(shè)備的真是尺寸自動調(diào)節(jié)視圖了。

　　在認(rèn)識了屏幕尺寸和像素密度的多樣性后，接下來將介紹具體的設(shè)計策略了。

　　策略1:定義設(shè)備分組

　　正如文章之前提到的，盡管目前各種移動設(shè)備成百上千，但是要處理這種多樣性并沒有想象中的可怕。事實上，完全可以將這些設(shè)備按照相近的屏幕寬度劃分為若干組，大致可以分為五組：

　　微�。� 84, 96, 101, 128, 130, 132

　　�。� 160, 176

　　中等： 208, 220, 240

　　大： 320, 360, 480+

　　臺式： 800+

　　這樣的劃分只是一個示例，你完全可以根據(jù)自己的需要重新對設(shè)備進行劃分。例如：iPhone劃分為320像素，其他常見的瀏覽器劃分為240像素，舊款設(shè)備劃分為128像素。最終，具體的劃分還是由設(shè)計目標(biāo)和項目用戶決定的。你應(yīng)該定期訪問DeviceAtlas查看設(shè)備布局情況，然后再重新評估你的分組是否合理。

　　你可能還會發(fā)現(xiàn)開發(fā)團隊會根據(jù)設(shè)備的處理能力進行分組。這種分組常常是按照分級制度區(qū)分的，每個級別會規(guī)定一些技術(shù)功能(或是限制)，滿足相應(yīng)功能的設(shè)備將被劃分到相應(yīng)的等級之中。例如，一個‘A等’設(shè)備應(yīng)該能夠支持高級的CSS標(biāo)準(zhǔn)，能夠處理DOM和JavaScript——而‘C等’的設(shè)備可能只能處理簡單的XHTML-MP和最基本的CSS。記得定期與開發(fā)人員進行交流，確保你的設(shè)計分組與技術(shù)人員的分組是吻合的。

　　策略2:開發(fā)一個默認(rèn)的參考設(shè)計

　　確定好你的設(shè)備分組(并咨詢了相應(yīng)的開發(fā)人員)以后，你接下來要做的就是選定一個參考設(shè)備。在你的設(shè)計過程中，將使用這個參考設(shè)備創(chuàng)作你的參考設(shè)計。根據(jù)你的商業(yè)需求，你可能會選擇一個中等屏幕尺寸(240 px)的設(shè)備開發(fā)你的參考設(shè)計版本。這可以簡單地適應(yīng)更小屏幕的設(shè)備，也能在更大的設(shè)備上留有更多的創(chuàng)作空間。當(dāng)然，也可以選擇多種參考設(shè)備，創(chuàng)造多個參考設(shè)計版本(通常是根據(jù)設(shè)備分組情況決定的)，這有助于你：

　　可以適應(yīng)更高級的設(shè)備并逐步提升設(shè)計方案(例如：利用GPS，感應(yīng)器或是CSS3)能夠處理各種操作模式的設(shè)備(例如：觸摸設(shè)備)，或者能夠根據(jù)設(shè)備的限制條件調(diào)整設(shè)計方案。
　　策略3:內(nèi)容和設(shè)計制定規(guī)則

　　完成了參考設(shè)計方案后，你還需要給出這個設(shè)計適應(yīng)其他屏幕尺寸的指南。類似于一個可視化設(shè)計文檔，這些指南應(yīng)該能夠指導(dǎo)開發(fā)團隊用編程的方式實現(xiàn)你的設(shè)計方案。例如：

　　網(wǎng)站的圖標(biāo)應(yīng)該能夠根據(jù)不同的設(shè)備組調(diào)整合適的大�。�

　　使用了背景圖片后，網(wǎng)站的標(biāo)題應(yīng)能能夠100%占滿屏幕的寬度。

　　默認(rèn)分組的內(nèi)容圖像不應(yīng)該超過200px(或者是設(shè)備屏幕寬度的80%)。

　　內(nèi)容圖像應(yīng)該能夠根據(jù)屏幕的寬度自動調(diào)整大小和布局。

　　當(dāng)屏幕尺寸小于默認(rèn)設(shè)備時，最好不要顯示列表圖標(biāo)，從而為有效內(nèi)容預(yù)留出更多的空間。

　　使用動態(tài)樣式表單設(shè)置設(shè)備的版式信息，并正確地緩存相關(guān)數(shù)據(jù)。

　　雖然以上的幾點并非官方的建議，但卻是是一些通用的策略，可以提升小屏幕的設(shè)計。應(yīng)該根據(jù)你的項目目標(biāo)(以及挑戰(zhàn))和特定的用戶確定你的設(shè)計方案。

　　策略4:選擇web標(biāo)準(zhǔn)和一個靈活的布局方案

　　制定了參考設(shè)計和適應(yīng)規(guī)則以后，介紹的最后一個策略就是使用XHTML和CSS構(gòu)建一個通用的標(biāo)準(zhǔn)視圖。實際上，這就是指使用標(biāo)簽和基于 HTML(比如，頭，段落，列表和分區(qū))的語言定義你的頁面結(jié)構(gòu)。最直接的好處就是——所有能夠識別HTML的瀏覽器都能夠顯示你的設(shè)計內(nèi)容，并能夠呈現(xiàn)出可視化效果(盡管只能呈現(xiàn)一些基本的效果)�？紤]到移動設(shè)備的龐大數(shù)量，這一好處是不容小視的，它使得你的設(shè)計能夠被大量的用戶訪問。通過使用瀏覽器或是設(shè)備的CSS、制圖工具以及腳本，你還能在此基礎(chǔ)上進一步針對各種不同的設(shè)備提升你的設(shè)計方案。

　　正如前文所述，你的內(nèi)容和設(shè)計的適應(yīng)性取決于你的項目需求。究竟應(yīng)該選用固定的寬度設(shè)計還是選擇靈活可變的寬度設(shè)計，這個問題一直是web設(shè)計人員爭論的焦點。而其中關(guān)鍵的一點就是如何優(yōu)化文本的顯示長度，使得瀏覽器能夠適應(yīng)整個屏幕的大小，當(dāng)窗口變大時仍然能夠適當(dāng)?shù)仫@示。

　　在移動web領(lǐng)域，這些爭論沒有那么激烈。通常單行文本的長度是非常長小的，以至于沒有足夠的空間容納多于一個的瀏覽器打開窗口。事實上，靈活可變的設(shè)計非常適合移動設(shè)備，它利用了低帶寬設(shè)計技術(shù)，并充分運用了CSS和XHTML技術(shù)優(yōu)化設(shè)計。具體包括：

　　并不規(guī)定具體的寬度，這樣使得設(shè)計能夠根據(jù)屏幕的實際尺寸靈活調(diào)整。

　　充分利用塊元素，因為它具備很好的可伸縮性。

　　使用CSS背景色以及平鋪圖像(注：編者譯，原文為tiled images)控制布局和內(nèi)容元素的風(fēng)格。

　　使用百分百比定義布局元素的大小，這樣它們就能夠根據(jù)頁面的寬度靈活地伸縮了。

　　綜合運用

　　下面給出了bbc.co.uk的一個示例，它使用了前文介紹的設(shè)計和適應(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

　　　　BBC的代碼非常簡單，它使用了XHTML標(biāo)記來定義內(nèi)容的結(jié)構(gòu)。這樣確保它的基本內(nèi)容(包括一些頭，body，圖像和一個無序的列表)能夠得到最廣泛的支持——無論是在哪種設(shè)備或是哪種瀏覽器上。然后還用到了CSS來設(shè)計內(nè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)注意到了，它的布局設(shè)計完全是靈活的。在頁面中各個部分并沒有限定寬度的大小。在下面的例子中可以看到，這樣設(shè)計的布局具有很好的靈活性，能夠適應(yīng)不同的屏幕寬度。


　　其余的風(fēng)格和內(nèi)容則是針對服務(wù)器端調(diào)整適應(yīng)各種設(shè)備。


圖：圖標(biāo)根據(jù)設(shè)備屏幕的寬度調(diào)整大小。

　　報頭使用了一個平鋪和彩色的背景。像Nokia 6680這類舊款的設(shè)備不支持渲染平鋪背景的功能，但是它能夠顯示背景的色彩。一些更簡單的設(shè)備，比如只支持WAP2.0(XHTML-MP)的設(shè)備，可能直接忽略樣式屬性，而是簡單地顯示一個圖標(biāo)而已。(還是以BBC為例，它可能導(dǎo)致在白色的背景上顯示白色的圖標(biāo);顯示的效果有時會難以辨認(rèn))。

　　BBC還可以為特定的設(shè)備(或是一組設(shè)備)重新編排一些內(nèi)容。iPhone有非常豐富的功能，因此iPhone版的BBC還有音樂下載選項，而其他的設(shè)備可能只會顯示今天最熱門的‘BBC新聞’。可以根據(jù)數(shù)據(jù)的大小，多媒體的處理能力甚至是屏幕的尺寸決定是否需要針對iPhone提供更加豐富的內(nèi)容。以Nokia 6680上的‘特色’顯示為例，它大部分的顯示內(nèi)容是讓用戶滾動屏幕查看今天最熱門新聞故事。iPhone上顯示了三個新聞故事，而其中只有一篇配有插入。這使得用戶無需滾動屏幕就可以大致了解全部的咨詢。

　　在更大一點的設(shè)備上，每個列表條目都會配有一個圖標(biāo)。但是當(dāng)屏幕尺寸較小時，可以將一些風(fēng)格元素剔除從而使得列表的顯示更加合理。

　　均衡策略

　　BBC的web網(wǎng)站是一個很好的例子，它闡述了如何使用一個簡潔的框架支持盡可能多的設(shè)備，然后再加入樣式和編輯策略從而針對不同的設(shè)備提供更加合理的用戶體驗。最終，你的設(shè)計、適應(yīng)方案和編輯選擇將取決于你的預(yù)算，用戶的預(yù)期以及移動網(wǎng)站的功能。說到底，你的設(shè)計就是在加載及時、顯示優(yōu)美和滿足用戶需求中達到一個平衡。
共 2 頁：1 2 

Web App Trend


相關(guān)閱讀:
語音操控體驗攪熱移動互聯(lián)網(wǎng) 2012-01-30
二維碼讓手機無所不能 2011-12-29
移動支付跑馬圈地 需打通“最后一公里” 2011-12-26
中國聯(lián)通研究院副院長黃文良：合作創(chuàng)新共贏未來 2011-12-21
移動支付尋找市場甜蜜點 2011-12-15

熱點專題:  移動增值
相關(guān)頻道:  增值電信文摘