摹客教程

摹客教程

摹客,让设计更快更简单

设计(新)

设计板块中,有三种模式:评论、定稿、开发。一个页面文档,分工明确,各取所需,可以灵活地适应不同团队的管理方式,协作更高效。

 

评论模式

当处于评论模式,可为当前页面添加评论。

讨论模式

 

评论工具

目前提供的评论工具有:矩形、圆、直线、箭头、图钉。

绘制工具

 

添加评论

  • 在上方评论工具条内,选择图钉工具,在页面内再次点击并输入内容;
  • 或鼠标按下并移动(圆、矩形、箭头、直线)的方式添加评论;
  • 还可以通过快捷键来选择或切换评论工具:矩形=R、圆=C、直线=S、箭头=A、图钉=D。

添加评论

 

  • 图钉评论图钉图标可以变换多种颜色,用以表达重要度、完成度。输入文字内容后点击发送,即可完成图钉批注。
  • 右上角下拉框可选择状态“未解决、完成、解决”,点击“删除”删除图标可删除该评论(注意:仅能删除自己创建的评论,但没有权限删除或修改其他成员的评论内容)。
  • 点击铅笔图标铅笔图标可修改该批注。

评论解决状态

 

选择工具

当点击选择图标选择工具后,可对页面上的多个评论进行框选。

选择工具

 

评论的多选与复制

选中多个评论后,右键选择复制(或Ctrl+C),对评论进行复制。空白处右键选择粘贴(或Ctrl+V)对该评论进行粘贴。

评论的复制和多选

 

等比例绘制

除图钉评论外,用绘制工具添加批注时,按住Shift,可等比例调整尺寸,线条可设置为水平、垂直、45度等类型的线。

等比例绘制

 

评论面板

评论面板展示了所有历史评论。点击面板右上角下拉框,选择”未解决“、“已解决”、“关闭”、”所有“,对评论进行筛选。

解决状态筛选

在团队协作时,如果多个成员添加了评论,可根据成员名筛选出某个成员的评论或者全体成员评论。

成员筛选

 

评论时,可@成员

评论时,可@某个成员或者全体成员。输入“@”符号便会弹出@成员下拉框,通过鼠标选取即可@目标成员。

屏幕快照 2018-12-29 下午3.37.36

被@的成员的头像左侧会接收到消息提示,点击消息内容即可跳转到评论页面。

被@成员

 

评论的微信提醒

当成员在评论中@某成员后,被@成员会立即收到微信消息提醒。提醒内容包括:评论者、项目名称、评论页面、评论内容以及评论时间。(注:微信登录的账号才可以接收到微信提醒。)

评论通知

 

 

定稿模式

文字标注

当处于定稿模式下,点击左上角的文本标志文本按钮,可为当前页面添加文字标注、可查看图钉评论。(注:协同人仅有评论模式和开发模式。)

文字标注

 

坐标标注(新)

在左上角选择坐标标注工具后 坐标图标,单击页面任意位置,你就可以标记该位置坐标信息。

坐标标注

 

尺寸标注(新)

在左上角选择尺寸标注工具后 尺寸图标,在页面任意元素周围左键绘制直线,你就可以标记该元素的尺寸信息。

尺寸标注

 

颜色标注(新)

在左上角选择颜色标注工具后 颜色图标,单击页面任意位置,你就可以标记该位置的色值信息。

颜色标注

 

区域标注

在左上角选择颜色标注工具后区域标注图标-2,在页面任意位置绘制矩形,你就可以标记该矩形的宽和高。

区域标注-2

 

翻页器(新)

你可以点击页面左右两侧的翻页器 翻页器图标 来快速切换页面。

翻页器

 

开发模式(新)

当处于开发模式下,标注智能生成。通过点击、hover设计图上的任意元素,查看相应标注。(注:开发模式只能查看标注。)

开发模式

 

iDoc中有三种自动标注模式:

1、间隔标注

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

iDoc无选中标注

 

 

2、图层间标注

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

iDoc选中标注

 

3、多选标注

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

 

iDoc多选标注

放大镜

开发模式下,点击左上角的放大镜图标或按下z键,即可召唤放大镜。

放大镜

在使用放大镜时,效果图上的标注信息将被定格,你可以移动鼠标查看放大状态下的标注情况。也支持按下小键盘中的“+/-”键调整放大倍数。

放大镜

图层树

图层树便于清晰的查看图层间的层次关系,可帮助工程师轻松理解界面布局。

点击图层树图标image.png,打开图层树。图层树结构与ps/sketch/xd中的图层结构一致,可以辅助选择、Hover标注图层。

图层树

图层面板

开发模式下,当页面中同一位置有多个图层,双击该位置,即可弹出图层面板。图层面板中会显示出该位置上所有图层。

屏幕快照 2018-12-28 下午5.15.08

选择右下角设置中的“锁定图层面板”后,每次双击图层,面板都会显示在固定的位置,避免遮挡。

固定图层面板

 

禁用图层

当页面中存在无效图层时可将其禁用,页面中禁用图层有三种方式:

1、在该图层上右键,点击“禁用该图层”。

屏幕快照 2018-12-28 下午5.21.17

2、在左侧图层树中,点击图层名称后面的禁用标志 禁用图标

屏幕快照 2018-12-28 下午5.24.52

3、双击某图层后,点击弹出面板中图层名后面的禁用标志  禁用图标,可禁用该图层。

禁用图层3

 

标注面板

界面右侧为标注面板。

标注面板上半部分,详细地展示了标注信息。一般包括:图层名、位置信息(左/上)、尺寸(宽度/高度)、边距(左/右/上/下)、不透明度;如果是文本内容,还包括:内容、字体、字体大小、字重、行高、字间距、对齐、颜色。

标注属性面板

 

复制 点击数值,可一键复制;

 

查找相同 点击搜索图标,可查找设计稿内重复的元素。

 

复制代码 标注面板下半部分,展示了样式代码。点击“复制代码”,即可一键复制。

 

百分比参照

在某个图层上右键,可将该图层所在区域设为百分比参照。此时,所有标注将以该区域作为参照计算百分比。(不设置百分比参照时,按住Alt键,可显示百分比标注)。

设为百分比参照

 

设置度量单位

设计图上默认度量单位为像素,如需要转换为其他平台单位(如ios的pt,android的dp,web的rem),可以在单位面板中切换。

目前支持通用设备转换、自定义宽度转换、自定义单位转换三种方式。上面的IOS和Android栏中罗列了目前通用设备的尺寸,可直接投入开发。自定义宽度转换是对通用设备转换方式的补充,对于特殊设备尺寸,可以自定义设备宽度进行转换。自定义单位转换,可以设置单位间的换算倍率,转换标注值。

设置度量单位

点击设置按钮设置按钮,可以显示/隐藏跳转区域和切图边框。

显示切图边框

 

 

 

相关阅读: