您的位置:首页> 日志> 视觉设计 正文
DTOP

APP用户界面设计基础

stillfish | 2013年09月29日 |

>>收藏本文 已有 1条评论

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