移動端網(wǎng)頁設(shè)計尺寸標準概覽
隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展，移動端網(wǎng)頁設(shè)計的尺寸標準成為眾多設(shè)計師關(guān)注的焦點。本文將帶你深入了解移動端網(wǎng)頁設(shè)計的尺寸標準，助你輕松應(yīng)對各種移動設(shè)備屏幕。一、現(xiàn)象解析
移動端設(shè)備屏幕尺寸繁多，碎片化現(xiàn)象嚴重。無論是Android系統(tǒng)還是iOS系統(tǒng)，都存在多種分辨率。如Android的480x800、480x854、540x960等，iOS的640x960、640x1136等。但這并不意味著設(shè)計無處下手，實際上大部分app和移動端網(wǎng)頁都能在各種尺寸的屏幕上正常顯示。二、像素密度概念引入
三、倍率與邏輯像素
以iPhone 3gs和4s為例，雖然兩者分辨率不同，但界面顯示效果卻一致。這是因為Retina屏幕將多個像素當作一個使用，提高了顯示效果。在移動端設(shè)計中，我們引入邏輯像素的概念。邏輯像素是實際像素除以倍率得到的尺寸。只要兩個屏幕的邏輯像素相同，它們的顯示效果就會相同。四、Android與iOS的設(shè)計策略
iOS以普通屏為基準，給Retina屏定義了一個固定的倍率。而Android則將各種設(shè)備的像素密度劃分為不同的范圍區(qū)間，并為不同范圍的設(shè)備定義不同的倍率，以確保在各種設(shè)備上都能得到相近的顯示效果。設(shè)計師在準備資源圖片時，需要針對不同倍率準備不同尺寸的圖片，以便系統(tǒng)根據(jù)設(shè)備自動選擇。五、總結(jié)與展望
移動端網(wǎng)頁設(shè)計的尺寸標準雖然看似復(fù)雜，但只要我們掌握了像素密度、倍率與邏輯像素等核心概念，就能輕松應(yīng)對各種移動設(shè)備屏幕。未來隨著技術(shù)的不斷發(fā)展，移動端設(shè)備的屏幕尺寸和分辨率將更加多樣化，設(shè)計師需要不斷學(xué)習(xí)和適應(yīng)新的設(shè)計標準，以提供更好的用戶體驗。移動端網(wǎng)頁設(shè)計的尺寸標準是一個值得我們深入研究和探討的課題。只有通過不斷的學(xué)習(xí)和實踐，我們才能更好地掌握這一技能，為移動設(shè)備用戶帶來更加出色的體驗。關(guān)于Android手機屏幕倍率及單位理解
一、Android屏幕倍率概述
現(xiàn)今的Android手機屏幕倍率主要有以下幾種：ldpi（0.75倍）、mdpi（1倍）、hdpi（1.5倍）、xhdpi（2倍）、hdpi（3倍）以及xhdpi（4倍）。這些倍率主要是為了適配不同分辨率的手機屏幕，確保應(yīng)用在各種屏幕上的顯示效果。
二、手機屏幕分辨率與倍率分布
根據(jù)友盟2014年10月至2015年03月的數(shù)據(jù)，我們可以大致了解目前市場上各種手機屏幕的分辨率分布情況。例如：
ldpi已較少見，可忽略不計。
mdpi主要為320x480分辨率，市場份額較小，新機型基本不會采用。
hdpi主要涵蓋480x800、480x854、540x960等分辨率，多為早年的低端機型或現(xiàn)今的低端智能手機。
xhdpi則多為720x1280分辨率，涵蓋早年的中端機型及如今的中低端機型。
hdpi和更高倍率的屏幕如1080x1920則主要出現(xiàn)在中高端機型。
三、邏輯像素與顯示效果
雖然倍率能為我們提供一個大致的參考，但真正決定手機顯示效果的其實是邏輯像素尺寸。Android和iOS平臺都有各自的邏輯像素單位，分別為dp和pt。不同的倍率下，單位之間的換算關(guān)系也會發(fā)生變化。例如，在mdpi（1倍）的設(shè)備上，1pt等于1dp等于1px；而在hdpi（3倍）的設(shè)備上，則等于3px。在設(shè)計和開發(fā)過程中，應(yīng)盡量使用邏輯像素尺寸來思考界面。
四、單位的重要性及應(yīng)用
單位在設(shè)計和開發(fā)過程中具有極其重要的意義。設(shè)計師在設(shè)定畫布大小及界面元素尺寸時，應(yīng)遵循Android的最小點擊區(qū)域尺寸標準，即48dp（在xhdpi設(shè)備上為96px）。這樣可以確保應(yīng)用在各種屏幕上的用戶體驗都是一致的。理解和運用好邏輯像素單位，對于提高應(yīng)用的兼容性和用戶體驗至關(guān)重要。
五、總結(jié)
了解和掌握Android手機屏幕的倍率及單位，對于開發(fā)者來說是非常必要的。這不僅能幫助他們更好地適配各種屏幕，還能提高應(yīng)用的兼容性和用戶體驗。在設(shè)計過程中，應(yīng)盡量使用邏輯像素尺寸來思考界面，確保應(yīng)用在各種屏幕上的顯示效果都能達到最佳。章節(jié)一：界面設(shè)計與邏輯像素的重要性
界面設(shè)計的基準倍率概念
在數(shù)字化時代，界面設(shè)計是產(chǎn)品與用戶之間的重要橋梁。無論是hdpi設(shè)備還是其他類型的屏幕，我們設(shè)計的都是基于基準倍率的界面樣式。對于開發(fā)人員來說，他們所需要的單位都是邏輯像素。為了確保準確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標注圖還是在日常溝通中。
章節(jié)二：Web端的界面設(shè)計挑戰(zhàn)與解決方案
Web設(shè)計的特殊性與前端技術(shù)的應(yīng)用
雖然移動端頁面的絕對單位仍然是px，但在Web設(shè)計中，我們也要考慮到像素密度的影響。前端技術(shù)可以充分利用設(shè)備的像素密度，根據(jù)屏幕倍率進行相應(yīng)調(diào)整。以iPhone 5s為例，其屏幕倍率為2，瀏覽器會按照這一倍率來渲染頁面。在設(shè)計頁面時，我們只需要按照基準倍率進行，無論屏幕如何變化，都能保證界面的清晰與易用。
章節(jié)三：實際應(yīng)用中的畫布設(shè)置技巧
設(shè)計工具與平臺特性的結(jié)合
在實際應(yīng)用中，畫布設(shè)置是關(guān)鍵。對于使用PS進行設(shè)計的朋友們，有一個小技巧非常實用：將單位設(shè)置成邏輯像素。在PS的首選項——單位與標尺界面中，將尺寸和文字單位都改為點(Point)。無論設(shè)計iOS、Android還是Web應(yīng)用，都可以使用這個單位。
章節(jié)四：DPI與倍率調(diào)節(jié)的關(guān)系
DPI、PPI與界面設(shè)計的清晰度
在設(shè)計過程中，DPI（每英寸點數(shù)）或PPI（每英寸像素數(shù)）決定了設(shè)計的清晰度。對于屏幕設(shè)計，DPI設(shè)為72可以保證屏幕上的清晰顯示。而倍率調(diào)節(jié)則通過圖像大小中的DPI來控制。了解這一點，我們就能更好地適應(yīng)不同設(shè)備和屏幕的需求。
章節(jié)五：針對不同平臺的畫布設(shè)置建議
iOS、Android與Web平臺的畫布設(shè)置策略
我們來具體看看如何在iOS、Android和Web三個平臺上進行畫布設(shè)置。對于iPhone來說，不同型號的屏幕尺寸和邏輯像素尺寸各不相同。目前市場上最多的是iPhone 5/5s和iPhone 6系列的屏幕，我們設(shè)計時可以主要參考這兩種尺寸。在畫布設(shè)置中，我們需要根據(jù)目標市場的設(shè)備類型來選擇適當?shù)倪壿嬒袼爻叽?。移動端設(shè)計稿尺寸與適配策略解析
一、設(shè)計概述與注意點
隨著移動設(shè)備的普及，移動端設(shè)計已成為設(shè)計師的必修課。在切圖過程中，我們需要注意不同設(shè)備的屏幕差異，尤其是iPhone 6 plus的3倍圖是由2倍圖放大而來，位圖要保證清晰。這一點對于確保用戶體驗至關(guān)重要。
二、Android設(shè)備的適配策略
盡管Android設(shè)備碎片化嚴重，但現(xiàn)在其屏幕邏輯像素已經(jīng)趨于統(tǒng)一。以360x640的邏輯像素為例，設(shè)計師可以根據(jù)需求設(shè)定DPI值。對于老舊的低端機，雖然顯示內(nèi)容較少，但由于很快會被淘汰，因此可以適當關(guān)注主流設(shè)備的設(shè)計。
三、Web端的適配挑戰(zhàn)與策略
手機端網(wǎng)頁沒有統(tǒng)一的標準，但流行的做法是按照iPhone 5的尺寸來設(shè)計，倍率為2。這樣的設(shè)計在iOS和Android設(shè)備上都能較好地適應(yīng)，頁面加載速度也快。如果追求圖片質(zhì)量，可以針對最大的屏幕進行設(shè)計，例如iPhone 6 plus的尺寸，倍率3。
四、移動端H5頁面的設(shè)計稿尺寸解析（上）
隨著HTML5和微信內(nèi)置瀏覽器的普及，移動端H5網(wǎng)頁越來越受歡迎。在設(shè)計制作時，我們經(jīng)常會面臨設(shè)計稿應(yīng)該做成多少屏寬的問題。其實，我們需要理解一些基本概念，如像素（pixel）、分辨率等。像素是圖像在某一點的顏色值描述，而PPI描述的是屏幕的像素密度。理解這些概念有助于我們更好地進行移動端H5頁面的設(shè)計。
在設(shè)計移動端H5頁面時，我們經(jīng)常會遇到是否應(yīng)該按照手機分辨率來設(shè)計的問題。實際上，我們可以根據(jù)主流設(shè)備的分辨率來設(shè)定設(shè)計稿的尺寸，以保證設(shè)計的適應(yīng)性和加載速度。我們也要注意到像素的抽象概念，它是相對單位，并沒有固定的大小。
移動端的尺寸復(fù)雜性關(guān)鍵在于倍率，倍率的存在使得大大小小的屏幕得以在同一水平線上適應(yīng)一套設(shè)計。從這條水平線的角度看，移動端的適配問題就變得容易理解了。對于H5頁面的設(shè)計，我們需要理解基本概念，根據(jù)實際情況進行設(shè)計，以保證在各類設(shè)備上的良好體驗。
無論是Android、iOS還是Web端，只要我們掌握了核心概念和策略，就能有效地進行移動端設(shè)計，為用戶提供良好的體驗。在未來的設(shè)計中，我們還需要持續(xù)關(guān)注設(shè)備的變化，不斷優(yōu)化我們的設(shè)計策略。PPI全解讀：像素密度的核心要素
一、PPI的基本概念
PPI，即每英寸像素數(shù)（Pixels Per Inch），用于衡量單位物理面積內(nèi)的像素密度。簡單來說，它反映了在特定尺寸內(nèi)圖像包含的像素數(shù)量。
二、像素與PPI的關(guān)系
考慮七張尺寸均為1x1寸的圖片，它們的PPI分別為1、2、5、10、20、50、100。在同一物理尺寸內(nèi)，隨著像素數(shù)的增加，圖像細節(jié)更豐富，PPI增大，圖像清晰度提高。但需要注意的是，像素本身沒有大小，它是一個相對單位，描述的是圖像在某一點的顏色值。
三、軟件中的PPI應(yīng)用
在Photoshop等軟件中，即使文檔或圖片的像素總數(shù)相同，其PPI值的不同也不會在顯示階段造成視覺上的差異。例如，800x600px的圖片，無論其PPI是72還是300，在屏幕上顯示的效果是一樣的。但它們在打印時，高PPI的圖片將表現(xiàn)出更優(yōu)秀的細節(jié)表現(xiàn)。
四、分辨率與PPI的關(guān)聯(lián)
分辨率描述了顯示系統(tǒng)對細節(jié)的分辨能力。常見的分辨率單位包括dpi（點每英寸）、lpi（線每英寸）和ppi。在日常描述數(shù)字圖片時，所說的“這張圖片的尺寸（或分辨率）是100x100像素”，其實只是說明了圖片文件包含的像素數(shù)。
五、Retina屏與像素密度的革命
Retina屏是一種高分辨率的顯示技術(shù)，通過增加單位面積屏幕的像素數(shù)量來提升顯示效果。以iPhone 4為例，其960640的分辨率（326ppi）使得畫面精細度大大提升。對比iPhone 3GS和iPhone 4的顯示效果，可以明顯看出Retina屏在顯示相同內(nèi)容時，畫面精細程度的提升。這種技術(shù)同樣應(yīng)用于第三代MacBook Pro with Retina Display，通過顯卡的渲染，使得屏幕顯示效果達到前所未有的精細度。
PPI作為衡量像素密度的重要參數(shù)，在顯示技術(shù)中扮演著至關(guān)重要的角色。了解PPI的概念和應(yīng)用，有助于我們更好地理解數(shù)字圖像的顯示原理和效果。隨著科技的發(fā)展，高PPI的屏幕將帶來更加細膩、清晰的視覺體驗。Retina顯示技術(shù)與CSS像素：理解顯示技術(shù)的深層邏輯
一、顯示分辨率的調(diào)整與Retina顯示技術(shù)
當我們調(diào)整桌面顯示器的顯示分辨率，比如從800600升級到1024768時，我們可能會注意到屏幕上的文字和圖標會變小，但顯示的內(nèi)容會更多。Retina顯示技術(shù)卻能夠解決顯示畫面精細程度的問題，而不是顯示內(nèi)容容量的問題。
二、設(shè)備獨立像素（DIPs）與Retina顯示技術(shù)的核心
那么，什么是設(shè)備獨立像素呢？當我們將四個物理像素組合起來，用來顯示原來屏幕的一個像素時，這就是Retina顯示技術(shù)的一種表現(xiàn)。這四個組合在一起的“大像素”被稱為設(shè)備獨立像素或DIPs。它們可以被看作是一個系統(tǒng)點，代表一個可以由程序使用的虛擬像素，然后被相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
三 像素與CSS像素的關(guān)聯(lián)
設(shè)備獨立像素也被稱為CSS像素。在Web開發(fā)中，我們更多地接觸到的是用于控制元素樣式的樣式單位像素，也就是這種CSS像素。形象地說，CSS像素更傾向于與CSS中尺寸的對應(yīng)。那么，如何理解設(shè)備獨立像素與物理像素的對應(yīng)關(guān)系呢？簡單來說，就是每四個物理像素組合起來顯示一個CSS像素的效果。這正是Retina顯示技術(shù)的一個重要表現(xiàn)。
四、瀏覽器中的CSS像素與放大操作
移動端的尺寸規(guī)范初探
隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，移動端網(wǎng)站和應(yīng)用的開發(fā)日益普及。對于初涉這一領(lǐng)域的開發(fā)者來說，尺寸問題往往是一大難題。今天，我們就來一起探討移動端尺寸的基礎(chǔ)知識，幫助大家更好地理解并應(yīng)用相關(guān)知識。
一、歷史遺留問題與viewport的理解
在移動端開發(fā)中，我們經(jīng)常會聽到關(guān)于原型稿屏寬、設(shè)計稿分辨率等的說法。這實際上涉及到viewport的設(shè)置問題。viewport的width屬性，當設(shè)置為device-width時，其寬度指的是設(shè)備的獨立像素寬度。這個值并不是固定的320px，而是根據(jù)不同的設(shè)備屏幕寬度而有所變化。
二、移動設(shè)備屏幕尺寸與分辨率的多樣性
現(xiàn)代智能手機屏幕尺寸多樣，分辨率各異，導(dǎo)致設(shè)備像素比（ DPR）也不一致。設(shè)備像素比表示該設(shè)備的物理像素與CSS像素的比例。例如，設(shè)備像素比為2的設(shè)備，意味著其屏幕上的兩個物理像素才能顯示一個CSS像素。這種多樣性給移動端設(shè)計和開發(fā)帶來了一定的挑戰(zhàn)。
三、移動端尺寸規(guī)范的基礎(chǔ)解釋
為了應(yīng)對屏幕尺寸的多樣性，移動端設(shè)計和開發(fā)有一套自己的尺寸規(guī)范。其中，一種常見的做法是將設(shè)計稿的分辨率設(shè)置為兩倍普通屏分辨率，如640px。這樣做的目的是為了在不同設(shè)備上都能獲得較好的顯示效果。將viewport的width屬性設(shè)置為device-width，可以確保頁面在不同設(shè)備上都能自適應(yīng)顯示。
四、現(xiàn)象與解決方案
盡管移動端設(shè)備屏幕尺寸繁多，但大部分app和移動端網(wǎng)頁都能在各種尺寸的屏幕上正常顯示。這是因為尺寸問題有解決的方法，并且遵循一定的規(guī)律。在設(shè)計和開發(fā)過程中，我們需要關(guān)注設(shè)備的獨立像素寬度，而不是物理像素寬度。合理利用CSS的響應(yīng)式設(shè)計技巧，如媒體查詢等，可以讓我們的頁面適應(yīng)不同的屏幕尺寸。
五、初學(xué)者的建議與教程
對于初涉移動端設(shè)計和開發(fā)的同學(xué)們來說，尺寸問題可能是一個令人頭疼的問題。但只要我們掌握了基本原理和規(guī)律，就能輕松應(yīng)對。建議大家從原理開始學(xué)習(xí)，理解設(shè)備和屏幕的基本知識，掌握響應(yīng)式設(shè)計的基本技巧?？梢詤⒖家恍﹥?yōu)秀的教程和案例，多實踐，多總結(jié)，逐漸提高自己的設(shè)計和開發(fā)水平。
移動端尺寸規(guī)范是移動端設(shè)計和開發(fā)的基礎(chǔ)。只有掌握了這些基礎(chǔ)知識，才能更好地應(yīng)對各種挑戰(zhàn)，打造出優(yōu)秀的移動端產(chǎn)品和服務(wù)。希望本文能對初學(xué)者有所幫助，讓大家在移動端設(shè)計和開發(fā)的道路上更加順利。關(guān)于手機屏幕分辨率與像素密度的深入解析
一、手機屏幕分辨率與像素
我們之前所探討的分辨率，實質(zhì)上是關(guān)于手機屏幕的實際像素尺寸。例如，一個480×800的屏幕，就是由800行、480列的像素點緊密排列而成。每一個像素點能夠發(fā)出不同顏色的光，共同構(gòu)成了我們所看到的畫面。值得注意的是，手機屏幕的物理尺寸與像素尺寸并不成正比。以iPhone 3gs和iPhone 4s為例，雖然兩者的屏幕像素分別為320×480和640×960，像素近乎兩倍關(guān)系，但兩款手機的屏幕物理尺寸都是3.5英寸。
二、像素密度：PPI（pixels per inch）
為了更深入地理解屏幕顯示效果，我們必須引入像素密度這一概念，也就是PPI（pixels per inch）。PPI衡量的是每英寸長度上排列的像素點數(shù)量。換句話說，PPI越高，代表屏幕顯示效果越精細。以Retina屏為例，其清晰度遠超普通屏幕，關(guān)鍵就在于其像素密度的大幅提升。
三、倍率與邏輯像素
繼續(xù)以iPhone 3gs和4s為例。假設(shè)我們?yōu)g覽一個郵件列表界面。如果按照PC端網(wǎng)頁設(shè)計的思維，那么在3gs上可能只能顯示4-5行，而在4s上則能顯示9-10行，并且每行的寬度也會有所增加。兩款手機的實際屏幕大小是一樣的。如何保證兩者顯示效果一致呢？答案是Retina屏幕將多個像素點當作一個來使用，比如將2×2個像素當作一個像素使用。這樣，原本在普通屏幕上顯示的元素，在Retina屏幕上會變?yōu)閮杀洞笮?，保證了與3gs相似的顯示效果，但畫質(zhì)更為清晰。
四、iOS與Android的應(yīng)對策略
在iOS系統(tǒng)中，同一張圖片通常會有兩個尺寸版本，一個用于普通屏幕，一個用于Retina屏幕。不帶@2x的用于普通屏，帶@2x的用于Retina屏。iOS系統(tǒng)會自動判斷使用哪個版本。Android系統(tǒng)的解決方法類似，但由于屏幕尺寸和分辨率的多樣性，其劃分更為復(fù)雜。Android將各種設(shè)備的像素密度劃分為不同的范圍區(qū)間，并為不同范圍的設(shè)備定義了不同的倍率，以確保相近的顯示效果。
五、倍率的具體應(yīng)用
具體來說，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。各型號iPhone的倍率相對簡單。而對于Android手機，其數(shù)量眾多，分辨率各異。根據(jù)友盟的數(shù)據(jù)，我們可以大致判斷各款手機的倍率。例如，mdpi屏幕如今主要存在于市場份額不足5%的低端機型中；hdpi則常見于早年的中端機型或如今的低端機型；xhdpi則主要出現(xiàn)在中高端機型中；hdpi和xhdpi則分別對應(yīng)高端機型和極少數(shù)的高分辨率機型。
以較低的倍率如mdpi作為基準，其他設(shè)備則通過相應(yīng)的倍率調(diào)整來得到相似的顯示效果。這樣，不同屏幕密度的手機都能得到相近的用戶體驗。深入解析Android、iOS和Web平臺的邏輯像素單位
一、邏輯像素單位的概述
在移動設(shè)備的發(fā)展過程中，邏輯像素單位成為了衡量界面顯示效果的重要標準。對于Android設(shè)備來說，常見的屏幕分辨率為480×800和1080×1920，它們分別屬于hdpi和hdpi。盡管存在倍率差異，但邏輯像素并不統(tǒng)一，使得各種設(shè)備的顯示效果存在差異。
二、iOS和Android平臺的邏輯像素單位定義
為了解決這個問題，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。實際上，兩者背后的概念是一致的，都是為了統(tǒng)一界面的顯示效果。
三、單位之間的換算關(guān)系
單位之間的換算關(guān)系隨著倍率的變化而變化。例如：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（hdpi、iPhone 6）
這意味著在設(shè)計過程中，需要根據(jù)設(shè)備的倍率來選擇合適的單位。
四、設(shè)計過程中的注意事項
在設(shè)計Android應(yīng)用時，有的設(shè)計師可能會選擇將畫布設(shè)置為1080×1920，有的則選擇720×1280。但這導(dǎo)致了界面元素尺寸的不統(tǒng)一。無論畫布設(shè)置多大，設(shè)計師應(yīng)該基于邏輯像素尺寸來思考界面設(shè)計。開發(fā)人員也需要使用邏輯像素單位來保證準確高效的溝通。
五、Web端的邏輯像素單位
雖然Web端的絕對單位仍然是px，但前端技術(shù)可以利用設(shè)備的像素密度來優(yōu)化顯示效果。通過一行代碼，瀏覽器可以使用app的顯示方式來渲染頁面，根據(jù)像素密度按相應(yīng)倍率縮放。在設(shè)計和開發(fā)Web頁面時，也應(yīng)該基于邏輯像素尺寸來進行。
六、實際應(yīng)用中的建議
在實際應(yīng)用中，設(shè)計師可以通過設(shè)置PS的首選項——單位與標尺界面，將尺寸和文字單位設(shè)置為點（Point），無論設(shè)計iOS、Android還是Web應(yīng)用，都可以使用這一單位。通過調(diào)節(jié)DPI來控制倍率，DPI其實就是PPI，即像素密度。在設(shè)計過程中，設(shè)計師應(yīng)該牢記各平臺的單位名稱和換算關(guān)系，以邏輯像素尺寸來思考界面設(shè)計。這樣無論在哪種設(shè)備上，都能保證頁面的清晰度和顯示效果?？缭綌?shù)字時代的視覺橋梁：設(shè)計倍率與移動端的和諧共生
一、歷史的回聲：72DPI的起源
在設(shè)計的浩瀚星河中，72DPI如一顆恒星，照亮了我們前行的道路。這一數(shù)值的起源，最早可追溯到在Mac電腦上的圖形設(shè)計時代。當時，Mac自身的顯示器分辨率即為72DPI。為了保證屏幕顯示效果與打印尺寸一致，設(shè)計師們選擇將圖像的DPI也設(shè)定為72。隨著時代的發(fā)展，這一分辨率逐漸成為了行業(yè)標準，沿用至今。
二、倍率揭秘：DPI的魔法
那么，如何通過DPI來調(diào)節(jié)倍率呢？其實，關(guān)鍵在于理解屏幕本身的分辨率與DPI之間的關(guān)系。當DPI設(shè)定為72時，它恰好是1倍尺寸。那么，如果將DPI設(shè)為72的兩倍，即144DPI，那么這塊屏幕的倍率就是2。如此簡單的邏輯，為我們打開了設(shè)計新世界的大門。
三、平特的畫布設(shè)置
1. iPhone平臺：邏輯像素的征途
iPhone的屏幕尺寸多樣，我們主要關(guān)注的是其邏輯像素尺寸。目前市場上，iPhone 5/5s的屏幕倍率為2，邏輯像素為320×568，是較為普遍的選擇。而未來，iPhone 6的屏幕憑借其375×667的邏輯像素，有望登上市場的主導(dǎo)地位。在設(shè)計時，兼顧不同型號的屏幕，尤其要注意iPhone 6 plus的3倍圖是由2倍圖放大而來，位圖需保證清晰。
2. Android平臺：碎片化的統(tǒng)一之路
盡管Android系統(tǒng)的碎片化問題一度令人頭疼，但現(xiàn)在其邏輯像素已經(jīng)趨于統(tǒng)一：360×640。設(shè)計師可根據(jù)需要選擇xhdpi（DPI 144）或hdpi（DPI 216）進行設(shè)計。對于老舊的低端機型，雖然市場份額逐漸減小，但在設(shè)計時仍應(yīng)稍作留意，重要內(nèi)容盡量保持在界面中上部分。
3. Web平臺：無標準的挑戰(zhàn)與應(yīng)對
在手機端網(wǎng)頁設(shè)計中，沒有統(tǒng)一的標準。目前較為流行的做法是按照iPhone 5的尺寸來設(shè)計，倍率為2，邏輯像素為320×568。這樣的設(shè)計在iOS和Android設(shè)備中都能較好地適應(yīng)。若追求圖片質(zhì)量，愿意犧牲加載速度，也可按照最大的屏幕尺寸進行設(shè)計，即iPhone 6 plus的尺寸。
四、倍率——移動端的調(diào)和劑
移動端的尺寸多樣性給設(shè)計師帶來挑戰(zhàn)，但倍率的存在如同調(diào)和劑，將大大小小的屏幕拉回到同一水平線。通過理解并巧妙運用DPI和倍率，設(shè)計師能夠確保一套設(shè)計適應(yīng)各種屏幕。站在這條水平線的角度，移動端的復(fù)雜性便迎刃而解。
UI中國，作為設(shè)計師的家園，我們共同探索、學(xué)習(xí)、進步，攜手跨越數(shù)字時代的視覺橋梁。
