移动端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启动图

  1. 图标按照最大1024*1024来设计,之后按照比例缩小到每个尺寸,再进行调整,提交没有高光和阴影的直角方形图即可;
  2. 29*29
  3. 58*58
  4. 40*40
  5. 80*80

转自:http://www.cnblogs.com/hanbingljw/p/4330033.html

ios移动端切图及前端规范的更多相关文章

  1. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  2. iOS界面设计切图小结

    iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:15 ...

  3. PS-前端切图教程(切jpg图和切png图)

    微微一运功,把家底都抖出来了. 不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了 所以可能教程中还是有没用过ps的人看不懂的地方, 欢迎加群讨论:613512106... ---------- ...

  4. 【PS切图】前端工程师必备,但又无需精通的一项技能。

    前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认 ...

  5. App切图命名规范

    转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...

  6. 前端PS常用切图技巧

    前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就 ...

  7. 【原】PSD图标素材的全自动切图方法,适用于IOS、安卓、web前端等领域

    屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标 ...

  8. APP UI设计及切图规范

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

  9. iOS设计 - 一款APP从设计稿到切图过程概述

    这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程,相当于工作流程的介绍.这里写的不是一种规范,只是一种工作方法,加上技术的更新是非常快的,大家在具体工作中,一定要灵活运用. 这里我 ...

随机推荐

  1. [ASP.NET MVC] 使用CLK.AspNet.Identity提供依权限显示选单项目的功能

    [ASP.NET MVC] 使用CLK.AspNet.Identity提供依权限显示选单项目的功能 CLK.AspNet.Identity CLK.AspNet.Identity是一个基于ASP.NE ...

  2. 12款响应式的 jQuery 旋转木马(传送带)插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  3. 2015年最佳的15个 Node.js 开发工具

    Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些工具 ...

  4. EventRay UI Kit – Web & Mobile 的素材

    EventRay UI 工具包是一个免费的,可以现成使用的界面套件.包括多个为  Web 和移动应用设计的布局和 UI 元素.所有你需要做的就是下载这个 UI 工具包,点击源码下载打开的页面即可下载. ...

  5. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  6. MySql基本概念(一)

    MySQL基本概念 一. 数据库系统概述: mysql是数据库系统的一种,下面是所有数据库系统中主要的组件. 数据库系统由硬件部分和软件部分构成,硬件主要用于存储数据库中的数据,包括计算机.存储设备. ...

  7. HTML中tr标签设置边框不显示的解决办法

    今天在操作表格的时候发现设置表格中行的边框没有显示,然后自己新建了一个表格发现确实不显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  8. jquery实现内容滚动

    HTML代码: <div class="scollNews"> <ul> <li><a href="#">1&l ...

  9. sharepoint2010问卷调查(3)-实现问卷的开始和结束时间(采用自定义字段类型)

    接着上面的图片调查,sharepoint自带的问卷调查是没有开始和结束时间的.这个在项目过程不太实用.问卷一般有开始和结束时间的.因此需要自己 动手开发一个自定义字段类型字段.如下图: 开发添加栏目会 ...

  10. RPM命令学习

    在centos中安装jdk,原本是要按照jdk1.7,结果装纯1.8,用的rpm安装包. 安装命令 rpm -ivh jdk-8u65-linux-x64.rpm 查询命令 rpm -qa|grep ...