APP切图详细规范终极指南

用户头像
大连/网页设计师/7年前/301浏览
APP切图详细规范终极指南
用户头像
张莹

一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x、2x、3x 图档,Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。

ios切图尺寸规则

目 前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样” (Downsampling)(1080-1920),还有iPhone6和6+上的放大模式(1125-2001)和默认模式(1242-2208), 是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~

美术交付给开发的资料有
1、  标注图(以640为宽度尺寸为基准标注)
2、  2x切图(以640为宽度尺寸为基准切图)
3、  3x切图(以1280为宽度尺寸为基准切图)

Android切图尺寸规则

px(像素)是我们UI设计师在PS里使用的(不解释),同时也是手机屏幕上所显示的(也不解释)
dp是开发写layout的时候使用的尺寸单位,sp是开发写layout时关于字体的字号单位,且dp与sp总为1:1关系。

Android支持四种不同的dpi模式:ldpi mdpi hdpi xhdpi xxhdpi

一般地,手机分辨率与所运行的dpi模式是匹配的,例如 hvga(320×480像素)的手机屏幕一般在3.5英寸左右,运行在mdpi模式下(也有例外,稍后解释)(这个是ROM控制的,app不能改变)。 当运行在mdpi下时,1dp=1px:也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp;Photoshop中 14px大的字体,开发会定义为14sp。

对于一部wvga(480×800)手机(G7、N1、NS),一般是运行在 hdpi模式下。当运行在hdpi模式下时,1dp=1.5px:也就是说设计师在PS里定义一个item高72px,开发就会定义该item高 48dp;Photoshop中21px大的字体,开发会定义为14sp。

所以,当你的app需要适配多个dpi模式的时候(例如同时适配mdpi与 hdpi),若你在wvga下做设计,你需要将你的各数值都为3的倍数,并在切图标注时将所有的数字除以3乘以2换算成dp,这样开发的同一套 layout就能用在两个不同的dpi模式下,而不是写两套layout。

mdpi与hdpi是2:3的关系
mdpi与xhdpi是1:2的关系
ldpi与mdpi是3:4的关系

Galaxy Nexus 是720P屏幕,就是运行在xhdpi下的。

此文章为部分转载,查看详细请点击原文链接

2
阅读原文
|
举报
|
4
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】秒杀icon
手表表盘UI系列
高级感金属拟物 UI设计组件库
拟物风质感写实UI卡片合集源文件
UI_3D图标“一本秘籍”(源文件
UI界面 组件
Security Camera UI kit
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】会员icon
【新年UI图标】汽车icon
【新年UI图标】影音icon
盲盒APP UI设计
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
钱包ui模板
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
【新年UI图标】游戏/娱乐icon
UI通用设计素材1
新能源APP应用UIKit
【新年UI图标】30个图标
3D渐变流体抽象矢量UI背景图
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
你可能喜欢
大家都在看
登录注册