English

型雕 是什么?

型雕 是一款为 iPhone 和 iPad 量身定制的掌上移动原型设计工具。它可以让任何人直接在自己的 iPhone 或者 iPad 上完成原型设计,并立刻演示运行。

型雕 的主页是 http://xpage.pgang.cn,并已经发布到 苹果商店 。

我们致力于将 型雕 打造为史上最能满足您需要的移动设计软件。如果您有任何建议或意见,请直接告诉我们。我们将回复每一封反馈邮件。

目录

快速开始

在 型雕 中,可以通过两种方式来轻松创建应用原型 :

高仿真原型

  1. 创建原型项目,为该原型创建一些页面。
  2. 为这些页面插入视觉对象,并调整它们,直到满意。
  3. 完成视觉设计后,为需要参与交互的对象指定适当的链接目标页面和转场特效。

纸绘原型

  1. 先用笔在纸上绘制原型。
  2. 拍照,将它们导入到原型中。
  3. 选择适当的页面位置,插入一些不可见的“热点”对象,为这些对象指定适当的链接目标页面和转场特效。

回到目录

原型项目

在 型雕 中,每一个 App 原型都对应于一个项目,两者含义相同。

型雕 的起始界面展示了当前包含的所有 App 原型,包括这些原型的名称、图标、详细描述、所包含的页面数等信息。

原型项目分类

您的所有App原型都位于 本地 区域中。点击任意一个“App原型”,即可打开并编辑该项目。

发现 区域则展示了在社区中分享的App原型。目前,可以查看和演示社区分享的App原型,但不可进行编辑。

创建新原型

在原型项目集合界面,点击屏幕右上角的 按钮,创建一个新的应用原型项目。

您可以创建一个全新的 空白项目 ,也可以选择 导入项目模版,利用项目模版来创建新项目。

选择设计机型

型雕中,每一个设计稿都针对一个具体的物理机型(包括页面尺寸和页面方向)进行设计。型雕 支持跨越不同设备来设计、预览您的应用原型,即使这些设备具有不同的屏幕分辨率。为了更好的操作体验,我们推荐尽量在高分辨率机型上运行 型雕,并且为较低分辨率的机型进行设计。

在新创建一个原型时,可以为它选择一个合适的机型来作为设计目标。也可以在任何时候调整设计机型。

Default Page Size

跨机型使用时的限制

您虽然可以在高分辨率机型上编辑或预览为低分辨率机型所设计的应用原型,但会存在一些限制:

回到目录

复制 & 删除原型

在 型雕 主界面上长按一个原型不放(iPad/iPhone),或者点击鼠标右键(Mac),然后在弹出的对话框中选择 复制 或者 删除,以复制或者删除一个本地原型。

主界面 - 上下文菜单

设置原型信息

在 型雕 主界面上长按一个原型不放(iPad/iPhone),或者在它上方点击鼠标右键(Mac),然后在弹出的对话框中选择 信息 ,以打开 原型详情 界面。在此界面中可以修改本地原型项目的名称、描述、图标、设计目标机型,并查看它的 URL 方案

项目详情

URL 方案

你可以在 型雕 中使用 URL 方案。URL 方案是链接中的一部分,指定了设备用于打开 URL 的应用程序的类型。许多 App 都支持 URL 方案:打开以 facetime:// 开头的 URL 时,FaceTime 通话会使用 URL 方案来拨打电话,就像 Safari 浏览器处理以 http:// 开头的 URL 一样。

型雕支持符合 Apple 标准的 URL 方案。用户可以通过《快捷指令》或者任意第三方应用来调用型雕中的原型,并传递参数。一个原型项目的 URL 方案是由它的名字决定的。打开项目详情页面,可以查看用以打开此原型的 URL 方案。点击它,会将其拷贝到系统剪切板。

回到目录

演示您的原型

演示

打开原型界面,点击界面左下方的 播放 按钮,以演示这个原型文稿。

通常,原型文稿将以全屏模式演示,除非您设定的画布尺寸比演示所用设备的实际屏幕尺寸更小。

在演示原型时,在页面集合中的第一个页面会被第一个展示。如希望将另一个页面作为演示的第一个页面,可将该页面移动到页面集合中的第一位。

演示并录制

将交互式的演示过程录制为视频,可以更加直观地展示应用原型的预期场景和行为。

点击 录制 按钮,进入演示模式,并将演示过程录制为视频。如果您正在录制演示视频,那么在退出演示模式后会自动停止录制。之后,您可以预览、剪辑所录制的视频,然后点击 保存取消

请注意,型雕 目前会录制整个应用窗口,而不是仅录制原型虚拟设备所在区域。如果物理设备和原型虚拟设备的屏幕分辨率不一致,而且原型没有使用自动布局,会引起黑边现象,比如在 Mac 上录制 iPhone 演示视频时,或在 iPhone 14 上录制 iPhone SE3 演示视频时。因此,推荐使用 自动布局 来达到最佳录制效果。

投屏到 Mac

使用 Mac 系统自带的 QuickTime Player,可以将 iPhone / iPad 投屏到 Mac。

QuickTime Player

退出演示

如果您想退出演示模式,可以使用多种操作方式,并在不同的设备上有不同的推荐方式。

在 iPhone 上,推荐使用 双指捏合 手势,或者使用 三指点击 手势来点击屏幕,然后选择 退出。对于 iPhone,也可以使用 摇动以退出 。前提是原型设计中未使用”摇晃设备”事件以触发其它交互动作。

💡 提示:地图 对象会使用 捏合 手势来进行区域缩放。因此,当页面中含有地图对象,且该对象占据很大区域时,建议使用 三只手指点击 或者 摇晃设备 的方式来退出演示模式。

在 iPad 上,推荐使用 双指捏合 手势,或者 三指点击 手势来点击屏幕,然后选择 退出。如果您的 iPad 已经连接到硬件键盘,可以按下硬件键盘上的 ESC 键来退出演示模式。

在 Mac 上,推荐按下硬件键盘上的 ESC 键来退出演示模式。如果您的 Mac 已经连接到妙控板,可以使用 三指点击 手势来点击 妙控板。

回到目录

添加到主屏幕

我们设计好一个原型后,可以使用 型雕 将这个原型添加到设备的主屏幕上,让它们看起来像是一个真正的应用,可以直接点击运行。

自从 iOS 13 发布后,使用 iOS 自带的 快捷指令 应用来将设计原型添加到主屏幕:

快捷指令

准备好原型

假设我们已经设计了一个叫做 欢迎 的原型。现在让我们为它在 主屏幕 上创建一个快捷方式。

打开 快捷指令

返回 设备主屏幕,然后运行 快捷指令 应用。

快捷指令 应用中,点击 创建快捷指令,并为它添加一条操作:新建 > 网页 > Safari 浏览器 > 打开 URL

打开 URL 操作中,填写 URL 为 xpage://open?prototype=原型名称。其中,原型名称为所希望自动打开的原型设计文档的名称。

💡提示: 按照 快捷指令 应用的要求,请避免在原型名称中使用空格。

点击 更多 > 添加到主屏幕,编辑 主屏幕名称图标,然后点击 添加

现在,一个新的图标将出现在设备主屏幕上。在设备主屏幕上点击这个原型图标,会启动 型雕 ,并自动演示所指定的原型文档。

回到目录

导出原型

点击 分享 按钮,选择如下选项:

💡提示:导出为型雕专用格式或图片 后,可以通过各种方式分享。但微信与iOS的兼容性很差,常常无法被正确唤起(据传闻是因为占用了太多资源)。解决方法是手动杀死并重启微信,即可正常分享到微信。

导入原型

从 文件 中导入

打开 文件 应用, 选择所需导入的原型文档,然后再选择 复制到 型雕

⚠️ 注意! 如果在文件应用中找不到您在另一台设备上保存的文档,这很可能是因为苹果公司提供的 iCloud 服务还没有来得及将文档同步到您的当前设备上。苹果公司提供的 iCloud 服务需要稳定的网络连接,并且通常需要一定时间才能完成同步。因此,保存到 iCloud,并不意味着您的设计文档能立刻在您的所有设备上可用。

从 邮件 中导入

如需导入通过邮件分享的项目文档, 请启动 邮件 应用,打开含有文档的邮件,点击邮件附件中的原型,并选择 拷贝到型雕 。这时,会唤起 型雕,并将原型导入到 型雕 中。被导入的原型将出现在 本地 项目栏中,并可进行编辑、演示与分享,正如其它本地项目一样。

⚠️ 注意! 在邮件应用中点击邮件附件并选择“拷贝至型雕“之前,如果 型雕 已经被启动,有可能会造成无法成功导入原型。这时,可以通过 iOS 终止 型雕 的运行,然后点击邮件附件再试一次。

仅单向导入成功?

有时候,一台设备可以正确导入另一台设备所导出的原型文档,但反之不可。这可能是因为:

回到目录

页面

在 型雕 中, 经常会遇到术语“页面”。“页面”类似于绘画类工具(比如 Sketch )中的“画板”或者“画布”。

在 项目视图 中, 显示了此项目包含的所有“页面”。点击任意一幅“页面”,打开并进行编辑。

在新建一个页面时,可以直接创建一个新的 空白 页面,也可以 复制一个已有的页面 。而当选择创建新的空白页面时,需要进一步指定该页面的页面方向。

回到目录

改变页面顺序

在演示您的原型时,在页面集合中的第一个页面会被第一个展示。如希望将另一个页面作为演示的第一个页面,可将该页面移动到页面集合中的第一位。

打开项目的页面集合界面,可以通过拖动页面的方式来改变它们的排列顺序。使用单根手指按住目标页面不放,然后拖动它。

同时,也可以通过 页面列表 来改变页面顺序。依次打开 页面编辑器 > 左侧边栏 > 页面列表,使用鼠标或单指拖动目标页面,以改变它的排列顺序。

rename a page

回到目录

重命名页面

可以通过编辑工作区中的页面列表,或者项目的页面集合界面,来重命名页面。

在编辑工作区中,通过 页面列表 来重命名页面。依次打开 页面编辑器 > 左侧边栏 > 页面列表,使用鼠标双击目标页面,以重命名它。

rename a page

打开项目的页面集合,点击每个页面的缩略图下方的页面名称,可以修改页面名称。

rename a page

回到目录

删除页面

可以通过编辑工作区中的页面列表,或者项目的页面集合界面,来删除页面。

通过 页面列表 来删除页面。依次打开 页面编辑器 > 左侧边栏 > 页面列表。使用鼠标右键点击目标页面,然后在弹出的菜单中选择删除。

页面列表

打开项目的页面集合界面,点击顶部导航条上的 选择 ,进入多选模式,即可同时选中并操作多个页面。

同时选中多个页面

在多选模式中,点击页面的缩略图就可以选中(或取消选中)一个或多个页面。 选中页面后,你可以批量操作它们。比如,点击 删除 按钮即可删除所有被选中的页面。

点击 取消 可以退出多选模式。

回到目录

页面尺寸

原型项目所设定的页面尺寸决定了所含页面的默认尺寸。但我们可以随时调整每个页面的尺寸,以观察它在不同页面尺寸下的视觉表现,特别是在使用 自动布局 的情况下。

页面尺寸

回到目录

状态条

型雕中并没有独立的状态条对象,而是直接使用了 iOS 系统本身的状态条。

状态条样式

回到目录

页面编辑器

在编辑模式,打开一个页面,进入页面编辑器。

workspace

工具条

工具条 位于页面编辑器的顶部。它提供了一些常用工具的入口。
sidebar.left 左侧边栏工具 打开左侧边栏。在 iPhone 上,由于屏幕大小有限,不允许同时打开左侧边栏和右侧边栏。
sidebar.right 右侧边栏工具 打开右侧边栏。在 iPhone 上,由于屏幕大小有限,不允许同时打开左侧边栏和右侧边栏。
insert 插入工具 唤出对象面板,选取并插入一个新的对象。
zoom 缩放工具 缩放画布。
preference 设置工具 进入偏好设置。

回到目录

图层列表

点击顶部工具栏上的 sidebar.left,打开 左侧边栏。然后点击左侧边栏上的 ,打开 图层列表

图层列表

图层列表按图层顺序列出了页面中的所有对象, 直观地显示了对象所在的图层。位于首行的对象会被显示在最顶层(最接近人眼)。位于尾行的对象会被显示在最底层(最靠近屏幕)。

选择,锁定,隐藏,组合

当页面中包含了大量密集、相邻、甚至重叠的对象时,或者这些对象不可见或者完全透明时,通常难以使用手指直接选中它们。此时,可以通过 图层列表 来快速操作:

给对象命名

双击对象所在行,给该对象重新命名。一个适当的名称可以起到注释的作用。

Layer List - Rename

从右向左滑动手指,以唤出位于该行右侧的上下文菜单。

Layer List Swipe Contextual Actions

在图层间移动、组合、删除

点击图层列表右上方的 编辑 按钮,进入编辑模式。在此模式下,可以迅速而直观地在图层间移动对象。此时,每个对象所在行的右侧会出现一个 row-reorder 图标。拖动这个图标,可以迅速地在图层间移动对象。此模式下也可允许同时选中多个对象,并进行组合删除等操作。

Editing Layer List

回到目录

对象菜单

对象菜单,又称对象的编辑菜单。轻点对象,会弹出一个指向该对象的跟随式菜单,称为对象菜单,用以编辑该对象。其中,最重要的选项有:

对象属性编辑器

单击对象,会弹出一个指向该对象的跟随式菜单,然后点击该菜单上的 编辑 ,唤出属性编辑器。也可以长按一个对象,直接唤出对象属性编辑器。

属性编辑器让您可以调整当前对象的属性。在属性编辑器中,属性被划分为多个属性区。不同类型的对象具有不同的属性区。

单击对象,弹出 跟随式菜单。点击 编辑 菜单项,将会唤出 属性编辑器

与基于拖拽的、快速而粗放的 快速编辑 不同,属性编辑器用于精确地控制对象的属性。

对象动作编辑器

轻点对象,会弹出一个指向该对象的跟随式菜单。点击该菜单上的 动作 ,唤出动作编辑器。

回到目录

显示比例

型雕 支持以不同的显示比例来编辑或演示您的设计。

您可以通过 工具条 上的按钮、双指手势等多种方式来调整/恢复显示比例。

回到目录

平移画布

在垂直或水平方向上卷动画布:

提示:当使用箭头键来移动画布时,不要选中任何图形对象。否则,会移动被选中的图形对象,而不是画布。

任意拖动画布:

小技巧:在 Mac 上,当空格键被按住不放后,鼠标指针会变成“打开的手掌”形状,以提示您当前处于拖动状态。

偏好设置

您可以更改 偏好设置 来自定义页面编辑器的样式和行为,以更好地适配您的使用习惯。

点击工具条上的 偏好设置 ,打开 偏好设置

Preference

回到目录

对象基础

对象是指可放置在页面上的任何东西,包括图像(照片)、文本框、形状、表格和组合对象。有时,当仅考虑其图形属性时,对象也常常称为图形。

插入对象

在编辑工作区中,点击顶部工具条上的 sidebar.left ,打开 左侧边栏。然后点击左侧边栏上的 insert ,打开 控件面板

点击面板上的对象,将其插入页面中。

提示:在 Mac/iPad 上,允许同时显示左右两侧的侧边栏。在 iPhone 上,由于屏幕区域较小,只允许同时显示一侧的侧边栏。因此,必须先关闭一侧的侧边栏,才能打开另一侧的侧边栏。

回到目录

选择

单选

多选

取消已有的选择

对于 iPad/iPhone,或者连接有妙控板的 Mac,点击页面空白处,会取消所有已有的选择。对于连接有硬件键盘的 Mac 或者 iPad,按下硬件键盘上的 ESC 键,会取消所有已有的选择。

回到目录

测量距离

我们可以快速测量对象与画布边界之间的距离,或者对象与对象之间的距离。

单击选中一个对象,然后按下 键(Option键)不放,测量该对象与画布边界之间的距离。

选中一个对象后,将鼠标悬停在另一个对象上,然后按下 键(Option键)不放,测量这两个对象之间的距离。此时,如果按住 键(Option键) 不放而悬浮到另一个对象上,会查看与此对象的距离。

测量对象之间的距离

提示:如果被选中的对象或者被悬浮的对象采用自动布局,不会触发测距。

回到目录

移动

拖动对象

按住对象不放,并拖动它,快速改变其位置。

Multi-Selection

在拖动过程中,对象会临时变成半透明状态,直到拖动结束。

Multi-Selection
小技巧: 直接拖动一个对象而不要先选中它。如果该对象已经被选中,则先取消选择,再拖动。这是因为当一个对象被选中后,会出现一些控制点,如果这个对象的尺寸很小,而画布缩放比例又不够大,会造成控制点非常密集,进而容易误拖动这些控制点(从而改变大小)而不是拖动对象本身。取消选择、放大画布,或者将触控精度从“手指模式”改为“鼠标模式”,都能避免误拖动控制点。
小技巧:良好的设计可让您的操作快速如飞。如果页面内含有大尺寸原图,并且开启了 自动保存,会导致操作缓慢,并影响正常拖动。

自动对齐

在拖动过程中, 型雕 支持多种自动对齐,配合以 网格线 系统,极大地简化了对齐操作。包括:

Multi-Selection
小技巧:如果开启了 自动对齐 选项,并且对象位置恰好在相关区域,则可能会影响拖动操作。在拖动过程中,如果意外触发 自动对齐 ,亦有可能中断拖动过程。您可尝试关闭 自动对齐 ,以排查原因。

精确移动

型雕 也可以微调对象位置,并可精确到以像素为单位。这通过 属性编辑器 来实现。这在对象尺寸较小,或者页面对象密集时,非常实用。

在 Mac 上,或者连接有硬件键盘的 iPad 上,选中一个或多个对象后,可以通过硬件键盘上的 方向键 来移动它们,只要这些对象并未使用 自动布局

回到目录

对齐与分布

水平对齐与垂直对齐

您可以使对象相对于彼此对齐,让它们沿着垂直轴或水平轴排成一排。

  1. 选中多个对象,弹出跟随式菜单。
  2. 点击菜单项“对齐”。
  3. 选择一个对齐选项。

对象将与最靠近您选择方向的对象对齐。比如,如果您将三个对象向左对齐,则最左边的对象不会移动,其它对象会向它对齐。

等间距均匀分布

您可以采用水平或垂直轴上的对象等距的方式来放置对象。

  1. 选中三个或者更多对象,弹出跟随式菜单。
  2. 点击菜单项“对齐”。
  3. 选择一个分布选项。
    • 水平均匀分布 水平均匀分布:对象在水平轴上等间距放置,且保持原有的左右关系不变。
    • 垂直均匀分布 垂直均匀分布:对象在垂直轴上等间距放置,且保持原有的上下关系不变。

回到目录

矩阵复制

可以将一个对象复制为多个副本,并排列成一个行列阵。选中一个对象,然后从屏幕顶部系统菜单栏中选择 排列 > 矩阵复制,或者使用鼠标右键单击对象,然后在弹出的跟随式菜单中选择 矩阵复制

矩阵复制 矩阵复制
提示:使用自动布局的对象不支持此操作。

回到目录

旋转复制

旋转复制工具可以将单个图形对象复制为多个副本,并把它们排列成一个圆环。选中一个对象,然后从屏幕顶部系统菜单栏中选择 排列 > 旋转复制,或者使用鼠标右键单击对象,在弹出的跟随式菜单中选择 旋转复制。然后输入所需复制的 副本数量 和所围绕旋转的圆的 半径,最后点击 旋转复制

旋转复制
提示:使用自动布局的对象不支持此操作。

回到目录

缩放

尺寸控制点

选中对象后,会出现若干控制点。其中,蓝色的是 尺寸控制点 。拖动这些控制点,可以改变对象的高度或宽度。

Control-Points

💡提示:并不是所有的对象都会出现控制点。比如,步进器 对象,它具有固定的形状和大小,所以不会出现控制点。

形状吸附

拖动 尺寸控制点 ,改变对象大小。在此过程中,当对象的形状非常接近于某些特定形状时,会自动“吸附”成该形状。其中,

型雕 也可以通过 属性编辑器 来微调对象尺寸,并可精确到以像素为单位。

回到目录

旋转

许多对象支持旋转。若要旋转对象,可以使用以下任意一种操作方法:

💡 注意:并不是所有对象都支持旋转。
💡 注意:当对象都旋转后,有可能不再支持自动对齐。

当对象旋转后,对自动对齐的支持情况如下:

回到目录

圆角半径

许多对象都允许设置圆角效果,比如 矩形对象。而另一些对象则不支持设置圆角,比如 椭圆 对象。

有些对象仅支持为四个角设置统一的圆角半径数值,比如 按钮 对象。有些对象不但支持为四个角设置统一的圆角半径数值,也支持单独指定每个角的圆角半径数值,比如 矩形 对象。

Corner-Radius Uniform Corner-Radius Uniform Corner-Radius Uniform

圆角半径控制点

选中对象后,会出现若干控制点。其中,位于左上角有一个绿色的控制点,即是圆角半径控制点。拖动这个控制点,可以快速改变对象的(四角统一的)圆角半径。

Control-Points

圆角半径编辑器

相比于拖动控制点的方式,在属性编辑器中的圆角半径编辑区域中,可以更加精确地调整对象的圆角半径的数值,甚至为每个角单独设定不同的圆角半径数值。

为四个角设置统一的圆角半径数值,而且指定每个角是否采用此数值,即该圆角半径是否对对该角生效。

Uniform Corner-Radius

单独指定每个角的圆角半径数值

Individual Corner-Radius

请注意:样式系统目前仅仅支持简单的统一的圆角半径,不支持指定该圆角半径对特定角是否生效,也不支持为每个角分别指定不同的圆角半径。因此,如果一个图形对象被链接到一个圆角半径对象上,就无法为该对象的四个角指定“角掩码”,或者分别指定不同的圆角半径了。

回到目录

颜色

有多种方式来指定一种颜色:

了解更多:深色模式中的颜色

回到目录

阴影

可以给对象施加阴影,并且控制阴影的颜色、水平或垂直位移,以及模糊半径。

外阴影,通常简称阴影,在图形区域之外进行渲染。如果一个对象支持多重(外)阴影,那么可以给同一个对象施加 主阴影辅助阴影,并分别调节这些阴影的属性。

Shadows

内阴影 和外阴影的属性类似,但工作方式不同。内阴影在图形区域的内部进行渲染,常常用于表现凸起、凹陷等立体效果。

Shadows

回到目录

图层

对象都位于某一个图层上,可以任意改变对象之间的层次关系。

若要改变图层关系,最方便的方式是使用 图层列表 (又称图层列表),也可以使用 对象跟随式菜单 或者 属性编辑器

逐层移动

选中对象,以弹出跟随式菜单,点击菜单上的 编辑 > 图层。拖移滑块,直到对象被分到您想要的图层。或者,轻点两侧图标,以将所选对象移动到上一层或下一层。

Inspector > Layer

移动到指定图层

唤出 图层列表 。在 Mac 上,可以直接拖动它们。在 iPad 或 iPhone 上,点击 排序,进入排序模式,然后拖动每行中右侧的“拖动”图标来改变对象的图层关系。

Layer List > Reorder

在演示时改变图层

如果希望在演示原型时动态地改变图层之间的叠加关系,可以参见 高级交互-改变图层 的相关部分。

回到目录

锁定

我们常常需要锁定对象

如何锁定或解锁对象

当一个对象被锁定后,如何编辑它

当对象被锁定后,您无法单击选中、框选或者拖动它,除非进行解锁。

然而,可以无需解锁而直接编辑它。长按一个对象,会直接唤出对象属性编辑器,而无论其是否已被选中。

回到目录

拷贝与粘贴

对象的拷贝与粘贴

跨应用粘贴图片

对于图片,先在其它应用中选择 导出 > 拷贝,然后回到 型雕,点击页面空白处,从弹出式菜单中选择“粘贴”,会粘贴到当前页面作为一个新的图片对象。

文本的拷贝与粘贴

对于 文本标签卷动文本 等文本类对象,打开其文本编辑器后,可以方便地跨应用进行文本内容的拷贝与粘贴。

回到目录

撤销与重做

在 iOS 或者 iPadOS 设备上,型雕使用苹果公司所规定的标准手势来触发撤销与重做。

导出对象

可以将 型雕 中的视觉对象导出为图片,并支持三种输出分辨率:1x, 2x, 3x。

回到目录

组合对象

对象不但可以深入定制,还可自由组合,创造出无穷无尽的带有设计者烙印的对象与模版。

组合

如需自行组合对象,可先通过“框选”或者 图层面板 选中多个对象,然后点击 组合 按钮,把它们组合成复合对象。

Multi-Selection

解除组合

选中一个组合对象,点击 解除编组,可以解除它们的编组关系,使其成为各自独立的对象。

Multi-Selection

修改组合对象

在型雕中,允许直接编辑组合对象中的子对象而无需先解除组合。这可以通过两种方式来达到该目的:图层列表或者双击组合对象。

Multi-Selection

组合对象的交互

在进行组合后,原来的对象成为了组合对象的子对象。它们原来各自定义的 交互 属性仍然有效。

如果希望在演示模式中将组合对象作为一个整体进行交互,不仅需要在编辑模式下定义该组合对象本身的交互属性,还需要统一考虑其内部对象的交互属性。

作为一个整体,如果定义了交互属性,组合对象不(直接)支持由 点击 事件来触发交互,而其它触发手段(比如 页面出现 事件)仍然可用。如果确实希望通过点击来触发某种操作,可以通过该组合对象内部的子对象 点击 事件来间接实现。

回到目录

保存为模版

点击 保存为模版,会将组合对象作为用户自定义的对象模版进行保存,方便今后重复使用。

label

这些自定义对象会其出现在 对象面板 中的 用户控件 中。

用户控件

回到目录

形状对象

形状

型雕 支持各种各样的形状对象。除了最常见的圆角矩形之外,还支持椭圆形、圆形、三角形、星形、多边形等多种形状对象。其中,仅有圆角矩形支持圆角半径和阴影。

当您在圆形、椭圆形、圆角矩形对象中犹豫不决时,如果希望长宽比灵活可变,推荐使用椭圆形对象。如果希望始终保持正圆形,请使用圆形对象。如果希望有边框、或者想画一个空心圆环,请使用圆角矩形对象(并设置适当的圆角半径)。

Rounded Rectangle Rounded Rectangle Rounded Rectangle

回到目录

填充

强大的型雕引擎,让您可以:

回到目录

图片填充

可以使用图片来填充一个形状。

image fill

如果此形状的尺寸与图片的尺寸不一致,可以指定如何显示它的填充内容。

回到目录

拷贝与粘贴填充

可以将形状对象的填充属性拷贝到粘贴板,然后粘贴到另一个对象。

打开一个对象的属性编辑器,长按填充编辑区。

copy & paste a fill

选择 拷贝,将填充属性拷贝到粘贴板。

copy & paste a fill

然后,打开目标对象的属性编辑器,长按填充编辑区,选择 粘贴

copy & paste a fill

如果希望复制对象的全部样式,而不仅仅是填充,请参见 样式

回到目录

模糊

模糊属性会对其下方的图形产生模糊效果。型雕支持多种模糊效果:

回到目录

路径对象

路径,又称矢量路径,是由一条或多条直线段或曲线段所组成的路径。每条线段的起点和终点称为端点,有时也称为锚点(这是因为其作用类似于固定销钉)。

路径既可以是开放的(比如,波浪线),也可以是封闭的(比如,正方形)。路径的轮廓称为描边。在画布上,如果对一条开放的路径进行描边,但不进行填充,就会显示出一条可见的路径。如果对一个封闭的路径进行填充,就会显示为一个形状。

编辑路径

双击一个路径对象,进入 路径编辑 模式。此时,会显示组成该路径的所有途径点(端点)。您可以拖动这些端点,以改变路径的走向或者形状。在任意端点上点击鼠标右键,然后在弹出的菜单上选择增加或删除,可以为该路径增加或删除端点。

回到目录

文本对象

文本对象,又称文本标签对象,在 型雕 中用来显示单行或多行文本信息。虽然 标签 可以用来显示多行文字,但大多数情况下应让其保持简短。

提示:

对齐

文本对齐是一种段落格式属性,用于确定整个段落中的文本外观。 例如,在左对齐段落(最常见的对齐方式)中,文本与左边距对齐。 在两端对齐的段落中,文本与两个边距对齐。

请注意,为了使用对齐操作,对象需要在相应的对齐方向上拥有足够的空余空间。

label-alignment-horizontal

在水平方向上对齐文本。

label-alignment-vertical

在垂直方向上对齐文本。

样式

label-style

underline

单下划线 / 双下划线

strikethrough

删除线

autowrap

多行模式。开启多行模式后,如果文本内容超出文本宽度且有足够的空余高度,会自动换行。而在单行模式,如果文本内容超出文本宽度,会在一定范围内 自动调整字体大小,以适配文本宽度。

autowrap

设定文本内容的大小写形式。比如:保持原状、全部大写、全部小写。注意:此属性并不适用于中文。

数据源

型雕 中的 文本 对象不但可以显示静态内容,更可以通过 数据源 显示动态变化的内容。

page action property

在使用动态文本前,请先确认已经通过 偏好设置 菜单开启了 动态文本 特性。否则,您有可能无法发现相关功能界面。

Preference - Text

数据源格式

如果仅需要显示变量的部分内容,可以设定 起始位置长度 属性。若均设置为 0 , 则显示该变量的完整内容。

可以为可变文本指定 前缀文字后缀文字 。例如,显示 “打印 N 份”,并通过一个 步进器 对象来调节 N 的实际数值。

也可以为文本指定特定的数据格式,例如数字、百分比、日期与时间等,从而决定文本数据的展现形式。注意: 这些格式仅在使用动态数据源时有效,而对 预设 文本内容无效。如果我们需要动态改变文本内容,且使这些格式生效,应当将文本对象设定为来自 变量,然后使用动作 改变变量内容,而不是动作 改变文本内容

回到目录

按钮

内部结构

按钮对象是一种复杂对象,它的内部包含背景、图标、标题文字、副标题文字。

按钮内部结构

背景

按钮对象允许使用颜色或图片来填充背景。

在使用图片作为背景时,允许切割并拉伸图片的局部区域,使图片整体上毫无变形地充满整个区域。该特性非常适用于某些场景,比如作为气泡样式的对话消息。

定义 可拉伸区域 :为图片指定一个位于图片内部的矩形区域,该图片在矩形内的部分会被拉伸变形,而这个矩形区域外的部分则会保持原样。

image insets

拉伸效果

image stretching

专用动作

按钮对象拥有一些专有动作:

回到目录

其它对象

可卷动文本

可卷动文本 是一个可卷动的多行文本区域。除了文本属性外,可卷动文本还具有自身特有的一些属性。

显示滚动条

在卷动过程中,指定是否显示卷动指示器,即俗称的“滚动条”。

允许选择

指定是否可以允许(长按)选中其所显示的文本。

回到目录

大图

image stretching

大图,又称为可卷动的图片视图,是一种用于显示大尺寸图片的视图对象。其特点是,视图本身的尺寸并不足以直接显示图片的完整内容。视图对象会仅显示图片的部分内容(称为视窗),然后通过卷动视窗位置的方式来显示图片的任意部分。

提示:可以将大图对象设置为仅水平卷动、仅垂直卷动,或者允许同时在两个方向上卷动。但请注意,在设置该对象的卷动方向属性时,必须匹配图片内容尺寸与对象尺寸的相对比例,否则会导致显示错误。

回到目录

标签栏

根据不同的 iOS 设备机型,比如 iPhone 和 iPad,应用中的底部标签栏会呈现出不同的样式。为了自动地、完美地适配用户手里的 iOS 设备,型雕中并没有独立的底部标签栏对象,而是直接使用了 iOS 系统本身的标签栏对象。

不过这也会带来一些副作用。比如在跨机型设计或演示时,这些原生对象会根据物理机器的样式进行显示。比如,在 iPad 上设计/演示以 iPhone 为目标机型的设计稿时,标签栏会显示成为 iPad 上的样式(即图标与文字水平排列)。另一方面,当这些 iPhone 原型在 iPhone 物理机器上演示时,会正常显示为 iPhone 上的样式(即图标与文字垂直排列)。参见选择设计机型一节。

Tab Bar

回到目录

导航条

型雕中的导航条对象基于 iOS 系统原生导航条实现。

导航条对象的高度由 iOS 系统确定,不可由用户设定。如果希望自定义其高度,请使用组合式导航条对象。

回到目录

播放进度标签

Player Current Time Label

媒体播放进度标签 在原型需要表现媒体播放功能时十分有用,而且简单、快捷。在演示模式下,它的文本内容是自动生成的,会以实时显示当前正在播放的音/视频媒体的时间总长和当前播放进度,形如 SS:MM / SS:MM。当然,我们也可以结合使用普通文本对象和页面事件系统来实现相同的功能,但此对象让设计过程更加简单、快速。

回到目录

步进器

数据绑定对于步进器而言,是指该步进器用于操作哪一个数据变量。步进器可灵活对应一个或多个变量,以刷新这些变量的值。

比如,如果我们在编辑模式下将一个 步进器 对象的 绑定到变量1 属性设定为 开启,那么在演示模式下,点击该 步进器 以增加/减小它的值时,型雕 会使用该 步进器 的当前值来刷新 变量1

回到目录

内嵌网页

通过嵌入 网页 对象,应用原型不仅仅能显示网站内容,还能与之交互。

指定网址来源

除了指定一个固定的网络地址外,内嵌网页对象还可访问存储在任何一个数据变量中的网址。

输出网页标题

当网页加载完毕,可以将网页的标题写入任何一个变量。

点击与跳转

借助内嵌网页对象,可以轻易实现“点击链接,打开网页”。

  1. 创建一些页面,使其包含一个 内嵌网页 对象,指定其 网页地址
  2. 创建一些对象,选择一个上述页面作为其 链接目标
  3. 运行这个原型,试一试点击并跳转?

扫描与跳转

有时,我们希望跳转的地址是动态变化、无法预知的。这几乎已经超出了”原型设计软件“的范畴。然而,型雕 却通过强大的数据引擎可以支持这一特性。参见用例 扫描与跳转

回到目录

表格与集合

型雕 引入了 数据模版 的概念来真实地驱动您的表格和集合视图对象。

page action property

型雕 预先提供了多套数据模版供取用。唤出 属性编辑器 ,将 数据来源 设置为 预置 ,然后点击 预置 模版列表,从中选取其中之一来使用。

自行定制数据模版,将更贴合真实应用。唤出 属性编辑器, 将 数据来源 设置为 预置 ,然后点击 数据模版 唤出 数据模版编辑器 ,即可浏览已有的数据模版,并新建、删除、修改它们。

甚至可以为设计的原型提供动态的真实的业务数据。唤出 属性编辑器, 将 数据来源 设置为 网络服务 ,然后填写一个指向该网络服务的 URL 地址。该 URL 必须以指定 JSON 格式返回数据。它既可以指向一个提供真实业务数据的网络服务 API,也可以指向一个网络上的静态 JSON 文件。下面有一个返回数据的例子,看看是不是非常简单?

{
    "name" : "我的数据",
    "sections" : [
        {
            "cells" :
                [
                    {
                        "image" : "http://www.demo.com/1.jpg",
                        "title" : "标题1",
                        "subtitle" : "副标题1"
                    },
                    {
                        "image" : "http://www.demo.com/2.jpg",
                        "title" : "标题2",
                        "subtitle" : "副标题2"
                    }
                ]
        },
    ]
}
                

强大的数据模版当然不止于此,完全可以设计多个数据区,为每个数据区设计不同的样式,并提供不同的业务数据。

{
    "name" : "我的数据",
    "sections" : [
        {
           "title" : "第一区",
           "cellStyle" : "subtitle",
           "cellHeight" : 80.0,
           "cellWidth" : 100.0,
           "cellPadding" : 8.0,
           "cellInsetsTop" : 10.0,
           "cellInsetsRight" : 10.0,
           "cellInsetsBottom" : 10.0,
           "cellInsetsLeft" : 10.0,
           "cellImageViewHeight" : 60.0,
           "cellImageViewWidth" : 80.0,
           "cellImageViewBackgroundColor" : "ECF0F1",
           "cellImageViewContentMode" : 2,
           "cellImageViewCornerRadius" : 0.0,
           "cellTextLabelHeight" : 16.0,
           "cellTextLabelTextColor" : "34495E",
           "cellTextLabelFontSize" : 16.0,
           "cellTextLabelAlignment" : 0,
           "cellTextLabelNumberOfLines" : 1,
           "cellDetailTextLabelHeight" : 36.0,
           "cellDetailTextLabelTextColor" : "7F7F7F",
           "cellDetailTextLabelFontSize" : 13.0,
           "cellDetailTextLabelAlignment" : 0,
           "cellDetailTextLabelNumberOfLines" : 0,
           "cells" : [
                {
                    "image" : "http://www.demo.com/1.jpg",
                    "title" : "标题1",
                    "subtitle" : "副标题1"
                },
                {
                    "image" : "http://www.demo.com/2.jpg",
                    "title" : "标题2",
                    "subtitle" : "副标题2"
                }
           ]
        },
        {
           "title" : "第二区",
           "cellStyle" : "vertical",
           "cellHeight" : 272.0,
           "cellWidth" : 100.0,
           "cellPadding" : 16.0,
           "cellInsetsTop" : 10.0,
           "cellInsetsRight" : 10.0,
           "cellInsetsBottom" : 10.0,
           "cellInsetsLeft" : 10.0,
           "cellImageViewHeight" : 133.0,
           "cellImageViewWidth" : 80.0,
           "cellImageViewBackgroundColor" : "ECF0F1",
           "cellImageViewContentMode" : 2,
           "cellImageViewCornerRadius" : 0.0,
           "cellTextLabelHeight" : 18.0,
           "cellTextLabelTextColor" : "1F1F21",
           "cellTextLabelFontSize" : 17.0,
           "cellTextLabelAlignment" : 0,
           "cellTextLabelNumberOfLines" : 1,
           "cellDetailTextLabelHeight" : 66.0,
           "cellDetailTextLabelTextColor" : "404040",
           "cellDetailTextLabelFontSize" : 16.0,
           "cellDetailTextLabelAlignment" : 0,
           "cellDetailTextLabelNumberOfLines" : 0,
           "cells" : [
                {
                    "image" : "http://www.demo.com/1.jpg",
                    "title" : "标题1",
                    "subtitle" : "副标题1"
                },
                {
                    "image" : "http://www.demo.com/2.jpg",
                    "title" : "标题2",
                    "subtitle" : "副标题2"
                }
           ]
        }
    ]
}
       

回到目录

分段控制条

分段控制条对象可以设置其每一条数据项,包括标题及其对应的触发事件。

Segmented Control

回到目录

图表

饼图 对象和 条形图 对象是由数据进行驱动的。因此,设置其内部数据项的数值,可以改变其外观,包括每条数据项的百分比、形状与大小。

对于 饼图 对象,唤出其 属性编辑器 。而 条形图 对象的操作与之相似。

饼图

回到目录

地图

当使用 地图 对象时,可以使用 立刻定位 功能,一键切换到用户(设计者)所熟悉的地理区域,以简化用户配置。如果需要使用此功能,应先为应用开启相应的权限,允许其获取用户位置。

回到目录

选取器

选取器是一种使用滚轮,以多列的方式,来选取一组或多组数值的视图。

如果希望添加/删除一组数据,可以在编辑器中在某数据行上向左滑动手指(iPhone/iPad),或者点击鼠标右键(Mac),然后在菜单上选择 插入删除

选取器

同样,如果希望在一组数据中添加/删除单条数据,可以在该组数据的编辑器中在某数据行上向左滑动手指(iPhone/iPad),或者点击鼠标右键(Mac),然后在菜单上选择 插入删除

选取器

回到目录

自动适配

您可以在您的设计稿中采用一些适配性设计,让你的设计稿自动适配苹果设备的深色/浅色模式。

深色模式

调色板中包含有多组特殊的颜色。这些颜色会自动适配您苹果设备的深色/浅色模式,产生不同的着色效果。这些特殊颜色分为多组,包括主色调、占位色、基本色、文本色、填充色、背景色等。在您的设计稿中使用动态颜色,能使您的设计稿自动适配 iOS 深色/浅色模式。

light with semantic colors light with semantic colors

在页面编辑器中,打开 偏好设置,然后启用 自适应颜色

dark mode

若要观察设计稿对 iOS 深色/浅色模式的自动适配效果,请将型雕的配色模式设置为 跟随系统(跟随系统),然后在您的设备上切换深色/浅色模式。

dark mode

低饱和度模式

低饱和度模式,又称灰度模式。无论是编辑模式,还是演示模式,都可以使用低饱和度来渲染设计内容。

标准饱和度渲染 低饱和度渲染

在主菜单中,打开 偏好设置,然后启用 低饱和度模式

低饱和度模式

回到目录

布局

型雕支持两种布局,手动布局和自动布局。

手动布局是传统的布局方式,把画布和元素都看作是固定大小的方形盒子,指定每个图形元素的大小和位置,在布局完成后固定不变。

自动布局的核心是制定一系列约束规则,让布局系统根据这些规则来自动地计算实际尺寸和位置,并随着画布大小的变化而自动变化(比如当设备屏幕方向发生旋转后)。

自动布局

自动布局的核心是制定一系列约束规则,让布局系统根据这些规则来自动地计算实际尺寸和位置,并随着画布大小的变化而自动变化(比如当设备屏幕方向发生旋转后)。

创建约束规则的基本原则为:

边距约束

边距限定规则描述了上、下、左、右四条边分别到父元素的上、下、左、右四条边的距离约束关系。比如,当上边约束生效时,元素的上边界到父元素的上边界的距离固定,从视觉效果上看,就像被锚定在一起一样。

尺寸约束

尺寸限定规则描述了宽度约束和高度约束关系。当宽度约束生效时,对象使用固定宽度。当高度约束生效时,对象使用固定高度。

中点约束

中点约束规则描述了水平居中对齐关系和垂直居中对齐关系。当水平居中对齐时,可以规定元素X轴中点与父元素(或画布)X轴中点的偏移量。负值表示左偏移,正值表示右偏移。当垂直居中对齐时,可以规定元素Y轴中点与父元素(或画布)Y轴中点的偏移量。负值表示上偏移,正值表示下偏移。

回到目录

设计系统

样式和组件 用于在编辑模式下提高图形设计的效率,正如事件-响应机制用于在演示模式下的用户交互。

样式与样式库

样式被设计用于复用UI图形属性,从而使您的设计可以灵活调整和扩展。

在型雕中,我们可以创建各种样式,包括颜色、字体、填充、圆角半径、旋转等。您可以单独保存这些基本样式,更可以把这些基本样式任意组合,形成心仪的复合样式。如果我们将一个样式施加到一个或多个对象上,那么随着样式母版中某些图形属性的变化,这些对象的外观也会随之变化。例如,如果我们将一个形状对象的填充属性从单色改为“随机风景照片”,并将此改动提交到样式母版,那么所有设计稿中的所有使用了此样式的对象会同步更新它们的外观,即显示为一张随机风景照片。

提示:每一个样式实例仅仅是一个指向样式母版的链接,直到此样式实例的内容被修改。在修改一个样式实例时,仅仅是在修改这个母版的一个本地副本,而不会影响到母版本身。因此,修改一个样式实例并不会影响到此样式的其它实例。我们可以“提交”这些修改,也就是说,更新样式母版本身,从而使该样式的所有实例同步变化。

提示:并不是所有对象都支持样式。目前支持样式的对象有 形状文本图标按钮

拷贝与粘贴

可以将一个对象的样式(外观图形属性)拷贝到粘贴板,然后粘贴到另一个对象。

如果希望拷贝一个对象的样式,单击该对象,在弹出的菜单上选择 拷贝样式

Copy & Paste Style - step 1

单击另一个对象,在弹出的菜单上选择 粘贴

Copy & Paste Style - step 2

在粘贴完成后,目标对象的相关图形属性会变得与该样式相同。

Copy & Paste Style - step 3

注意,在对象之间复制与粘贴样式并不会使对象 绑定 到样式。在粘贴完成后,并不会随样式的变化而变化。

创建、绑定/分离、更新/恢复

点击一个对象,进行样式操作。

重命名、删除、自由组合

在样式库中,可以对样式进行重命名、删除、自由组合等操作。

回到目录

组件

组件被设计用于复用UI对象。

当一个对象成为组件后,我们就可以创建这个组件的若干实例,即链接到该组件母版的若干副本。如此一来,如果我们修改了组件母版的某些设计细节,该组件的所有实例都会随之变化。比如,当我们为一个“标签栏(TabBar)”组件母版插入了一个新的标签项(Tab-Item)后,这个新标签项将会出现在该组件在所有设计稿中的所有实例中。

提示:每一个组件实例仅仅是一个指向组件母版的链接,直到此组件实例的内容被修改。在修改一个组件实例时,仅仅是在修改这个母版的一个本地副本,而不会影响到母版本身。因此,修改一个组件实例并不会影响到此组件的其它实例。我们可以“提交”这些修改,也就是说,更新组件母版本身,从而使该组件的所有实例同步变化。

创建、绑定与分离

点击一个对象,进行组件操作。

重命名、删除

在组件库中,可以对组件进行重命名、删除等操作。

回到目录

数据驱动

型雕 不仅仅能绘制外观与样式,更装备强大的数据驱动引擎,让设计出的原型具有鲜活的生机。

变量

变量是用于储存内容(如文本、数值、图像或其它)的容器。使用变量是扩展您的原型的交互功能的最强大的方法。在 型雕 中,变量是连接数据引擎和交互引擎的桥梁,用于在演示中动态改变演示内容。

回到目录

变量的值

变量,有时被称为通用变量,可以存储以文本表示的任何内容。变量不但可以用于存储文本("Hello"),还可以用于存储以文本表示的数值(比如"123")、图像(JSON格式)、填充(JSON格式)、数组(JSON数组)或者字典(JSON字典)。

当存储颜色时,可用于在演示过程中动态改变颜色。比如,我们可以先改变变量中的颜色,并触发一个事件。然后让指定对象对该事件的响应动作为 使用变量的当前值(颜色)进行填充

当存储一个 填充时,支持单色填充、渐进色填充,或者图片填充。结合运用事件、动作和变量,可以实现在演示过程中交互式地动态改变填充内容。比如,先动态改变 变量 的填充内容,并触发一个事件。然后让指定对象对该事件的响应动作为 使用变量进行填充

回到目录

变量的作用域

变量的作用域是整个项目,而不是局限在单个页面内。

此特性通常用于轻松实现“跨页面传递参数”。另一方面,此特性有时也会带来一些副作用。如果我们希望把变量的作用域局限在单个页面内部,可以在下个页面的 页面出现 事件中执行动作 清除变量

回到目录

变量、数组和字典

如果页面中的某个对象支持数据驱动引擎,则它的内容/样式可来自于一个或多个数据变量。型雕内置支持三个通用变量、三个数组和三个字典。

变量用于存储文本,或者以文本表示的数值和JSON结构。

数组是由任意数量的文本元素组成的有序的数据列表。允许使用列表索引(即在列表中的序号)来访问数组中的数据元素。数组允许以JSON数组的形式保存到变量中。

字典是由任意数量的键值对组成的数据结构。若要获取字典中特定键的值,你可以使用 获取字典值 动作并指定键名。字典允许以JSON字典的形式保存到变量中。

回到目录

事件驱动

事件与动作

型雕 原型由事件驱动。型雕 中最基本的交互机制可以描述为 事件 -> [动作] 。当事件被触发时,执行相应的一系列响应动作。如果给这些动作设置触发条件,会使交互逻辑更加灵活。此时,交互机制可以描述为 事件 -> [条件-动作]。当事件被触发时,执行相应的一系列动作。并且,对于其中的每个动作,都仅当满足其全部前提条件时,才会被执行。

型雕 中的事件分为两大类:页面事件对象事件 ,分别触发 页面动作对象动作 ,并常常结合起来使用。

回到目录

动作序列

顾名思义,一个动作序列中的动作会被按顺序依次执行。

在设计一个动作序列时,应该注意避免所含动作之间的相互干扰。比如,如果一个动作序列中含有 页面跳转 动作,则此动作应该为此动作序列的最后一个动作。

回到目录

条件

条件,又称动作前置条件。如果为某个动作添加了一个或者多个前提条件,则仅当一个动作的所有条件全部满足时,才会执行该动作。

在动作序列编辑器中,如果一个动作带有条件,会在左边显示所需满足的条件数量。

Action Condition

动作序列编辑器 中,按住任一动作不放,并向右滑动手指。编辑器会显示出在执行该动作前必须先满足多少条前提条件。点击这些条件,以进入 条件编辑器

Action Condition

目前,支持的条件包括:

条件表达式:如何实现“并”条件和“或”条件?

回到目录

事件

页面事件

页面事件

页面事件 是一种全局事件。它作用于整个页面,并触发一个动作序列。

回到目录

对象事件

对象事件

对象事件 是一种作用于单个对象的局部事件,并触发相应的 对象动作 或者 页面动作

常见的对象事件有:

回到目录

通用事件

通用事件 是一组全局事件,页面和对象都可以响应这些通用事件。

数据变化

数据变化事件也称为 变量监视器。通过它,我们可以指定一个数据监视表达式,在指定变量发生变化并且满足特定的触发条件时,执行一个动作序列。比如,将变量的内容视为字符串,监视变量的长度(字符数量),当其发生变化且达到或超过指定阈值时触发。或者,将变量的内容视为数值,监视变量的值,当其发生变化且达到或超过指定阈值时触发。

⚠️ 请注意!在特定条件下,触发条件与响应动作的化学反应会生成无限循环,并最终导致应用崩溃。比如,我们监视变量1,设定当变量的值大于3时触发。当触发后,执行动作 “获取从今天零点开始的秒数” 并存储到变量1。然而,该动作又会再次触发“数据变化且变量的值大于3”事件。最终,执行逻辑陷入无限循环。请小心设置触发条件和响应动作以避免此陷阱。
⚠️ 请注意!请先执行 启用数据监视器 动作,以确保启用该事件。

回到目录

动作

除了部分对象专属动作外,大部分动作既能作为页面动作,也能作为对象动作。

页面动作

页面动作 用于响应页面事件。

对象动作

对象动作 用于响应 对象事件。有些对象也能响应部分页面事件。大多数对象都支持一些通用对象动作,比如 链接。部分对象还拥有其专有动作。比如,按钮 对象就支持专用动作 设定标题

💡提示: 轻点对象,唤出 跟随式菜单 ,然后点击 动作 ,可以唤出 对象动作编辑器

链接与转场

基于事件与响应机制,原型可以轻松实现页面链接与跳转。

基于对象事件

可以为页面上的几乎每个对象都指定其链接的目标页面。只需点击 对象菜单 上的 链接 项即可。也可唤出 属性编辑器 ,在 交互 属性区,设定 链接到页面,以及 转场特效
提示:当点击对象的 链接 菜单项时发生了什么?对于绝大多数对象,会设定该对象的 触击 事件的第一个响应动作。将其设置为 转场动作,其方法为 叠放。对于 表格 和 集合 对象,则会设定第一个数据元素的 链接目标页面

热点

Hotspot

借助于“热点”,可以在一张照片或者屏幕截图等大型静态背景上划定任意局部区域,并单独设定其链接。“热点”是一种特殊的对象,本质是不可见的普通对象。如果对象的尺寸较大,或其区域内部含有若干不同链接需求,不适合作为整体来设置链接,就适合在其内部设置若干“热点”。
  1. 对象面板 插入一个对象,通常为矩形,也可以为其它形状,让其轮廓与目标区域尽量贴合。
  2. 插入后,把它拖动到适当的位置和大小,设定它的 链接 属性。
  3. 最后,清除其 填充 属性,从而让其不再可见。即点击 “None” 按钮,将它的 填充 属性设定为 。注意!不要将其“不透明度”设为0。

基于页面事件

页面事件 编辑器中,设定页面属性 页面事件链接动作 ,可以通过所指定的页面事件来触发页面跳转,而无需借助页面对象。

转场

传统演示软件将作品视为一张张幻灯片,只能线性切换幻灯片,移到下一页,或者返回上一页。传统的原型软件通常将设计作品视为一张张静止的画面,并在一个二维平面上进行页面跳转。然而,在型雕中,页面跳转是在一个三维空间中进行的。

型雕支持两种转场动作:叠放、移走。

Hotspot
叠放: 将页面叠加到已有页面中的最上面的一层。

Hotspot
移走: 从层叠的页面中移走最上面的一层页面,除非顶层页面已经是剩下的最后一个页面。

回到目录

数据输入与处理

在演示模式下,型雕 支持通过多种方式输入真实的数值/文字内容,并与之交互。

input value

首先,型雕 允许将任意图形对象视为某种键盘上的按键,通过其输入真实的数值/文字内容,并与之交互。

每个按键所代表的键值/内容,可以通过 输入值 属性,又称 操作数 属性,来设定。当一个“按键”被点击后,这个“按键”的值会被进行处理。

数据运算方法 决定了如何处理 输入值 属性,包括:

另外, 二维码扫描器 对象也可以被用来输入真实的文本、网址或者数字。一旦某个二维码被成功识别,其识别结果将被自动存储到输入缓冲区中。

回到目录

更换图片

可以在运行演示时,动态更换页面中的图片,甚至拍摄一张新照片来使用。

为此,对象支持多种相关动作:

为了在运行演示时动态的更换图片,我们可以先插入一个图片对象,令其显示来自 图片变量 的内容。然后为其指定 从相册选取 或者/和 拍照 行为属性。

image interaction
💡提示: 如果让某个对象的 从相册选图 属性和 拍照取图 属性同时处于开启状态,然后在演示状态下点击该对象,会弹出一个对话框,让用户选择具体的取图方式。
image interaction

回到目录

改变图层

在交互演示时,可动态地改变图层之间的叠加关系,包括:

型雕 专门提供了一个交互原型指南来演示此特性: 创建新原型 > 来自模版 > 高级交互

回到目录

显示对话框

在设计模式下,为一个对象指定“对话框”动作,为其设定样式、标题,及若干选项。

在演示模式下,触发此动作后,会动态地弹出对话框,并与之交互。

注意:显示对话框 动作不能与 全屏播放视频 动作同时使用。

回到目录

生物特征授权

为了使用 TouchID/FaceID, 您可以:

  1. 确认已经购买了内购项目 高级交互,或者 全能包
  2. 打开页面进行编辑.
  3. 插入一个基本对象,比如矩形,椭圆,或者图片。
  4. 点击对象,唤出 上下文菜单。点击 交互 > 生物特征授权, 开启此交互。如果需要,可以指定当授权成功后需要触发哪些事件。
  5. 在页面的其他地方,处理你所触发的事件。
  6. 运行您的原型,以测试它。
label

目前,已经有一个演示 TouchID/FaceID 的原型示例。打开 社区 > 生物特征授权, 运行它. 您的设备机型必须支持 TouchID/FaceID 以运行此原型.

回到目录

动画

如需使用交互动画,请先确认相关选项处于 开启 状态:页面菜单 -> 偏好设置 -> 对象编辑器 -> 动画。请注意,自动布局不支持位置和大小动画。如希望使用位置和大小动画,请使用传统的固定布局。

在 型雕 中,对象的某些动作会让其执行一段动画:

这些动画通常都支持如下一些参数:

动画曲线

回到目录

播放音频

在演示模式下,如果一个 播放音频 动作被激活,则会开始播放该动作所指定的音频或系统音效。

回到目录

播放视频

播放视频。

在 iPhone 上,通常以全屏方式播放视频,并遮挡页面中的对象。当视频播放完毕,这些被遮挡的对象会重新出现,并触发它们的“出现事件”。

play video

回到目录

挑战:结合运用

拨打真实电话

假设我们要设计一个原生的电话拨号应用,让其拨打任意的真实电话号码。

input value
  1. 插入一些图形对象作为电话号码按键。这可以通过设定这些对象的 输入值 属性来实现,比如 0 ~ 9。将其 输入方法 属性定义为 添加到末尾 。将其 数据绑定 属性定义为 绑定于数据变量1 。同时,为了拨号过程更加逼真,还可以设定这些“电话按键”的 音效 属性。
  2. 插入一个 文本 对象用来显示输入的电话号码。将其 数据源 定义为 使用数据变量1
  3. 插入一个图形对象作为删除按钮。这可以通过设定这个对象的 输入方法 属性为 清除 来实现。
  4. 插入一个图形对象作为拨号按钮。这可以通过设定这个对象的 拨号 属性来实现。

万事俱备。运行,开始打电话。

  1. 进入 演示 模式。
  2. 输入想要拨打的电话号码,即点击相应的“数字按键”。
  3. 点击"拨号按钮"。

现在,我们的原型会真实地去拨打所输入的电话号码。

Phone Call
💡提示: 如果想从 iPad 或者 iPod touch 上呼叫电话号码, 必须有一个绑定了同一 Apple ID 的 iPhone 存在于同一 WLAN 网络内。否则,呼叫不会成功。

回到目录

扫描与跳转

挑战:扫描二维码,然后跳转到该二维码所代表的网络地址?

综合运用网页对象、文本对象和扫描器对象,可以成功来完成这一挑战。

进入编辑模式:

  1. 插入一个 二维码扫描器 对象,将它的 将结果输出到变量1 属性设定为 开启
    QR-code Scanner
  2. 插入一个 内嵌网页 对象用来显示所返回的网页。将它的 网址来源 属性设定为 来自变量1。再将它的 输出标题 属性设定为 将标题输出到变量2
    Webview
  3. 插入一个 文本 对象用来显示网站标题。将它的 数据源 属性设定为 来自变量2
    Title Label

进入演示模式,二维码扫描器 对象会自动激活设备的物理摄像头,开始扫描。当其成功识别了一个指向网络地址的二维码后, 并会将识别到的网络地址写入 变量1 ,从而激活 内嵌网页 对象去访问该地址。而当 内嵌网页 对象成功获取到网页内容后,会将所返回的网页的标题写入到 变量2 ,从而让 文本 对象展现其内容。

Title Label

回到目录

跨应用交互

跨应用交互,可以为您的原型带来无限可能。

型雕可以方便地与苹果《快捷方式》应用互相调用,并传递参数。在演示模式,型雕借助系统剪切板与其它应用互相通讯。为此,型雕不但支持在编辑模式拷贝与粘贴,更专门为演示模式提供了 拷贝粘贴 等动作。

从其它应用调用型雕原型

《快捷指令》或者第三方应用可以通过URL方案来调用形雕中的指定原型。打开一个项目的详情信息界面,可以查看该项目的URL方案。

调用其它应用

如果第三方应用支持 URL 方案,则可以通过型雕来调用它们。具体方法是通过型雕中的 打开URL 动作来打开这些 URL 方案。下面是一些常见应用的 URL 方案。

读写剪切板

回到目录

性能优化

在每次创建、编辑或移动对象时, 型雕 都会呈现您在绘图区域中看到的内容。你拥有的对象和细节越多, 型雕 要做的工作就越多。

让您的原型具有卓越的设计质量,同时让您的设计运转如飞,才能体现出您伟大的技巧。

关闭自动保存

如果文档中含有大量设计对象,在开启 自动保存 特性时,会显著降低编辑器的响应速度。

必要时,尝试 关闭自动保存 特性以提高性能。

避免大尺寸图片

大尺寸图片会显著增大文档体积、拖慢运行速度,应避免将其直接嵌入设计文档中。当文档中存在大量图片时,比如在集合或表格中包含大量图片时,对图片的优化尤为重要。

坚持简单的设计风格

关闭纹理,阴影,模糊等特殊视觉效果, 特别是在产品建模的过程中。

如有必要,仅在设计的最后阶段,需要输出逼真的视觉设计稿时,才开启这些效果。

隐藏不需要的图形对象

所拥有的图形对象越多, 型雕 的运行速度就越慢。

通过控制图层的可见性, 可以提高性能。

回到目录

内购

付款后仍无法使用?

当购买成功后,型雕 会予以提示。然而,有时会由于网络故障等技术性原因,在付款成功后,苹果商店 却迟迟不能通知 型雕,导致仍无法使用相应功能。

可以稍等片刻,点击 恢复,以从 苹果商店 免费获取所有已购内容。或者再次点击 购买,从 苹果商店 免费获取同一个内容。型雕 目前为止提供的都是一次性购买后永久使用的内容,所以用户大可放心,不会(也无法)重复购买。

从技术上讲,如果付款后未能激活“内购内容”(即便是点击“恢复”),有几种可能:

激活后仍无法使用某些素材?

已经购买“超值套装”,并成功激活全部功能,但在尝试使用某些素材时,仍然提示需要购买?这是因为,这些素材是 型雕云 服务的一部分,而型雕云服务只能通过 订阅 获得。“超值套装”仅包含功能,而不包含云服务。

一份订阅/购买可用于多少台设备上?

适用于您的所有设备。只需在您的设备上下载 型雕 并点击订购窗口底部的 恢复 按钮,等待 型雕 从苹果商店重新获取所有已购内容。

我在iPhone购买后能在Mac上使用吗?

是的。购买后,可以跨平台使用,无论是 iPhone, iPad 还是 Mac. 在其它设备上,进入 型雕 的内购界面,点击下方的 恢复 按钮,然后等待 型雕 从苹果商店重新获取所有已购内容。

重新安装后

从设备上删除并重新安装 型雕 应用后,可以免费恢复原来的已购内容。进入 型雕 的内购界面,点击下方的 恢复 按钮,然后等待 型雕 从苹果商店重新获取所有已购内容。

订阅到期后

订阅到期后,作品仍会继续保留。您仍可以正常访问您所创建的作品。实际上,无论是否订阅,您都可以正常打开、编辑、演示您所创建的作品,只是订阅服务提供了一些额外的高级功能。

回到目录

手势

手势对于在 iPhone 或 iPad 上使用 型雕 编辑或演示应用原型必不可少。而且,不同的工作场景需要使用不同的手势。您需要了解下面的手势:

编辑模式下的手势

在编辑页面时,我们可以使用如下手势:

演示模式下的手势

在演示原型时,我们可以使用如下手势:

回到目录

键盘快捷键

键盘快捷键能让您的工作效率最大化。各种不同操作,通常各自对应不同的键盘快捷键。下面列出了 型雕 中的大部份快捷键,以方便您查找。为了使用一种快捷键,您通常需要按住一个或多个辅助键不放,然后按下快捷键所指明的最后一个键。

编辑
测量距离。选中第一个图形,然后将鼠标悬浮到想要测距的对象上。
A 全选
C 拷贝
X 剪切
D 复制对象
V 粘贴
Backspace 或者 Delete 删除被选中的图形对象.
Z 撤销
Z 重做

缩放与聚焦
0 缩放页面至100%
1 缩放页面至充满画布
2 缩放所选择的图形,使之在画布上居中显示
3 在画布上居中显示所选择的图形
+ 放大页面
- 缩小页面

插入图形
R 插入矩形
O 插入椭圆形
T 插入文本

移动画布或图形

使用方向键来移动画布,或者画布上的图形对象。

提示:当且仅当成为交互焦点时,可以使用方向键来移动它。在任意时候,点击画布空白处,可以使画布成为交互焦点。点击画布上的图形对象,可以使该图形对象成为交互焦点。
提示: 使用快捷键无法移动使用 自动布局 的对象,因为它们会自动计算自己的位置。
空格 + 鼠标拖拽 拖动画布
上移画布或图形
下移画布或图形
左移画布或图形
右移画布或图形
上移画布或图形(10个像素)
下移画布或图形(10个像素)
左移画布或图形(10个像素)
右移画布或图形(10个像素)

组织图形
] 图层上移
[ 图层下移
H 隐藏/取消隐藏
L 锁定/取消锁定
G 组合
G 解除组合
M 制作网格

数值编辑器

当激活一个数值输入框后,不但可以使用硬件键盘上的数字键来直接输入数值,还可以使用两个方向键(上键、下键)来步进式地调整。

数值编辑器
递增1
递减1
递增10
递减10

其它
S 保存
P 进入演示模式,并播放当前页面
W 关闭应用窗口。
ESC 退出演示模式 / 取消所有选择 / 关闭弹窗
. 显示侧边栏

回到目录

其它

备份

为了稳妥起见,建议用户定期备份自己的文档。目前,建议通过 导出到邮件 的方式来备份现有的文档,并通过命名来区分版本。

注意!iCloud 只适合同步,不适合备份。

回到目录