android切图,安卓有什么好的切图软件

APP界面标注及切图注意事项

一、App屏幕适配通用知识简介

创新互联公司服务项目包括博罗网站建设、博罗网站制作、博罗网页制作以及博罗网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,博罗网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到博罗省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

1. 标注时注意事项

一般情况要定位一个Icon只需给出 上/下边距,左/右边距

标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份

通用型模块只需单独标明一份,如导航栏

手机可视区域一般为宽度固定,长度超出边界可滑动,所以,标注物体宽度时可按比例说明

如果要标注内容上下居中,左右居中,或等比可不标注

当绘制的是一个列表时且每一条内容一样时,只需标注一条,如果每条内容有少许不同时,只需标明差异              部分

当交付的是一张完整图片时,不需做机型适配,只需给高清图(1920*1080)即可,注意进行压缩

当背景是纯色时只需给出色值(iOS使用RGB色值,Android使用16进制色值)

图标应给出可点击区域

若图标在不同页面重复出现,且尺寸相差不大,直接给出最大一份切图,并在圆形图标明尺寸,程序会根据需求缩放

可点击按钮通常要给出两种状态:普通/点击(选中)

按钮如果只是矩形、圆角矩形、圆形、椭圆形,给出尺寸和色值,可程序设置

渐变效果可通过程序实现,只需给出起始和结束色值跟范围

2. 切图命名规范

背景:bg_xxx.png

按钮:btn_xxx_normal.png/btn_xxx_select.png

图片:img_xxx.png

标签:tab_xxx.png

图标:icon_xxx.png

照片:pht_xxx.png

导航:nav_xxx.png

图示:tip_xxx.png

菜单:menu_xxx.png

侧栏:sidebar_xxx.png

二、iOS应用屏幕适配

1. iOS究竟要是适配多少种机型,以哪款机型分辨率作为设计尺寸最好

2016-3

iOS只需兼容iPhone4,完美兼容iphone5以上机型

如果按矢量图制作设计图按1X尺寸作图,后期放大成2X、3X;如果按传统的px作图应用最大尺寸(3X)作为画布。

以3X作为画布(1242*2208)难记且不能整除,我们可直接以1280(640*2)作为宽度,完美缩放为1X、2X;

2X-3X以1.5来算尺寸和字号可得到较好效果

2. 界面尺寸

设备分辨率状态栏高度导航栏高度标签栏高度

iPhone6 plus1242*2208px60px132px146px

iPhone6750*1334px40px88px98px

iPhone5/5s/5c640*1136px40px88px98px

iPhone4/4s640*960px40px88px98px

iPad3/4/Air/Air2/mini22048*1536px40px88px98px

iPad1/21024*768px20px44px49px

iPad mini1024*768px20px44px49px

导航栏背景图中,如果考虑状态栏背景,则背景图尺寸为导航栏px+状态栏px,如果只改变导航栏颜色则只需要导航栏px

3. 图标尺寸

设备App Store程序应用主屏幕spotlight搜索标签栏工具栏和导航栏

iPhone6 plus1024*1024px180*180px144*144px87*87px75*75px66*66px

iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px

iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px

iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px

iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px

按钮切图建议以等宽高尺寸切图,且像素必须=88、*88px , 当本身图片宽度或高度不足时,补充空白像素(透明像素).一般情况下,只需要普通状态下按钮切图即可

(适配不建议等比放大)

4. 参考文献

友盟设备指数

APP切图流程和APP切图命名规范详细完整版

APP切图详细规范终极指南

iOS和Android的app界面设计规范

APP界面切图命名和文件整理规范

三、Android应用屏幕适配

1.用px作为基础单位的缺陷

对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小,造成不同手机上显示图片布局不统一!

使用dp作为单位所有机子显示统一

2. 衡量一个屏幕清晰度单位————屏幕密度(dpi==ppi)

计算公式:屏幕dpi = √ (屏幕长^2 + 屏幕宽^2) / 屏幕尺寸

名称密度代表分辨率Android单位与像素换算

mdpi120dpi~160dpi320*4801dp=1px

hdpi160dpi~240dpi480*8001dp=1.5px

xhdpi240dpi~320dpi720*12801dp=2px

xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px

xxxhdpi480dpi~640dpi2k~4k1dp=4px

屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画

320*480px48*48px32*32px16*16px24*24px不小于2px

480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3 px

720*1280px96*96px64*64px32*32px48*48px不小于4 px

1080*1920px144*144px96*96px48*48px72*72px不小于6 px

3.究竟要适配多少种机型

2016-3

得出结论: 只需适配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)

4. 度量单位与边框

可触摸控件都是以 48dp 为单位的

为什么是 48dp?一般情况下,48dp 在设备上的物理大小是 9mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10mm) 内,而且这样的大小,用户用手指触摸起来也比较准确、容易。( xxhdpi标准下为144px )

边框 注意留白 界面元素之间的留白应当是 8dp 。

例:

5. 字体排版

Roboto 是Android系统的默认字体集,字体大小单位 sp(可缩放像素数,scaleable pixels)

根据Android设计规范,推荐使用 12 、 14 、 16 、 20 和 34 号 ,字体粗细可调

spHDPIXHDPIXXHDPI

12sp18px24px36px:

14sp21px28px42px

16sp24px32px48px

18sp27px36px54px

20sp30px40px60px

34sp51px68px102px

(注意:字号要为双数,且不可带小数位)

6. 9-patch 图制作

什么是9-patch图

为什么要用9-patch格式制作图

适应各种手机屏幕拉伸图片需求,有效缩减图片体积

什么情况下使用

当发现图片是背景时且可能拉伸被拉伸时,或图片过大时

如何制作patch9 图

图片外层增加一全透明像素,在透明像素区花4条纯黑色边

1. 宽度可拉伸区域

2. 高度可拉伸区域

3. 垂直内容区域

4. 水平内容区域

8. 参考文献

友盟设备指数

Android 设计指南简体中文版4.x

Material Design 中文版

Android设计中的.9.png

Android切图适配知识点汇总

对于在工作中没有接触过安卓版本app,或是面试的时候会被问到安卓分辨率等问题,可以通过本文对安卓切图有所了解。我在以往的工作中也没有接触过安卓设计等一系列问题,但是看完一些文章后,大致对安卓分辨率等知识点有所了解。此文是对自己所了解到的知识做一个总结,也希望能帮助到不了解安卓一系列问题的同行们,好啦,马上进入正题!

基本概念

1、手机屏幕尺寸计算方式:对角线尺寸/2.54(1英寸=2.54厘米)

2、分辨率:屏幕上显示的像素个数,单位尺寸内像素点越多,显示的图像就越清楚。

上图中红框框出来的是现在市场上主流的分辨率,只要记这三个就可以。其他的已被淘汰。

3、屏幕密度:屏幕每英寸有多少个像素。

4、单位:dp是开发中用于描述尺寸和间距。

sp是用于描述字号和行距。

用哪种分辨率来设计?

原则上需要为不同的分辨率去单独设计效果图,但由于实际情况,只需要采用一种分辨率去设计,目前多数采用720*1280的分辨率。

需要提供几套切图?

只需要一套切图即可

720*1280尺寸的切图可以适配其他机型,有些特殊的切图需要单独适配的,比如icon等。

适配480 800的机型,只需要把切图/1.5即可。

适配1080 1920的机型,只需要把切图*1.5即可。适配此分辨率的时候,需要在720 1280下画图的时候,尽量采用矢量图形来画图。

例如,图标是48 48的时候,适配1080 1920点时候,48px*1.5=72px.把矢量图形调整为72px即可。开发会把切图放到xxhdpi的文件目录下,就会自动适配1080 1920

同样,适配480 800的时候,48px/1.5=32px.开发把切图放到hdpi文件目录中,会自动适配。

720 1280的切图,开发放到xhdpi的目录下。

注:设计图片的时候尽量采用偶数。

需要提供几套标注?

在720*1280分辨率下进行设计,此分辨率下1dp=2px.

可以直接使用dp标注尺寸,sp标注文字大小

注:使用dp标注尺寸。使用sp标注文字大小

该使用什么字体及字号?

中文字体:思源

英文字体:Android 4.x及以上采用Roboto,Android 2.x和3.x采用Droid Sans.

字号:12sp、14sp、18sp、22sp(也可根据实际情况调整)

目前掌握以上知识点,可能多少也有些小问题,欢迎有经验的大神指正、指导。谢谢啦~

APP设设计规范尺寸、切图详解——IOS和Android

目前主流的是以iPhone 6为主,设计尺寸是750*1334px,4.7寸。

1、分辨率以iPhone 6 设计为主:750*1334px

2、(字体 Helvetica/华文细黑,实际中运用黑体简或者Hiti-sc 最接近系统中所带字体)

3、工具栏height:88px    如搜索、选择、删除、回复等。

4、顶部标签栏height:60px  位于状态栏或者状态栏下的文字/具有可切换功能的图标

1、导航栏

所有的字号,在750*1334px的设计尺寸下都是偶数,便于程序员操作。

所有可触发按钮必须≥44*44

所有可触发按钮必须≥22*22

左右内容与边距的间隔大概在20px

强调确定,填充有彩色。

例如:

搜索框右边要有一个取消、或者输入了之后有一个“x”

渐变和底纹效果和程序员商讨

设计尺寸:720*1280px

状态栏48px  导航栏96px  内容区1038px   标签栏112px

iOS、Android 开发单位换算及 UI 切图要求

在移动端 UI 设计中,经常会用到的单位有 4 种:px、pt、dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完后能有所收获(如有错误,欢迎纠正)。

px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px 表示一个像素,例如 iPhone 8 的尺寸为 750px × 1334px,表示在该手机屏幕上,水平方向每行有 750 个像素点,垂直方向每列有 1334 个像素点。

pt 即 point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt = 1/72 英寸 = 0.35mm;二是 iOS 开发用的基本单位,当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2 便可直接使用。

dp 是安卓开发用的基准单位,在 dpi (屏幕像素密度,即每英寸包含的像素点) 为 160 的屏幕为上,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5 种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍其换算关系。

在安卓系统里,sp 与 dp 类似,不同的是 sp 可以根据用户的字体大小首选项进行缩放,而 dp 则不会。 尽量使用 dp 作为空间大小单位,sp 作为文字相关大小单位,例如:新闻类和短信类等大篇幅文本,推荐使用 sp 为单位。

在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:

这里再简单了解下两个概念,ppi 和 dpi。

ppi (iOS):即 pixel per inch,屏幕像素密度,表示每英寸所包含的像素点,该值越高,屏幕越细腻。

dpi (iOS) :开发像素密度,表示每英寸所包含的开发像素点。

在 iOS 开发中,规定以 ppi = 163,dpi = 163 作为开发基准,

当 ppi = 163,dpi = 163 时,则 1pt = 1px;

当 ppi = 326,dpi = 163 时,则 1pt = 2px;

当 ppi = 401,dpi = 154 时,则 1pt = 2.6px ≈ 3px。

(为什么 iPhone 8+/7+/6+ 的开发基准是154?可能要问问苹果了...)

依此类推,得出换算公式一:

若有小数,四舍五入即可。

在 iOS 开发中,目前只需要 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍的 png 图片即可。导出前注意检查切图是否存在半像素、毛边等情况,保证对齐像素,这样才能有效避免上线后页面上的 icon 出现虚边的问题,提高细节质量。

另外补充一点:从整体开发尺寸看,iPhone 8 是 375 × 667 pt (@2x),而 iPhone X 是 375 × 812 pt (@3x),同样的宽度,一个用 @2x 图,一个用 @3x 图,iPhone X 表现出了更高的清晰度,如图 2-1 所示。

在 Android 开发中,因为机型参差不齐,需要用屏幕密度来区分设计。

注意,这里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念,dpi (iOS) 是开发像素密度,而 dpi (Android) 即 dot per inch,表示屏幕像素密度 ,类似 iOS 开发里的 ppi。

Android 中,规定以 dpi = 160 为开发基准,

当 dpi = 160,基准dpi = 160,1dp = 1px;

当 dpi = 240,基准dpi = 160,1dp = 1.5px;

当 dpi = 320,基准dpi = 160,1dp = 2px。

依此类推,得出换算公式二:

在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放,如图 3-1 所示。

例如,一个启动图标的尺寸为 48 × 48 dp,这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上其实际大小是 mdpi 的 1.5 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px),依此类推。

在某些况行下,还需要提供一种特殊的切图: 点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的图片,文件名以 “.9.png” 结尾。

这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应,比如对话框背景图片就会用到点九图。

--

以上是全部内容,感谢你的阅读!

End

当前题目:android切图,安卓有什么好的切图软件
分享链接:https://www.cdcxhl.com/article8/dsggdip.html

成都网站建设公司_创新互联,为您提供电子商务品牌网站建设移动网站建设动态网站外贸网站建设网站改版

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司