标注那点事

说点没用的：本来想把这篇放到站酷上去写，没想到一放上去就写不出。大概是熟悉了这种排版，或者是还没做好要被大家点评的准备。

---

标注插件

1. 马克鳗（markman）

   

   

   有5个功能键。分别是长度标记、坐标/范围标记、颜色标记、文字标记、移动工具。 使用缺点是不能局部放大缩小。优点是移动工具既可以移动图片也可以移动标注尺寸，不需要切换。

2. 像素大厨

   有人说像素大厨是马克鳗的山寨版，但是它针对马克鳗做了升级，也因此得到了好评。（具体请参考智能标注神器PXCOOK 2.0的新版功能前半部分）

   

3. Assistor

   

   这是一款PS插件。教程移步切图标记外挂神器ASSISTOR PS深入解读（上）以及 切图标记外挂神器ASSISTOR PS深入解读（下）

据说还有一款神奇的网页标注：标你妹上传了一个网页无效，不知道是不是只能标注app 使用推荐参考UI那些事——标注篇

---

标注方法

无论是标注还是切图还是做设计，熟悉软件是最基本的东西。熟悉软件之后就是了解规范，掌握方法。标注暂时没有什么规范，所以重要的是标注方法。

1.我的标注方法:【定性+定位】

导航栏和标签栏是通用性很强的东西，所以需要单独标注。就页面内容区的标注，想起以前学CAD的时候，老师给我们讲，尺寸分为定位尺寸和定性尺寸。其实也同样适用于网页标注。

比如说我们要画一个圆心坐标（25，10）半径为5的圆。圆心坐标（25，10）是定位尺寸，确定了圆心相对于坐标原点的尺寸。圆的半径为5是定性尺寸，来表达这个圆的。不知道大家有没有理解，定位尺寸是用来确定元素位置的尺寸，定性尺寸是用来表达元素本身的。

我们画一个按钮，画在哪是定位，画成什么样是定性。无论是图片、图标、文字还是按钮，使用这一准则通杀。

各个元素的标注基本元素：

  文字，需要标注文字的大小、字体、颜色、透明度、行高等等
  需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。

2.另外，参考授人以渔！用一个清晰的思路帮你掌握移动界面标注这一文，标注还有些其他要注意的：

「尺寸维度」的标注我们需要注意的是：

   1. 有圆角的地方，需要将圆角半径标出。

   2. 对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。

   3. 一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。

   4. 很多没有经验的设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小，实际上应该给出与屏幕的关系，比如说到左右的距离是多少。

「文字」的标注我们需要注意的是：

 文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚，我们看下面这张图：

  表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了，但是如果标题文字过多的时候该怎么处理呢？所以必须要给出一个极限情况的规范，比如最多显示多少个字符，字符超过极限值就用打点的方式处理，如下图：

「间距」的标注我们需要注意的是：

    理解间距的意义：有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。

上面这些内容不可能把所有的场景全部覆盖全面，任何特殊情况，都需要在页面上说明清楚以及和开发当面沟通来确保设计稿的完美实现，当然后期走查也是至关重要的！

另推荐文章：学会为设计稿做好标注（附工具推荐）

---

关于做设计和学习的一点思考和感悟

• 所以与其看那多内容，不如从根源上提高自己拆解、分析、总结的能力，这样无论以后你遇到什么样的问题，都能够迎刃而解（引用）。

• 以前都是随便看 现在就可一个点突击 看大量的资料 然后自己做总结

• 解决问题的工序与方法、清晰的逻辑思维….这些才是你最需要掌握的东西，但它们需要你不停的总结与分析，再多的资源与文章那都不是你的，千万不要用表面的积极去掩盖思想的懒惰（引用）！

  所以，加油！