画布

画布显示的是实时、可交互的草稿。你可以像在真实页面上一样在其中点击、输入和滚动。画布上方的工具栏包含本页介绍的各项工具。

预览和代码

• 预览 显示可用的界面。
• 代码 显示画布上当前版本的 React 代码。代码为只读；点击 复制代码 即可复制。

桌面、平板和手机宽度

使用三个设备按钮，可以分别以全宽、768 像素（平板）或 390 像素（手机）查看草稿。画布有足够空间时才会显示这些按钮。

手机按钮之后的 所有尺寸 按钮会并排显示草稿在手机、平板和桌面宽度下的效果，每个都是可交互的实时页面，并缩放以适应画布。浅色或深色模式以及预览语言会同时应用到三者，因此可以一次检查某种语言在所有宽度下的效果。如需选择、测量或添加批注，请切回单一宽度。

测量间距

选择 测量间距（尺子图标），即可像在设计工具中一样检查间距。也可以不开启该功能，直接在画布上按住 Alt（Mac 上为 Option）键进行测量。

• 将指针悬停在某个元素上，会在它的四边显示红色标尺，并标出以像素为单位的距离。上、下、左、右每把标尺都会连到该方向上与它对齐的最近元素；如果中间没有其他元素，则连到其容器的边缘。该元素还会显示自身的宽度和高度。
• 点击某个元素即可从它开始测量，再将指针悬停在另一个元素上，就能看到两者之间的间距。悬停在它的容器上，可以看到四个方向的内边距。
• 在触摸屏上，先点按一个元素，再点按另一个。
• 按 Esc 键可放开点击的元素，再按一次即可停止测量。

距离是草稿中的 CSS 像素，包含边框，因此不会随画布大小而变化。测量时，点击不会按下按钮，也不会打开链接。

重新加载

在草稿中点击浏览后，重新加载画布 会让它回到第一个界面。在你与草稿交互之前，该按钮处于停用状态。

版本

会话中的每份草稿都会保留为一个版本。有多个版本时，工具栏会显示类似 2/2 的计数器，以及撤销和重做按钮。

• 撤销 显示上一个版本，重做 显示下一个版本。不在输入框中输入时，也可以按 ⌘+Z 和 ⌘+Shift+Z（Windows 上使用 Ctrl）。切换版本时不会重新加载工作区。
• 下一条请求会修改画布上当前显示的版本，因此你可以回退并尝试其他方向。
• 已保存的原型最多保留最近的 20 个版本。

比较版本

点击 比较版本，即可通过中间的滑块并排查看两个版本。两侧会同步滚动。

• 在 修改前 和 修改后 列表中任选两个版本。
• 拖动分隔线，或将焦点移到分隔线上后使用方向键（按住 Shift 可移动更大步长，按 Home 和 End 可移到两端）。
• 恢复到修改前 会将修改前的版本放到画布上，你的下一条请求将基于它修改。
• 点击 完成 或按 Esc 退出。

浅色和深色预览

当草稿使用了你的某个颜色主题时，会出现 深色模式 按钮，方便你检查两种模式。这只会改变草稿，不会改变 Vibr 本身。

以其他语言预览

预览语言 按钮（翻译图标）可以用其他语言显示草稿，让你在真正翻译之前就能看到设计的表现。你可以从 40 多种语言中选择，其中包括从右到左阅读的阿拉伯语和希伯来语。草稿中的文本、占位符和标签都会改变，页面也会相应设置语言和方向。你的代码不会改变，而且在你继续构建时，所选语言会保持开启。

• 由你的模型翻译。 Vibr 会使用你的密钥，将草稿中的可见文本发送给你选择的模型，每次几十条字符串。新出现的文本（例如递增的计数）会在出现时翻译。每条字符串在每个会话中只翻译一次。
• 从右到左。 新草稿使用 marginInlineStart 等逻辑属性，它们会自动翻转。开启阿拉伯语或希伯来语时，设计审查还会查找使用 left 或 right 的样式以及不会镜像翻转的箭头，“修复”会在草稿显示之前修复这些问题。在你切换语言之前生成的草稿则会显示一条提示，并提供 修复为从右到左 按钮。
• 伪 无需模型。它会给每个字母加上变音符号，并让文本长度增加约 40%，类似德语或芬兰语常见的长度，因此被截断的标签和固定宽度问题会立即暴露出来。
• 示例无需密钥。 示例提供 Vibr 的所有语言版本，因此用其中任何一种语言预览示例（包括阿拉伯语和希伯来语）都无需密钥。其他语言以及你添加到示例中的文本，由你的模型翻译。
• 以该语言导出。 开启某种语言后，“导出”菜单中会增加 该语言版应用 选项。导出的页面会以该语言和相应的方向打开，并同时翻译草稿中的其他文本，例如其他标签页和对话框。其他导出方式则保留草稿原文。
• 字体。 如果导入的字体缺少该语言的字符，通知会列出几个缺少的字符，并推荐包含这些字符的相似 Google Fonts 字体。选择 使用… 会将其作为备用字体添加到该字体的字体层级中，画布和导出的应用都会加载它。
• 选择 草稿原文 即可恢复。

画布中的链接

链接不会离开画布，因此点击链接不会让你丢失草稿。Vibr 会告诉你该链接指向哪里。导出的应用会正常跳转。打开其他已保存界面的按钮可配合 播放 使用；请参阅流程。

在手机上使用

在小屏幕上，Vibr 会以标签页形式显示 对话 和 预览。“预览”上的圆点表示有你尚未查看的新草稿。画布上方放不下的工具会移到 操作 菜单中。 如果画布上方的工具放不下，可以左右滑动查看。