做移动设计的同学，不管是原生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