APP 用户界面设计基础
1、各设计部尺寸标准一览
为了避免在首页 UI 设计时出现不必要的麻烦，如设计
尺寸错误而导致显示不正常的情况发生，设备尺寸的标准
如单位，分辨率，密度等）都是我们必须了解清楚的。
图 1 手机屏幕各类参数
首先让我们来看图 1 所示。如果没有接触过手机界面
设计，对下图中的各种数值很可能会一头雾水， Inch 是什么？ 320X480 代表什么？ DPI 又是什么单位？ HDPI 和 MDPI 又分 内容。
1)英寸 (Inch)
英寸其实就是我们常说的长度单位， 14 寸笔记本电
脑，30 寸纯平彩电， 指的就是屏幕对角的长度， 如图 2 所示， 手机屏幕也沿用这个概念。
图 2 图解英寸概念
2）分辨率
分辨率是屏幕物理像素的综合，一般用屏宽像素数
480px*800px ， 320px*480px 等，
别代表什么呢？下面我们来 介绍这些设备尺寸相关的 以屏高像素数来表示，比如
像素是显示屏规范中的最小单位。
图3 分辨率示意图
图4 像素示意图
图3 所示是一张分辨率为420px*320px 的图片，把
它放大后，所见图片就变成图4 所示这种全是正方形格子，而每个正方形格子就代表一个像素。这些格子数是有规律的，如果您有兴趣去数一下，屏宽的格子数为420 个，屏高的格子数为320 个，也就是分辨率的宽与高。
3）网点密度（DPI ）
屏幕物理面积内所含的像素数，通过DPI （每英寸
点数）来计算，图1所示的252DPI 和180DPI 就是指每英寸点数为252 和180。
DPI 越高，显示的画面质量就越精细，在一般屏幕
设计师上追求高DPI 显示画面质感，但在手机UI 设计时，
DPI 要与相应手机相匹配，因为低分辨率的手机无法满足高
DPI 图片对手机硬件的要求，显示的效果反而会变得糟糕，所以就涉及了一个新的名词-屏幕密度
4）屏幕密度
屏幕密度分为DPI （低）,MDPI （中等）,HDPI （高）,
XHDPI（特高）四种。
图5 屏幕密度一览表
图5 中分成了屏幕密度和屏幕大小两个维度。与屏
幕密度对应的，屏幕大小也分为四种：小屏( small screen)、
普屏(normal screen)、大屏(Large screen)、超大屏(Extra Large screen)。
拿出手机，根据分辨率看它属于哪种屏幕大小从而
推导出应该采用的屏幕密度，假设我的手机分辨率为
320X480 ，可以看到对应320X480 (即HVGA )分辨率屏幕大小的只有普屏，通过图表反查可知，适用于Mdpi 屏幕密度，如果我要做适合我的手机应用，就要选择MDPI 屏幕密度来进行设计。
我们都知道一些设备已经有高像密度屏幕，而且我
们将看到越来越多的DPI 移动设备，我们也将很可能看到高
DPI 的桌面和笔记本计算机-windows ，mac 和web 将一起跟上移动设备的潮流。我们正在变革中，旧的，低的PPI 屏幕还会存在一段时间，所以不管低DPI 和高DPI 屏幕都需要兼容。
对于IOS 设备来讲，苹果已经为原生IOS 开发设置了
两个屏幕密度，就是两套的UI 尺度，新屏幕的像素密度比上一代设备增加了整一倍，对于IPHONE, 早期只有163DPI ，而IPHONE4 及后续机型的Retina 屏幕则拥有326DPI ，
而android 和IOS 类似，它有四个像素密度，android
提供120DPI （低密度），160DPI （中密度），240DPI （高密度）和320DPI （超高密度），所有用户界面都是基于四个密度之
的尺寸来设计的。要支持所有4 个密度，是很悲剧的。如果一开始是以160DPI 来设计，那么你就需要扩展这些密度到100%、150%和200%。
2、各密度版本效果及参数展示
各密度版本效果及参数展示这些数值就是在photoshop 设计中需要用到的，我们新建个photoshop 文档时，在分辨率一栏，选择像素/ 英寸模式，再在前面输入框中输入相应的屏幕密度数即可。
我们可以在图上发现括号中的屏幕密度数值，其实
新建文档的各参数设置
不过这样就出现了一个麻烦的问题，假如一个app
有50 张图要设计，每张图要生成4 种不同版本，也就是50x4
等于200 张，意味着工作量巨大，新建200 次分辨率文档，而且还得将图片内容不停地缩放大小，对于设计师来讲完全就是一种折磨。
这个问题应该怎么解决呢？建议从最基准的分辨
率-160DPI开始设计，设计完成后，按75%、150%、200%
的缩放比例将图片缩小或扩大。
缩放比例的调整
与android 相比，iphone 对密度版本的数量要求就
没那么恐怖了，目前iphone 仅两种设计尺寸，480px*320px
和960px*480px ，而Mdpi 密度就可以满足要求了。
总结：手机在进行UI 设计时，对设计参数的要求较一般WEB
设计更严格。正如WEB 会因各种浏览器版本不同，而要讲求兼容性一样，手机UI 要根据手机型号，屏幕大小等各方
面因素来进行综合考虑，但是web 上的一个像素的误差，非在手机平台上会被成倍的放大，为了避免笑话，还得认真努力研究它！
专业人士很难发现，而手机则不同，dpi 设置的误差，
