跳到内容

一块画布,从头到尾

每种工具都写入同一份文档,因此自由线条、组件实例和流程节点可以并存于一块画板上并相互指向。下面展示的都是同一块画板,只是裁剪了三次。

01绘制

从粗略开始的无限画布

自由线条、文字、图片,以及从矩形到决策节点一应俱全的形状库——用于三种结账方案相互竞争、其中一个被圈选出来的那部分工作。

  • 自由绘制和矢量路径工具,加上完整的形状集
  • 手绘样式是画板级别的设置,因此一块草稿画板对所有使用它的人都保持草稿状态
  • 缩放范围 1% 至 6400%,需要时可自动吸附
PRED
画板的草稿区域:手绘圈出的「结账?」、三条候选笔记中划掉了一条,以及一支潦草地选出胜出者的箭头rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun
02界面

精确到可以直接交付

画框、组件与实例,配合可提供精确几何数据的属性面板——选定的想法化为一个宽 250 的画框,其按钮以 218 × 44 被选中,间距在画板上测量得出。

  • 可复用的组件,可作为实例放置、替换或分离
  • 自动布局、对齐与分布,以及网格吸附
  • 每一侧可单独设置圆角半径,任意数字输入框均支持算术运算
F
画板的规格区域:一个经过测量的单页结账框架,其中选中了「支付」按钮,其尺寸和 16 像素间距以制图标注的形式呈现rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun
03示意图

经得起反复编辑的示意图

流程图形状与连接线会附着在其所指向的对象上——「支付」按钮与其扣款-批准-重试流程相连,移动任意方框都会重新走线,而不会留下孤立的箭头。

  • 连接线会附着在形状的边缘,并在其移动时自动重新走线
  • 提供流程、决策与终止形状,用于真正的流程图
  • 节点可以指向它所描述的线框图框架,二者位于同一块画板上
L
画板的流程区域:一条从「点击支付」经扣款与批准到收据的支付路径,带有虚线表示的重试循环,以及一条从线框图按钮引出的连接线rough passcheckout?one page,everythingtwo steps,cart firstguest pay,no accountthis onecheckout / one page · 250Checkout$481+emailcardTotal$48Pay now218 × 44 · r4btn / instance161644payment pathPay tappedCharge cardApproved?yesReceiptnoRetry cardyouJun

在你自己的画板上逐一体验这些工具

一人免费使用 · 无需信用卡
新建画板