移動端網(wǎng)頁設(shè)計尺寸標準

一、概述與現(xiàn)象

涉移動端設(shè)計和開發(fā)的同學們，時常會被各種各樣的屏幕尺寸和分辨率困擾。移動設(shè)備的屏幕尺寸繁多，碎片化現(xiàn)象嚴重，如何確保設(shè)計在各種屏幕上都能正常顯示，是設(shè)計師們必須面對的挑戰(zhàn)。

二、像素密度：連接數(shù)字世界與物理世界的橋梁

手機屏幕是由許多像素點組成的，這些點的顏色組合構(gòu)成了我們所看到的畫面。像素密度（PPI）是連接數(shù)字世界與物理世界的橋梁，每英寸的長度上排列的像素點數(shù)量越高，屏幕的顯示效果就越精細。以iPhone的Retina屏為例，其比普通屏清晰很多，就是因為像素密度翻了一倍。

三、倍率與邏輯像素：移動端設(shè)計的關(guān)鍵概念

在移動端設(shè)計中，倍率和邏輯像素是兩個關(guān)鍵概念。以iPhone 3gs和4s為例，雖然屏幕像素不同，但通過倍率調(diào)整，兩者在顯示效果上可以達到一致。iOS和Android系統(tǒng)都會根據(jù)設(shè)備的像素密度自動調(diào)整顯示效果，確保在不同設(shè)備上都有良好的用戶體驗。

四、移動設(shè)備尺寸與設(shè)計的關(guān)聯(lián)性

移動設(shè)備的設(shè)計需要考慮邏輯像素尺寸。對于iOS系統(tǒng)，開發(fā)者通常以普通屏為基準，為Retina屏定義2倍的倍率。對于Android系統(tǒng)，由于設(shè)備種類繁多，分辨率跨度大，因此需要劃分不同的像素密度范圍，并為不同范圍的設(shè)備定義不同的倍率。這樣設(shè)計出的應(yīng)用或網(wǎng)頁在各種設(shè)備上都能有良好的顯示效果。

五、總結(jié)與展望

移動端設(shè)計需要適應(yīng)各種屏幕尺寸和分辨率的挑戰(zhàn)。通過理解像素密度、倍率和邏輯像素等概念，設(shè)計師可以更好地把握移動端設(shè)計的核心原則。隨著技術(shù)的發(fā)展和市場的變化，移動端設(shè)計的趨勢也在不斷變化。未來，設(shè)計師需要不斷學習和探索新的設(shè)計理念和技術(shù)手段，以適應(yīng)不斷變化的市場需求和技術(shù)環(huán)境。

一、Android屏幕倍率概述

在Android系統(tǒng)中，為了適配不同分辨率的屏幕，將屏幕分為不同的密度等級，每個等級對應(yīng)一個特定的倍率。這些倍率包括：ldpi（0.75倍）、mdpi（1倍）、hdpi（1.5倍）、xhdpi（2倍）、hdpi（3倍）以及xhdpi（4倍）。這些倍率的存在，使得開發(fā)者可以根據(jù)屏幕密度優(yōu)化應(yīng)用，提供更好的用戶體驗。

二、Android設(shè)備分辨率現(xiàn)狀

根據(jù)友盟2014年10月到2015年03月的數(shù)據(jù)，我們可以了解到當前市場各種手機的分辨率分布情況。如今，ldpi設(shè)備已近乎絕跡。mdpi設(shè)備市場份額不足5%，且多為屏幕較小的老舊設(shè)備。hdpi設(shè)備多為早年的低端機型，屏幕大小在3.5英寸至5.0英寸之間。xhdpi設(shè)備則常見于中端機型，屏幕多在5.0至5.5英寸之間。hdpi和xhdpi設(shè)備則分別代表了當前中高端和高端市場，屏幕通常都在5.0英寸以上。

三、邏輯像素尺寸與顯示效果

盡管存在倍率差異，但Android設(shè)備的顯示效果并不完全一致。這是因為設(shè)備的邏輯像素尺寸不同。以mdpi的1倍作為基準，其他倍率的設(shè)備通過相應(yīng)的乘法計算，可以得到與基準倍率近似的顯示效果。邏輯像素尺寸并不統(tǒng)一，例如480x800和1080x1920兩種常見屏幕，即使倍率不同，其邏輯像素尺寸也不同，導致實際顯示效果有所差異。

四、單位與換算關(guān)系

為了統(tǒng)一度量界面設(shè)計，iOS和Android平臺都定義了邏輯像素單位。iOS使用pt（點）作為尺寸單位，而Android則使用dp（密度獨立像素）。實際上，兩者是等價的。不同倍率下，單位之間的換算關(guān)系如下：1倍時，1pt=1dp=1px（適用于mdpi設(shè)備和iPhone 3gs）；隨著倍率的增加，單位之間的換算關(guān)系也相應(yīng)變化。在設(shè)計過程中，應(yīng)盡量使用邏輯像素尺寸來思考界面，以確保界面在不同設(shè)備上的一致性和適應(yīng)性。

五、設(shè)計與開發(fā)的思考方式

在設(shè)計Android應(yīng)用時，設(shè)計師可能會選擇不同的畫布尺寸，如1080x1920或720x1280。這導致界面元素的尺寸不統(tǒng)一，給開發(fā)者帶來困擾。了解并遵循Android的最小點擊區(qū)域尺寸是非常重要的。例如，Android的最小點擊區(qū)域尺寸是48x48dp，這意味著在xhdpi的設(shè)備上，按鈕的尺寸至少是96x96px。正確的思考方式是以邏輯像素尺寸為基礎(chǔ)進行設(shè)計，以確保應(yīng)用能在各種設(shè)備上流暢運行并呈現(xiàn)良好的用戶體驗。界面設(shè)計邏輯像素與設(shè)備像素密度的理解

章節(jié)一：邏輯像素與設(shè)備像素的基本概念

一、邏輯像素與設(shè)備像素的界定

在探討界面設(shè)計與開發(fā)的過程中，我們經(jīng)常會遇到邏輯像素和設(shè)備像素這兩個概念。邏輯像素是軟件界面設(shè)計的基準單位，它不受具體設(shè)備像素密度的影響。而設(shè)備像素，則是硬件設(shè)備的物理像素點，其密度受到設(shè)備性能的限制。理解這兩者之間的關(guān)系，對于設(shè)計師和開發(fā)者的溝通至關(guān)重要。

章節(jié)二：Web界面的設(shè)備像素考慮

二、Web界面的挑戰(zhàn)與應(yīng)對

雖然Web界面的絕對單位仍然是px，但前端技術(shù)可以充分利用設(shè)備的像素密度。瀏覽器會根據(jù)設(shè)備的像素密度，以相應(yīng)的倍率來渲染頁面。以iPhone 5s為例，其屏幕倍率為2，設(shè)計師在制做頁面時，只需按照基準倍率進行設(shè)計，無需考慮具體的設(shè)備像素密度。但在準備資源圖時，需準備相應(yīng)倍率的圖，以確保顯示清晰。

章節(jié)三：實際應(yīng)用的界面設(shè)計策略

三、實際應(yīng)用中的畫布設(shè)置策略

在實際應(yīng)用中，設(shè)計師如何設(shè)置畫布以應(yīng)對不同平臺的像素密度挑戰(zhàn)呢？對于iOS、Android和Web三個平臺，設(shè)計師應(yīng)以邏輯像素為單位進行思考。在PS中，可以將單位設(shè)置為點(Point)，并通過調(diào)節(jié)DPI來控制倍率。DPI即像素密度，對于屏幕設(shè)計，DPI設(shè)成72即可保證屏幕顯示的尺寸與打印尺寸一致。

章節(jié)四：不同平臺的畫布設(shè)置詳解

四、針對各平臺的畫布設(shè)置指南

針對iPhone、Android和Web平臺，設(shè)計師如何具體設(shè)置畫布呢？以iPhone為例，不同型號的屏幕尺寸各異，設(shè)計師應(yīng)選擇邏輯像素尺寸作為設(shè)計依據(jù)。目前市場上最多的是iPhone 5/5s，倍率為2，邏輯像素尺寸為320x568。隨著iPhone 6的流行，其375x667的邏輯像素尺寸也逐漸成為主流設(shè)計參考。

章節(jié)五：總結(jié)與展望

五、總結(jié)與設(shè)計趨勢展望

在設(shè)計過程中，無論畫布大小如何變化，我們始終設(shè)計的是基準倍率的界面樣式。為了確保準確高效的溝通，設(shè)計師和開發(fā)者應(yīng)共同以邏輯像素尺寸來描述和理解界面。隨著技術(shù)的發(fā)展，未來的設(shè)計趨勢將更加注重設(shè)備的像素密度利用，為開發(fā)者提供更加清晰、流暢的界面體驗。一、移動端尺寸規(guī)范詳解

切圖與iPhone 6 plus的特殊性

在移動端設(shè)計和開發(fā)中，切圖是一個至關(guān)重要的環(huán)節(jié)。當涉及到iPhone 6 plus時，由于其采用的是3倍圖，這需要我們特別注意。位圖的清晰度是保證用戶界面體驗的關(guān)鍵。在切圖過程中，要確保位圖清晰，因為iPhone 6 plus的3倍圖是由2倍圖放大而來的。對于設(shè)計師來說，對細節(jié)的追求和對清晰度的把控顯得尤為重要。

Android的尺寸規(guī)范

盡管Android系統(tǒng)的碎片化現(xiàn)象一度讓人頭疼，但現(xiàn)在的情況反而比iOS更容易處理。原因在于，如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一。以常見的360x640邏輯像素為例，開發(fā)者可以根據(jù)需求設(shè)定DPI值。如果想以xhdpi為標準，DPI設(shè)為72x2=144；想以hdpi為標準，DPI設(shè)為72x3=216。這樣，不同設(shè)備的顯示效果就能保持一致性。對于較老的低端機型，由于寬度僅為480px，顯示內(nèi)容相對較少，因此設(shè)計時需要特別注意內(nèi)容的布局和呈現(xiàn)方式。這類機型很快將被市場邊緣化，因此在設(shè)計時可以不必過多考慮。

Web端的尺寸規(guī)范

手機端網(wǎng)頁的尺寸規(guī)范并沒有統(tǒng)一標準。一種流行的做法是按照iPhone 5的尺寸來設(shè)計，倍率為2，邏輯像素為320x568。這樣的設(shè)計能夠兼顧iOS和Android的主流設(shè)備，頁面加載速度較快。但如果追求圖片質(zhì)量，愿意犧牲加載速度，可以按照最大的屏幕即iPhone 6 plus的尺寸來設(shè)計，倍率為3，邏輯像素為414x736。

總結(jié)

移動端的設(shè)計確實比PC端復雜，關(guān)鍵就在于倍率的存在。但也正因為倍率的存在，大大小小的屏幕都能被拉回到同一水平線，使得一套設(shè)計能夠適應(yīng)各種屏幕。從這條水平線的角度看，移動端的尺寸問題其實并不難理解。

二、新人必看！移動端尺寸基礎(chǔ)知識

對于剛剛涉足移動端設(shè)計和開發(fā)的新人來說，尺寸問題往往是一個糾結(jié)的起點。今天分享的這篇教程旨在從理論角度介紹移動端設(shè)計的尺寸規(guī)范，讓初學者能夠通俗易懂地掌握相關(guān)知識。

現(xiàn)象與問題分析

我們要了解的現(xiàn)象是，移動端設(shè)備的屏幕尺寸五花八門，碎片化嚴重。尤其是Android系統(tǒng)，各種分辨率讓人眼花繚亂。不要被這些復雜的尺寸嚇倒，實際上大部分的app和移動端網(wǎng)頁都能在各種尺寸的屏幕上正常顯示。這背后的規(guī)律就是像素密度。

像素密度解析

屏幕是由像素點組成的，每個像素點發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。手機屏幕的物理尺寸和像素尺寸并不成比例。例如，iPhone 3gs和iPhone 4s的像素密度雖然不同，但它們的物理尺寸是一樣的。我們引入了像素密度的概念，也就是PPI（pixels per inch），它連接了數(shù)字世界和物理世界。

通過理解像素密度的概念，我們可以更好地理解移動端的尺寸規(guī)范。在設(shè)計和開發(fā)過程中，只要掌握了正確的尺寸規(guī)范和方法論，就能輕松應(yīng)對各種屏幕尺寸的挑戰(zhàn)。對于初學者來說，不要害怕尺寸的復雜性，掌握核心概念和規(guī)律后，你會發(fā)現(xiàn)一切都有章可循。像素密度與顯示效果：深入理解Retina與Android的屏幕技術(shù)

一、像素與像素密度

像素，作為屏幕顯示的基本單位，其排列密度決定了畫面的精細程度。每英寸長度上的像素點數(shù)，即為像素密度。談到像素密度，我們不得不提Retina屏，其通過將普通屏的像素密度翻倍，帶來了畫面的質(zhì)的飛躍。那么，究竟什么是像素密度？它是如何影響我們的視覺體驗的呢？讓我們一起來探討。

二、倍率與邏輯像素

以iPhone 3gs和4s為例，兩款手機的大小是一樣的，但在顯示同一封郵件列表時，4s可以顯示更多的內(nèi)容。這是因為在Retina屏幕上，每個像素被賦予了更高的密度。這種密度的提升使得屏幕能夠顯示更多的內(nèi)容而不失真。那么，這種顯示效果是如何實現(xiàn)的呢？關(guān)鍵在于倍率與邏輯像素的運用。倍率是指屏幕的實際像素與邏輯像素的比值。在Retina屏幕上，這個比值通常為兩倍（iPhone 6plus除外）。這意味著，當我們設(shè)計一款應(yīng)用時，我們只需要考慮邏輯像素的尺寸即可。至于實際像素的尺寸，系統(tǒng)會根據(jù)倍率自動調(diào)整。無論是普通屏還是Retina屏，只要邏輯像素尺寸相同，它們的顯示效果就會一致。這種技術(shù)同樣被Android系統(tǒng)采用。不過由于Android設(shè)備的屏幕尺寸和分辨率差異較大，因此Android系統(tǒng)采用了更為復雜的倍率劃分方法。它根據(jù)設(shè)備的像素密度劃分出不同的范圍區(qū)間，并為不同范圍的設(shè)備定義不同的倍率來保證相似的顯示效果。這樣的處理方式讓Android設(shè)備的顯示效果在一定程度上接近一致。這并不意味著所有Android設(shè)備的顯示效果都是完全一致的。因為除了倍率之外，設(shè)備的邏輯像素尺寸也會有所不同。比如同樣是hdpi的屏幕，由于其實際像素的差異導致了邏輯像素的差異。這意味著即使倍率相同，不同設(shè)備的顯示效果也會有所不同。因此在實際開發(fā)中我們需要考慮到這些因素以確保最佳的顯示效果。綜上所述我們不難發(fā)現(xiàn)真正決定顯示效果的其實是邏輯像素尺寸。三、結(jié)論與展望

隨著科技的不斷發(fā)展我們期待的未來可能是所有設(shè)備都擁有相同的邏輯像素尺寸不論其實際像素密度如何變化我們都可以得到一致的用戶體驗這一目標的實現(xiàn)還需要我們繼續(xù)深入研究和探索同時也需要設(shè)備的制造商和軟件開發(fā)者共同努力協(xié)作以實現(xiàn)這個目標而這一切都離不開對邏輯像素尺寸的深入理解和把握讓我們一起期待這個美好的未來吧！ iOS和Android平臺的邏輯像素單位解析

一、邏輯像素單位的引入

iOS和Android平臺，為了應(yīng)對不同設(shè)備的屏幕像素密度差異，都定義了各自的邏輯像素單位。iOS采用pt（點）作為尺寸單位，而Android則使用dp（密度獨立像素）。從本質(zhì)上講，兩者表達的是同一概念——邏輯像素。

二、單位換算與倍率關(guān)系

1. 1倍: 1pt=1dp=1px（適用于mdpi、iPhone 3gs）。

2. 1.5倍: 1pt=1dp=1.5px（hdpi）。

3. 2倍: 1pt=1dp=2px（適用于xhdpi、iPhone 4s/5/6）。

4. 3倍: 1pt=1dp=3px（hdpi、iPhone 6）。

5. 4倍: 1pt=1dp=4px（xhdpi）。

在設(shè)計與開發(fā)過程中，應(yīng)優(yōu)先使用邏輯像素尺寸來思考界面。例如，Android應(yīng)用中，畫布設(shè)置不同的尺寸時，界面元素尺寸需統(tǒng)一采用邏輯像素單位。Android的最小點擊區(qū)域尺寸是48x48dp，在xhdpi設(shè)備上，這意味著按鈕尺寸至少為96x96px。

三、Web端的適配策略

雖然Web開發(fā)仍主要使用px（像素）作為絕對單位，但前端技術(shù)可以充分利用設(shè)備的像素密度。通過一行代碼，瀏覽器便能以app的顯示方式渲染頁面，根據(jù)像素密度進行相應(yīng)倍率的縮放。設(shè)計師在進行頁面設(shè)計時，只需按照基準倍率進行即可。而在準備資源圖時，需準備適應(yīng)高倍率顯示的圖像，通過代碼進行縮放以保證清晰度。

四、實際應(yīng)用中的設(shè)計策略

對于設(shè)計師而言，建議以邏輯像素尺寸來思考界面設(shè)計。在Photoshop中，可以將尺寸和文字單位設(shè)置為點（Point），無論設(shè)計iOS、Android還是Web應(yīng)用，都使用這一單位。通過調(diào)節(jié)DPI（像素密度）來控制倍率。對于屏幕設(shè)計，DPI設(shè)成72是為了保證屏幕顯示的尺寸與打印尺寸一致。在實際應(yīng)用中，設(shè)計師可以通過調(diào)節(jié)DPI來適應(yīng)不同倍率的屏幕。

為什么印刷品設(shè)計DPI要設(shè)成300？這是因為人眼的分辨能力有限，DPI達到300以上可以保證畫質(zhì)的細膩程度，給人真實感。而屏幕設(shè)計的DPI設(shè)成72，則是為了匹配屏幕的實際分辨率。了解這些背后的原理，有助于設(shè)計師更好地進行跨平臺設(shè)計。移動UI設(shè)計尺寸規(guī)范概覽

一、引言

隨著移動設(shè)備的普及，UI設(shè)計已成為數(shù)字化時代不可或缺的一環(huán)。本文將重點探討UI設(shè)計在不同平臺上的尺寸規(guī)范，幫助剛?cè)胄械脑O(shè)計師解決關(guān)于尺寸選擇的困惑。

二、移動設(shè)備端的UI設(shè)計尺寸規(guī)范

iPhone：

邏輯像素尺寸是iPhone設(shè)計中不可忽視的重要因素。由于iPhone的屏幕尺寸各異，設(shè)計師常面臨諸多挑戰(zhàn)。目前，iPhone 5/5s的邏輯像素尺寸（倍率為2，320×568）是最受歡迎的，而iPhone 6的邏輯像素尺寸（倍率為2，375×667）正逐漸嶄露頭角。在設(shè)計時，兼顧這兩種尺寸能覆蓋大部分用戶。但需注意，iPhone 6 plus的3倍圖是由2倍圖放大而來，位圖需保證清晰。

Android：

盡管Android設(shè)備碎片化嚴重，但現(xiàn)在其邏輯像素尺寸正趨于統(tǒng)一。設(shè)計師可按照xhdpi（DPI設(shè)為72×2=144）或hdpi（DPI設(shè)為72×3=216）進行設(shè)計。針對較老的低端機，雖寬度為480px，但其在界面中的顯示內(nèi)容相對較少。未來，這些機型將被逐漸淘汰。

Web：

手機端網(wǎng)頁設(shè)計的尺寸規(guī)范較為靈活。一種流行做法是按照iPhone 5的尺寸設(shè)計（倍率2，邏輯像素320×568），這樣既能保證頁面加載速度，又能兼顧多數(shù)設(shè)備。若追求圖片質(zhì)量，愿意犧牲加載速度，也可按照最大的屏幕如iPhone 6 plus的尺寸進行設(shè)計（倍率3，邏輯像素414×736）。

三、PC端UI設(shè)計尺寸規(guī)范概覽

對于剛?cè)胄械腢I設(shè)計師而言，PC端的設(shè)計尺寸相對簡單。但移動設(shè)備屏幕尺寸的碎片化現(xiàn)象在PC端也有所體現(xiàn)。設(shè)計師需關(guān)注不同設(shè)備的像素密度和物理尺寸。不要被多樣的尺寸嚇倒，實際上大部分appUI設(shè)計和移動端網(wǎng)頁在各種尺寸的屏幕上都能正常顯示。這是因為屏幕由像素點組成，每個像素點發(fā)出不同顏色的光構(gòu)成我們所看到的畫面。了解像素密度和邏輯像素尺寸是設(shè)計的基礎(chǔ)。

四、總結(jié)

移動端設(shè)計較PC端更為復雜，關(guān)鍵在于倍率的存在。倍率將不同大小的屏幕拉回到同一水平線，使得一套設(shè)計能適應(yīng)各種屏幕。理解并遵循這些尺寸規(guī)范，設(shè)計師便能輕松應(yīng)對各種挑戰(zhàn)，創(chuàng)造出適應(yīng)不同平臺用戶的設(shè)計作品。UI設(shè)計不僅僅是技術(shù)的展現(xiàn)，更是用戶體驗的保障。只有深入了解并適應(yīng)各種設(shè)備的尺寸特點，才能為用戶提供流暢、舒適的體驗。關(guān)于手機屏幕像素與Retina屏幕的解析

一、像素與像素密度的引入

讓我們從iPhone 3GS和iPhone 4S的屏幕像素說起。3GS的屏幕像素為320×480，而4S的屏幕像素躍升至640×960，恰好是前者的兩倍。盡管兩款手機的尺寸都是3.5英寸，但如何描述這種差異呢？這里，我們需要引入一個重要的概念——像素密度，也就是PPI（Pixels Per Inch）。

PPI作為連接數(shù)字世界與物理世界的橋梁，衡量的是每英寸長度上排列的像素點數(shù)量。以食指最末端那根指節(jié)的長度約為1英寸，大約等于2.54厘米。屏幕的像素密度越高，顯示效果的精細度就越高。例如，Retina屏幕之所以比普通屏幕清晰很多，就在于其像素密度的翻倍。

二、倍率與邏輯像素

再回到我們的例子，iPhone 3GS和4S。假設(shè)有一個郵件列表界面，如果我們按照PC端網(wǎng)頁設(shè)計的思維來想象，可能會認為在更高像素的屏幕上能顯示更多內(nèi)容。但實際上，由于Retina屏幕的特殊性，顯示效果并不如此。Retina屏幕能夠?qū)?×2個像素當作一個像素使用，使得界面元素都變成兩倍大小，反而與低像素屏幕效果一致，但畫質(zhì)更加清晰。

三、iOS與Android的處理方式

在iOS系統(tǒng)中，應(yīng)用資源圖片通常分為普通屏和Retina屏兩種尺寸。其中帶有@2x字樣的圖片用于Retina屏幕。只要圖片準備妥當，系統(tǒng)就會自動判斷使用哪張圖片。而在Android系統(tǒng)中，處理方式類似但更為復雜。由于Android屏幕尺寸眾多，分辨率跨度大，因此需要劃分像素密度區(qū)間，并為不同區(qū)間的設(shè)備定義不同的倍率，以確保相近的顯示效果。

四、Android的像素密度區(qū)間與倍率劃分

Android系統(tǒng)根據(jù)屏幕像素密度劃分了不同的范圍區(qū)間，并賦予相應(yīng)的倍率。例如，像素密度在120左右的屏幕歸為ldpi，倍率為0.75倍；像素密度在160左右的歸為mdpi，倍率為1倍；以此類推。這樣的劃分使得所有Android屏幕都能找到合適的位置，并匹配相應(yīng)的倍率。

五、市場現(xiàn)狀與分辨率判斷

根據(jù)友盟的數(shù)據(jù)，我們可以大致了解當前市場各種手機的分辨率情況。對于市場現(xiàn)狀來說，我們可以根據(jù)一些粗略的判斷來識別手機的像素密度和倍率。對于Android手機來說，由于其型號眾多，分辨起來可能較為復雜，但只要我們掌握了基本的像素密度概念和倍率劃分，就能更好地理解和評估不同手機的顯示效果。深入理解移動設(shè)備顯示效果差異：邏輯像素與物理像素的探討

一、引言

隨著移動設(shè)備的普及，不同設(shè)備的顯示效果差異成為了開發(fā)者與設(shè)計師必須面對的問題。為了深入理解這一現(xiàn)象，本文將詳細探討ldpi、mdpi、hdpi、xhdpi、hdpi及xhdpi等屏幕密度概念，以及邏輯像素與物理像素之間的關(guān)系。

二、屏幕密度概述

1. ldpi如今已絕跡，無需考慮。

2. mdpi[320x480]，市場份額不足5%，新手機不會有這種倍率，通常屏幕都特別小。

3. hdpi[480x800、480x854、540x960]，主要針對早年的低端機，屏幕在3.5英寸檔位；如今的低端機，屏幕在4.7-5.0英寸檔位。

4. xhdpi[720x1280]，針對早年的中端機，屏幕在4.7-5.0英寸檔位；如今的中低端機，屏幕在5.0-5.5英寸檔位。

5. hdpi[1080x1920]，面向早年的高端機，如今的中高端機，屏幕通常都在5.0英寸以上。

6. xhdpi[1440x2560]，極少數(shù)2K屏手機，如Google Nexus 6。

三、倍率與顯示效果

以mdpi作為基準倍率，其他屏幕密度則通過相應(yīng)的倍率來展現(xiàn)近似的效果。雖然倍率存在，但Android設(shè)備的顯示效果仍有所差異。這是因為邏輯像素尺寸是決定顯示效果的關(guān)鍵。

四、邏輯像素與物理像素

邏輯像素是iOS和Android平臺定義的尺寸單位，用以統(tǒng)一不同設(shè)備的顯示效果。iOS的尺寸單位為pt，Android的尺寸單位為dp。設(shè)計時，應(yīng)優(yōu)先使用邏輯像素尺寸來思考界面。

不同倍率下，單位之間的換算關(guān)系如下：

1. 1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

2. 1.5倍：1pt=1dp=1.5px（hdpi）

3. 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

4. 3倍：1pt=1dp=3px（hdpi、iPhone 6 plus）等。

在設(shè)計過程中，應(yīng)使用邏輯像素尺寸來描述和理解界面，無論畫布大小如何變化。例如，Android的最小點擊區(qū)域尺寸是48x48dp，這意味著在不同倍率的設(shè)備上，按鈕的實際像素尺寸會有所不同。

五、Web前端開發(fā)

移動端頁面的絕對單位仍然是px，但前端技術(shù)可以善加利用設(shè)備的像素密度。通過一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面，根據(jù)像素密度按相應(yīng)倍率縮放。Web前端開發(fā)也需要考慮設(shè)備的像素密度對顯示效果的影響。

六、總結(jié)

移動設(shè)備顯示效果差異主要由屏幕密度和像素密度決定。了解不同屏幕密度的特點以及邏輯像素與物理像素的關(guān)系，對于設(shè)計師和開發(fā)者來說至關(guān)重要。在設(shè)計與應(yīng)用開發(fā)過程中，應(yīng)優(yōu)先使用邏輯像素尺寸來思考界面，以確保在不同設(shè)備上實現(xiàn)一致的顯示效果。設(shè)計邏輯與畫布設(shè)置：界面設(shè)計的關(guān)鍵考量因素

======================

一、基準倍率與界面設(shè)計

在界面設(shè)計過程中，無論面對何種屏幕或倍率，設(shè)計師都應(yīng)基于邏輯像素尺寸進行設(shè)計和開發(fā)。實際操作中，設(shè)計師需要準備2倍大小的圖像資源，通過代碼將其縮至1倍顯示，以保證最終畫面的清晰度。這種方法的運用，旨在確保界面在不同設(shè)備和屏幕上都能呈現(xiàn)出最佳的視覺效果。

二、實際應(yīng)用與畫布設(shè)置

在實際設(shè)計過程中，畫布設(shè)置至關(guān)重要。本文將針對iOS、Android和Web三個平臺分別展開討論。不過在此之前，有必要為使用PS進行設(shè)計的設(shè)計師們介紹一個小技巧。

在設(shè)計過程中，應(yīng)將單位設(shè)置為邏輯像素。在PS的首選項——單位與標尺界面中，將尺寸和文字單位都調(diào)整為點（Point）。無論設(shè)計哪個平臺的應(yīng)用，都應(yīng)遵循這一原則。

調(diào)節(jié)倍率則通過圖像大小里的DPI（像素密度）來控制。對于屏幕設(shè)計，DPI通常設(shè)成72；而對于印刷品設(shè)計，DPI則設(shè)成300。這一差異取決于人眼的分辨能力以及打印輸出的實際需求。

三、平臺特定的畫布設(shè)置

1. iOS平臺：

iPhone的屏幕尺寸多樣，設(shè)計時需關(guān)注邏輯像素尺寸。目前市場上iPhone5/5s和iPhone6的屏幕尺寸較為主流。設(shè)計時應(yīng)兼顧不同機型的尺寸，同時注意位圖的清晰度。

2. Android平臺：

盡管Android平臺存在碎片化問題，但現(xiàn)在其邏輯像素尺寸已經(jīng)趨于統(tǒng)一。設(shè)計師可根據(jù)需求設(shè)定DPI，如以xhdpi為準，則DPI設(shè)為144；以hdpi為準，則DPI設(shè)為216。

對于較老的低端機型，設(shè)計時需要留意內(nèi)容的布局，盡量將重要內(nèi)容放置在界面中上部分。

3. Web平臺：

在Web設(shè)計中，設(shè)計師需根據(jù)不同設(shè)備的屏幕特性和分辨率進行相應(yīng)的優(yōu)化，確保界面在不同設(shè)備上都能良好地展示。

四、總結(jié)

在設(shè)計過程中，理解并應(yīng)用邏輯像素尺寸、DPI和倍率等概念，對于確保界面設(shè)計的清晰度和兼容性至關(guān)重要。針對不同平臺的特點進行畫布設(shè)置，能夠大大提升設(shè)計效率和用戶體驗。隨著技術(shù)的不斷發(fā)展，設(shè)計師需要不斷學習和適應(yīng)新的設(shè)計理念和技術(shù)，以應(yīng)對不斷變化的市場需求。Web移動端設(shè)計的標準化與差異化：倍率視角的解讀

一、移動端網(wǎng)頁設(shè)計的挑戰(zhàn)

隨著移動互聯(lián)網(wǎng)的普及，手機端網(wǎng)頁設(shè)計成為了一個重要的研究領(lǐng)域。與PC端相對統(tǒng)一的網(wǎng)頁標準相比，移動端網(wǎng)頁卻沒有明確的統(tǒng)一標準。這無疑給設(shè)計師們帶來了挑戰(zhàn)。

二、流行的設(shè)計標準：iPhone5尺寸與倍率2

為了應(yīng)對這一挑戰(zhàn)，許多設(shè)計師選擇以iPhone5的尺寸作為設(shè)計基準。這種選擇背后的邏輯在于倍率2的設(shè)置，使得邏輯像素達到320×568。這種設(shè)計方式的優(yōu)勢在于適應(yīng)了主流iOS和Android設(shè)備的屏幕，圖片尺寸可以保持在較小的水平，從而使得頁面加載速度更快。倍率2也是倍率中邏輯像素最小的，這無疑進一步增強了其適用性。

三、倍率與圖片質(zhì)量的權(quán)衡

這種設(shè)計方式也存在一定的缺點。在倍率3的設(shè)備上，圖片可能會顯得不夠清晰。為了追求更高的圖片質(zhì)量，設(shè)計師們可以選擇按照最大的屏幕尺寸來設(shè)計，例如iPhone6plus的倍率3和邏輯像素414×736。但這樣做可能會犧牲頁面的加載速度。

四、倍率：關(guān)鍵所在

移動端的尺寸復雜性主要源于倍率的不同。倍率的存在，如同一把雙刃劍，既帶來了設(shè)計上的挑戰(zhàn)，也為設(shè)計師們提供了在不同設(shè)備上實現(xiàn)統(tǒng)一設(shè)計的可能。通過合理的倍率選擇，我們可以確保設(shè)計適應(yīng)各種屏幕。

五、從倍率的角度看移動設(shè)計

站在倍率這條水平線的角度，我們會發(fā)現(xiàn)移動端設(shè)計的復雜性其實很好理解。設(shè)計師們需要在不同的倍率、屏幕尺寸和圖片質(zhì)量之間做出權(quán)衡，以找到最適合的設(shè)計方案。而無論選擇哪種設(shè)計方案，都需要深入理解倍率對設(shè)計的影響，以確保設(shè)計能在各種設(shè)備上實現(xiàn)良好的用戶體驗。

移動端網(wǎng)頁設(shè)計是一個充滿挑戰(zhàn)的領(lǐng)域。設(shè)計師們需要不斷學習和探索，以適應(yīng)日益增長的移動設(shè)備種類和不同的用戶需求。而倍率，作為移動端設(shè)計的一個關(guān)鍵要素，值得我們深入研究和理解。