前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份《设计稿切图通用性标准文件》,这里是我结合资料做出的一份总结。


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

2、LOGO类图片以方形切图输出

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

   4、同一类型图片保持同样大小尺寸输出切图

全屏切图类:

局部切图类:

空白页提示案例图:

   5、有阴影背景的内容显示区域保持居中输出切图

   6、设计中单独有动效的图层与背景分开输出切图

   7、设计中动效始终保持一致的图层合并输出切图

同时缩小-放大

   8、动效元素切图输出

序列切图:要保证动效播放时的流畅自然

序列图实现效果:

   9、无需输出切图的部分

文字、纯色背景、线条和一些标准的几何图形是不需要提供切图的


注:转载请注明出处

【前端GUI】—— 前端设计稿切图通用性标准的更多相关文章

  1. APP UI设计及切图规范

    APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...

  2. 前端必备技能之Photosh切图

    切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用 ...

  3. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  4. 从网易与淘宝的font-size思考前端设计稿与工作流 (转)

    从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...

  5. 转发-UI基础教程 – 原生App切图的那些事儿

    UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...

  6. photoshop CC智能切图

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  7. 原生App切图的那些事儿

    如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一 ...

  8. Sketch 和 PS中的设计图如何实现“自动切图”?

    切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...

  9. [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

    网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketc ...

随机推荐

  1. noip 2018 d2t1 旅行

    noip 2018 d2t1 旅行 (题目来自洛谷) 给定n个城市,m条双向道路的图, 不存在两条连接同一对城市的道路,也不存在一条连接一个城市和它本身的道路.并且, 从任意一个城市出发,通过这些道路 ...

  2. mybatis sql转义符号

    第一种写法:通过<![CDATA[ ]]>符号来写 大于等于:<![CDATA[ >= ]]> 小于等于:<![CDATA[ <= ]]> 例如:sql ...

  3. c#委托使用

    public class StepArgs : EventArgs { public int m_IMax = 0; public int m_IStep = 0; public string m_S ...

  4. c# 操作access数据库image ole字段

    using System; using System.Data; using System.Configuration; using System.Web; using System.Data.Ole ...

  5. 爬虫:Scrapy2 - 命令行工具

    Scrapy 是通过 scrapy 命令行工具进行控制的. 这里我们称之为 “Scrapy tool” 以用来和子命令进行区分.对于子命令,我们称为 “command” 或者 “Scrapy comm ...

  6. qw

    // 主页 @RequestMapping(value = "/home") public ModelAndView home() { ModelAndView MV = new ...

  7. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  8. (一) Spring基础概述

    1.历史 第一阶段:xml配置 在Spring1.x时代,使用Spring开发满眼都是xml配置的Bean,随着项目的扩大,我们需要把xml配置文件分布放到不同配置文件中,需要频繁的在开发的类和配置文 ...

  9. The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?)

    The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing ...

  10. HTML 文档之 Head 最佳实践

    语言 在 html 标签中通过 lang 属性进行明确的语言声明,将会有助于翻译,英文.简体中文和繁体中文网页所属性值如下: <html lang="en"> < ...