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)

Roboto字体 - 1.21 MB(.zip)

根据Android设计规范,推荐使用1214162034号 ,字体粗细可调

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

你可能感兴趣的:(APP界面标注及切图注意事项)