切图规范及标注规则记录

1、切图:

众所周知,智能手机的屏幕大小都为双数值,因为1px是智能手机能够识别的最小单位,换句话就是1px不能在智能手机中被分为两份。所以如果是单数切图的话,手机系统就会自动拉伸切图,从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。

2、图标切图输出应根据标准适配:

在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机(例如iPhone 7 plus)图标在切图的时候需要输出@2X和@3X的切图,其中@2X的切图可以满足双平台大部分机型的适配要求,@3X是用来适配iPhone手机的各种plus版本的手机

3、尽量降低图片的大小

在切图资源输出中图标切图输出是很重要的部分。比如新手引导页,启动页,默认页,广告图等,图片切图一般情况下文件大小都是相对较大,不利于用户,在使用APP过程中加载页面

图片压缩网:http://tinypng.org/

4、可点击部件应当注意其点击区域不小于44px

44px的点击区域数值是iPhone 3(320*480px)普通显示屏下制出来的,换算成物理尺寸后大致是在7~9mm之间

iphone 3(44*44px)                               

iphnoe 4以上(88*88px)

5.可点击部件要把相关状态都切图输出,比如正常状态,点击状态,不可点击状态

在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误,比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图时最好尽量把页面出现的各种状态展示出来,避免后期切图的时候出现遗漏。

6、iOS平台规则:

新建750*1334,分辨率72像素/英寸。中文用苹方黑,英文用San Francisco,如果安不上可以用Helvetica代替。750*1334尺寸的换算关系1pt=2px,也就是说程序员拿到我们的px单位的标注图,自己除以2就是pt。

记住4px的倍数比较好。(24px,32px,48px等)以偶数为单位,不清楚的可以截图量取大公司的APP界面作为参考。

750*1334px 设计稿尺寸:

状态栏高:40px

导航栏高:88px

标签栏高:98px 

7、iOS平台尺寸


8、安卓平台规范

如果想一稿适配iOS,那就新建720*1280,分辨率72像素/英寸

记住要是偶数,最小字号20px,中文用NOTO/思源黑体(是一个字体,叫法不同而已),英文用Roboto

720*1280 设计稿尺寸:

状态栏高:50px

导航栏高:96px

标签栏高:96px

9、安卓尺寸


10、启动图标的切法

APP的桌面图标会被运用在很多不同的地方展示,比如手机桌面,App Store,手机的设置列表。所以APP桌面图标需要很多个不同尺寸的切图输出,两个平台对相应桌面图标设计输出尺寸也不尽相同。在输出的时候要把双平台的这些尺寸全部输出切图,桌面图标切图只需要提供直角的图标切图即可。手机系统会自动生成圆角效果。

11、启动页一类的图片不需要切图,或只需切有交互的一部分就可以了

12、正常的切图方式(PS中)

(1)切片工具

(2)点击图标——快速导出PNG——(要求图片一定要是偶数,若不是导出为画板可修改)

(3)给图标加个“.png”的后缀,选择文件——生成——图像资源

切图工具:cutterman

13、切图步骤:

(1)先联系程序(了解明明习惯及需求)

(2)建立热区,方便以后标注(可有可无)

(3)若部件相互叠在一起需要单独切

(4)图标是否有多重状态(未点击,可点击,不可点击)

14、点九切图(安卓平台)

安卓平台的应用软件开发包的一种特殊的图片形式,文件扩展名为".9.png"

切图:所有程序实现不了的icon,文字,一些部件,需要切图输出。系统文字不用切,APP用的是特殊文字,文字包需要发送,文字如果变形处理过,需要切图。

点九切图介绍:剪切(上下左右留有一像素)——新建一层,铅笔工具(#000,系统只识别这个颜色)——中间留两个像素+左右弧度10px+描边1px(则按钮宽度22px)——铅笔(#000)标出中点两个像素,高标出出弧度外的区域——则铅笔标注出的宽高重叠的位置可无限延伸——打文字(铅笔可在右侧及下方标注出文字所写范围)

相当于把一张图片分为9个部分(九宫格),分为四个角,四条边,和中间可以无限延伸的区域

四个黑点的含义:

上方黑点:标识可以左右无限延伸

左边黑点:左边选择的行可以无限延伸

下方黑点:文字的输入位置,为了保持下面不变形

右边黑点:文字输入的高,保持右边不变形

15、总结切图注意事项:

(1)所有的切图必须是偶数

(2)所有部件,包括效果(阴影,发光)确保输出整体尺寸为偶数

(3)所有字体也是偶数单位

(4)所有的变形字体把它当成icon来切

(5)如果有背景,尽量用平铺的背景图案来设计(减少程序体积)

(6)切图输出格式:png-24

(7)会根据内容更改的图片,切一个给开发区测试(例如:专辑封面,用户头像)

(8)重复的东西只切一个

切图软件:Assistor PS

16、标注

(1)将同类信息放在一起,整理排列,让人一目了然

(2)不要重复标注

(3)标注和图标本身预留一些空间

17、页面内容过多,可以选择两屏,三屏

(1)横向布局:元素左右的外间距,内间距,横向栏的高

(2)纵向布局:元素上下间距和高度

18、适配:

安卓:720*1280     1080*1920

iOS:750*1334    1242*2208

19、设计师需要准备:

切片三套(@1X,@2X,@3X)

@2X:安卓——720*1280     iOS:750*2208

@3X:安卓——1080*1920     iOS:1242*2208

20、iOS适配到安卓(720*1280——750*1334)

(1)把状态栏改为50px

(2)列表,序列类图标,保持左边不变,右边向左边缩进30px(750——720)

(3)图片1:1缩放

(4)Tab往上提

iPhone 6适配到iPhone 6 Plus,设计图*1.5倍

21、三大应用类别

任何平台都可以分为原生应用,web应用和混合应用

(1)原生应用(Native APP框架):

一种基于智能移动设备本地操作系统(如iOS,Android,WP操作系统),并使用对应系统所适用的程序语言编写运行的第三方应用程序,用于它直接与操作系统对接,代码和界面都是针对所运行的平台开发和设计的,能很好地发挥出设备的性能,所以交互体验会更流畅。

(2)web应用(web APP框架):

一种采用HTML语言编写的,存在于智能移动设备浏览器中的应用程序,不需要下载安装。可以说是触屏版的网页应用,由于它不依赖于操作系统,因此开发了一款 webAPP 后,基本能应用于各种系统平台。

(3)混合应用(Hybrid APP框架):(例如:淘宝)

一种用NatIve技术来搭建APP的外壳,壳里的内容由web技术来提供的移动应用,间距"Native App"良好交互体验的优势和“web APP”跨平台开发的优势。

22、加载方式:

对于Hybrid APP框架的页面,由于同时存在 Native 和 web 部分,所以在加载内容时,可以分开考虑加载方式:

(1)Native 部分:

可以根据需要把常规内容存储在用户的手机上,加快加载的时间和减少重复加载相同内容的麻烦。

(2)web部分:

web内容区域是需要从网络上加载内容的,尤其在网络条件不好时,需要设计友好的等待状态,缓和用户的焦虑情绪。

23、三大APP应用框架:

(1)native APP :需要为 iOS,Android 和 WP 系统各自开发一套APP,同时要维护多个版本,更新需要安装资源可以存在本地,支持离线(开发耗时最长,最费人力,但最稳定)

(2)web APP(相当于打开一个网页:偏浏览为主)

新闻类,视频类

只需要开发一套APP就可以运用到不同的平台上,只需要维护最新的版本,依赖网络资源存在服务器上,更新无需下载,(开发耗时最少,容易出问题,耗资最少)

(3)Hybrid APP :

既要偏浏览器,又有较大操作互动(例如:聊天,购物类APP)

native的部分由iOS和Android人员开发。

资源存在本地和服务器

大部分需要依赖网络,算是中等投入

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,656评论 24 688
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,118评论 4 39
  • 1、很多人把牺牲看作爱一个人的方式,好像牺牲得越多就爱的越多,但是我觉得,爱一个人不是这样的,爱一个人,不应该看他...
    折腾吐槽吧阅读 484评论 0 4
  • 还在两个多月的时候,和L先生一起,查经阅典,给腹中那个充满了期盼的胎儿取了大名和小名。如果是男孩,就唤作柱子;如果...
    知予阅读 108评论 0 0
  • https://rp5.ru/可以提供excel下载 http://113.108.192.90/envcompa...
    鱼er阅读 231评论 0 2