做移動設計的同學，不管是原生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的運算方式是：

好，我們再來看看，在電腦上直接截圖web頁之后對比的效果：

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

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

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

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

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

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

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

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

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

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

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

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

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

• iOS，你設計的時候字體記得用“點”，然后ps設定分辨率用標準的72ppi即可，因為據同事說，這樣下的pt值是準確的，或者說iOS自動會轉換這個值。具體也需要大家操作了才知道。而這個分辨率下1pt=1px，我簡單換算了一下sp->px->pt的尺寸：

• Android，你就用標準sp就好了，當然其他圖片等尺寸你可以用dp來表述。
• Web app，這個我也找不到答案，因為Web app還會涉及到響應式設計，而且前端會用em去表示字體比例。所以同樣，如果你用72ppi分辨率做的話，直接可以把對應的字號告訴開發就好了，當然最好你所用到的字號是倍數關系，最小倍數是0.25，這樣用em去做比例的時候會更容易些。比如12px、16px、24px、32px這樣。

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

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

文章來源：Pre-alpha

第二篇：Android手機UI設計分辨率基礎知識（DPI,DIP計算）

術語和概念

DPI值計算

比如：計算WVGA（800*480）分辨率，3.7英寸的密度DPI，如圖1所示

圖1?

Diagonal pixel表示對角線的像素值（=），DPI=933/3.7=252

手機屏幕的分類

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

圖2

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

表1

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

圖3

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

UI設計

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

表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