IOS和安卓ui设计常用尺寸及基本知识

用户头像
北京/设计爱好者/11年前/15356浏览
IOS和安卓ui设计常用尺寸及基本知识
用户头像
xxwangg

iPhone、iPad、Android UI常用设计尺寸

iOS app 图标的圆角半径是多少?

(注:现在IOS图标是不需要再画圆角了,直接方形就OK)

括弧里面是对应的半径大小

App store(Retina屏) ──1024px(160px)

iTunes Artwork icon ──512px (90px)

App icon(iPhone4s) ──114px (20px)

App icon(iPhone5s) ──120px(22px)

App icon(iPad) ──72px (12px)

App icon(iPhone 3G/3GS) ──57px(10px)

Spotlight/Settings icon icon(iPhone4) ──58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ── 29px (9px)


iPhone、iPad、Android UI常用设计尺寸

iPhone:

—————————————————————–

APPLE APP STORE ICON:512 x 512 PX  (圆角弧度80px)

iPhone 5 App Icon:120 x 120 PX   (圆角弧度22px)

iPhone 4 App Icon:114 x 114 PX  (圆角弧度20px)

iPhone 3GS App Icon:57 x 57 PX  (圆角弧度22px)

iPhone 5 326ppi 4英寸1136*640PX

iPhone 4 App UI:960 x 640PX (设计时,高度还需要减去状态栏40PX)

iPhone 3GS App UI:480x 320PX


iPhone界面尺寸

iPhone图标尺寸

iPad的设计尺寸

iPad界面尺寸

iPad图标尺寸

Android的设计尺寸

屏幕尺寸

指实际的物理尺寸,为屏幕对角线的测量。
为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。

像素(PX)

代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。

屏幕密度

为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。 为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。
于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。

典型的设计尺寸

• 320dp:一个普通的手机屏幕(240X320,320×480,480X800)
• 480dp:一个中间平板电脑像(480×800)
• 600dp:7寸平板电脑(600×1024)
• 720dp:10寸平板电脑(720×1280,800×1280)

 

类型:     xxhdpi         xhdpi        hdpi        mdpi            ldpi

ICON   144*144      96*96      72*72     48*48     36*36

Notification图标 48*48 32*32 24*24

标签Tab图标 48*48 32*32 24*24

随便说一下现在安卓设计稿尺寸设定:

一般PS新建 1080 x 1920的尺寸,也就是对应该安卓的xxhdpi ,所以切图也是放入程序中的xxhdpi文件夹 下。所以基本上一套图就可以了,如果时间充足,做多套尺寸的图自然没什么坏处。虽然只出大尺寸的图,但设计时一定好考虑好小屏幕适配问题,还要对部分切图进行调整重切,因为有些图等比缩小时会出现糊,或不好看的现象。

安卓的点九图 点9切法 查看这篇文章:http://www.miued.com/2074/

Android安卓系统dp/sp/px换算表

主流Android手机分辨率和尺寸


84
举报
|
195
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】体育icon
钱包ui模板
【新年UI图标】会员icon
【新年UI图标】钱包icon
UI界面 组件
UI通用设计素材1
科技医疗透明柜UI界面设计
手表表盘UI系列
新拟态风格 UI设计组件库
拟物风质感写实UI卡片合集源文件
智能家居中心 简约 UI设计组件库
【新年UI图标】旅行icon
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
【新年UI图标】30个图标
【新年UI图标】秒杀icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
UI 登录界面设计模板包
盲盒APP UI设计
【新年UI图标】礼物/活动icon
新能源APP应用UIKit
你可能喜欢
大家都在看
登录注册