摹客教程

摹客教程

摹客,让设计更快更简单

标注

摹客iDoc中,标注智能生成,方便查看。

 

查看标注

通过点击、hover设计图上的任意元素,查看相应标注。

 

标注模式

iDoc中有三种标注模式。

1、无选中标注

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

无选中标注

2、图层间标注

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

单选标注

3、多选标注

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

多选标注

 

标注百分比

按住Alt,可以将标注转换为百分比,松开后复原。

百分比标注

放大镜

按住z键,即可使用放大镜,在使用放大镜时鼠标hover状态将被定格,你可以移动鼠标查看放大状态下的标注情况。如果放大倍数不够也可以通过在按住z键的同时使用“+/-”键调整放大倍数。

放大镜

图层树

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

点击图层树图标image.png,打开图层树。图层树结构由图层间的包裹关系与设计稿中的编组关系生成,可以辅助选择、Hover标注图层。

图层树1

标注面板

界面右侧为标注面板。

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

标注面板新

点击数值,可一键复制;点击搜索图标,可查找设计稿内重复的元素。

点击复制

查找相同

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

复制代码

 

设置度量单位

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

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

设置度量单位

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

设置按钮

 

 

相关阅读: