教程 > iDoc > 基础教程 > 画板

画板

摹客iDoc全貌画板中,展示了项目所有页面。你可以快速的预览所有设计稿,并为设计稿之间建立逻辑线,用于表示页面的跳转逻辑;同时提供全局的地图导航,方便快捷的到达目标位置。

画板操作

摹客iDoc全貌画板中,展示了项目所有页面。

查看操作

1、拖拽移动画布

鼠标在画布空白处左键按下,可拖拽移动整个画布。

按下空格+左键,无论在哪都可以拖拽画布(鼠标在页面上也能进行拖拽)。

2、缩放画布

你可以用以下方式缩放画布:

  • 点击缩放器;
  • Ctrl+鼠标滚轮;
  • Ctrl++(放大),Ctrl+-(缩小),Ctrl+1(100%),Ctrl+2(200%),Ctrl+3(300%);
  • 双击百分比数值后,允许输入数值,自定义缩放比例。

3、全览画布

右键点击画布,在右键菜单中选择“全览”,或者按快捷键F,画布将自动缩放到刚好容纳所有页面的比例。

4、演示模式

右键点击画布,在右键菜单中选择“演示”,或者按快捷键P,可进入演示模式;按Esc键,可退出演示模式。

演示模式下不能编辑页面的位置、逻辑线、逻辑线描述。

画布导航

画板导航显示当前可视区域,移动小矩形可快速定位。

右键点击画布,在右键菜单中选择“导航”,或者按快捷键M,可显示/隐藏画布导航。

移动页面

你可以通过以下方式选中页面:

  • 左键点击,可单选;
  • 按住Shift,左键连续点击,可多选;
  • 按住Shift,左键点击拖      拽,可框选多个页面。

选中页面后进行拖拽,可以移动页面。

逻辑线

逻辑线用于表示页面之间的逻辑关系。

1、添加逻辑线

选中页面,拖拽左侧箭头到另一张页面上即可建立逻辑线。双击逻辑线可添加描述。

2、删除逻辑线

选中逻辑线,右键点击,选择”删除“;或者,选中逻辑线后,按Delete键即可删除。

3、显示/隐藏逻辑线描述

右键点击画布,在右键菜单中选择“显示/隐藏逻辑线描述”,或者按快捷键S,可显示/隐藏逻辑线描述。

页面操作

右键单击页面,弹出右键菜单,可对页面进行操作:“复制”(Ctrl+C)、“粘贴”(Ctrl+V)、“删除”(Delete)、“聚焦”、“下载”、“设为项目封面”。

其中,选择“聚焦”,页面会100%居中展示在画布中。

选择“下载页面”可下载选中页面;选择“设为封面”,可将选中页面设为项目封面。

另外,在画布中右键单击,在右键菜单中选择“下载所有页面”,即可下载画板内所有页面。

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

文件上传

可将文件直接拖拽至画板进行文件上传。

1、上传图片

将图片直接拖拽至选定区域,即可完成图片上传。

2、上传文件夹

将文件夹直接拖拽至选定区域,即可完成文件夹中所有图片的上传。

3、上传zip压缩文件

将zip压缩文件直接拖拽至选定区域,即可完成压缩文件中所有图片的上传。文件按照目录结构自动解析。

4、右键上传

在画板空白处点击右键,选择“添加新页面”,也可上传新的页面。

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

页面标记

通过页面标记,可以表示页面的状态和进度。

1、添加页面标记

点击页面左上方箭头图标展开页面标记面板,依次选择图标和颜色进行组合。添加后,页面标记会显示在画板和项目树中。

2、删除页面标记

展开页面标记面板,选择”删除标签”,即可删除页面标记。

3、选中页面时,点击左侧上方“设置首页”图标,可以将该页面设置为首页。

画板重排

画板中Ctrl+A全选页面,右键「重排」,即可将画布上所有的页面整齐排列。

你还可以在画布上出现的菜单栏上设置重排的列数。

自定义画布背景色和逻辑线颜色

点击画板左下角的“设置”按钮,可自定义画布背景色和逻辑线颜色,选择“重置为默认”即可恢复到默认颜色。

状态图

状态图,即在一个页面中上传多个副本,保留不同的状态。摹客iDoc状态图还支持自动轮播、拖拽调整顺序、合并或分离等等……小摹先来给大家展示一下:

状态图上传

状态图支持Sketch、XD、PS插件上传:

  • 在PS中上传状态图,选中单个画板并勾选“上传所选画板”。点击“上传”按钮,完成首次画板状态的上传。
  • 修改画板的内容后,再次选中本画板并勾选“上传所选画板”,点击“上传”按钮。
  • 此时,若想替换之前上传的页面,则选中“覆盖已有状态”选项,并选择需要覆盖的页面;
  • 若想上传一个新页面,则选中“添加新状态”选项,并输入页面名称,iDoc画板中就会呈现出所有上传的状态图。(多状态图上传重复以上操作)。

上传状态图PS

  • 在Sketch、XD中上传状态图,选中单个画板。
  • 点击“上传状态图”按钮,完成首次画板状态的上传。
  • 修改画板的内容后,再次选中本画板,点击“上传状态图”按钮。
  • 此时,若想替换之前上传的页面,则选中“覆盖已有状态”选项,并选择需要覆盖的页面;
  • 若想上传一个新页面,则选中“添加新状态”选项,并输入页面名称,iDoc画板中就会呈现出所有上传的状态图。(多状态图上传重复以上操作)。

上传状态图Sketch

查看所要覆盖的状态图细节

当选择“覆盖已有状态”时,下方会显示之前已上传的状态图。双击下方的缩略图,可查看之前的状态图细节,再选择所要覆盖的状态图。

状态图轮播

查看各个状态图可通过点击下方的圆点进行切换。也可将鼠标放在页面上,点击页面中心的播放按钮,此时状态图就会自动轮播。

状态图轮播

在左下方设置面板中,可选择不同的轮播效果及轮播时间。

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

状态图的合并与分离

鼠标放在状态图下方的切换按钮,会有不同状态的文件名提示。按住Ctrl键选中多个页面,右键选择“合并为状态图”,即可将多个状态图合并;若想将状态图分离成多个页面,拖拽页面下方任意一个按钮,即可将状态图分离。状态图可以很随意的多选合并(1+多, 多+多, 多+1, 1+ 多+ 多等等)。

上一章节 使用插件
下一章节 评论