超全面的UI设计切图规范指南(附切图神器)

互联网   发布时间:2017-07-07 16:01:27   作者:佚名   我要评论

新手福利到!本教程将为各位平面设计学习者分享超全面的UI设计切图规范指南(附切图神器),教程包括设计切图的原则、切图输出类型、降低切图大小的方法及切图神器Cutterman介绍,绝对干货,小伙伴们快收了吧

移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

设计切图的原则

设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小,以降低APP的总大小,提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。

1.切图资源尺寸必须为双数

众所周知智能手机的屏幕大小都是双数值,比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位,换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊,进而造成开发出来的APP界面效果与原设计效果差距甚远。

2.图标切图输出应根据标准尺寸输出并且考虑到手机适配(主要是iPhone 6plus的适配)

在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。为了适配大分辨率手机(例如iphone 7plus)图标在切图的时候需要输出@2x和@3x的切图,其中@2x的切图可以满足双平台大部分机型的适配要求,@3x是用来适配iphone手机的各种plus版本的手机(后边会有文章专门讲解关于适配的问题)。@3x是@2x尺寸的1.5倍,例如一个图标切图@2x尺寸是44px,那么@3x尺寸是66px。

3.为了提升APP使用速度,尽量降低图片文件大小

在切图资源输出中图标切图输出是很重要的部分,比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小(文加压缩的方法在文章后面有详细讲解)。

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

44px的点击区域数值是在iphone 3 (320×480px)普通显示屏下制定出来的,在手机分辨率大幅提升的现在,这个数据自然要与时俱进。在iphone7 (750*1334px)的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px,换算成物理尺寸后大致是在7mm-9mm之间。早在人机工程学的研究中曾得出结论,认为人类舒适的触击范围需在7-9mm的大小。所以在ios官方的空间尺寸也经常出现88px的数值,比如菜单栏的高度便是88px。

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

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

相关文章

  • 抽象风格描边拼接插画的绘制技巧分享

    抽象风格描边拼接插画的绘制技巧分享给大家,描边插画的种类有很多,有矢量潮流、美国街头的、清新萌系的,我这次给大家讲解的描边插画是倾向于图形抽象组合的风格,描边拼
    2018-05-14
  • 设计师详解电商设计中的极简设计风格

    近几年,电商设计风格逐步走向简洁乃至极简的风格,文章从排版、颜色、字体3个方面详细讲解了如何做极简的设计,每个里面都有一些具体的知识点,对于极简设计风格还不是很
    2018-04-18
  • 混合工具怎么用?高级混合术在版面中的妙用

    混合,也叫调和,不同的软件中的命名不同,AI里为混合工具,CDR里为调和工具,虽然名称不一样,但功能是和所呈现的效果基本上是一致的,今天小编就给大家分享高级混合术在
    2018-04-17
  • 如何设计富有创意性的杂志平面广告?

    如何设计富有创意性的杂志平面广告?在设计杂志平面广告时,您需要牢记一些特定的设计规则,它们是1.创建独特的图像、2.页面空间的使用、3.利用色彩等等
    2018-04-11
  • SVG格式的图片编辑修改方法

    做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
    2018-03-25
  • 2018年值得设计师学习的六大视觉设计趋势总结

    本教程将给脚本之家的各位平面设计学习者带来2018年值得设计师学习的六大视觉设计趋势总结,文章分别给大家整理了关于这六大视觉设计趋势的概念简述,以及运用案例,感兴趣
    2018-02-08
  • 15个客户希望设计师掌握的设计技能

    15个客户希望设计师掌握的设计技能分享给脚本之家的各位平面设计学习者,这些例子大部分来自个人经验,虽然我目前为止并没有满足所有要求,但从客户的角度来看客户期望的是
    2017-12-21
  • 神器推荐 | 零设计基础如何做出超高转化率的海报?

    Fotor懒设计提供了不同场景所需要的各种尺寸下的海量模板。使用Fotor懒设计,你完全不用担心版权问题。Fotor懒设计只提供可以让用户商用的字体,模板上的图片也全是来自免
    2017-12-19
  • 30款最新的2018新年宣传单/海报/贺卡设计欣赏

    30款最新的2018新年宣传单/海报/贺卡设计欣赏分享给脚本之家的各位平面设计学习者,距离2018新年还有不到两个月的时间,各位设计师们又要忙于2018新年主题的设计了,希望这
    2017-11-06
  • 插画设计中明暗光影相关知识的分享

    插画设计中明暗光影相关知识的分享分享给脚本之家的各位平面设计学习者,文章主要分为光与暗、结构与明暗、明暗变化两大部分、明暗变化三大面及明暗变化五调子,感兴趣的朋
    2017-10-31

最新评论