DPI/PPI/dp/sp/px/pt 移動設計手冊

6 評論 39930 瀏覽 72 收藏 14 分鐘

做移動設計的同學,不管是原生app或者web app,應該對字體字號都是很頭痛的問題。根本原因是,我們用唯一分辨率的電腦,設計各個不同尺寸大小分辨率的設備,那簡直要瘋掉了。

 

但不要著急,我們先來理解一下一些名詞:

我們一般會碰到的度量單位主要有:dpi、ppi、dp、sp、px、pt、in。其中,px應該各位最熟悉的單位,也是我們主要使用的photoshop或者axure等工具用的度量單位,而它在移動端時,的確已經“過時”了。但不要著急把它丟掉,因為它是接下來非常重要的換算單位(所有手機參數還是用px在表達)。

dpi和ppi這兩個是密度單位,不是度量單位,而這兩個恰恰是我們換算中重要的分母。簡單理解一下:

  • ppi (pixels per inch):圖像分辨率 (在圖像中,每英寸所包含的像素數目)
  • dpi (dots per inch): 打印分辨率 (每英寸所能打印的點數,即打印精度)

dpi主要應用于輸出,重點是打印設備上

我們在移動應用中提到ppi和dpi其實都一樣(概念不同,但對設計來講沒有特別需要深入了解),所以我們先忽略掉dpi。而ppi的運算方式是:

1
PPI = √(長度像素數2 + 寬度像素數2) / 屏幕對角線英寸數

舉個簡單的栗子,iphone5的ppi是多少?ppi=√(1136px2 + 640px2)/4 in=326ppi(視網膜Retina屏).這樣大家就能夠明白ppi和px的關系。

這里還提到in(英寸)這個詞,這個非常重要,因為現實中我們經常提到4英寸手機或者5.5英寸大屏手機,而這個尺寸是用戶真正感受到的物理大小,所有提到不同尺寸的屏幕不僅僅是分辨率或者像素,而更多的是英寸。

好,現在關鍵的來了,dp、sp、pt,是我們設計中的關鍵。

  • dp:Density-independent pixels,以160PPI屏幕為標準,則1dp=1px,dp和px的換算公式 :

    dp*ppi/160 = px
    比如1dp x 320ppi/160 = 2px

  • sp:Scale-independent pixels,它是安卓的字體單位,以160PPI屏幕為標準,當字體大小為 100%時, 1sp=1px。

    sp 與 px 的換算公式:
    sp*ppi/160 = px

是不是看起來dp和sp一樣,在Android設計原則中,有提到這兩個單位,他建議文字的尺寸一律用sp單位,非文字的尺寸一律使用dp單位。例如textSize=”16sp”、layout_width=”60dp”。

為什么要把sp和dp代替px?最簡單的原因是他們不會因為ppi的變化而變化,在相同物理尺寸和不同ppi下,他們呈現的高度大小是相同。也就是說更接近物理呈現,而px則不行。

但問題來了,ps或者axure里面沒有sp或者dp這個選項啊,怎么辦?看到網上有人說用pt去替換px(pt是物理高度,1in=72pt)。補充一下自己推算的pt轉換px的公式,不一定對,可以參考:例如9pt,再96dpi下,那么就是9 * 1/72 * 96 =12px。而在72ppi下,9pt=9px。

我再來做個小小的實驗:

  1. 先了解清楚你筆記本的ppi,比如我的macbook air是11.6英寸,1366 x 768分辨率,那么它的ppi就是135ppi。
  2. 然后新建一個頁面,輸入的ppi值就是你電腦的ppi值。我們先來看看不同ppi值在電腦上呈現的字體大小是怎么樣的:

mobile-font3
我用的都是arial 14點(注:專家指正這里不是px而是pt,點)的字體,但在320ppi、160ppi、135ppi(我自己的)以及標準72ppi下的大小,截然不同。

好,我們再來看看,在電腦上直接截圖web頁之后對比的效果:
mobile-font4
你會驚訝的發現,只有72ppi是正常的,其他字體都不對了,因為原本的web設計是不用考慮dp、sp或者ppi的,它是直接px作為物理單位的,而點在72ppi下(1pt x 1/72 x 72dpi=1px)是正常顯示的。所以我們以前做web的時候根本不用擔心自己的設計在別人電腦上看起來會很大或很小。當然其實像firefox是用96dpi,也就是9pt=12px。

但我再截一下用iphone訪問web之后的圖:

mobile-font5

好吧,這時候,你就發現72ppi是見鬼了,因為這個字體在手機上看到完全地小了,所以做移動設計不要傻乎乎地還用72ppi了,不然你很難判斷效果。(當然你也可以借助我之前提到的同屏工具來映像到移動設備上查看效果,但這個其實會很麻煩很麻煩很麻煩…)

但是到底是選160ppi還是135ppi呢?如果選了135ppi那在別人的電腦上會怎么樣呢?是不是又要重新調?其實不用,我借用另外一臺Retina的macbook pro做了相同的測試,你會發現,其實和屏幕ppi無關,而是和你在ps里設定的分辨率有關。

mobile-font6

[補充,有位專家指出我的不對,就是在點和px上我搞錯了,我又嘗試了一下,如果是px的話,不同ppi下字體大小是不變的,而點(pt)的話會有變化。

并且如果是用pt來代替px的話,為了整除方便,那么ppi一定要設置成72的倍數,比如144ppi,上圖里面160ppi則會除不盡,所以上圖其實160ppi的字體還是和截圖字體有些許差異。]

然后有專家提出,iOS下是用pt作為字體單位,而Android是以sp作為字體單位,而且web app還是以px作為字體單位。怎么樣讓設計和輸出單位是一致的?我之前給出的解決方案并不十分嚴謹易懂,所以我重新編輯了一下。

為了求證移動字號的問題,跑了一圈同事,最后只能暫時得出一些“不一定正確”的結論:

1. 字號行業標準幾乎沒有,不像web一樣,宋體12px、14px這樣很清楚。我唯一找到的只有Android的設計建議:

android_font

圖中原作者還換算了一下在240ppi下對應的px值。

而我問了一圈同事,基本上現在設定字號都是憑感覺做事的。當然你也可以參考Android這個標準。

2. 如何在電腦上快速預覽高清內容是否排版合理,我想到最簡單的一點就是縮放psd,縮放的比例很關鍵,要達到物理尺寸,首先你得知道你電腦的分辨率,我的分辨率是135ppi,如果要看分辨率是326的iphone上的效果,就縮小到135/326≈41.4%,你就會發現物理尺寸非常接近??梢钥纯匆恍┡虐嫔系膯栴}。當然你也可以裝一些工具來達到更好的效果。

3. 怎么和開發溝通你的字體大???我也沒有特別好的辦法,就簡單分成3塊來說:

  • iOS,你設計的時候字體記得用“點”,然后ps設定分辨率用標準的72ppi即可,因為據同事說,這樣下的pt值是準確的,或者說iOS自動會轉換這個值。具體也需要大家操作了才知道。而這個分辨率下1pt=1px,我簡單換算了一下sp->px->pt的尺寸:
1
2
3
4
5
6
12sp=24.45px=24.45pt;
14sp=28.52px=28.52pt;
18sp=36.67px=36.67pt;
22sp=44.88px=44.88pt;
但這個小數點實在難受,所以四舍五入取整數,并且為了保證可以整除,那么可以是24pt、28pt、36pt、44pt。</span>
  • Android,你就用標準sp就好了,當然其他圖片等尺寸你可以用dp來表述。
  • Web app,這個我也找不到答案,因為Web app還會涉及到響應式設計,而且前端會用em去表示字體比例。所以同樣,如果你用72ppi分辨率做的話,直接可以把對應的字號告訴開發就好了,當然最好你所用到的字號是倍數關系,最小倍數是0.25,這樣用em去做比例的時候會更容易些。比如12px、16px、24px、32px這樣。

有關字體字號的研究已經有同事在做,以后有結論了再和大家分享。

[以上都是本人自己瞎弄的,如果正確純屬偶然,所以請那些“笨蛋”閉嘴,我歡迎專業上的討論和交流,但不喜歡人品低下地謾罵。]

文章來源:Pre-alpha


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

術語和概念

Voila_Capture45

DPI值計算

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

dpi-dip21

圖1?

Diagonal pixel表示對角線的像素值(=dpi-dip223),DPI=933/3.7=252

手機屏幕的分類

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

dpi-dip22

圖2

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

Voila_Capture46

表1

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

dpi-dip2

圖3

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

UI設計

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

Voila_Capture47

表2

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

界面布局方面?

需要根據物理尺寸的大小準備5套布局

  1. layout: 放一些通用布局xml文件,比如界面中頂部和底部的布局,不會隨著屏幕大小變化,類似windos窗口的title bar
  2. layout-small: 屏幕尺寸小于3英寸左右的布局
  3. layout-normal: 屏幕尺寸小于4.5英寸左右
  4. layout-large: 4英寸-7英寸之間
  5. layout-xlarge: 7-10英寸之間

圖片資源方面

需要根據dpi值準備5套圖片資源:

  1. drawable
  2. drawalbe-ldpi
  3. drawable-mdpi
  4. drawable-hdpi
  5. drawable-xhdpi

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

via:www.suerb.com

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 完全看暈

    來自上海 回復
  2. ?

    來自北京 回復
  3. 給我一塊磚,我拍死自己吧… ??

    來自河南 回復
  4. ??

    來自安徽 回復
  5. 看了兩遍,感覺很懵 ?

    來自廣東 回復
  6. 我看睡著了。 ? ? ? ?

    來自北京 回復