专业网站制作app切图命名规范规范都有哪些

来源：蜘蛛抓取(WebSpider) 时间：2018-08-17 02:36 标签： 安卓切图规范
如何高效地输出iOS和Android标注和切图(原创)_Photoshop教程_动态网站制作指南
如何高效地输出iOS和Android标注和切图(原创)
来源：人气：10771
　　现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？　　首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。　　对于设计环节。　　我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。　　那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。　　来看设计环节的交付物。　　iOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。　　高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。　　标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？　　众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸　　于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。　　我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。　　关于dp与dpi等概念，请参考文章：http://www.zhihu.com/question/　　我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式，480*800像素尺寸设计图中，开发看到300px宽度的标注，会定义其为宽200dp，到这里Android开发才得到一个他们真正会用于开发的数值。　　这整个过程，设计师做iOS尺寸图并标注，设计师调整iOS尺寸图为Android尺寸并标注px，Android开发看着设计师交付的标注，再将其换算成dp，很长的一个过程。　　其实经过以上整个过程之后，我们已经得出了一个更简单的换算关系：iOS像素尺寸*75%=Android像素尺寸，Android像素尺寸*2/3=Android的dp尺寸。进而得出：iOS像素尺寸*75%*2/3=Android的dp尺寸。所以，iOS里一个宽600px的东西，在Android的hdpi模式下，正好300dp，正好是50%，很容易算是吧？　　在这个关系的指导下，我们可以在同一套UI图上做适用于两个平台的标注。只要Android的开发知道，标注600px的东西，在hdpi模式下等于300dp这个换算关系，一切都简单了。当然，平台的区别要留意，例如iOS使用十进制色值，Android使用16进制，iOS可以绘制圆角和阴影，Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。（如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替代其中一个，的截屏工具中也是带色值提示的，办法很多不再赘述。）　　至此，已经可以做一套标注，让Android和iOS的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用！　　下面看切图　　在iOS切图与Android切图的转换中，是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后，就是Android的hdpi模式下的切图，而Android开发还需要其他dpi模式的切图，按照如下关系换算即可。　　关于Android不同dpi的参考文章：http://www.zhihu.com/question/　　我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要适配，就需要单独处理图片了。　　要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调UI重新切，要小多了。　　至此，我们设计一套适配iOS的高保真UI，基于该UI做一套适用于iOS和Android两类开发人员的标注，再输出一套可适用于iOS和 Android的xhdpi模式的切图，再调整一套Android的hdpi模式切图，基本上大部分工作就已经完成了。　　是不是感觉这种方法的工作量，一个人能干三个人的活了？（作者：hoovay，http://www.origintel.com/）
优质网站模板网页制作中的切图是什么？什么是切图
在网站制作中我们经常会听到定稿后我们就好进行了，那么到底是一个什么样子的工作，让我们专业的前端工程师告诉您。
是网站制作过程中的一个专业术语、是前端工程师必备的一个基础技能，是将设计文稿转化为HTML的过程。
在网站制作的过程中，切图是指讲设计好的PSD文稿转化成html的工作，利用DIV+CSS将设计文稿以网页的形式表现出来，切图的切指的是将设计文稿中的图片根据布局 的需要，利用Photoshop的切片工具将图像在文稿中分离出来，配合DIV+CSS完成静态页面的制作。
切图的误区
切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，切图中的切是将设将设计文稿中的图片根据布局的需要，利用切片工具将图像在文稿中分离出来。
早期的网页布局大部分采用table布局，代码繁琐不利于管理，DIV+CSS可以做到框架和表现分离，容易修改而且，页面体积较小，所以我们文汇传媒作为一家专业的建站公司，在给客户做网站的时候切图主要以DIV+CSS为主。
那么我们为什么要进行切图呢？
切图是为了让设计文稿转化成为浏览器能够识别的HTML页面，提高页面的加载速度。
切图的优势
第一个做到图文分离，文字和图片分开用户可以自主选择网页中的图片和文字。
第二可以增加交互性效果，页面中增加js代码会让页面产生动感效果。比如这个客户可以参考下图片和下面的链接http://www.cnwenhui.cn/d/case/xuemeng/
切图的工具
切图常用的工具是Photoshop 和 Fireworks 配合Dreamweaver完成DIV+CSS的布局
切图是一项比较耗费时间的工作，在公司中有不少公司为了尽早完成网站的制作，只将表面上的内容进行一个div+css的制作，有很多可以细化的内容给硬性忽略掉，就会导致页面加载较慢，用户体验较差，我们保证每个页面都会仔仔细细的进行，也欢迎广大客户进行监督。
想要了解更多关于，的信息可以文汇的官网查看哦！
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
专业的企业网站建设公司
专业的企业网站建设公司
今日搜狐热点专业网站制作切图规范都有哪些_百度知道
专业网站制作切图规范都有哪些
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
你的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励20（财富值+成长值）
采纳数：270
获赞数：226
根据html协议写代码的！！游侠SEO
为你推荐：
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。

我要回帖

更多关于 安卓切图规范 的文章

 

随机推荐