关于手机APP切图的干货,25学堂已经分享了很多,但是不是很全面,同时也没有把一些APP切图需要注意点分享给大家,于是,学堂君想在今天把前辈切片的经验分享出来。

之前25学堂分享的APP切图干货:

如今最新的iphone手机是iphone X和iphone X plus  这手机尺寸是1125*2436px

跟iphone 8 的放大模式尺寸1125*2001px 是高了435px。如下图所示:

所以,切片是@3x就可以满足iphone x 最新手机的尺寸要求了。

所以,APPUI设计师需要给出的APP切片资源有3套:

1、  标注图(以750为宽度尺寸为基准标注)

2、  2x切图(以750为宽度尺寸为基准切图)

3、  3x切图(以1242为宽度尺寸为基准切图)

手机APP的切片要求:

1、切图资源尺寸必须为双数

如果是单数切图的话,手机系统就会自动拉伸切图,从而导致切图元素边缘模糊,造成开发出来的APP界面效果与原设计效果差距甚远。

2、如果设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是@3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是@2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸; 当然,你也可以按照@2x图 750*1334px的尺寸来设计。然后再去适配@3x倍图的设备。

3、产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件、2倍图文件、3倍图文件和标识文件

4、图片命名要求语义化,格式为png;

5、图片资源需要备有1倍图、2倍图、3倍图,3倍图命名规则为:添加后缀@3x;2倍图命名规则为:添加后缀@2x;例如:1倍图:abg.png,2倍图则为:abc@2x.png,3倍图则为:abc@3x.png;

6、 字体:IOS默认字体—— 英文  HelveticalNeue   中文 黑体;字体大小采用点pt,设计稿以相对单位px,字体大小需要进行转化,转化公式为:px*72/96=pt(eg:12px*72/96=9pt), 字体颜色只需给出rgb值(eg:color:rgb(255,255,255));

7、页面纯色背景需标出rgb值,如果有透明度则需标出rgba值,其他特殊背景直接切图;

8、页面的图标、色块、按钮的高度都必须是4的倍数,最小像素不能低于44px,如不够可以添加补白;

9、页面外边距留白为10px;可点击部件应当注意其点击区域不小于88px

10、启动图标1024*1024,png格式,不能透明底,透明的部分补白色。

11、为了提升APP使用速度,尽量降低图片文件大小

12、使用APP切图 ps插件Cutterman——一键切图,真正解放双手

如果是sketch设计的APP UI 可以搭配Sketch Measure来进行切片。

Sketch Measure是最新的Sketch切图插件使用方法非常简单,能够一键生成Html标注文件,并且自动生成设计规范文件十分高端。

13、ios切片和安卓切片,大部分是可以共用的。只要你输出的切片是@2x 和@3x的资源就可以了。

Android 目前支持五种不同的dpi模式:mdpi hdpi xhdpi xxhdpi  分别对应的就是

14、输出文件命名的技巧分享给大家。

① 如果一个图层需要输出多种格式图片,命名可以用逗号分割。(例如:a.jpg,a.png)

② 同一个图层想输出多种质量的图片,可以在命名后加参数。 (比如:a.png8,b.png32 这样就会输出一张8位的a.png和一张32位的b.png文件)

③ JPG默认输出是90%的质量,也可以命名加参数控制(例如:a.jpg50%)

以上就是25学堂给大家整理的2018最强手机APP切图规范指南和切片要求。值得APP切图新手好好收藏。

app android切图工具,2018最强手机APP切图规范指南和切片要求相关推荐

  1. 微信小程序 android内存暂用,微信小程序与手机APP占用内存 流量消耗对比介绍

    10年前的1月9日诞生了iPhone,今年的1月9日诞生了微信小程序,这无疑是2017年中国互联网圈的开年大事件.这几天,相信大家在网上到处都被微信小程序刷了屏,各种技术探讨.前景分析层出不穷,尤其是 ...

  2. 华为app安装失败与已安装签名_手机APP为什么总是安装失败

    整天"机不离手"的我们 每个人手机里都装有好几十个APP 但安装的时候总会出现跳出 手机APP无法安装或安装失败的页面 这究竟是怎么回事呢? 小翼带你瞅瞅 一.手机安全认证 在安装 ...

  3. wps android 版 参数控制介绍,最强手机办公软件 Android版金山WPS首评测

    [天极网手机频道]从智能手机在市场流行那一刻开始,注定在我们的生活工作将发生重大改变,对于智能手机来说强大的硬件支持与智能平台的兼容行决定在,手机的各项功能已经逐步趋于PC化,而对于日常上班族来说,随 ...

  4. android手机分享app,Android Pie如何快捷分享文件至特定App

    作为全球使用量最大的移动操作系统,Android系统一直通过积极听取用户反馈和建议不断更迭改善.事实上在Android系统中还有很多普通用户尚未发现或者经常被忽视的小技巧,本文就简单的介绍下Andro ...

  5. android视频添加字幕,视频加字幕手机app

    视频加字幕手机app是一款为用户朋友们打造的视频制作神器,这款视频加字幕手机能够帮助用户朋友们剪辑视频,同时它还支持很多的视频编辑功能,使用起来很简单,用户朋友们快来下载使用吧! 视频加字幕手机app ...

  6. android 齐刘海编程,2018十大手机功能盘点齐刘海泛滥成灾

    是已经凉了的VR还是噱头大于实际的无线充电技术,下面为大家盘点十种今年最有可能普及的十大手机技术,看看其中有没有值得让你等待的新技术. 10:刘海屏 Huawei/华为 P20 pro全面屏mate官 ...

  7. fit me app Android,一款健身与购物一体的app

    一款健身与购物一体的app介绍 Fitme通过蓝牙和手机APP软件相连,采集人体基本体征数据如:体重.脂肪率.BMI.肌肉量.基础代谢.人体水份含量.皮下脂肪.等功能.建立健康测试数据,为用户提供营养 ...

  8. python爬取app聊天信息_手把手教你爬取手机app中的信息

    使用工具:Fiddler+基础爬虫 Fiddler是一个抓包神器,用来检查电脑和互联网之间所有的通讯内容,而且比较简单容易上手,显示的格式也比较友好. 网页基本都会爬了,现在开始要想想如何去爬手机ap ...

  9. python开发app的软件_如何利用python开发手机app

    python语言虽然很万能,但用它来开发app还是显得有点不对路,因此用python开发的app应当是作为编码练习,加上目前这方面的模块还不是特别成熟,bug比较多. 准备工作 利用python开发a ...

最新文章

  1. 神经网络到底是如何思考的?MIT精英们做了这么一个实验室来搞清楚
  2. 搭建LoadRunner中的场景(三)场景的执行计划
  3. if-else多级嵌套,输入3/4/5个数寻找最大值(太多了容易乱!!!)
  4. 读-深入理解Java虚拟机(1-2章)随笔
  5. JAVA从url中分离ip和port
  6. Linux下挂载和格式化虚拟磁盘图文教程
  7. VMWare Network Adapter设置错误也会导致 Determining IP information for eth0 failed
  8. Failed to connect to d.line-scdn.net port 443: Operation timed out
  9. 手势控制鼠标(源码)
  10. MINGW里面没有mingw32 make.exe
  11. 在Windows 10中使用统一写过滤器(UWF)
  12. laravel-admin固定表头
  13. E路航LH950N更换电池全程图解
  14. 服务器系列和酷睿系列,至强cpu与酷睿两个系列之间有什么区别?
  15. 结构化数据与非结构化数据
  16. [案例4-8]模拟物流快递系统程序设计
  17. 【Android高级】查看手机及应用内存状况的方法
  18. 眼见不一定为实!18个神奇的视错觉,看完不相信眼睛系列
  19. 【贪心】数列极差问题
  20. GNU/Linux上程序的国际化和本地化(I18N I10N)

热门文章

  1. Jenkins-安装jenkins2.7.1版本
  2. js中substr与substring的差别
  3. 建站如此容易:WordPress3.9建站简明视频教程完成发布啦
  4. UITableView的重用
  5. nginx多域名设置和多子目录实现共用一端口
  6. 用openswan 2.4.7构建ipsec ×××笔记
  7. [WSE]如何启用WSE2.0的强大的Trace功能
  8. Java Socket分发服务负载均衡
  9. 2016级算法第四次上机-B ModricWang的序列问题
  10. vs 2005 thread 无法调试