最近在研究移動端的設(shè)計規(guī)范問題，在網(wǎng)上找到的大多設(shè)計規(guī)范并沒有一個對字號在不同設(shè)備下的說明，然而移動端的出現(xiàn)，web端設(shè)計規(guī)范對于字號的規(guī)定已經(jīng)不再適用于移動端。所以我做了一些基本了解，寫下這篇文章，希望能幫到一些朋友。

---

先了解一下，對不同的單位定義

px : 最常用，也是接觸的最基本的度量單位，但是移動端并不使用這個單位作為字號的單位，但是依舊是最重要的一個換算單位；

pt : 全稱point,中文意思為“點”，也有翻譯叫“磅”，注意！劃重點：iOS中的pt單位和Photoshop中的pt單位概念相同，但是并不等價。 簡單理解，Photoshop中的pt是用來映射印刷設(shè)備，1pt印刷出來是1/72 inch（inch理解為 英寸，物理尺寸）；iOS的pt主要用來映射屏幕，為iOS開發(fā)基準單位；

dp : 全稱density-independent pixel與密度無關(guān)的像素，一種基于屏幕密度的抽象單位。在每英寸160點（160ppi）的顯示屏上面，1dp = 1px；

dp 與 px 的換算公式：dp * ppi / 160 = px 。比如1dp x 320ppi/160 = 2px。

sp : 全稱scale-independent pixel，與刻度無關(guān)的像素（官方直譯：可縮放像素）與dp類似，是安卓的字體單位，在每英寸160點（160ppi）的顯示屏上面，1 dp = 1 px ；

sp 與 px 的換算公式：sp * ppi / 160 = px 。比如 1sp x 320ppi/160 = 2px。

---

現(xiàn)在我們接著說密度單位：

      上面剛剛提到了ppi這個概念，ppi（pixels per inch）：圖像分辨率（在圖像中，每英寸所包含的像素數(shù)目），說白了就是每英寸物理屏幕上面有多少個點，點越多圖像就越細膩，點越少圖像越模糊，可以腦補一下非智能機時期的手機屏幕和iPhone X的屏幕對比，圖像顯示差異的原因就是在于iPhone X每英寸物理屏幕上的點比非智能手機時期的手機多得多（但是這里只是為了更容易了解ppi這個概念，每家公司對屏幕的校色不同，會有色彩差異）；

    （其實Android沒有ppi這個概念，對應(yīng)的是Device pixel ratio，翻譯過來就是屏幕密度，兩者是相等的，但是大部分Android工程師們基本上不會跟設(shè)計說這個，容易說多了反而亂套，讓設(shè)計師們不知所云）

      還有一個單位是dpi（dots per inch）：打印分辨率（每英寸所能打印的點數(shù)，即打印精度），主要是應(yīng)用于輸出，重點在打印設(shè)備，就是PS創(chuàng)建新的文檔所指示的分辨率。（可以去ps上新建文件，然后在參數(shù)中找到分辨率，正常網(wǎng)頁都是72/印刷可能會用到144或者300等其他不同分辨率）

      我們在移動應(yīng)用中提到的ppi和dpi其實都一樣，只是概念不同，這里只說移動端，所以忽略dpi，只聊ppi：

ppi = √（長度像素數(shù)2 + 寬度像素數(shù)2） / 屏幕對角線英寸數(shù)

      舉個例子：iPhone 8的ppi是多少

ppi = √（13342+7502）/ 4.7 in =325.61228322... ≈ 326ppi

      這里就表示了ppi和px的關(guān)系。（公式里面有一個4.7 in這個數(shù)，in在這里代表英寸，指的是用戶感受到的手機屏幕真正的物理尺寸大小）

---

說了這么多：

現(xiàn)在說一些設(shè)計相關(guān)的關(guān)鍵內(nèi)容：

上面了解了px\pt\dp\sp的概念，還有ppi和dpi的概念，以及ppi與px的關(guān)系。

那么，px\pt\dp\sp之間的關(guān)系應(yīng)該如何換算呢？

核心依舊在于px，我們設(shè)計的時候依舊使用px為基礎(chǔ)媒介進行換算（開發(fā)哥哥也這么算）

iOS部分

      iOS開發(fā)只有一個單位，pt，我們現(xiàn)在做移動端設(shè)計使用sketch的比較多，在它的設(shè)計模板里面，iPhone 8中的設(shè)計尺寸為375*667，屬于邏輯分辨率，實際設(shè)備分辨率為750*1334，ppi為326，物理尺寸為4 inch，我們設(shè)計不需要管這么多，只需要明白，在375*667尺寸下 ：1 px = 1 pt。

      現(xiàn)在iPhone X出現(xiàn)后，設(shè)備渲染后分辨率為1125*2436，邏輯分辨率為375*812，ppi為258。這就意味著，除去下巴的功能區(qū)域，iPhone X與4.7 inch的iPhone 8同寬，但是高度多了145pt，導(dǎo)致垂直高度多出了大約20%，對設(shè)計的布局有所影響，對于字號沒有影響，但是由于我們所知的ppi并不是完整的準確，而是一個約等的數(shù)字，從嚴密的理論角度來說，我們最后所在iOS設(shè)備上所見到的并不是精準完美還原的設(shè)計稿，但是這些細微的差異在如此高分辨率下肉眼幾乎不可見。簡單點就是不用管它。

      iOS11的設(shè)計規(guī)范中，在官方提供的字體前提下，給出了一些字號、行距、字距的建議，基于動態(tài)類型大小尺寸，一共提供了七種不同的視覺需求下的不同字號大小，而且針對一些具有應(yīng)用需求的用戶提供了更大的字號類型，一共五種。這里我只列出默認尺寸的推薦字號大?。?/p>

類型	字重	字號（pt）	行距（pt）	字距（pt）
大標題	常規(guī)	34	41	11
一級標題	常規(guī)	28	34	13
二級標題	常規(guī)	22	28	16
三級標題	常規(guī)	20	25	19
內(nèi)容提要	半粗體	17	22	-24
正文	常規(guī)	17	22	-24
插圖編號	常規(guī)	16	21	-20
副標題	常規(guī)	15	20	-16
腳注	常規(guī)	13	18	-6
一級說明文字	常規(guī)	12	16	0
二級說明文字	常規(guī)	11	13	6

這是iOS11官方設(shè)計規(guī)范文檔中，默認字體字號尺寸的建議，更多排版內(nèi)容內(nèi)容詳見iOS11視覺規(guī)范-排版

（至于如何在設(shè)計稿中進行換算應(yīng)用上文已經(jīng)提到，不在此多做贅述）

Android部分

      Android有兩個單位，一個是dp，一個是sp，它們與px之間的換算公式是一樣的，但是Android標準是sp用來作為字號尺寸單位主要用于字體顯示best for textsize，dp用來作為其他圖片等內(nèi)容的單位。

      關(guān)于sp的文檔描述：Scale-independent Pixels – This is like the dp unit, but it is also scaled by the user’s font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user’s preference.

sp除了受屏幕ppi影響意外，還受到用戶的字體大小影響，通常情況下，建議使用sp來跟隨用戶字體大小設(shè)置。直觀表現(xiàn)就是，sp作為字體大小單位，會隨著系統(tǒng)的字體大小而進行改變，但是dp不會。

      Android和iPhone最大的差別在于，Android機型種類繁多，平臺多樣化，主流的屏幕尺寸有hdpi(480*800) \ xhdpi(720*1280) \ xxhdpi(1080*1920)。在xhdpi下，設(shè)計稿尺寸為720*1280，那么：1 px = 0.5 sp = 0.5 dp。

      

      不準確的說法，可以直接當成iPhone的@2x圖來理解，還有一個 sp / dp / px 在線轉(zhuǎn)換工具 可以看看，動手換算一下，加深理解?，F(xiàn)在還沒有辦法可以讓開發(fā)絕對精準的還原每一個點，因為對于多端多平臺的Android來說，顯然這是個不太可能，但是我們明白原理以后可以在最大程度上，在更多屏幕尺寸下還原一個肉眼無差別設(shè)計稿，并且在設(shè)計的時候有一個基礎(chǔ)字號守則。

      在Material design中，官方對于風(fēng)格版式有一些指南，音文字體為Roboto（6種字重）、中文為Noto（7種字重），官方給出的最基本的樣式集合就是基于 12、14、16、20 和 34 sp的字體排版縮放，盡量避免奇數(shù)和小數(shù)，容易造成精度丟失，小于12sp的字體會太小導(dǎo)致用戶看不清楚。更多字體字號的內(nèi)容請參考官方material design文檔。

---

web APP部分

      web APP下段落字體仍然使用px為單位，因為更大的屏幕是為了展示更多的內(nèi)容，段落字號只要是一個適合閱讀的大小就可以，當然會有一些特殊的需求，比如標題之類的內(nèi)容，可能會使用em來表示字體比例，當然最好你所用到的字號是倍數(shù)關(guān)系，最小倍數(shù)是0.25，這樣用em去做比例的時候會更容易些。

      對于設(shè)計稿畫布的尺寸選擇，通常只考慮寬度，可以設(shè)置為640、720、750、1080之類的寬度，盡量提前和開發(fā)溝通好，他們習(xí)慣使用哪種寬度進行開發(fā)，然后用正常的px標注發(fā)給開發(fā)就可以了。

      最終，了解這些內(nèi)容，一方面是為了讓自己在做設(shè)計的時候保持心中有數(shù)，也在一定程度上滿足和開發(fā)的無障礙溝通，和工程師大牛們有一個愉快且流暢的交流。

引用：

iOS11 人機界面指南  https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

material desgin官方設(shè)計文檔  https://material.io/

還有一個不錯的關(guān)于web APP參考的文章 https://github.com/xwcoder/xwcoder.github.com/issues/8