DPI/PPI/dp/sp/px/pt 移動設計手冊
做移動設計的同學,不管是原生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的運算方式是: 舉個簡單的栗子,iphone5的ppi是多少?ppi=√(1136px2 + 640px2)/4 in=326ppi(視網膜Retina屏).這樣大家就能夠明白ppi和px的關系。 這里還提到in(英寸)這個詞,這個非常重要,因為現實中我們經常提到4英寸手機或者5.5英寸大屏手機,而這個尺寸是用戶真正感受到的物理大小,所有提到不同尺寸的屏幕不僅僅是分辨率或者像素,而更多的是英寸。 好,現在關鍵的來了,dp、sp、pt,是我們設計中的關鍵。 dp*ppi/160 = px sp 與 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。 好,我們再來看看,在電腦上直接截圖web頁之后對比的效果: 但我再截一下用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塊來說: 有關字體字號的研究已經有同事在做,以后有結論了再和大家分享。 [以上都是本人自己瞎弄的,如果正確純屬偶然,所以請那些“笨蛋”閉嘴,我歡迎專業上的討論和交流,但不喜歡人品低下地謾罵。] 文章來源:Pre-alpha 第二篇:Android手機UI設計分辨率基礎知識(DPI,DIP計算) 術語和概念 DPI值計算 比如:計算WVGA(800*480)分辨率,3.7英寸的密度DPI,如圖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的手機 從開發角度講,應用程序會根據3類Android手機屏幕提供3套UI布局文件,但是相應界面圖標也需要提供3套,如表2所示 表2 需要根據物理尺寸的大小準備5套布局 需要根據dpi值準備5套圖片資源: Android有個自動匹配機制去選擇對應的布局和圖片資源 via:www.suerb.com
比如1dp x 320ppi/160 = 2px
sp*ppi/160 = px我再來做個小小的實驗:
我用的都是arial 14點(注:專家指正這里不是px而是pt,點)的字體,但在320ppi、160ppi、135ppi(我自己的)以及標準72ppi下的大小,截然不同。
你會驚訝的發現,只有72ppi是正常的,其他字體都不對了,因為原本的web設計是不用考慮dp、sp或者ppi的,它是直接px作為物理單位的,而點在72ppi下(1pt x 1/72 x 72dpi=1px)是正常顯示的。所以我們以前做web的時候根本不用擔心自己的設計在別人電腦上看起來會很大或很小。當然其實像firefox是用96dpi,也就是9pt=12px。
手機屏幕的分類
UI設計
如何做到自適應屏幕大小呢?
界面布局方面?
圖片資源方面
完全看暈
?
給我一塊磚,我拍死自己吧… ??
??
看了兩遍,感覺很懵 ?
我看睡著了。 ? ? ? ?