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

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

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

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

局部切图类:

空白页提示案例图:

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

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


7、设计中动效始终保持一致的图层合并输出切图
同时缩小-放大:



8、动效元素切图输出
序列切图:要保证动效播放时的流畅自然

序列图实现效果:

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

注:转载请注明出处
【前端GUI】—— 前端设计稿切图通用性标准的更多相关文章
- APP UI设计及切图规范
APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...
- 前端必备技能之Photosh切图
切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流 (转)
从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...
- 转发-UI基础教程 – 原生App切图的那些事儿
UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...
- photoshop CC智能切图
网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...
- 原生App切图的那些事儿
如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一 ...
- Sketch 和 PS中的设计图如何实现“自动切图”?
切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...
- [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
随机推荐
- ActionContext源码
/* * Copyright 2002-2006,2009 The Apache Software Foundation. * * Licensed under the Apache License, ...
- LINUX SHELL脚本攻略笔记[速查]
Linux Shell脚本攻略笔记[速查] 资源 shell script run shell script echo printf 环境变量和变量 pgrep shell数学运算 命令状态 文件描述 ...
- iOS开发UI篇—CALayer
一.简单介绍 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. 其实UIView之所以能显示在屏幕上,完全 ...
- RS232与TTL
TTL电平,RS232电平和CMOS电平 不同点:TTL232的0是用0v表示,1是用5V表示.RS232的0是用+3V--+15V表示,1是用-3V---15V表示. 接口一般都用三根线:1:地线: ...
- [SDOI2008][luogu2463] Sandy的卡片 [kmp]
题面 传送门 思路 这道题里面有三个主要问题: 1.由"数值相等"变成了"加上一个整数以后数值相等"(减去等价于加负数) 2.由"最多匹配多少位(从第 ...
- 荔枝丹(litchi)
荔枝丹(litchi) 题目描述 绛雪艳浮红锦烂,玉壶光莹水晶寒. 高名已许传新曲,芳味曾经荐大官. 乌府日长霜署静,几株斜覆石栏杆. --明·陈辉<荔枝> 荔枝(丹),拼音为lizhid ...
- pat 甲级 1099. Build A Binary Search Tree (30)
1099. Build A Binary Search Tree (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...
- UVA1218 Perfect Service
Time Limit: 3000MS 64bit IO Format: %lld & %llu /*by SilverN*/ #include<iostream> #inc ...
- *LOJ#2306. 「NOI2017」蔬菜
$n \leq 100000$种蔬菜,每个蔬菜有:一单位价格:卖第一单位时额外价格:总量:每天腐烂量.每天能卖$m \leq 10$单位蔬菜,多次询问:前$k \leq 100000$天最多收入多少. ...
- 模拟浏览器的GET和POST动作
Jakarta的httpclient3.1是最新版本,项目中需要用程序模拟浏览器的GET和POST动作.在使用过程中遇到不少问题.1. 带附件的POST提交 最开始都是使用MultipartPo ...