导航:首页 > 软件问题 > 怎么把app变成矢量图

怎么把app变成矢量图

发布时间:2025-01-06 11:16:07

Ⅰ APP安卓原生 设计该怎么切图给开发

1.png的方案

3x规格png实施起来会简单很多,设计师可以以iPhone6s plus为设计稿,导出稿中相同大小的图片,以6s为设计稿的话输出图片时宽高均乘以1.5。开发拿到切图后,iOS对应放入3x,Andrpid对应放入xxhdpi,搞定。目前使用率来说3x(即3倍)就足够了,其他倍数会从3x自动缩小获得。
2.矢量图方案
这个方案会复杂些。iOS矢量图为pdf格式,大小以1x输出就可以,这样做可以方便开发人员导入和布局。Android可以用VectorDrawable或者svg转png插件,需要的是svg格式矢量图。用VectorDrawable的话,设计师最好用最简单的方式制作svg,最好只用绘线和填色,蒙版、挖空、区域透明等等就不要用了。用svg转png插件的话,对制作svg就没有太多要求,但是这类插件会有一些坑,开发人员要去填坑,比如转换后清晰度不够的问题。
我给公司的方案就是设计师输出一套1x规格pdf矢量图,iOS可以直接套用,Android采用svg转png插件,自己写脚本将pdf批量转换成svg,再由插件生成3x规格png,是的,Android最终还是用png。因为公司iOS项目先启动,图片都做好了,不可能再让设计师为VectorDrawable一个图片一个图片的调整。
3. 分辨率和倍数
市面上各个规格的分辨率都有,Android的太多先不讨论,iPhone 6s+是1080x1920,6s是750x1334,se是640x1136。差异这么大难不成要一一适配?显然不可能,幸好除了分辨率外还有倍数的概念,比如2x(2倍)就是指设备的一个点等于2px,一般来说不同设备的一个点物理距离是接近的。我们来看看分辨率除以倍数后的“点”分辨率,那么6s+是414x736,6s是375x667,se是320x480,从这个角度上看,其实几个机型的“点”宽度变化不大,只是高度有所不同,只要布局得当完全可以做到一套设计稿通用大部分机型。
Android的情况也是类似,只是倍数更多,它用另一个名称表示:mdpi(1倍)hdpi(1.5倍)xhdpi(2倍)xxhdpi(3倍)。
补充,6s和se是2x,6s+的倍数情况比较复杂,详细请看:
iPhone 6 Plus的逻辑分辨率为什么是414x736? - IOS app开发 android app开发 为什么 iPhone 6 Plus 要将 3x 渲染的 2208x1242 分辨率缩小到 1080p 屏幕上? - iOS 开发
4. 良好的布局
一般来说,选用一款常用机型的分辨率作为设计稿,剩下的便是布局的工作。
布局就像排版一样,每一块区域每一个控件的摆放规则:往一边靠还是居中,拉伸铺满,保持一定比例,还是固定大小。要把设计稿想像得能够随时变宽变窄变高变矮,当大小发生变化时,按照预定的布局规则设计稿会变得怎么样。布局没有捷径,就是多思考多练习。
给个例子,公司的设计稿是以5s为基准,分辨率640x1136,倍数2x。
知道以哪个倍数为基准对适配很重要。比如说,有一次设计师不清楚怎么描述一个九宫格页面时,我让他针对6s+、6s、4s再做一次调整,基准倍数是2x,6s+基准到2x的尺寸便是828x1472,方便同一个设计稿复制到不同分辨率上,通过不同分辨率的调整便能做出满意的页面布局。(在这里你需要一套高效的标注工具
* 当倍数不为1x,所有px表示的数值都应该能被倍数整除。以2x为例,输出图标大小就不能为45px x 45px,因为当输出到1x和3x时就会出现小数,小数会被舍弃。正确做法是调整到44px或者46px。
5、为什么不采用等比例缩放适配
为什么不采用等比例缩放适配?说到底,更大的屏幕尺寸提供了更多内容展示的空间,等比例缩放没能把发挥出大屏的优势,同时也很难保证系统UI的一致性体验。

阅读全文

与怎么把app变成矢量图相关的资料

热点内容
手拉手被写入哪些岛重要文件 浏览:277
app哪些权限不应该授权 浏览:757
iphone相册 浏览:510
一季度有哪些数据 浏览:754
已编程的钥匙是什么意思 浏览:253
rtf格式用什么文件 浏览:281
为菜单和工具提示使用过渡效果 浏览:513
fade40秒铃声苹果手机 浏览:956
从哪里查找往年的高考数据 浏览:659
qq空间礼物看不到了 浏览:590
怎么用手机把图片文件格式改小 浏览:976
网络输出异常 浏览:312
手机里暴风隐藏文件路径 浏览:49
win10备份系统文件好大 浏览:293
js导出html到excel 浏览:725
c游戏编程用什么软件 浏览:645
java依赖倒置 浏览:166
华为畅玩5x微信运动 浏览:819
applepay必须改美国时间 浏览:893
max文件默认打开方式 浏览:466

友情链接