萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> Android手機UI設計分辨率基礎知識

Android手機UI設計分辨率基礎知識

  1.術語和概念

  Android手機ui設計分辨率基礎知識

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

  Screen size(屏幕尺寸)

  指的是手機實際的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸

  摩托羅拉milestone手機是3.7英寸

  Aspect Ratio(寬高比率)

  指的是實際的物理尺寸寬高比率,分為long和nolong

  Milestone是16:9,屬於long

  Resolution(分辨率)

  和電腦的分辨率概念一樣,指手機屏幕縱、橫方向像素個數

  Milestone是854*480

  DPI(dot per inch)

  每英寸像素數,如120dpi,160dpi等,假設QVGA(320*240)分辨率的屏幕物理尺寸是(2英寸*1.5英寸),dpi=160

  可以反映屏幕的清晰度,用於縮放UI的

  Density(密度)

  屏幕裡像素值濃度,resolution/Screen size可以反映出手機密度,

  Density-independent pixel (dip)

  指的是邏輯密度計算單位,dip和具體像素值的對應公式是dip/pixel=dpi值/160,也就是px = dp * (dpi / 160)

  2. DPI值計算

  比如:計算WVGA(800*480)分辨率,3.7英寸的密度DPI,如圖1所示

Android手機UI設計分辨率基礎知識  三聯

  圖1

Diagonal pixel表示對角線的像素值(=

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

),DPI=933/3.7=252

  3.手機屏幕的分類

  1)根據手機屏幕密度(DPI)或屏幕尺寸大小分為以下3類,如圖2所示

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

  圖2

  2)手機屏幕分類和像素密度的對應關系如表1所示:

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

  Low density (120), ldpi

  Medium density (160), mdpi

  High density (240), hdpi

  Small screen

  QVGA (240×320)

  Normal screen

  WQVGA400 (240×400)WQVGA432 (240×432)

  HVGA (320×480)

  WVGA800 (480×800)WVGA854 (480×854)

  Large screen

  WVGA800* (480×800)WVGA854* (480×854)

  表1

  3)手機尺寸分布情況(http://developer.android.com/resources/dashboard/screens.html)如圖3所示,目前主要是以分辨率為800*480和854*480的手機用戶居多

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

  圖3

  從以上的屏幕尺寸分布情況上看,其實手機只要考慮3-4.5寸之間密度為1和1.5的手機

  4. ui設計

  從開發角度講,應用程序會根據3類Android手機屏幕提供3套UI布局文件,但是相應界面圖標也需要提供3套,如表2所示

Android手機UI設計分辨率基礎知識(DPI,DIP計算)

  Icon Type

  Standard Asset Sizes (in Pixels), for Generalized Screen Densities

  Low density screen (ldpi)

  Medium density screen (mdpi)

  High density screen (hdpi)

  Launcher

  36 x 36 px

  48 x 48 px

  72 x 72 px

  Menu

  36 x 36 px

  48 x 48 px

  72 x 72 px

  Status Bar

  24 x 24 px

  32 x 32 px

  48 x 48 px

  Tab

  24 x 24 px

  32 x 32 px

  48 x 48 px

  Dialog

  24 x 24 px

  32 x 32 px

  48 x 48 px

  List View

  24 x 24 px

  32 x 32 px

  48 x 48 px

  表2

  5.如何做到自適應屏幕大小呢?

  1)界面布局方面

  需要根據物理尺寸的大小准備5套布局,layout(放一些通用布局xml文件,比如界面中頂部和底部的布局,不會隨著屏幕大小變化,類似windos窗口的title bar),layout-small(屏幕尺寸小於3英寸左右的布局),layout-normal(屏幕尺寸小於4.5英寸左右),layout-large(4英寸-7英寸之間),layout-xlarge(7-10英寸之間)

  2)圖片資源方面

  需要根據dpi值准備5套圖片資源,drawable,drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi

  Android有個自動匹配機制去選擇對應的布局和圖片資源

copyright © 萬盛學電腦網 all rights reserved