Andriod界面設計的分辨率和尺寸適配全攻略 轉載

Andriod界面設計的分辨率和尺寸適配全攻略

轉載 2016年09月27日 17:45:56

 

第1、屏幕尺寸：

通常表示是手機的實際物理尺寸，屏幕尺寸指屏幕的對角線的長度，單位是英寸，1英寸=2.54釐米。

好比常見的屏幕尺寸有3.五、3.七、4.二、5.0、5.五、6.0等。

如下是相關的單位術語：

（1）， Screen size 屏幕的尺寸，即對角線長度（單位inch-英寸）

（2）， Screen density屏幕密度，即單位長度像素點數（pots/inches）

（3）， Resolution 分辨率，即屏幕的總像素點數（width * height）

（4）， Density-independent pixel (dp)獨立像素密度。標準是160dip.即1dp對應1個pixel，計算公式如：px = dp * (dpi / 160)，屏幕密度越大，1dp對應 的像素點越多。

 

第2、屏幕分辨率：屏幕上顯示的像素個數，單位尺寸內像素點越多，顯示的圖像就越清楚。單位是px，1px=1個像素點。

分辨率720*1280表示手機水平方向的像素爲720，垂直方向爲1280.

市場上主流分辨率有：480*800、 720*1280、 1080*1920（其餘的早該淘汰了，忽略不計）。

特別注意：這裏的分辨率和咱們ps裏面設置的分辨率不是同一個分辨率。

通常設計的時候咱們設置PS的分辨率爲：72 像素/英寸

 

第3、屏幕密度：表示屏幕每英寸有多少個像素。即屏幕像素密度。 單位是dpi

幕像素密度與屏幕尺寸和屏幕分辨率有關，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

 

第4、Andriod相關的單位：

px：像素（設計師都知道像素是什麼）。

dp：andriod開發中用於描述尺寸和間距。

sp：和dp同樣，只是用於描述字號和行距。  這個跟android開發工程師相關。咱們設計師只要按照設計的單位 px便可。可是標註的時候，必須採用。

 

下圖爲圖標的各個屏幕密度的對應尺寸

屏幕密度	圖標尺寸
mdpi	48x48px
hdpi	72x72px
xhdpi	96x96px
xxhdpi	144x144px
xxxhdpi	192x192px

下面是目前主流的屏幕密度：

240dpi（480*800px） 、320dpi（720*1280px）、480dpi（1080*1920px）

 

第5、android適配原理

Android手機的程序會尋找最佳界面資源：

1， 排除與設備設置不符合的資源

2， 根據限定詞（qualifier）的優先級，按照順序查找

3， 在限定詞下，是否存在資源路徑

4， 排除不包含在限定詞中的資源路徑

5,  繼續執行不一樣的限定詞查找，直到找到相應的資源

換句話說：

android會有專門放置適配圖片的地方：

drawable—xhdpi、drawable—hdpi、drawable—mdpi、drawable—ldpi

 

第六：PS的設計尺寸

1.通常採用720*1280的來設計。切圖能夠直接適配720*1280分辨率的機型。固然也能夠是1080*1920px

2.720*1280下的切圖資源基本能夠適配其餘機型，有些特殊的切圖須要單獨適配的，好比icon等。

3.適配480*800的機型，只須要把切圖*0.75便可。

4.適配1080*1920機型，只須要把切圖*1.5便可。

5.適配1080*1920的時候，不要單獨硬生生的將圖標放大1.5倍。這就要求在720*1280下畫圖的時候，儘可能採用矢量圖形來畫      圖。好比在720*1280下圖圖標是48px*48px的時候，適配1080*1920時候，48px*1.5=72px。把矢量圖形調整爲72px便可。把   切圖資源給開發，開發會把切圖單獨放到xxhdpi的文件目錄下，就會自動適配1080*1920的了。

一樣要是適配480*800的，48px*0.75=32px，把切圖給開發，開發會把切圖資源單獨放到hdpi的目錄下，就會自動適配的。

720*1280下的切圖資源，開發是放到xhdpi的目錄下的。

注意：你們在設計圖片的時候儘可能採用偶數來設計。開發能夠直接寫出來的就儘可能不要切圖。

 

第7、只須要提供一套標註便可。

原則上須要爲不一樣分辨單獨進行標註，但因爲開發成本等各類考慮。

 選取320dpi下（分辨率爲：720*1280）進行設計，此分辨率下1dp=2px。

設計師要創建相對單位概念，能夠直接使用dp標註尺寸、sp標註文字大小；

Andriod官網中就採用相對單位進行標註的。

其餘更多關於android 界面設計的教程能夠關注25學堂以前發佈的APP設計經驗：

一、APP產品經理必備的APP線框圖工具【Android和iOS】

二、Android設計規範以及android UI kits完整PSD下載

三、Android APP設計教程與終極UI適配祕籍【圖文版】

四、Android APP界面標註、尺寸換算和APP標註工具

五、Android移動APP設計字體規範詳解

 

 

Android APP界面標註、尺寸換算和APP標註工具

 

 

衆所周知，對追求高還原的移動APP產品來講，移動APP設計稿上的精確尺寸標記是必不可少的的一步。不少設計師都抱怨APP程序員作的效果太差，跟設計圖相差太多，你有沒有提供最規範的Android APP界面標註尺寸呢？ 有沒有提供設計師的UI設計規範給程序員呢？

其實，做爲一名移動APP設計師，這些咱們都應該在於Android程序員溝通好的基礎上，盡最大的努力爲他們提供最全的設計規範和設計標註、測量等信息。

下面是某安卓設計師的實踐和工做總結。值得參考，也能夠說是設計 Android APP的最佳實踐：

1. 畫布大小定位 720 x 1280，72 dpi

2. 只使用偶數單位的尺寸，好比 96 px 的列表項高度，16 px 的邊距，64 px 的圖標邊長

3. 只使用 24 pt，28 pt，36 pt 和 44 pt 的字體

4. 設計完成之後，全部尺寸的 px 值除以 2 做爲 dp 數值交給工程師

5. 全部字體的 pt 值除以 2 做爲 sp 數值交給工程師

6. 全部切圖變成三份，分別是原始大小、縮小 1.5 倍，縮小 2 倍，分別做爲 xhdpi，hdpi，mdpi 的資源交給工程師

具體的以下圖：

 

下面是一些解答你疑問的安卓術語啦！

爲何要選擇720*1280來做爲設計稿，並且分辨率設置爲72

由於 320 dpi 屏幕的分辨率最多見的是 720 x 1280，以這個尺寸做爲畫布尺寸，是最帶感的，這樣的設計稿就和應用在最多數的 320 dpi 的機器上運行起來的樣子同樣。

並且挑密度最大的，由於圖片縮小比放大好，放大會失真，選 320 dpi 做爲目標屏幕，爲其餘屏幕提供圖片時，只須要縮小。

72 dpi 是 Photoshop 的默認設置，不要改就好，這個數字和後面的換算有關係。

 

Android 4.0 之後的設計規範中建議只使用四種字號，分別是 12 sp，14 sp，18 sp 和 22 sp，這也是 Android framework 用到的所有字號。

下面25學堂根據前輩的一些經驗，分享2個安卓字體的換算方式：

 

有兩種算法：

算法一

根據 dp 的定義「在 160 dpi 的屏幕上，1 dp 大約等於 1 px」，那麼在 320 dpi 的屏幕上，1 dp 約等於 2 px，咱們就是爲 320 dpi 作的設計，全部 px 值除以 2 就是 dp 值。字體略複雜一點，1 pt = 1 / 72 inch，即在 72 dpi 的畫布上，1 pt = 1 px，咱們的畫布就是 72 dpi，又有 1 sp 約等於 2 px（同 dp 的定義），因此 1 sp = 2 pt，全部 pt 值除以 2 就是 sp 值。

算法二

能夠想象是把一個 320 dpi 的手機屏幕放大到了 Photoshop 裏，放大倍數是 320 / 72，即手機上的 1 dp，在畫布上就是 320 / 72 dp，而 1 dp = 1 / 160 inch，因此在畫布上就是 2 / 72 inch，而畫布是 72 dpi，因此在畫布上就是 2 px，即手機上的 1 dp 對應畫布上的 2 px。字體的計算同樣，只是多一個在 72 dpi 上，1 pt = 1 px 的轉換。

至此，都算清楚了，在這個畫布上，px 到 dp，pt 到 sp 都是除以 2 的關係。

最後，給 320 dpi 作的圖片，到 240 dpi，160 dpi 上就要分別縮小 1.5 倍和縮小 2 倍。

 

第二部分：經常使用的一些APP標註工具

第一個：馬克鰻

 

 

第二個：苦逼APPUI設計師的標註切圖的利器—PxCook

雖然25學堂介紹了好幾款移動APP的切圖工具和標註的工具。

 

第三個：nice – 標記生活的美好 是一款給圖片標註的APP。很是棒，值得體驗。

年輕人最愛玩的App！App store屢次推薦！圖片+標籤讓你的照片時尚時尚最時尚。

給圖片打上標籤，標籤能夠是品牌，地點，人物以及任何你想表達的情緒和想法。用標籤表達你的快樂與哀愁。

 

第四個：Sketch.app Measure 標註神器

這是一款Sketch設計軟件的插件，只適合蘋果電腦使用。

 

下載地址和安裝步驟：

一、https://github.com/utom/sketch-measure 下載最新的版本, 並解壓;

二、打開 Sketch.app, Menu (菜單) -> Plugins (插件) -> Reveal Plugins Folder… (顯示插件文件夾…);

三、將解壓的文件夾複製到 Plugins Folder(插件文件夾)