熬着夜手动做标注?

用工具自动标注,却被攻城狮追命连环call?

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

设计稿标注——其实——可以「自动+手动」!

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

如果,自动标注一键生成,手动标注自由补充,

一定☆☆☆☆☆通过标注大关~

为什么标注需要「自动+手动」?


手动标注到自动标注,在设计界是有一个演化的过程的。以前呢,设计师都是老老实实地手动做标注,密密麻麻,细细碎碎……自动标注的出现,可以说是把设计师从不堪重负的状态下解放了出来。

那有了自动标注就OK了吗?NO

⊕ 标注可能缺失自动标注的前提是基于设计稿的图层元素,也就是说,无论你的设计稿是PS、Sketch、Adobe XD或者其他类型,都是需要图层数据的,对于没有图层数据的部位,自动标注不会发挥作用,就很有可能造成标注缺失了。

⊕ 标注可能不准设计稿的图层结构通常十分复杂,图层之间往往重叠、穿插,存在空白图层、分组等复杂情况。自动标注识别能力有限,不够准确,甚至还会造成标注错误呢。

⊕ 难以全面表达比如自适应方案描述、必要的交互说明等等,这个是自动标注不能解决的,必须人为补充哦。

这些看似很小的缺陷,却会让设计师在使用自动标注时,左右为难,甚至把自动标注视为鸡肋,“食之无肉,弃之有味”,被迫一朝回到解放前……

怎么办呢?如果「自动+手动」两种标注方式可以结合起来,那就完美了!「自动标注」一键生成,解放双手;「手动标注」自由补充,灵活机动。有没有能做到的工具呢?

为此,小摹特意做了详考,究竟有没有符合要求的?

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

可以看到,摹客iDoc的解决方案是最全面的,它的「自动+手动」做到了我们所希望的。

戳视频立即看看是怎么回事儿吧~

摹客iDoc「自动+手动」功能展示


为了让协作设计更加高效,灵活地适应不同规模和类型的产品团队,摹客iDoc推出了“柔性工作流”,通过“一条主线多个节点”的工作流解决协作难的问题。标注是设计和开发之间交付协作的重要载体,iDoc的「自动+手动」标注就是在柔性工作流的设计主线下进行的。

具体来讲,就定位到设计主线下的定稿和开发这两个节点。定稿和开发两个模式的场景划分,最大程度地保障了设计师和开发工程师可以高效协作,同时又互不打扰,两个模式也可以自由切换,随需选择,相辅相成。

定稿模式:手动标注的完美表达

设计师可以通过手动标注,可以形成一份轻量级的PRD文档,将设计规范更准确地传达给开发人员。

1、文字标注

以文本描述的方式,解决手动标注不能传达的信息,比如自适应方案描述。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

2、坐标标注

以标注设计稿上某一元素坐标位置的形式,方便开发人员准确获取元素位置,比如当界面存在浮动按钮或者悬浮设计时。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

3、尺寸标注

可对页面任意元素左键绘制直线,准确获取该元素的尺寸信息,比如文字图层上的文字间距等,最大程度地保证开发还原度。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

4、颜色标注

单击即可提取设计稿任意元素的色值信息,包括设计稿切图上任意元素的色值信息也可标记。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

5、区域标注

可以标注任意区域的尺寸信息,在准确标注了图标的占位大小后,就不会因为尺寸不匹配而出现图标被拉伸的情况了。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

此外,定稿模式中还支持自定义标注的线段类型、线宽、文字颜色、透明度,又快又简单。

开发模式:自动标注+手动标注完美呈现

开发工程师可按需自由查看标注信息,手动标注可选择开启或关闭。下载多种设备尺寸的切图和导出CSS代码,不仅大大节省设计师的工作量,也提升开发效率。

iDoc中有三种自动标注模式,只需点击、hover设计图上的任意元素即可查看:

1、间隔标注

不选中任何图层,鼠标在图层之间的间隔经过,智能标注两个图层之间的距离。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

2、图层间标注

选中一个图层,鼠标在另一个图层上hover,标注两图层间的间距。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

3、多选标注

按住ctrl键,选中多个图层,可以标记多个图层之间的距离。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

开发模式中,iDoc还有更多提升效率的tips:

1、放大镜:细致入微,标注细节一清二楚

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

2、图层树:查看图层间的层次关系,一秒get界面布局

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

3、图层面板:双击查看同一位置的多个重叠图层信息,无效图层还可以禁用

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

4、标注面板

标注面板上半部分展示标注详情信息;下半部分展示样式代码。均可一键复制。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

5、百分比参照

按Alt可显示百分比标注,不需要提前设置参照,系统会自动选取相邻的父级图层作为百分比参考。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

6、切换开发平台

不同平台单位(如iOS的pt,Android的dp,Web的rem)自由切换,智能适配不同设备,还可自定义设备。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

摹客iDoc「自动+手动」使用指南


1、上传设计稿Sketch、PS、Adobe XD、图片等)到摹客iDoc

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

2、上传设计稿后,选中某一张设计稿,点击顶部导航的【设计】

如果你需要切换设计稿,使用翻页器或项目树就能轻松搞定,不用再返回画板进行选择哦~

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

3、在定稿模式中进行「手动标注」

目前提供有5种标注工具:文字、坐标、尺寸、颜色、区域。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

4、在开发模式查看标注「自动+手动」,获取标注信息

自动标注在上传设计稿后自动生成,手动标注在定稿模式中生成,两者在开发模式下都可以直接查看。当然,工程师还可以下载不同设备尺寸的切图、查看标注信息(尺寸、透明度、颜色、字体、字号)和导出CSS代码。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

这里有一个详细的教程,欢迎查看:

https://help.mockplus.cn/idoc

摹客iDoc,自动标注一键生成,手动标注自由补充,面临项目瞬息万变,设计稿繁复难言,交付重重困难,你需要自动标注一键生成,解放双手提升效率;更需要手动标注自由补充,精确传达每一个自动标注hold不住的信息,所谓左右开弓,并驾齐驱,如此双管齐下,才是产品团队提升效率的必备神器,欢迎你和你的团队也来体验看看~

福利来啦波普先生联合摹客带来福利,设计神器摹客iDoc免费赠送专业版。领取方式如下:

前往https://idoc.mockplus.cn/get-idoc/?hmsr=trista,登录/注册后输入福利码mrpop即可。

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

原作者:Trista 摹客已授权

– End –

你也许还想看

金山内部资料!超实用的视觉设计文档整理规范

17种设计字体的创意方法

2018设计师的未来指南|干货分享

Eagle如何实现资料云同步 |软件技巧

如何一键将PSD转换成Sketch源文件|Sketch技能分享

“标注真累!” “赶紧用神器来「自动+手动」标注呀!”

波普先生官网:www.mrpop.cn

也可以戳阅读原文体验哦~

原文始发于微信公众号(波普先生):“标注真累!” “赶紧用神器来「自动+手动」标注呀!”