做移動(dòng)設(shè)計(jì)的同學(xué)，不管是原生app或者web app，應(yīng)該對(duì)字體字號(hào)都是很頭痛的問題。根本原因是，我們用唯一分辨率的電腦，設(shè)計(jì)各個(gè)不同尺寸大小分辨率的設(shè)備，那簡(jiǎn)直要瘋掉了。

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

我們一般會(huì)碰到的度量單位主要有：dpi、ppi、dp、sp、px、pt、in。其中，px應(yīng)該各位最熟悉的單位，也是我們主要使用的photoshop或者axure等工具用的度量單位，而它在移動(dòng)端時(shí)，的確已經(jīng)“過時(shí)”了。但不要著急把它丟掉，因?yàn)樗墙酉聛矸浅Ｖ匾膿Q算單位（所有手機(jī)參數(shù)還是用px在表達(dá)）。

dpi和ppi這兩個(gè)是密度單位，不是度量單位，而這兩個(gè)恰恰是我們換算中重要的分母。簡(jiǎn)單理解一下：

• ppi (pixels per inch)：圖像分辨率 （在圖像中，每英寸所包含的像素?cái)?shù)目）
• dpi (dots per inch)： 打印分辨率 （每英寸所能打印的點(diǎn)數(shù)，即打印精度）

dpi主要應(yīng)用于輸出，重點(diǎn)是打印設(shè)備上

我們?cè)谝苿?dòng)應(yīng)用中提到ppi和dpi其實(shí)都一樣（概念不同，但對(duì)設(shè)計(jì)來講沒有特別需要深入了解），所以我們先忽略掉dpi。而ppi的運(yùn)算方式是：

好，我們?cè)賮砜纯矗陔娔X上直接截圖web頁(yè)之后對(duì)比的效果：

你會(huì)驚訝的發(fā)現(xiàn)，只有72ppi是正常的，其他字體都不對(duì)了，因?yàn)樵镜膚eb設(shè)計(jì)是不用考慮dp、sp或者ppi的，它是直接px作為物理單位的，而點(diǎn)在72ppi下（1pt x 1/72 x 72dpi=1px）是正常顯示的。所以我們以前做web的時(shí)候根本不用擔(dān)心自己的設(shè)計(jì)在別人電腦上看起來會(huì)很大或很小。當(dāng)然其實(shí)像firefox是用96dpi，也就是9pt=12px。

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

好吧，這時(shí)候，你就發(fā)現(xiàn)72ppi是見鬼了，因?yàn)檫@個(gè)字體在手機(jī)上看到完全地小了，所以做移動(dòng)設(shè)計(jì)不要傻乎乎地還用72ppi了，不然你很難判斷效果。（當(dāng)然你也可以借助我之前提到的同屏工具來映像到移動(dòng)設(shè)備上查看效果，但這個(gè)其實(shí)會(huì)很麻煩很麻煩很麻煩…）

但是到底是選160ppi還是135ppi呢？如果選了135ppi那在別人的電腦上會(huì)怎么樣呢？是不是又要重新調(diào)？其實(shí)不用，我借用另外一臺(tái)Retina的macbook pro做了相同的測(cè)試，你會(huì)發(fā)現(xiàn)，其實(shí)和屏幕ppi無關(guān)，而是和你在ps里設(shè)定的分辨率有關(guān)。

[補(bǔ)充，有位專家指出我的不對(duì)，就是在點(diǎn)和px上我搞錯(cuò)了，我又嘗試了一下，如果是px的話，不同ppi下字體大小是不變的，而點(diǎn)（pt）的話會(huì)有變化。

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

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

為了求證移動(dòng)字號(hào)的問題，跑了一圈同事，最后只能暫時(shí)得出一些“不一定正確”的結(jié)論：

1. 字號(hào)行業(yè)標(biāo)準(zhǔn)幾乎沒有，不像web一樣，宋體12px、14px這樣很清楚。我唯一找到的只有Android的設(shè)計(jì)建議：

圖中原作者還換算了一下在240ppi下對(duì)應(yīng)的px值。

而我問了一圈同事，基本上現(xiàn)在設(shè)定字號(hào)都是憑感覺做事的。當(dāng)然你也可以參考Android這個(gè)標(biāo)準(zhǔn)。

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

3. 怎么和開發(fā)溝通你的字體大?。课乙矝]有特別好的辦法，就簡(jiǎn)單分成3塊來說：

• iOS，你設(shè)計(jì)的時(shí)候字體記得用“點(diǎn)”，然后ps設(shè)定分辨率用標(biāo)準(zhǔn)的72ppi即可，因?yàn)閾?jù)同事說，這樣下的pt值是準(zhǔn)確的，或者說iOS自動(dòng)會(huì)轉(zhuǎn)換這個(gè)值。具體也需要大家操作了才知道。而這個(gè)分辨率下1pt=1px，我簡(jiǎn)單換算了一下sp->px->pt的尺寸：

• Android，你就用標(biāo)準(zhǔn)sp就好了，當(dāng)然其他圖片等尺寸你可以用dp來表述。
• Web app，這個(gè)我也找不到答案，因?yàn)閃eb app還會(huì)涉及到響應(yīng)式設(shè)計(jì)，而且前端會(huì)用em去表示字體比例。所以同樣，如果你用72ppi分辨率做的話，直接可以把對(duì)應(yīng)的字號(hào)告訴開發(fā)就好了，當(dāng)然最好你所用到的字號(hào)是倍數(shù)關(guān)系，最小倍數(shù)是0.25，這樣用em去做比例的時(shí)候會(huì)更容易些。比如12px、16px、24px、32px這樣。

有關(guān)字體字號(hào)的研究已經(jīng)有同事在做，以后有結(jié)論了再和大家分享。

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

文章來源：Pre-alpha

第二篇：Android手機(jī)UI設(shè)計(jì)分辨率基礎(chǔ)知識(shí)（DPI,DIP計(jì)算）

術(shù)語(yǔ)和概念

DPI值計(jì)算

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

圖1?

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

手機(jī)屏幕的分類

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

圖2

手機(jī)屏幕分類和像素密度的對(duì)應(yīng)關(guān)系如表1所示：

表1

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

圖3

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

UI設(shè)計(jì)

從開發(fā)角度講，應(yīng)用程序會(huì)根據(jù)3類Android手機(jī)屏幕提供3套UI布局文件，但是相應(yīng)界面圖標(biāo)也需要提供3套，如表2所示

表2

如何做到自適應(yīng)屏幕大小呢？

界面布局方面?

需要根據(jù)物理尺寸的大小準(zhǔn)備5套布局

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

圖片資源方面

需要根據(jù)dpi值準(zhǔn)備5套圖片資源:

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

Android有個(gè)自動(dòng)匹配機(jī)制去選擇對(duì)應(yīng)的布局和圖片資源

via:www.suerb.com