黑马程序员技术交流社区

标题: 【黑马程序员杭州】标注切图的那些事儿 [打印本页]

作者: 小江哥 时间: 2018-4-27 13:20
标题: 【黑马程序员杭州】标注切图的那些事儿
本帖最后由小江哥于 2018-4-27 13:20 编辑

[attach]226148[/attach] 今天给大家分享一下关于标注切图的方法，我相信，新入行吧的ui宝宝们经常会遇到这样的问题，一个页面到底需要标注哪些内容信息呢，怎么切图以及切几套图呢，如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。那在这里ui小姐姐就一一为你解决这些问题！

1、标注--标注工具：

ui小姐姐在这里着重给大家推荐的标注工具是pxcook-像素大厨，附上链接：http://www.fancynode.com.cn/pxcook

2、标注--如何标注：

新入行的宝宝，总是会问一个页面需要切几套？标注哪些内容？首先，为了更好的还原设计效果，设计师标注一套图就可以了。其次，至于标注哪些内容，你需要标注的内容有：

1.文字需要提供：字体大小(px),字体颜色；

2.顶部标题栏的背景色值，透明度；

3.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；

4.内容显示区域的背景色(如果是全部页面白色，那就和开发说一下就行)；

5.底部Tab bar的背景色值。

事实上，这个没什么严格的规定，所有的页面标注总结起来就是：标文字，标图片，标间距，标区域。你需要和程序员密切的保持沟通，能让程序员明白理解你想达到的效果就行，不要老想着是不是不专业，在程序员的眼里，没有觉得你专业不专业的问题，只有这个页面能不能完美的展示出效果，这些工作只是为了降低沟通成本并使设计效果更好的还原，不需要那么多套路。所有的标注图是给开发看的，所以如果有任何不清楚的问题都要及时跟开发沟通。

关于标注单位是用px还是dp/pt，这个也问题不大，问下程序要哪种你就给他标哪种，只要搞清楚设计稿在哪个ppi等级下做的就行，例如你如果用750*1334的设计，那么你要用pt/dp标注直接像素除以2即是，用720*1280设计也是一样，不用分安卓ios也没事，都是像素值除以2。如果是用1242x2208尺寸设计，那么就得除以3，一般以iPhone设计的情况下标注用px即可，让开发自己除以2换算成pt/dp也是很快的。

（这里给大家整理一个标注的案例）

虽然这些东西在新手看起来有点专业，但是要明白，所有的这些工作都是为了把产品做好，即使标注的再详细在实际开发过程中还是会有很多问题，很多程序员看到那么多密密麻麻的数字也不一定都会去认真看，因此有时间还是要去盯一下，不然道最后肯定会有很多细节问题，这样归责的话很尴尬，所以要做好一款好的软件产品，都是各方面的同事努力拼出来的。正因为如此在互联网团队里面要多和小伙伴们沟通，多去了解别人的工作。不要以为写个规范标注下就完事了。

3、切图--切图工具：

ui小姐姐在这里着重给大家推荐的标注工具是cutterman，Cutterman是现在最主流的设计师切图利器，能够自动将你需要的切图进行输出。极大的减轻了设计师的工作量，提升了切图效率。它支持各种图片格式、尺寸、形态输出，兼容安卓、iOS、WEB各种系统的一键输出。附上下载链接：http://www.cutterman.cn/zh 这里需要注意一个问题哦：注意这个插件只能安装到完整版的ps上，所以小伙伴们要用的话不要装绿色版哦，具体怎么装可以去看官网介绍。

4、切图--切几套：

首先，切几套：具体切几套图也是需要你和开发沟通的，开发需要几套图，就切几套图，举个例子

一般安卓切4-5套，具体几套还是要问开发，苹果切2套，目前大部分切的是2倍，3倍图。

5、切图--如何切图：

第一，在桌面上新建一个放切图的文件夹；

第二，回到ps里，各个图层命好名字，避免出现同一个命名，输出之后文件被覆盖的现象；

第三，选择你要输出的类型，cutterman支持多平台的切图输出，这里拿ios切图举例

这样一来，你桌面的文件夹就出出现你切的目标图层的2倍，3倍图了，是不是很简单呢？

除此之外，cutterman还可以切固定尺寸的图，设置宽高即可哦

好了，今天关于切图标注的分享就到这了，希望对你有所帮助哦

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2