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从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...
随机推荐
- js、jquery获取当前url中各个参数
首先,先把获取各参数的方式再写一遍,相信大家都耳熟能详,就写几个常用的吧. 以此网址https://i.cnblogs.com/EditPosts.aspx?opt=1为例: 1. var url=w ...
- 在 Xamarin.Android 中使用 Notification.Builder 构建通知
0 背景 在 Android 4.0 以后,系统支持一种更先进的 Notification.Builder 类来发送通知.但 Xamarin 文档含糊其辞,多方搜索无果,遂决定自己摸索. 之前的代码: ...
- ABAP--关于ABAP流程处理的一些命令的说明(stop,exit,return,check,reject)
Stop 命令 使用该命令的程序位置 INITIALIZATION, AT SELECTION-SCREEN, START-OF-SELECTION和GET 事件中 处理说明 1. 当在INITIAL ...
- CVE: 2014-6271、CVE: 2014-7169 Bash Specially-crafted Environment Variables Code Injection Vulnerability Analysis
目录 . 漏洞的起因 . 漏洞原理分析 . 漏洞的影响范围 . 漏洞的利用场景 . 漏洞的POC.测试方法 . 漏洞的修复Patch情况 . 如何避免此类漏洞继续出现 1. 漏洞的起因 为了理解这个漏 ...
- ios UI 适配布局相关文章
1. http://lvwenhan.com/ios/430.html 2 . http://blog.csdn.net/liangliang103377/article/details/400822 ...
- 操作系统开发系列—4.LDT
一直以来,我们把所有的段描述符都放在GDT中,而不管它属于内核还是用户程序,为了有效地在任务之间实施隔离,处理器建议每个任务都应当具有自己的描述符表,称为局部描述符表LDT,并且把专属于自己的那些段放 ...
- CoreData的使用
#import "ViewController.h" #import "Person.h" @interface ViewController () <U ...
- google 火狐 模拟显示手机页面插件
google user agent switcher扩展 火狐 user agent switcher
- 怎么样使用yum来安装、卸载jdk
安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java version "1.6.0"OpenJDK Runtime Envi ...
- jar 命令 打包装class文件的文件夹
由于将spring源代码导入到eclipse后,缺少jar包, 所以从maven仓库中下载spring发布的spring-core jar包. 为了方便理解目录结构,使用tree命令: tr ...