每次聊到APP设计尺寸3 KYTCH切图标注,总有人觉得这事儿简单,随便弄弄就行。等到真上手了才发现到处是坑。这篇就把那些容易忽略的细节捋一捋。
APP设计尺寸三 KYTCH切图标注规范与移动端尺寸对照
具体来说,上周去嘉定一家做智能门锁的客户那儿验货,顺带对一下他们新APP的切图包。质检老张把卡尺往桌上一搁,说了句:“你们这锁体标75mm,实际739,门框留缝留到3mm,装上去晃荡,跟你们APP里那个按钮热区标44pt、实际导出才38一样。都是尺寸对不上。”
这话糙,理不糙。门锁的物理尺寸差一mm关不上门,APP的切图标注差1px,开发就得来回问。今天不聊门锁,聊移动端那点尺寸事。
从实际操作来看,先说切图标注的底子
老张说的44pt,是iOS人机指南里的较小可点击尺寸。安卓那边Material Design写的是48dp。这两个数不是拍脑袋来的,是手指指腹触控的容错范围。你标了44pt,开发照着做,受众点起来不费劲。
换个角度看,实际交付时,APP设计尺寸3 KYTCH切图标注这套流程里,标注工具会自动把画布单位换算成pt或dp。但有个坑:很多设计师在Sketch里画的是375×812的1倍图,导出时忘了切二倍和3倍。开发拿到@1x的图,塞进iPhone 14 Pro的@3x屏里,按钮直接糊成马赛克。
这点很多人忽略了
落实到具体场景中,网孔密不密,跟切图倍率是一个道理。金刚网防割,厂家吹得凶,网孔做到0.8mm×0.8mm,风阻直接拉满。夏天不开空调,屋里闷得跟蒸笼一样。行业里有个妥协做法:标称防割等级按GB/T 8478-2020走,但实际网孔放到1.2mm×1.2mm,兼顾通风。你说它偷工减料?也不全是,是使用场景逼的。
切图标注也一样。KYTCH切图标注工具默认按1倍图输出标注稿,但移动端切图标注尺寸必须手动勾选@2x和@3x。有的团队为了省事,只导@2x,结果安卓低密度屏(mdpi)下图标发虚。说白了,这就是拿“够用”换“省事”。
这里有个细节值得展开说,验收时怎么核对参数
别光看标注稿上的数字。打开KYTCH的标注面板,先确认画板尺寸是不是375×812(iOS)或360×800(安卓)。再看切图导出设置:iOS勾@1x、@2x、@3x,安卓至少勾mdpi、hdpi、xhdpi、xxhdpi。这步不能省。最后拿把尺子——不,拿台真机,把开发装的测试包点一遍,看按钮热区是不是真的44pt。
在此基础上,老张最后补了一句:“你们那个锁体,我拿塞尺量了,73.5到74.2之间跳,批次不稳。”APP切图也一样,同一套标注,不同人导出的倍率能差出2px。对账的时候,别只看标注稿,看实际导出的PNG文件尺寸。文件名带@3x的,像素必须是标注值的3倍,少一像素都别签字。
搞APP设计尺寸3 KYTCH切图标注这事儿说难不难,但细节确实多。把上面几点做到位,大部分常见问题基本能避开。剩下的就是实际操作中慢慢摸索了。