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设置的误差，在手机平台上会被成倍的放大，为了避免笑话，还得认真努力研究它！