APP的移动ui设计切图规范，有没有办法一套切图适配所有分辨率

来源：蜘蛛抓取(WebSpider) 时间：2016-11-07 12:50 标签： ui设计切图
【学UI网福利】身为UI设计小白也不怕，一起努力一起搞学习。从此不再迷茫~
相信咱们网站分享的文章大家都有阅读,但是每天分享的肯定是不同类型的, 不够具体. 那么今天给大家带来的是切图篇. 总结了之前发的切图分享 , 还有插件, 让大家能够具体的 清楚认识,设计师必须学会的一项技能. 切图~ 到底怎么切方便省事呢.相信看完会有所收获
如何使用正确姿势来切图
切图经验教程
切图动作插件
点9. 抠图 拓展阅读
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
海量APP截图，让你灵感爆发！国内最好的APP截图站。
同一个APP，IOS和安卓截图对比分析，并且提供5种以上尺寸的APP截图打包下载，真贴心。
专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：，也可以找各个群的管理】
你可能喜欢的：
【学UI网福利】身为UI设计小白也不怕，和YY讲师一起努力一起搞学习。从此不再迷茫~APP的UI设计，有没有办法一套切图适配所有分辨率？包括IOS、Android
设计规范是根据屏幕尺寸定的，按比例布局就可以保证视觉效果，这样有没有某种工具或者做法可以实现一套多用？
有，而且很简单不切图。拿原生控件堆出一个app
人家辛辛苦苦制定出来的设计规范……
如果不是因为钱的问题，最好两个团队分别开发。世界上不是所有问题都有完美解决方案的。
当然，用矢量图或者3x规格png就好。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+是，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+的倍数情况比较复杂，详细请看：4. 良好的布局一般来说，选用一款常用机型的分辨率作为设计稿，剩下的便是布局的工作。布局就像排版一样，每一块区域每一个控件的摆放规则：往一边靠还是居中，拉伸铺满，保持一定比例，还是固定大小。要把设计稿想像得能够随时变宽变窄变高变矮，当大小发生变化时，按照预定的布局规则设计稿会变得怎么样。布局没有捷径，就是多思考多练习。给个例子，公司的设计稿是以5s为基准，分辨率640x1136，倍数2x。知道以哪个倍数为基准对适配很重要。比如说，有一次设计师不清楚怎么描述一个九宫格页面时，我让他针对6s+、6s、4s再做一次调整，基准倍数是2x，6s+基准到2x的尺寸便是828x1472，方便同一个设计稿复制到不同分辨率上，通过不同分辨率的调整便能做出满意的页面布局。（在这里你需要一套高效的标注工具）* 当倍数不为1x，所有px表示的数值都应该能被倍数整除。以2x为例，输出图标大小就不能为45px x 45px，因为当输出到1x和3x时就会出现小数，小数会被舍弃。正确做法是调整到44px或者46px。5、为什么不采用等比例缩放适配为什么不采用等比例缩放适配？说到底，更大的屏幕尺寸提供了更多内容展示的空间，等比例缩放没能把发挥出大屏的优势，同时也很难保证系统UI的一致性体验。现有的方法已经很好，何必到处找？
其实严格来说一套切图是可以适配到所有页面的，只是会显示糟糕（svg 貌似是可以一套切图通用）。但我猜你问的是否一套设计稿能否适配到两个平台的所有手机屏幕，是基本可以的，这是我最近总结的
欢迎提意见～
仅从切图角度其实是勉强有办法的。界面图各种比例下布局都要调整，但是常规图标是不会根据布局去随意调整大小的。所以如果你用 Sketch 的默认画板 1X 来设计，切图只要一次性导出 2x、3x 就能满足所有 iPhone 所需及基本上主流安卓的 720p 和 1080p，甚至可以针对更高分辨率的 4x 。因此界面设计基本上推荐用 iPhone 6 （375x667）做设计稿，这是另一个问题了，反正这个尺寸移植成其它比例最方便。
部分情况下，矢量图可以帮到你
一套iPhone5就可以适配安卓和苹果
非要说有也可以。参考一些游戏的做法首先预设一个屏幕比例（比如16：9）然后其他机器按照这个比例切黑边后缩放即可。
已有帐号？
无法登录？
社交帐号登录app切图哪些资源需要切多套分辨率？
例如安卓，除去用点九的一些图片资源，应该并不是所有的资源都要各种分辨率各切一套吧？（苹果也有类似问题）
目前主流分辨率是xhdpi和xxhdpi，先保证这两条，然后再适配hdpi
已有帐号？
无法登录？
社交帐号登录The page is temporarily unavailable
nginx error!
The page you are looking for is temporarily unavailable.
Please try again later.
Website Administrator
Something has triggered an error on your
This is the default error page for
nginx that is distributed with
It is located
/usr/share/nginx/html/50x.html
You should customize this error page for your own
site or edit the error_page directive in
the nginx configuration file
/etc/nginx/nginx.conf.

我要回帖

更多关于 ui设计切图 的文章

 

随机推荐