本文目录一览:
- 1、App 安卓720*1280的状态栏、分别是50、96、96,那么1080x1920的呢?
- 2、iPhone各个控件尺寸
- 3、android app界面设计规范(dpi,dp,px等)
- 4、华为nova7状态栏是多大的像素
App 安卓720*1280的状态栏、分别是50、96、96,那么1080x1920的呢?
Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 。
注意,ppi、dpi 是密度单位,不是度量单位 :
* ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)
* dpi (dots per inch): 打印分辨率 (每英寸所能打印的点数,即打印精度)
dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。-手机通知栏像素
ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数。即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。
以iphone5为例,其ppi=√(1136px² + 640px²)/4 in=326ppi(视网膜Retina屏)
对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (xhdpi模式),480 x 800 的手机很可能接近 240 dpi (hdpi模式),而320 x 480 的手机则很接近 160 dpi(mdpi模式)。-手机通知栏像素
来自友盟指数2014年3月份的数据( 戳这里看最新数据 ):
480 x 800的手机占比最高为31.9%,720 x 1280的手机占比为16.5%位居第二,而240 x 320的手机占比最少为1.0% 。xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高,目前为6.1% 。-手机通知栏像素
2、单位换算方法
android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。
* dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。dp和px的换算公式 :dp*ppi/160 = px。对于320ppi的屏幕,1dp x 320ppi/160 = 2px。 -手机通知栏像素
* sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。sp 与 px 的换算公式:sp*ppi/160 = px。对于320ppi的屏幕,1sp x 320ppi/160 = 2px。-手机通知栏像素
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。
为什么要把sp和dp代替px? 原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。
根据单位换算方法,可总结出:
当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;
当运行在hdpi模式下时,1dp=1.5px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;
当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;
当你的app需要适配多个dpi模式的时候,请参考图1的比例进行换算 。
3、设计稿基本元素的尺寸设置
为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。但在实际开发中,这种方法耗时耗力。所以通常会选择折中的方法。
方法一: 在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二: 以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位, 推荐设计稿的画布尺寸选用 720X1280 ,分辨率仍旧为72ppi(像素/英寸) 。
在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求:
状态栏高度: 50 px
导航栏、操作栏高度: 96 px=48dp x 2
主菜单栏高度: 96 px
内容区域高度: 1038 px (1280-50-96-96=1038)
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px
4、图标和字体大小(来自官方规范文档)
a、启动图标(home页或app列表页)
整体大小为48 x 48 dp
b、操作栏图标,代表用户在app中可以使用到的最重要的图标
整体大小为32 x 32 dp ,图形实际区域为 24 x 24 dp
c、小图标/场景图标,提供操作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ,图形实际区域为 12 x 12 dp 。
d、通知图标
如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ,图形实际区域为 22 x 22 dp 。
注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px
iPhone各个控件尺寸
1.状态栏
状态栏一般高度为20像素,在打手机或者显示消息时会放大到40像素高,注意,两倍高度的状态栏在好像只能在纵向的模式下使用。如下图
用户可以隐藏状态栏,也可以将状态栏设置为灰色,黑色或者半透明的黑色。
如果需要隐藏状态栏可以使用调用:
[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
或者在应用程序文件Info.plist中将UIStatusBarHidden键设为ture。
2.导航栏
在纵向模式下导航栏为44像素高,在横向模式下为32像素高,导航栏提供了一个很少用的提示模式,该模式将高度扩展了30像素,在纵向模式下为320 74像素,在横向模式下为480 74像素。
要向导航栏添加提示,则设置self.navigationItem.prompt = @"................"。
3.选项卡 工具栏
选项卡为48像素高,工具栏为44像素高。此两个UI元素通长不用于横向模式。
典型的带有导航栏和状态栏的应用程序为纵向显示保留了320 416的区域,为横向保留了480 268的区域。如果使用选项卡栏或者工具栏则会使高度再次减少48或者44像素。
4.键盘和pickerView
此一般都为横向320 216像素,纵向为480 162像素。
另外,UISwitch默认为94*28像素,UISegmentedControl通长为44像素高。
UITextField高度一般至少为30像素。
5.UIScreen类
[[UIScreen mainScreen] applicationFrame]一般会根据正在使用的工具栏,状态栏,导航栏来返回可用的区域。
iPhone和iPad下各种常见控件的宽度和标准是一样的,所以这里就用iPhone说明。
以下是常见的几种控件的高度。Statusbar,Navigationbar和Tabbar的宽度极其图标大小。
下表是更为详细的参数,包括了Statusbar,Navigationbar、Tabbar、toolbar和Keyboard等等
状态栏:20
导航栏:44
底部tabbar:49
iphoneX状态栏:44
iphoneX底部安全区域:34
//宽度和高度
android app界面设计规范(dpi,dp,px等)
PPI(Pixels per inch):每英寸所拥有的像素数,即像素密度。
DPI(dots per inch):即每英寸上,所能印刷的网点数,一般称为像素密度。ppi计算公式:ppi = 屏幕对角线像素数/屏幕对角线英寸数,通过勾股定理计算屏幕对角线像素数。
Screen Size(屏幕尺寸):手机屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是对角线的长度。
DIP(device independent pixel):即dip/dp,设备独立像素。 1px = 1dp density(由dpi决定)
Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800,指该设备垂直方向有800个像素点,水平方向有480个像素点。
px(Pixel像素):相同像素的ui,在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真,大分辨率上被缩小。
Android Design里把主流设备的 dpi 归成了四个档次: 120 dpi、160 dpi、240 dpi、320 dpi ,具体见如下表格。
实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。-手机通知栏像素
也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。鉴于以上各种原因, 标准dpi=160 -手机通知栏像素
谷歌官方对dp的解释如下:
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.-手机通知栏像素
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.-手机通知栏像素
简单来说,以160dpi的设备为准,该设备上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2个像素)。在app开发时,最好用dp来做界面的布局,以保证适配不同屏幕密度的手机。-手机通知栏像素
dp和px的换算公式:
我的理解,该公式表示px的数值等于dp的数值*(设备dpi/160)
注意,px、dp是单位,但density没单位。
applyDimension的源码如下,可参考:
android的尺寸众多,建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。-手机通知栏像素
app启动图标为48*48dp,对应各dpi设备,图像资源像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|
操作栏图标为32*32dp,对应各dpi设备,图像资源像素如下:其中图形区域尺寸是24*24dp,可参考平时ui切图会有部分留白。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|
通知栏图标为24*24dp,对应各dpi设备,图标像素如下:
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|
某些场景需要用到小图标,大小应当是16*16dp,其中图形区域尺寸12*12dp。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|
华为nova7状态栏是多大的像素
华为nova7的像素:后置摄像头6400万像素高清摄像头+800万像素超广角摄像头+800万像素长焦摄像头+200万像素微距摄像头,支持自动对焦。前置摄像头3200万像素,支持固定焦距,拍照更加细腻,更加清晰。-手机通知栏像素