APP开发实战6-APP的切图工作

2.2APP的切图工作

最理想的情况是设计师给iOS APP和Android APP设计两套图片,实际中,设计师大都使用iPhone手机,没用过Android手机,且为了节约资源,设计师通常只按iOS APP的要求提供设计切图和标注尺寸。

以下是iPhone手机的屏幕尺寸和像素密度:


设备


屏幕尺寸


Reader


分辨率(px)


像素密度值


iPhone 3GS


3.5寸


@1x


320x480


163


iPhone 4/4s


3.5寸


@2x


640x960


330


iPhone 5/5s/5c


4.0寸


@2x


640x1136


326


iPhone 6


4.7寸


@2x


750x1334


326


iPhone6 Plus


5.5寸


@3x


1242x2208


401

iPhone手机最小的分辨率是320x480,把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(@1x),其余机型使用的图标按像素密度值与基准尺寸的像素密度值的倍数定为2倍图和3倍图。

屏幕像素密度是指每英寸上的像素点数,单位是DPI,是“Dot Per Inch”的缩写;PPI是“Pixel Per Inch”的缩写,每英寸像素数;针对显示器的设计时,DPI=PPI。

计算方法是长宽的像素各自平方之和开方,除以对角线长度(单位英寸),如iPhone 5的DPI为√ (640^2 + 1136^2) / 4 =326。

Android将屏幕大小分为四个级别:

Small--屏幕尺寸小于3英寸左右

Normal--屏幕尺寸小于4.5英寸左右

Large--屏幕尺寸4英寸-7英寸之间

xLarge--屏幕尺寸7-10英寸之间

(http://developer.android.com/guide/practices/screens_support.html)

屏幕像素密度与屏幕尺寸和屏幕分辨率有关:屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

Android的屏幕尺寸和像素密度如下表所示:


 


Low density (120), ldpi


Medium density (160), mdpi


High density (240), hdpi


Extra-high-density (320), xhdpi


Smallscreen


QVGA (240x320)


 


480x640


 


Normalscreen


WQVGA400 (240x400)


HVGA (320x480)


WVGA800 (480x800)


640x960


WQVGA432 (240x432)


WVGA854 (480x854)


 


600x1024


Largescreen


WVGA800** (480x800)


WVGA800* (480x800)


 


720x1280


WVGA854** (480x854)


WVGA854* (480x854)


 


600x1024


Extra-Largescreen


1024x600


WXGA (1280x800)?


1536x1152


2048x1536


1024x768


1920x1152


2560x1536


1280x768


1920x1200


2560x1600

(其中的XHDPI按屏幕尺寸为4.5寸计算,DPI为√ (720^2 + 1280^2) / 4.5 = 326,约为320;XXHDPI的DPI值为480)

iOS APP中通常内置两套图片@2x和@3x,而Android APP中通常只内置一套XHDPI的图片;XHDPI对应的分辨率和iPhone5系列的分辨率最接近(像素密度一样),所以设计师可以按iPhone5系列的分辨率做一套@2x的切图,在Android APP中把@2x的图片放在drawable-xhdpi文件夹中就可以了(在4.5寸720x1280的手机上适配效果最好,像素密度一样)。

时间: 2024-07-31 13:24:30

APP开发实战6-APP的切图工作的相关文章

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

入门移动端混合开发 实战京东 APP

第1章 课程介绍本章主要是向你介绍什么是混合开发,以及目前混合开发中的几种方案. 第2章 Hybrid 技术原理本章主要讲解 hybrid 技术原理与核心本质,让你对混合开发有更清楚的认识. 第3章 开发前的准备本章主要讲解核心代码开发前的准备知识,比如 Flex 布局.webpack 和 @vue/cli 的基础知识.scss 的基本应用和项目的初始化内容. 第4章 京东商城首页(上)本章主要使用 vue 开发商城首页,包括组件化思想.动态组件和异步组件的应用.axios的使用.swiper

最佳App开发模式–在App创业之路上助你一臂之力

最佳App开发模式–在App创业之路上助你一臂之力 活动概况 时间:2015年03月07日14:00-17:30 地点:车库咖啡(北京市海淀西大街48号鑫鼎宾馆二层) 主办:APICloud.美洽 网址:www.apicloud.com 费用:免费 活动背景 现在是一个全民创业的时代.很多创业者都选择了App创业这个渠道,将自己的idea付诸实践.对于资源有限的创业者来说,如何避开App开发道路上的那些坑,选择最佳的解决方案,快速.高效地开发App并占领市场? App推出以后,与用户维持良好的关

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H

APP开发实战5-APP产品和设计人员的工作

(34)在许多APP,尤其是电商APP中,会在购物车.订单或消息图标的右上角设计一个数字角标,显示购物车中的商品数量.订单个数或消息个数. 通常会把角标区域设计成圆形,如果数量不到100时,可以正常显示,超过100,变成3位或4位数时,往往就显示不下了.解决方案: A数字超过100时,显示99+. B 改变角标区域的形状. (35)大多数APP中的许多功能需要在登录状态才能正常使用,目前许多APP都把注销登录的按钮设计在比较深的界面,以让用户一直保持登录状态.如果用户很容易看见注销按钮,那退出登

Native App开发 与Web App开发(原生与web开发优缺点)

Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素.数据内容.逻辑框架均安装在手机终端上. Web App开发 Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份

社交直播APP开发 社交直播APP发展方向

互联网时代,视频直播app开发改变了人们的生活波澜.司科了解到2018年6月份视频直播的用户已经达到80万,视频直播app已成为目前最火的社交方式了,并将持续升温. 社交直播能够带来什么? 社交性和互动性是必不可少的,社交直播互动性更强,主播只需与一个观众互动,相对来说也轻松不少,其次是私密性,社交直播的形式更具私密性,内容只有主播和观众知道,后台起到监管作用,能够带来更加优质的内容. 社交直播需要有哪些功能? 社交直播也不仅仅限于"直播",也需要有其他的功能: (1)私信功能:私信功

前端开发工程师必备JS技能-切图

/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的PSD文件中提取素材 2.对PS有一定的了解 3.对审美有一定的提高 *******************************************/ 学习内容: 1.网页设计中初始化尺寸参数和一些快捷键. 2.选择和移动元素. 3.常见的Web切图界面设置.

APP开发实战3-APP产品和设计人员的工作

(12)在登录和注册界面,建议设计用户需要手动输入验证码,这样可以防止恶意攻击. (13)iPhone手机基本都使用系统自带的输入法,在用户点击搜索区域,弹出输入法软键盘时,软键盘上会显示搜索按钮:Android手机上使用的输入法各式各样,输入法软键盘上不一定会有搜索按钮. 在设计搜索界面时,iOS APP的右上角通常不需要有搜索按钮,但Android APP的右上角最好要设计有搜索按钮.同时要设计搜索不到数据时的界面. (14)原型应该完整体现各种操作流程,尤其是在出错的状况下的各种处理流程.