Web與App實踐用戶體驗篇之如何針對多種屏幕尺寸設(shè)計合理的移動應(yīng)用
例如:
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像素的圖像的顯示效果。隨著圖片越來越小,圖像的形狀和一些細(xì)節(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é)視圖了。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
蘇州網(wǎng)站建設(shè)應(yīng)提前做好哪些規(guī)劃
對于白手起家的網(wǎng)站建設(shè)新人來說,剛開始什么都不懂的時候,很容易犯很多錯...
2021-12-17 -
增加導(dǎo)入鏈接友情鏈接的途徑
我們都希望網(wǎng)站建設(shè)自己的網(wǎng)站能夠被眾多的網(wǎng)站鏈接,這對提高我們網(wǎng)站建設(shè)...
2015-01-20 -
[北京網(wǎng)站制作]百度一周七天更新狀況
百度一周七天更新狀況 這里給大家說說百度的大致更新習(xí)性吧,如有不準(zhǔn)確...
2011-10-24 -
購物中心網(wǎng)站建設(shè)中完美用戶體驗的七大要素
什么是網(wǎng)站制造的完美購物體驗或用戶體驗?這里有秤嗎?現(xiàn)在做網(wǎng)站建設(shè),一...
2021-03-01 -
高端網(wǎng)站建設(shè)時應(yīng)怎樣設(shè)計頁面?
高端網(wǎng)站建設(shè)背后的秘密是尖端的頁面設(shè)計。你可能已經(jīng)有了一個難忘的域名,...
2020-11-04 -
如何檢測網(wǎng)站SEO優(yōu)化的效果
在做網(wǎng)站優(yōu)化的過程中,除了做好內(nèi)部優(yōu)化和外鏈建設(shè)之外,其實還有一項很重...
2012-07-18
預(yù)約專業(yè)咨詢顧問溝通!
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com