设计师手稿如何对自己的设计稿有效标注

来源：蜘蛛抓取(WebSpider) 时间：2018-05-26 21:08 标签： 服装设计师手稿
视觉设计师是怎样让前端工程师 100% 实现设计效果的？ - 知乎<strong class="NumberBoard-itemValue" title="被浏览<strong class="NumberBoard-itemValue" title="2,578分享邀请回答1.8K138 条评论分享收藏感谢收起41832 条评论分享收藏感谢收起拒绝访问 | www.colabug.com | 百度云加速
请打开cookies.
此网站 (www.colabug.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(4394-ua98).
重新安装浏览器，或使用别的浏览器如何有效与装修设计师沟通？ - 知乎860被浏览<strong class="NumberBoard-itemValue" title="6分享邀请回答939 条评论分享收藏感谢收起10855 条评论分享收藏感谢收起设计师如何对自己的设计稿有效标注
一些刚开始做UI设计的设计师不知道怎么标注自己的设计稿，不知道开发同学都需要哪些尺寸和信息，做一个简单介绍。
设计师如何对设计稿进行正确的标注 &大雨
对刚开始做UI设计的同学来说，什么是导航栏、工具栏、菜单栏、状态栏 都要迷茫一段时间，好不容易明白谁是谁了就开始纠结我该用哪个尺寸来设计啊？？？ 是750*1334？还是375*667？还有Android手机，是720还是1080？听说碎片化很严重啊， 我该怎么做？等这些零零碎碎的知识点都&记&牢了，也设计出了还不错的界面出来以后， 你满满的成就感可能要被开发的同学给打击的稀碎。原因是你给了不规范的标注图， 给了开发不规范的切图，你把开发的同学整的要疯了。
用sketch的同学可以飘过了，这篇文章写给坚持用ps的同学。
现在我们聊聊设计师该如何标注自己的设计稿给开发同学，才能够愉（BU） 快（ZAI）的(MA)玩(NI)耍.
这是我以前的一个设计稿，以它为例讲一下标注。
好多UI会给出这样的标注。
这样的标注给到开发同学手里，咋一看 好像没问题，开发没细看的情况下也不会说什么。 但是,他真的开始写的就会崩溃了。
开发的同学为什么崩溃，我们来说一下。
首先，不管是iOS还是Android，在布局上都是相对布局。准守的也是从上到下、 从左到右的原则。设计师给到开发手中的有标注图和各个icon。开发同学 安装设计师给的标注图来写页面。我给的例子是720像素宽的Android界面，之 所以不说页面的高是多少像素是因为尺寸太多了。能够看到我给的标注单位 不是px而是dp（自行百度详解），dp的意思是与像素无关，是Android为解决碎 片化问题提出的概念。程序会判断屏幕的分辨率来自动适配不同尺寸的手机，当然 、icon是要准备多套的。这张标注上的问题有哪些呢？
1)、没有总宽度
不管设计尺寸是720（360dp），还是dp）都要明确标示出来。
2）、没有标出icon和图片的宽和高。
不是你会把icon切出来给开发，就感觉图片放到哪个位置就会完美显示。icon也是 要适配不同屏幕的所以不管是icon还是文字都是有宽和高的。一定要标注出来。
3)、这个不是标注问题，是icon的规范问题。
你有没有发现如果所有的icon都是圆形的，那么你很容易把它们的宽高画的一样， 但是项目中我们不会画一样的icon。这样我们就不能保证每一个icon的宽高都是 一样的。这时候我们就要有一个热区的概念，给每一个icon都加一个一样宽高的外框， 切图的时候是按照外框的宽高来切的，这样就保证了icon的统一，也增加了icon的点击 面积（热区）。当然这样做你肯定要花费一些精力，但是会使你的设计更加可控，要知道 你不加热区的情况下负责的开发同学也会加上的，这时候你的标注尺寸就变得无效，你要 花费更多精力去协调。而且、你用markman或像素大厨标注设计稿时，你怎么确定icon的 边、文字的边。要知道，不同的字体占用的高度是不一样的，你要是知道一些CSS知识，你 会发现不同字体的&padding&是不一样。
下面标出一个相对完善的标注图给大家
icon下面的灰色部分就是我说的热区（方便讲解才显示出来），也是我画图标的时候的一个参照。这样icon 就会是一样的大小。包括图片的宽高也是，字体下面的灰色是字体所在的位置，这样的标注图 给开发同学就会很好理解，即便是要你去交代一下，也会很明白的讲清楚，大大的 提高了沟通效率，和工作效率。
为什么要这么麻烦的整理icon
我画icon时会有意识的注意到宽高比例，所以感觉有热区和没热区的区别不大，但是看最后的搜索 图标，是不是很明显的不一样。如果所有的icon或图标都没有一个规范的话，想想都知道开发按着 你给的标注写出来的界面不会理想。所以，规范自己的设计习惯对整个开发都起到积极的作用。
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
37人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的编辑推荐大作
设计师如何对自己的设计稿有效标注
在她入驻到UI中国的日子里
总共吸引了6206位设计师的驻足流连
总共收获了40位设计师的由衷赞赏
总共获得了37位设计师的悉心珍藏
总共引起了8位设计师的深入讨论
依然要删除吗？没有更多推荐了，
不良信息举报
举报内容：
设计师给了px单位的标注，Android开发到底要设置多少dip、dp、sp？
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！

我要回帖

更多关于 服装设计师手稿 的文章

 

随机推荐