There are three modes in the design section, namely “Comment, Review, Development”. This one-page document makes the division of labor clear and does not force the order of use. Therefore it flexibly adapts to the management style of different teams, making collaboration more efficient.

Comment mode

You can add comments on the current page in the Comment mode.

讨论模式

Comment styles

Currently, there are 5 comment styles available for your choose, including: Pin, Circle,Rectangle, Arrow, Line.

评论工具-英

Add an comment

Inthe upper Comment toolbar, you can click to select the needed comment tool.Click on Pin to enter your comments or press and move the mouse to use Circle,Rectangle, Arrow and Line tools.

Also,you can use the shortcut keys to select or toggle the comment tools: Select=V,Pin=D, Circle=C, Rectangle=R, Arrow=A, Line=L.

添加评论-英

  • ThePin tool 图钉评论 includes various marker color for highlighting the project importanceand completion. After entering the text content, click to send the comments inthe Pin.
  • From the upper-left drop-down menu, you can select the comment status- Unresolved, Completed, Resolved. Also, click Delete option 删除图标 for comment deletion(Note: You can only delete comments created by yourself,  and you don’t have permission to delete or edit comments from other members).
  • Click Pencil option 编辑图标 for comment editing.

评论状态-英

Select tools

Click  选择图标 to select a tool, and you can drag an area and select multiple comments.

选择工具-英

Multiple select and copy comments

Select multiple comments and right click on Copy (or Ctrl+C) to copy the comments. Right-click on the blank and select Paste (or Ctrl+V) to paste the comments.

评论的多选与复制-英

Isometric drawing

In addition to the pushpin comment, when adding or resizing with the drawing tool, hold down Shift to adjust the size in proportion, and the line can be set to horizontal, vertical, 45 degree, etc.

等比例绘制-英

Select an comment

Thecomment panel displays all of history comments. Click the upper-left drop-downmenu on the panel, you can select the Unresolved, Completed, Resolved, Allstatus to filter the comments.

解决状态筛选-英

During team collaboration, if multiple members have added comments, you can filter out a member’s comments or all member comments based on their names.

成员筛选评论-英

@ Members in Comments

When commenting, you can @ a member or all members. Entering the “@” symbol will bring up the @ member drop-down box, in which you can select the members you want to mention.

评论@成员

The mentioned members will receive a message prompt on the left side of his/her avatar. Click on the message content to jump to the comment page.

被@成员提醒

 

 

Review mode(New)

manual specs

In the Review mode, click the text button 文字标注图标-英 in the upper left corner to add text markups to the current page and view pin comments. (Note: Collaborators can only use comment mode and development mode.)

定稿模式-英

 

Development mode

In the Development mode, specs can be generated smartly. You can view the corresponding specs by clicking or hovering on any elements of the design page. (Note: You can only view specs in the Development mode.)

开发模式

Specs mode

There are three specs viewing modes in Mockplus iDoc:

1. not select any layers

Without selecting any layers, if you move between the layers, then it will automatically display the specs of the distance between them.

间隔标注

 

2. move between the layers

Select a layer and mouse over another layer to display the specs for the distance between the two layers.

图层间标注

 

3. select multiple layers

Hold down the Ctrl key and select multiple layers to display the specs for the distance between multiple layers.

多选标注

Magnifier

In the Development mode, you can popup the Magnifier by clicking the magnifier icon in the lower left corner or pressing the Z button.

放大镜-英

 

When using the Magnifier, the specs information on the design page will be fixed, and you can move the mouse to see the specs in the zoomed state. You can also press the “+/-” keys to adjust the magnification.放大镜

Layer tree

The layer tree provides a clear view of the hierarchical relationships between layers, helping engineers to easily understand and interface layout.

Click on the layer tree icon 20181101_213036 to expand the layer tree. The layer tree structure is consistent with its layer structure in PS/Sketch/XD, which can assist in selecting and hovering layers.

图层树

Layer panel

When there are multiple layers in the same location on the page, double-click the location to pop up the layer panel. All layers in that location are displayed in the layer panel.

图层面板

After selecting “Lock layer panel” in the settings in the lower right corner, each time you double-click the layer, the panel will be displayed in a fixed position to avoid occlusion.

锁定图层面板-英

Disable layer

It can be disabled when there are invalid layers in the page. There are three ways to disable layers in the page:

1. Right click on the layer and click “Disable layer”.

禁用图层1-英

2. In the left layer tree, click the disable button 禁用标志-英 behind the layer name.

禁用图层2-英

3. Double-click a layer and click the disable icon  禁用标志-英 behind the layer name in the pop-up panel to disable the layer.

图层面板3-英

 

Specs panel

On the right is the specs panel.

The top half of the specs panel displays the detailed information. Generally, it includes the layer name, position (left/top), size (size/height), margin (left/right/up/down) as well as opacity. If it’s text content, it also includes the content, font, font size, font weight, line height, word spacing, alignment as well as color.

标注面板-英

点击复制Click on the values and you can copy them with one click;

查找相同and you can click on the search icon to find the duplicate elements on the design draft;

复制代码The lower half of the specs panel displays the style code. Click “Copy code” and you can copy them with one click.

Reference layer of percentage specs

Right-click on a layer, and you can set it as the reference layer of percentage specs. This layer will be used as a reference to calculate the percentage value of the specs.

百分比参照

Set the measure unit

The default measure unit on the page is pixel. If you need to convert to unit on other platforms (such as the pt in iOS, the dp in Android and the rem in Web), you can toggle in the unit panel.

At present, it supports general device conversion, custom width conversion, and custom unit conversion. The size of the current general-purpose device is listed in the iOS and Android columns above, and it can be directly used in the real development. The custom width conversion is a supplement to the general device conversion method. For special device size, you can customize the device width for conversion. In the custom unit conversion, you can set the conversion ratio between units and convert the specs value.

设置度量单位-英

Click the settings button and you can show/hide the jumping area and the page border.

显示:隐藏切图边框-英

 

 

See also:

 

Design(New)