APP用户界面设计基础.doc

(完整版)APP用户界面设计基础
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设置的误差，在手机平台上会被成倍的放大，为了避免笑话，还得认真努力研究它!