Android App界面設(shè)計(jì)尺寸規(guī)范

界面設(shè)計(jì)尺寸

Android App的界面設(shè)計(jì)主要依據(jù)720x1280的尺寸進(jìn)行。在這一尺寸下，界面元素如狀態(tài)欄、導(dǎo)航欄和主菜單欄都有明確的尺寸要求。其中，狀態(tài)欄的高度通常為50px，導(dǎo)航欄的高度為96px，主菜單欄的高度也是96px。這些數(shù)值是基于開源系統(tǒng)的參考標(biāo)準(zhǔn)，但具體實(shí)現(xiàn)可能會根據(jù)App的需求有所調(diào)整。

為了適配不同型號的Android手機(jī)，界面設(shè)計(jì)通常采用切圖的方式進(jìn)行適配。其中，“9切圖”是一種常見的方法，能夠?qū)崿F(xiàn)所有手機(jī)的適配。這種設(shè)計(jì)方式有助于確保App在不同設(shè)備上都能呈現(xiàn)出良好的用戶體驗(yàn)。

UI設(shè)計(jì)風(fēng)格與注意事項(xiàng)

從Android 4.0開始，HOLO的UI風(fēng)格被提出并廣泛應(yīng)用。這一風(fēng)格鼓勵將底部的主菜單欄放到導(dǎo)航欄下面，以避開下方的虛擬按鍵，提高用戶體驗(yàn)。在實(shí)際設(shè)計(jì)中，還有一些需要注意的事項(xiàng)：

1. 定位Icon時，只需考慮其上下左右邊距。標(biāo)注圖標(biāo)距離時，應(yīng)標(biāo)到可點(diǎn)擊范圍外。

2. 對于通用型顏色和字體，需要單獨(dú)標(biāo)明。如導(dǎo)航欄等通用型模塊，只需做一次標(biāo)注即可。

3. 在標(biāo)注物體寬度時，通常采用比例說明，因?yàn)槭謾C(jī)可視區(qū)域通常為寬度固定、長度可滑動。

4. 當(dāng)交付的是一張完整圖片時，無需考慮機(jī)型適配問題，但要注意圖片的壓縮。

5. 若圖標(biāo)在不同頁面重復(fù)出現(xiàn)且尺寸相差不大，可直接給出最大尺寸的切圖并標(biāo)明尺寸，程序會根據(jù)需求進(jìn)行縮放。

移動端網(wǎng)頁設(shè)計(jì)尺寸標(biāo)準(zhǔn)概述

移動端設(shè)備和網(wǎng)頁設(shè)計(jì)的尺寸問題是開發(fā)者們經(jīng)常糾結(jié)的焦點(diǎn)。尤其是Android設(shè)備，其屏幕尺寸和分辨率的碎片化非常嚴(yán)重。但實(shí)際上，大部分App和移動端網(wǎng)頁都能在各種尺寸的屏幕上正常顯示。這背后的規(guī)律與像素密度有關(guān)。

手機(jī)屏幕由許多像素點(diǎn)組成，每個像素點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們看到的畫面。不同尺寸的屏幕可能有相同的像素密度。例如，iPhone 3gs和iPhone 4s的像素密度雖然不同，但它們的屏幕物理尺寸都是3.5英寸。盡管移動端設(shè)備的屏幕尺寸多種多樣，但通過合理的設(shè)計(jì)和規(guī)范，仍然可以實(shí)現(xiàn)良好的用戶體驗(yàn)。

移動端網(wǎng)頁設(shè)計(jì)的尺寸標(biāo)準(zhǔn)并非一成不變，而是需要根據(jù)實(shí)際需求和設(shè)備特性進(jìn)行靈活調(diào)整。開發(fā)者需要關(guān)注不同設(shè)備的屏幕特性和用戶習(xí)慣，以確保網(wǎng)頁在不同設(shè)備上都能呈現(xiàn)出最佳的效果。隨著技術(shù)的發(fā)展和設(shè)備的更新?lián)Q代，尺寸標(biāo)準(zhǔn)也會不斷調(diào)整和變化。開發(fā)者需要保持敏銳的洞察力，及時了解和適應(yīng)這些變化。

移動端網(wǎng)頁設(shè)計(jì)的尺寸問題并非無法解決的難題。通過深入了解設(shè)備特性、關(guān)注用戶習(xí)慣、靈活應(yīng)用設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)，開發(fā)者可以創(chuàng)造出具有良好用戶體驗(yàn)的移動端網(wǎng)頁。理解像素密度：連接數(shù)字與物理世界的橋梁

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

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

在科技高速發(fā)展的今天，我們不得不提一個關(guān)鍵概念——像素密度，也被稱為PPI（Pixels per inch）。這像是連接數(shù)字世界與物理世界的一道橋梁。每英寸的長度上排列的像素點(diǎn)數(shù)量，直接決定了顯示設(shè)備的精細(xì)程度。想象一下，我們的食指最末端那根指節(jié)的長度大約2.54厘米，這大約等于1英寸。而像素密度越高，代表著屏幕顯示效果越細(xì)膩。例如，Retina屏幕之所以比普通屏幕清晰很多，就是因?yàn)樗鼡碛蟹兜南袼孛芏取?/p>

二、倍率與邏輯像素

以iPhone 3gs和4s為例。假設(shè)我們有一個郵件列表界面，如果我們按照PC端網(wǎng)頁設(shè)計(jì)的思維來想象，那么在3gs上可能只能顯示4-5行，而在4s上卻能顯示9-10行，并且每行的寬度也會增加。這兩款手機(jī)的實(shí)際尺寸是一樣的。如果按照這種方式顯示，那么原本在3gs上合適的顯示效果，在4s上就會因?yàn)樽煮w太小而無法看清。但實(shí)際上，兩者的顯示效果是一致的。這是因?yàn)镽etina屏幕將多個像素當(dāng)作一個使用，比如原本需要44像素的頂部導(dǎo)航欄，在Retina屏幕上只需要一半的物理像素就能達(dá)到同樣的顯示效果。界面元素都變成兩倍大小，保證了清晰度和可閱讀性。

三、iOS與Android中的倍率應(yīng)用

在iOS應(yīng)用中，資源圖片通常會有兩個不同的尺寸版本。不帶@2x的文件用于普通屏幕，而帶@2x的文件則用于Retina屏幕。系統(tǒng)會自動判斷并使用合適的圖片。對于Android系統(tǒng)來說，由于其屏幕尺寸眾多、分辨率跨度大，因此需要更復(fù)雜的處理方式。Android將不同設(shè)備的像素密度劃分為不同的范圍區(qū)間，并為每個范圍的設(shè)備定義不同的倍率，以確保在各種設(shè)備上都能獲得相近的顯示效果。實(shí)際上，我們并不需要自己計(jì)算這些復(fù)雜的數(shù)值，iOS和Android系統(tǒng)已經(jīng)幫我們處理好了。

四、Android設(shè)備的倍率劃分

Android設(shè)備根據(jù)像素密度劃分了不同的倍率區(qū)間。例如，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有Android屏幕都找到了自己的位置，并被賦予了相應(yīng)的倍率。這意味著即使設(shè)備的像素密度不同，只要邏輯像素相同，其顯示效果就會保持一致。

五、市場現(xiàn)狀與手機(jī)倍率判斷

根據(jù)友盟的數(shù)據(jù)，我們可以大致了解當(dāng)前市場各種手機(jī)的分辨率情況。對于用戶來說，了解這些信息可以幫助我們更好地適配應(yīng)用或游戲，確保在各種設(shè)備上都能獲得最佳的體驗(yàn)。無論是iOS還是Android，都在努力通過像素密度和倍率等技術(shù)手段，為用戶帶來更清晰、更舒適的視覺體驗(yàn)。

一、引言

在當(dāng)前的科技環(huán)境中，屏幕顯示技術(shù)日新月異，各種分辨率和像素密度層出不窮。為了理解這些技術(shù)背后的邏輯和它們在實(shí)踐中的應(yīng)用，我們有必要深入探討一下各種屏幕密度的含義及其在實(shí)際設(shè)備中的應(yīng)用情況。

二、屏幕密度的分類與現(xiàn)狀

曾經(jīng)的一些屏幕密度如ldpi如今已絕跡，不再需要考慮。mdpi[320x480]雖然曾經(jīng)占據(jù)一定市場份額，但在新手機(jī)中已不多見。hdpi[480x800、480x854、540x960]則主要存在于早年的低端機(jī)和如今的低端市場，屏幕大小多在3.5英寸至5.0英寸之間。

三、像素密度的倍率與顯示效果

隨著技術(shù)的發(fā)展，屏幕像素密度不斷提升，xhdpi[720x1280]、hdpi[1080x1920]、xhdpi[1440x2560]逐漸成為主流。以1倍的mdpi作為基準(zhǔn)，像素密度更高或更低的設(shè)備只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率近似的顯示效果。由于Android設(shè)備的邏輯像素尺寸并不統(tǒng)一，即使存在倍率，各種Android設(shè)備的顯示效果仍然有所差異。

四、單位與邏輯像素尺寸

為了統(tǒng)一顯示效果，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。在設(shè)計(jì)開發(fā)過程中，應(yīng)盡量使用邏輯像素尺寸來思考界面。單位的換算關(guān)系隨倍率變化，設(shè)計(jì)師和開發(fā)人員應(yīng)以邏輯像素尺寸來描述和理解界面，以確保準(zhǔn)確高效的溝通。

五、移動端Web的應(yīng)對策略

移動端頁面的絕對單位仍然是px，但前端技術(shù)可以善加利用設(shè)備的像素密度。以iPhone 5s為例，屏幕的分辨率是640x1136，倍率是2。通過一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面，根據(jù)像素密度按相應(yīng)倍率縮放。這意味著即使是Web應(yīng)用，也需要考慮到像素密度對顯示效果的影響。

雖然技術(shù)不斷發(fā)展，屏幕顯示技術(shù)日新月異，但只要我們理解了屏幕密度的分類、倍率、單位以及它們在實(shí)踐中的應(yīng)用，就能夠更好地為各種設(shè)備設(shè)計(jì)優(yōu)化應(yīng)用或網(wǎng)頁，提供更佳的用戶體驗(yàn)。瀏覽器視圖的基準(zhǔn)尺寸設(shè)定

一、基準(zhǔn)倍率與屏幕顯示

瀏覽器在處理屏幕顯示時，會將分辨率視為320x568的邏輯像素尺寸，這成為了頁面制作的基準(zhǔn)倍率尺寸。無論屏幕的實(shí)際分辨率或倍率如何，頁面都是按照邏輯像素尺寸進(jìn)行設(shè)計(jì)和開發(fā)。為了保證在不同屏幕上的清晰顯示，我們需要準(zhǔn)備2倍大小的圖像資源，并通過代碼將其縮小至1倍進(jìn)行展示。

二、實(shí)際應(yīng)用及設(shè)置

對于實(shí)際的應(yīng)用操作，我們主要關(guān)注畫布的設(shè)置。在不同的平臺如iOS、Android和Web上，畫布的設(shè)置方式略有不同。對于使用PS進(jìn)行設(shè)計(jì)的朋友們，有一個小技巧需要了解：在設(shè)計(jì)過程中，應(yīng)將單位設(shè)置為邏輯像素。在PS的首選項(xiàng)——單位與標(biāo)尺界面中，將尺寸和文字單位都調(diào)整為點(diǎn)（Pt）。這樣，無論設(shè)計(jì)哪個平臺的應(yīng)用，都可以使用相同的單位。

三、DPI與倍率調(diào)節(jié)

要調(diào)節(jié)倍率，我們需要通過圖像大小里的DPI來控制。這里的DPI實(shí)際上就是PPI，即像素密度。在屏幕上進(jìn)行設(shè)計(jì)時，DPI應(yīng)設(shè)為72；而進(jìn)行印刷品設(shè)計(jì)時，DPI則應(yīng)該設(shè)為300。為何設(shè)定這兩個數(shù)值？主要是因?yàn)槿搜鄣姆直婺芰蜌v史的因素。

對于印刷品，由于固定長度的1英寸內(nèi)包含的像素點(diǎn)數(shù)量決定了畫質(zhì)的清晰度，因此DPI達(dá)到300以上才能給人以真實(shí)的感覺。而早期的圖形設(shè)計(jì)是在Mac電腦上進(jìn)行的，其顯示器分辨率就是72。為了保證屏幕上顯示的尺寸和打印尺寸相同，PS中的圖像DPI也設(shè)為了72。后來，這一規(guī)則逐漸成為了行業(yè)標(biāo)準(zhǔn)。

四、各平臺的畫布設(shè)置詳解

針對不同平臺，畫布的設(shè)置也有所不同。對于iPhone來說，由于其屏幕尺寸和邏輯像素尺寸眾多，選擇主流機(jī)型的設(shè)計(jì)尺寸是關(guān)鍵。目前主流的是iPhone 5/5s和iPhone 6的屏幕尺寸，其倍率為2，邏輯像素分別為320x568和375x667。在設(shè)計(jì)時，可以兼顧短一些的iPhone 4s，大一些的6 plus也不會過于空曠。

而在Android平臺上，雖然碎片化嚴(yán)重，但現(xiàn)在其屏幕邏輯像素已經(jīng)趨于統(tǒng)一：360x640。開發(fā)者可以根據(jù)需要設(shè)定不同的DPI來適應(yīng)不同的屏幕尺寸和分辨率。對于那些老舊的機(jī)型，雖然市場份額逐漸減少，但在設(shè)計(jì)時仍需要稍作留意，確保重要內(nèi)容在界面中的上部分顯示。

五、總結(jié)

無論是在哪個平臺上進(jìn)行設(shè)計(jì)，都需要以邏輯像素尺寸為基礎(chǔ)進(jìn)行思考。通過理解并應(yīng)用DPI/PPI的概念，我們可以有效地調(diào)節(jié)倍率，確保設(shè)計(jì)的清晰度和適應(yīng)性。在實(shí)際操作中，根據(jù)各平臺的特點(diǎn)進(jìn)行畫布設(shè)置，可以大大提高設(shè)計(jì)效率和用戶體驗(yàn)。移動端Web設(shè)計(jì)與UI設(shè)計(jì)常見尺寸規(guī)范

一、移動端的Web設(shè)計(jì)現(xiàn)狀

在手機(jī)端網(wǎng)頁設(shè)計(jì)中，盡管沒有一個統(tǒng)一的標(biāo)準(zhǔn)，但有一種較為流行的做法：參照iPhone 5的尺寸進(jìn)行設(shè)計(jì)，倍率為2，邏輯像素為320x568。這種方法的優(yōu)勢在于，倍率為2的屏幕在iOS和Android系統(tǒng)中都是主流，這也是2倍屏幕中邏輯像素最小的，頁面加載速度快，圖片尺寸可以保持在較小的水平。其缺點(diǎn)是在倍率為3的設(shè)備上，圖片清晰度可能略有不足。

二、追求圖片質(zhì)量的設(shè)計(jì)選擇

若追求更高的圖片質(zhì)量，愿意犧牲一些加載速度，那么可以選擇按照最大的屏幕尺寸來設(shè)計(jì)，即參照iPhone 6 plus的尺寸，倍率為3，邏輯像素為414x736。這樣的設(shè)計(jì)能夠確保在各類設(shè)備上都有良好的圖片表現(xiàn)。

三、移動端的UI設(shè)計(jì)尺寸概覽

在移動端UI設(shè)計(jì)中，關(guān)鍵的因素在于設(shè)備的倍率。隨著蘋果設(shè)備的更新?lián)Q代，尺寸、規(guī)范及特性都在不斷調(diào)整。從初代iPhone到如今的iPhone X、iPhone XS Max、iPhone XR，設(shè)計(jì)師必須了解每一代設(shè)備的特性。例如，iPhone 6/7/8及iPhone Plus系列采用相同的750x1334px分辨率，而iPhone Plus的邏輯像素更高。設(shè)計(jì)師需要靈活應(yīng)用這些規(guī)范，以確保設(shè)計(jì)在各種設(shè)備上都能完美呈現(xiàn)。

四、UI設(shè)計(jì)的具體尺寸與規(guī)范

除了基本的尺寸外，UI設(shè)計(jì)師還需要關(guān)注各種設(shè)備的邊距和間距、布局、圖片比例、設(shè)計(jì)方式等細(xì)節(jié)。對于狀態(tài)欄和導(dǎo)航欄的高度、大標(biāo)題導(dǎo)航欄、導(dǎo)航欄圖標(biāo)、標(biāo)簽欄、工具欄、閃屏資源、安全距離、色彩、字體、啟動圖標(biāo)、控件、標(biāo)注等，都有詳細(xì)的尺寸、規(guī)范和方法。

移動端的尺寸多樣性確實(shí)比PC端復(fù)雜，但倍率的存在，使得大大小小的屏幕得以回到同一水平線，一套設(shè)計(jì)便能適應(yīng)各種屏幕。只要設(shè)計(jì)師對這些尺寸和規(guī)范有清晰的認(rèn)識，并能夠靈活應(yīng)用，就能創(chuàng)造出在各種設(shè)備上都能完美呈現(xiàn)的設(shè)計(jì)。

無論是Web端還是UI設(shè)計(jì)，都需要設(shè)計(jì)師對設(shè)備的尺寸和規(guī)范有深入的了解，只有這樣，才能確保設(shè)計(jì)在各種設(shè)備上都能表現(xiàn)出最佳的效果。