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


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. 菜鸟之路——机器学习之Kmeans聚类个人理解及Python实现

    一些概念 相关系数:衡量两组数据相关性 决定系数:(R2值)大概意思就是这个回归方程能解释百分之多少的真实值. Kmeans聚类大致就是选择K个中心点.不断遍历更新中心点的位置.离哪个中心点近就属于哪 ...

  2. python 列表、元组 详解

    python中有6种序列的内置类型,分别为:列表,元组,字符串,Unicode字符串,buffer对象和xrange对象 列表和元组是最常见两种类型. 下面将以列表(list)和元组(tuple)为例 ...

  3. 在数组中寻找出现次数大于N/K的数

    给定一个int[]数组,给定一个整数k,打印所有出现次数大于N/k的数,没有的话,给出提示信息. === 核心思想:一次在数组中删除K个不同的数,不停的删除,直到剩下的数的种类不足K就停止删除,那么如 ...

  4. Linux下如何挂载和卸载硬盘?

    fdisk -l 查看所有被系统识别的磁盘 df -h 查看磁盘占用情况 sudo umount -v /media 卸载挂载点的硬件 df -T 查看所有磁盘的文件系统类型(type) mount ...

  5. 【bzoj4448】[Scoi2015]情报传递 主席树

    题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有若T名(可能没有)下线,除1名大头日外其余n-1名情报员有且仅有1名上线.奈特公司纪律森严, ...

  6. ZigBee学习四 无线+UART通信

    ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique messag ...

  7. 2017年浙江工业大学之江学院程序设计竞赛决赛 I: qwb VS 去污棒(可持久化Trie+离线)

    问题 I: qwb VS 去污棒 时间限制: 2 Sec  内存限制: 256 MB 提交: 74  解决: 26 [提交][状态][讨论版] 题目描述 qwb表白学姐失败后,郁郁寡欢,整天坐在太阳底 ...

  8. cf 843 A Sorting by Subsequences [建图]

    题面: 传送门 思路: 这道题乍一看有点难 但是实际上研究一番以后会发现,对于每一个位置只会有一个数要去那里,还有一个数要离开 那么只要把每个数和他将要去的那个位置连起来,构成了一个每个点只有一个入边 ...

  9. 求职之路(拿到百度、美团、趋势科技、华为offer)

    求职之路(拿到百度.美团.趋势科技.华为offer) 版权所有:无缰之马chhuach(CSDN和博客源),转载请注明出处.CSDN地址http://blog.csdn.net/chhuach2005 ...

  10. 四则运算出题系统,java

    程序设计思想: 首先通过判断选择计算的范围,然后用随机数生成两个随机数,定义另一个数,将两个随机数计算得到的值赋给定义的数 程序代码: package Kaos1; import java.util. ...