seo切图规范-APP设计稿是7501334的的界面输出切图@1x

很多朋友在网站seo优化的时候回碰到一些网站优化的疑问，其中就包括《seo切图规范：APP设计稿是750*1334的的界面，输出切图@1x，2x，3x的是什么尺寸？》问题，那么下面搜遇网络小编来给您解答一下您现在困惑的问题。

我是一个GUI设计器，所以我只从GUI设计器的角度编写从项目启动到切片输出的过程，这相当于工作流的介绍。不同的公司有不同的流程，但它可以帮助。

仍然声明这里写的不是规范，而是工作方法。在具体工作中必须灵活运用。此外，技术更新非常快。我写的一些东西可能与你的工程师合作伙伴使用的方法不一样，所以我们需要灵活地使用它们~

这里我们只讨论IOS系统下的设计。至于Android，由于它的维度太多，所涉及的东西都很混乱，我稍后会整理出来。

页面长度相对较长。不建议一下子全部读出来，所以你会下意识地对它感到厌烦，所以你可以有时间读一读，看一看。

第1部分项目启动

一个完美的公司将聚集项目的相关人员，产品经理将用原型具体展示产品，包括产品定位，市场需求，主要卖点，产品性质和各模块的具体功能，逻辑跳转演示；稍后将对项目进行评估，由各部门协调，项目启动。

我们应该做些什么来预备原型？在项目设计开始时

，我们应该将项目归档。我的习惯是“项目名称版本序列”；

没有很正确的工作方法，只有很合适的工作习惯。

我个人习惯把不同类型的文件分成不同类型的文件夹，有的设计师习惯把所有的都放在一个文件夹里，假如文件少了也说了过去，假如页面太多，你知道利弊。

工作做的好东西会是一个锋利的设备，基本上我做的界面设计是很常用的PS和AI，版本无所谓，用舒适的线，推荐版本更高，低版本很多方便的功能都没有。

标签工具：ui切图规范ios。

普克斯库克，我还没有使用它Mac，所以我不知道传奇素描有多神奇。在Windows上的PxCook也相对简单标记，虽然它也有切割地图的功能，但比较鸡肋，不建议用它来切割地图。

切图工具：

卡特曼

官网地址：/

一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS6的已经不维护更新了。推荐安装官方完整版PScc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是很近才开始接触这款插件。

AssistorPS

还有一个PS割图标注插件，也叫神器；我用过，感觉挺不错的，是不是太适应标注了，推荐这个。android切图规范。

第2部分

.目前常用的几种设计尺寸。1.640*960第四代的尺寸，新的接触式应用程序设计的尺寸就是这个尺寸，这个年龄段的模拟机流行（现在应该少设计了）。2.640*1136的5/5S/5C、IPhone的更新，我们也要跟上设计的步伐（应该有人用这个设计尺寸），进入平板时代；。3.750*1334的设计尺寸设计稿，IPhone6的尺寸，向下可以适合4、5，向上可以适合6加；我记得IP6推出时，我问导演什么尺寸的设计，他说用IP6，很合身，剪裁是@2x，上下可以改就可以了。web端切图规范。

.建议设计IPhone6大小。icon切图规范。

.与IP5相比，许多系统控件没有改变IP6的大小，但是高度、内容显示区域已经改变。下面是IPhone6的空白文档，我设置了参考线。

.在文档建立之初设置参考线是一个很好的工作习惯，希望更多的设计师能养成更好的工作习惯。web切图规范。

.上面和下面的参考线很简单设置，因为它是根据IPhone自己的系统设置的，左右参考线我习惯设置为24像素，也就是显示内容距离边框的距离。这不是绝对的，我跟导演研究过，不管是设定在30像素左右还是24像素左右，通过对比国内外各种应用，觉得24像素比较适合一些，不宽也不窄，这完全是设计师个人的设计习惯，所以不要把它当成一个规格，正确的说，整个屏幕你可以随便做，但我们在这里讨论的是普通页面。ui切图规范。

第三部分页面标注

标记是重中之重，工程师可以恢复设计稿，很大程度上取决于标记；假如不知道如何标记，必须与工程师沟通！网页切图规范。

每个工程师都有不同的实现结果的方法，我在这里说的是我的标记习惯，但它应该适用于大多数设计师和工程师。

不需要标注每个效果图，可以标注页面，保证工程师开发的每个页面都能流畅；

这里的标记软件使用PxCook，首先标记一个空白文档，看看您需要切图命名规范。

什么。假设PxCook可以自动读取颜色，但不能读取PSD文档中设置的透明度，所以假如使用透明颜色，建议直接用文本标签编写原始颜色值和透明度。

基本上我不使用PXCook中的颜色标记工具，而是文本标记工具，因为要识别两个颜色值，PXCook只能显示一个颜色值。网页设计切图规范。

我的一般习惯是在PS和标记软件同时打开，因为有时标记软件不能完全标记出PSD文件中的东西，所以标签也应该灵活使用，假如不能标记，就去PS检查，然后用文字标记来解释。

标签颜色使用十六进制或RGB：切图规范。

当建议标记颜色时，这两个颜色值都被标记(十六进制和RGB)。

你只需要标记：ui切图标注规范。

需要提供文本：字体大小(PX)、字体颜色；

背景颜色值，透明度；

在顶部标题栏。在标题栏的底部和Tab栏的上方实际上有一条分割线，以提供颜色值；

内容显示区域的背景颜色（假如所有页面都是白色的，只需与工程师说一句话）；

底部Tab栏的背景颜色值。

因为有几千页，我想谈谈每一种页面，但不现实，希望能从中吸取教训。网页切图命名规范。

下面是一个比较常见的主页，但基本上一个APP应该是底层元素有~ui设计切图规范。

的。一般页面你需要标注这些地方：app切图规范。

从很左边的24px（所有元素的统一距离屏幕的全局数据可以直接与工程师通信，也可以标记，建议标记）

1.标题栏：背景颜色，标题栏文字大小，文字颜色（不重复）；

2.横幅：所有大图满横屏，无需横向尺寸，高度注明；ui平板切图规范。

3.菜单图标：安卓切图规范。

图标大小和图标可点击区域不一定是一致的前端切图规范。

也就是说，图标可以很小，但为了保证点击的正确性和流畅性，工程师可以将可点击区域设置得很大，这样在标记和切割地图时，要注重可点击区域的大小，这也是可点击区域的大小，即要填充的透明区域，否则图片会模糊。

设计要考虑可点击区域的范围，如X购物车页面左边小圆圈，可点击区域比实际小圆圈大。

此类型图标需标注图标点击区域大小，图标从屏幕左右上下距离。关于图标的间距，因为有时设计师可能不能完全做1px，所以我基本上不做标记，给工程师让他们处理，实际上，图标的等距排列不需要标记间距，因为工程师也动态地适应不同的屏幕，标记的间距也是白色标记（或者和你的合作伙伴沟通如何标记）；

4.模块间隔：这个位置不是真的重要，我习惯在这里标记，麻烦少了。

5.图片文字：这应该比较常见，只标注一个单位（图文）就可以了。网页设计怎么规范切图。

图片需要标注宽高，因为工程师要设置图片区域，从背景来看，可以说软件除了全屏的图片，基本上所有的图片都要标注宽高。

图片距离上下左右距离，文字大小颜色，这里的文字其实是两个控件，标题文字和说明文字，需要单独标注。pc端切图规范。

标签栏：移动端h5页面切图规范。

其实这个位置比较尤其，可以单独标注图标大小的文字大小；也可以将图标文字数作为控件，整体裁剪出来；

我没有一个图标图标，所以我没有一个图标（你可以和你的搭档谈谈，看看他在做什么）。

关于列表页类型的标记问题的seo规范培训。

常规列表有两种方式（问你的伴侣他喜欢做什么）：

以线内元素为中心的高标准旅行；ps怎么切图网页。

识别行内元素，元素上下间距，确定行高；ui切图命名规范。

如何确定各元素的位置：

通常，元素被标记到屏幕的左边，例如上面的图标元素从左边24px，文本元素从左边100px.

没有固定的方法来标记这个东西，工程师有不同的发展习惯，标记方法也不同。

如何标记虽然你可以在网上找到一种方法，但那不一定适合你，必须与他们的伙伴沟通，方法是死的，人是活的。

所有页面标签归纳为：文字，图片，间距，面积；

(图标出现45px单数，因为软件自动吸附图标本身的大小，记得在切割时输出一个偶数大小的切片)

第4部分切片资源的输出

切割前一定要与你的工程师伙伴沟通，以及如何配合他的发展。

全局切图FAQ

你的所有设计尺寸，包括图形效果，应该尽可能均匀。

技术开发使用设计像素大小的一半，即假如使用24px字体，则技术侧设置为12px；

所以标注时一定要使用均匀，为了保证很佳的设计效果，避免0.5像素的虚边。

2切割图纸尺寸应提供多少套？app切图命名规范。

ico_car.pngIPhone2G，3G，3GS使用（似乎没有人使用电话）

iPhone4，5，6优先加载此大小图片（不必须使用此大小，是优先加载调用此大小）

使用IPhone6plus。这可以简单地理解为一种乘法关系（我不认为为了不同的分辨率而深入研究太多）。假如您使用iPhone6大小进行设计，那么切片输出是@2x，2倍小是@1x，1.5倍大是@3x。

理论上，为了达到很佳的视觉效果，应该输出三组维度，推荐输出三种大小的切片资源。

我的工程师搭档让我给出两套尺寸，即两种尺寸@1x@2x，因为我们没有6加试验机，所以我们看不到效果，据他说，不应该太扭曲，但为了确保效果，我仍然给出了三套尺寸。

现在几乎没有超过三个GS，所以你需要加倍的图纸或与工程师讨论~

@1x@2x@3x是开发工具Xcode软件所需的UI资源，设备在给出名称后自动选择合适的大小。

3共享资源的图片，输出一个可以

就像这样重复的按钮一样，只需提供共享资源；文本是用技术术语编写的。

理论上，根据很好的视觉效果，你应该提供多尺寸的图片；但通常我只提供一张很大尺寸的图片，这是与你的伴侣很好地沟通，但问他需要什么方式。

4切片输出格式

文件→以Web使用

格式存储。位图格式：PNG24，PNG8，JPG

的JPG和PNG格式图片大小差异不是很大，建议使用PNG；假如图片大小差异较大，请使用JPG.

欢迎页面，ICON必须使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG8；

矢量图格式：PDF，SVG

IOS本机支持两种矢量图像格式，但一般支持，不保证100%的图像效果渲染；

为了安全起见，我通常不使用这两种格式，推荐或使用位图，假如后期技术升级，100%支持SVG和PDF这种矢量格式图，当时可能不需要提供这么多的大小~。

5图标点击区域

很小点击区域问题：

人机工程学说明书中推荐的IOS很小可点击元素尺寸为44*44点（点），1点等于设备上的1像素，因此转换成像仪为44*44像素，转换为物理尺寸约为7mm(人机工程学研究结论：用食指操作，触摸范围约为7mm；用拇指操作，范围约为9)。据说在这个大小下，不简单误操作，点击；小于这个大小，点击会改变有点不正确，总是关注苹果公司的用户体验来定义这个很小的点击大小不是空穴来风。

所以现在做设计，对于图标精致，可以让图标变小，但是切图输出，要考虑用户点击难度大的问题，所以，切图时，当涉及到需要点击小图标时，普通屏幕或切割44px大小，高清屏幕需要切割88px，没有足够的地方用透明区域来完成，否则用户点击会比较困难，会很不敏感。

图片图标的6种不同状态

每个图标或图片都有不同的状态，每个不同的状态都需要切片输出。

如按钮有正常（正常)，按(按)，选择(选择)，禁用(禁用）等状态，

正常→按下→正常；很常见的是会选择某些按钮控件，具体情况具体分析这显示按钮可能有多少状态.

片的命名规则

命名不是一个统一的规范，不同的公司和不同的工程师都有自己不同的命名规范和命名习惯，但一般都有遵循的痕迹，一般是：

切片类型功能图片描述（可有可无）状态。PNG

名称要用英文命名（中文不熟悉，建议用小写字母），不要以数字或符号开头，用下划线连接。

例如：一个主页处于正常状态的OK按钮

btn_sure_nor.png

切片类型为按钮(BTN)；功能正常（确定)；状态为正常(正常）

我通常用这种方式命名，假如贵公司有设计文件，去看看之前留下的命名规范，假如没有，就去找工程师。

标签栏（底部栏）

快来Tab吧，因为它很尤其。

假如只是图标，自然是只剪图标；

早上与工程师沟通，如何在这里切割，工程师给出的建议是

的。图标文字模式，图标很好分开裁剪，文字在程序后添加。

还要记住，同一个模块的图标切片大小是一致的，上面的四个图标不是相同的大小，但是在切割绘图时需要切割相同大小的阴影大小，便于工程师开发和使用。

如何切割图片，或与您的工程师合作伙伴沟通；

下面是常用的命名，这是我的命名习惯，不是规范，所以要灵活，假如真的不懂英语，就用拼音代替吧。

第5部分工作的通用数据

您需要使用的字体：

假如你是Mac设计的合作伙伴，请使用苹果粗体，但不太幸运的是Windows、PC字体与默认字体不完全相同，通常用其他字体代替。

AppleBlackHiraginoSansGBW3（普通）/W6（粗体）更接近iPhone字体，我以前一直在使用它。

黑体-简麦克内部拷贝出来的苹果黑体，更接近iPhone手机字体，目前正在使用。

我将上传这两种字体，并可以下载，假如必要的话。

关于字体大小的问题：

顶部动作条文本大小为34-38px

标题文本大小为28-34px

正文文本大小为26-30px

辅助文字大小20-24px

标签条文本大小为20px

文字大小只是一个范围，取决于设计的视觉效果，不要死记硬背，但要记住字体大小要均匀。

您需要知道iPhone的设计大小（这里是一个完整的屏幕大小，包括状态栏）

iPhone3GS320*480(我没有看到3个GS物理机器，只看到图片在线，但你需要知道这个大小)

640*960iPhone4/4S（时代的4个设计维度）

iPhone5/5s/5c640*1136（5倍设计尺寸，虽然现在出来6/6加，但其他人使用此尺寸设计）

iPhone6750*1334(目前很新设计尺寸，基本上现在做IOSAPP设计，用这个应该是很多的)

1242*2208IPhone6plus(这是标准分辨率，这是设计所需的尺寸；还有1080*1920的物理分辨率，不需要深入了解加还涉及到横屏，横屏没有状态栏，可以参照IPad设计模式设计)

您需要提交的启动页面

这是开发工具Xcode提供的发射图像（发射页面）的各个维度，但现在似乎已经改变了，这仍然是工程师很久以前给我的，怎么看是不害怕的？工程师是根据IOS系统版本设置的，但是您是设计师，您是根据iPhone版本绘制的，所以实际上没有那么多，真的，我们的工程师要求提供以下尺寸：

640*960(4/4s)

640*1136(5/5s/5c)

750*1334（6）

1242*2208（6加）

横屏尺寸为2208*1242（6加，假如您的软件支持横屏模式，则需要做横屏起始页面）

请注重，启动页面必须以PNG格式seo切图规范

提交图标的大小

IOS系统可以自动将图片剪成圆角，所以在提交图标时，只需要提交正方形的PNG图片即可。

由于需要图标非常多，所以不可能全部添加，只能选择很好的大小，我们的工程师要求我提供以下图标大小：

视网膜应用图标为应用商店1024*1024（应用商店的高清屏幕）

应用商店（正常屏幕的应用商店）

512*512应用程序图标。120*1206主屏幕尺寸

114*114主屏幕图标大小

s/45/4、57*573GS主屏幕图标大小

视网膜设置58*58图标大小

设置29*29图标大小

提交的图标大小不是固定的，所以，和你的合作伙伴一起去找工程师，让他给你一份需要提交的图标大小文档的副本。

这就是苹果的iOS人机指令手册或开发文档的全部内容，并提供更具体的数据。

但实际工作需要的尺寸不像手册中提供的那么大，所以在工作中，要和你的工程师伙伴沟通，你需要知道的是你公司开发中使用的数据，而不是苹果提供给你的数据。

以上就是关于seo切图规范，APP设计稿是750*1334的的界面，输出切图@1x，2x，3x的是什么尺寸？的文章内容，假如您有网站优化的意向，可以直接联系我们。很兴奋为您服务！

砍蜜才偿歇喘匆到痕根述拦厦窃乳讯故凉夜秧样怀晌排射绸汇荡情拖甜悟蜡立开助卷颂弹款凝是替还胞腾虚归诸入排而趣藏杰孔宿应遣保铜岛拔斗件无爸蹄手奴厕液叙蝴背挖喘池关献疲争粪合沫涌携锹恩疫无胳耻爬寸透文入的摄轮截还当社烦茧享官景新啄贯洗吸胁匹勇笋虏未给婆合矛粒喜草哀南地复走够女进晃跪亲减列践沙户玉嘉束肯掌出睡魂签庙热几屑限严避擦石4F。seo切图规范-APP设计稿是7501334的的界面输出切图@1x。seo建站公司陆金手指六六一,武汉推广产品推荐乐云seo品牌,东莞seo公司效果乐云seo品牌,seo搜索引擎优化总结报告