ios移动端切图及前端规范
移动端IOS知识普及:IOS标准分辨率:1242px * 2208px
切片要求:
1、 设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X1334,图片资源尺寸则是2倍图尺寸,在二倍图的基础上压缩成50%,图片资源尺寸则是1倍图尺寸;
2、产品效果图独立切片,即是每张效果图独立建立一个文件夹(命名以效果图名称为准),文件夹内容包含1倍图文件、2倍图文件、 3倍图文件和标识文件
3、图片命名要求语义化,格式为png;
4、图片资源需要备有1倍图、2倍图、3倍图,3倍图命名规则为:添加后缀@3x;2倍图命名规则为:添加后缀@2x;例如:1倍图:abg.png,2倍图则为:abc@2x.png,3倍图则为:abc@3x.png;
5、字体:IOS默认字体—— 英文 HelveticalNeue 中文 黑体;字体大小采用点pt,设计稿以相对单位px,字体大小需要进行转化,转化公式为:px*72/96=pt(eg:12px*72/96=9pt), 字体颜色只需给出rgb值(eg:color:rgb(255,255,255));
6、页面纯色背景需标出rgb值,如果有透明度则需标出rgba值,其他特殊背景直接切图;
7、页面的图标、色块、按钮的高度都必须是4的倍数,最小像素不能低于44px,如不够可以添加补白;
8、页面外边距留白为10px;
9.启动图标1024*1024,png格式,不能透明底,透明的部分补白色。
IOS切图规范:
设计图:1242X2208
三倍图:按1242X2208来切 iphone plus
二倍图:将整个设计图压缩成750X1334 按750X1334切
一倍图:在二倍图的基础上压缩成50%一倍图
Ios启动图
- 图标按照最大1024*1024来设计,之后按照比例缩小到每个尺寸,再进行调整,提交没有高光和阴影的直角方形图即可;
- 29*29
- 58*58
- 40*40
- 80*80
转自:http://www.cnblogs.com/hanbingljw/p/4330033.html
ios移动端切图及前端规范的更多相关文章
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- iOS界面设计切图小结
iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:15 ...
- PS-前端切图教程(切jpg图和切png图)
微微一运功,把家底都抖出来了. 不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了 所以可能教程中还是有没用过ps的人看不懂的地方, 欢迎加群讨论:613512106... ---------- ...
- 【PS切图】前端工程师必备,但又无需精通的一项技能。
前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认 ...
- App切图命名规范
转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...
- 前端PS常用切图技巧
前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就 ...
- 【原】PSD图标素材的全自动切图方法,适用于IOS、安卓、web前端等领域
屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标 ...
- APP UI设计及切图规范
APP UI设计及切图规范 1.概述 1.1 编写目的 该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档.部分内容来自网络收集修编,转载请注明由 ...
- iOS设计 - 一款APP从设计稿到切图过程概述
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...
随机推荐
- Popline:帅气的浮动 HTML5 文本编辑器工具栏
Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便. 您可能感兴趣的 ...
- JavaScript事件对象
一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...
- 从零开始,做一个NodeJS博客(四):服务器渲染页面与Pjax
标签: NodeJS 0 一个星期没更新了 = = 一直在忙着重构代码,以及解决重构后出现的各种bug 现在CSS也有一点了,是时候把遇到的各种坑盘点一下了 1 听歌排行 API 修复与重构 1.1 ...
- ae柱状图
- SharePoint Server 2016 IT Preview 先睹为快
1.首先下载SharePoint Server 2016 IT Preview安装包,大约2.8GB,当然如果有需要,还可以下载两种提供测试的语言包,其他语言包还未提供下载,如下图: 2.我是在已经安 ...
- html框架—多对话框(相同id)处理
一个网站的数据大多数都是异步刷新的,这没什么好说的,然后现在很多前后端框架,大家都知道框架很好用,不用自己写样式,只要利用框架上的语法就能做出漂亮的动态的效果来,而用框架的话大多数的动态效果都是动态生 ...
- iOS界面传值的方式(7种)
iOS传值的方式 属性传值 方法传值 代理传值(delegate) block传值 单例模式方式 通知notification方式 UserDefault或者文件方式 1.属性传值 情况:A页面跳转到 ...
- 之三:CAAnimationGroup - 动画组
动画组顾名思义就是将多个不同的动画效果组合起来同时作用于一个层上 代码演示: // 创建基本路径 CGMutablePathRef path = CGPathCreateMutable(); // 设 ...
- Source Insight基本使用和快捷键
Source Insight基本使用和快捷键 为什么要用Source Insight呢?貌似是因为比完整的IDE要更快一些,比较利于查看大量的代码. 软件的安装很简单,设置好安装目录. 配置好文档路径 ...
- RxJava 和 RxAndroid 三(生命周期控制和内存优化)
rxjava rxandroid 赵彦军 前言:对Rxjava.Rxandroid不了解的同学可以先看看 RxJava 和 RxAndroid RxJava 和 RxAndroid 二(操作符的使用) ...