型雕 是什么?

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

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

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

目录

快速开始

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

高仿真原型

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

纸绘原型

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

回到目录

原型项目

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

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

原型项目分类

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

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

创建新项目

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

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

选择设计机型

型雕中,每一个设计稿都针对一个具体的物理机型进行设计。型雕 支持跨越不同设备来设计、预览您的应用原型,即使这些设备具有不同的屏幕分辨率。

一些 iPhone 或 iPad 装备有高分辨率屏幕。我们可以在这些设备上设计或者预览为较低分辨率机型设计的应用原型。反之,无法在较低分辨率设备上使用为较高分辨率设计的原型。建议为您的原型选用较低的设计分辨率,从而可以在更多机型上预览。一旦选定,无法修改。

为新创建的原型选择一个合适的机型来作为设计目标。

跨机型使用时的限制

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

回到目录

页面集合

页面集合 项目视图显示了此项目所包含的“页面”。

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

点击任意一幅“页面”,打开它,进行编辑。

回到目录

页面排序

在查看项目的页面集合时,您可以随意 拖动 页面,以改变它们的排列顺序。

💡在演示原型时,排在第一位的页面会被作为演示的首页,被第一个展示。

回到目录

新建页面

新建页面

点击界面右上方的 按钮,创建一个新页面,任您发挥灵感。在新建一个页面时,可以直接创建一个新的 空白 页面,也可以 复制一个已有的页面 。而当选择创建新的空白页面时,需要进一步指定该页面的页面方向。

回到目录

重命名页面

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

rename a page

回到目录

删除页面

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

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

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

回到目录

项目详情

项目资料 页面集合 界面,点击 更多 按钮,可以进入 项目详情 界面。在这里,你可以查看和编辑项目的详细信息, 导出分享 项目。

回到目录

演示您的项目

开始演示

演示

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

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

投屏到 Mac

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

QuickTime Player

退出演示

pinch

如果您想退出演示模式,可以使用 捏合手势 ,或者同时使用 三只手指点击 屏幕。当页面未使用”摇晃设备”事件以触发动作时,也可以使用 摇动以退出

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

回到目录

导出/导入原型

添加到主屏幕

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

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

快捷指令

准备好原型

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

打开 快捷指令

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

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

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

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

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

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

回到目录

导出原型

进入 项目详情 界面,点击左上方的 分享 按钮,选择如下选项:

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

导入原型

从 文件 中导入

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

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

从 邮件 中导入

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

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

仅单向导入成功?

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

回到目录

页面编辑器

在编辑页面时,型雕 采用全屏编辑模式。因此,初次接触 型雕 的您可能会不知道如何唤出菜单。其实很简单,在全屏页面编辑模式下,型雕 具有两种菜单,分别是 左侧滑菜单(对象面板) 、 以及 双指点击所触发的菜单(页面菜单)

对象面板(左侧滑)

对象面板,又称为控件面板,列出了 型雕 提供的或用户自定义的各种对象(控件)。点击面板上的对象,将其插入页面中。

使用单指或双指,在屏幕左边缘向右划动,滑出左侧边栏菜单,即 对象面板

对象面板

回到目录

对象列表

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

💡 使用双指点击手势,唤出 页面菜单 。然后点击 图层列表
对象列表

选择,锁定,隐藏,改名,组合

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

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

对象列表

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

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

编辑状态下的对象列表

回到目录

对象菜单

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

💡提示: 如果您发现缺少 动作 菜单项,请前往 偏好设置 > 对象菜单 > 动作 ,确认是否开启了相关菜单项。

对象属性编辑器

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

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

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

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

对象动作编辑器

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

💡提示: 如果您发现缺少 动作 菜单项,请前往 偏好设置 > 对象菜单 > 动作 ,确认是否处于开启状态。

回到目录

偏好设置

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

若要更改 偏好设置,同时使用两只手指触击屏幕,唤出菜单。然后点击菜单上的 偏好设置

回到目录

手势

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

编辑手势

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

演示手势

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

回到目录

对象基础

对象是指可放置在页面上的任何东西,包括图像(照片)、文本框、形状、表格和图表。

选择

单选 - 单击

在 型雕 中,单击页面中的对象,可以选中它。当一个对象已被选中,再次点击它,可以取消它的选中状态。另外,也可以通过点击页面空白处的方式来取消已有的选择。

小技巧💡: 当页面对象比较密集、甚至重叠时,试图通过单击来选中它们会比较困难。建议通过 图层列表 来提前 锁定 无关对象,可以防止误选中它们。

单选 - 图层列表

如果对象透明、不可见、重叠,那么就需要使用强大的 图层列表 了。在图层列表中,单击对象所在行的缩略图/图标(位于行首),可以轻松的选中它,并弹出编辑菜单。

多选 - 逐一选择

逐一单击对象,并将对象加入选择。

多选 - 框选

按住屏幕的空白区域不放,然后拖移,画出一个矩形框。在这个框内的所有对象都将被选中(除了被锁定的对象外)。

Objects Multi-Selection

多选 - 使用对象列表

使用 对象列表 ,并开启 多选 选项来同时选中多个对象。

取消已有的选择

可以通过点击页面空白处的方式来取消已有的选择。”从屏幕左侧边缘向右滑动手指以弹出侧边菜单“的操作也会撤销所有的选中状态。

回到目录

移动

拖动对象

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

Multi-Selection

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

Multi-Selection
小技巧💡:良好的设计,可让您的操作快速如飞。如果页面内含有大尺寸原图,并且开启了 自动保存 ,会导致操作缓慢,并影响正常拖动。
小技巧💡:如果开启了 自动对齐 选项,并且对象位置恰好在相关区域,则可能会影响拖动操作。在拖动过程中,如果意外触发 自动对齐 ,亦有可能中断拖动过程。您可尝试关闭 自动对齐 ,以排查原因。

自动对齐

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

Multi-Selection

精确移动

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

回到目录

对齐与分布

水平对齐与垂直对齐

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

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

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

等间距均匀分布

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

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

回到目录

缩放

尺寸控制点

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

Control-Points

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

形状吸附

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

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

回到目录

设定圆角半径

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

Control-Points

型雕 也可以通过 属性编辑器 > 圆角半径 来精确地改变对象的圆角半径。

💡提示: 并不是所有对象都支持圆角半径,比如椭圆对象。

回到目录

颜色

在上色时,有多种方式来指定一种颜色:

color picker

回到目录

阴影

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

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

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

Shadows

回到目录

图层

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

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

逐层移动

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

Inspector > Layer

移动到指定图层

唤出 对象列表 。点击 排序 进入排序模式,拖动每行中的右侧图标来改变对象的图层关系。

Layer List > Reorder

移动到顶层或底层

选中对象 > 跟随式菜单 > 置顶置底(如果配置开启了这些菜单项),以将对象直接移动到最上层或最下层。

Menu > Send to Back, Bring to Front

在演示时改变图层

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

回到目录

锁定

我们常常需要锁定对象

对象锁定后,您无法以任何方式移动、删除或者修改,除非进行解锁。

如何锁定或解锁对象

回到目录

拷贝与粘贴

对象的拷贝与粘贴

跨应用粘贴图片

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

文本的拷贝与粘贴

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

回到目录

撤销与重做

如需撤消页面编辑操作,可以使用如下操作方式之一:

导出对象

💡提示: 首先确认 导出 选项是否开启:项目 -> 页面 -> (左侧滑)菜单 -> 选项 -> 快捷菜单 -> 导出。

单击对象,弹出 跟随式菜单。点击 导出 菜单项,将对象导出为图片,包括其三种输出分辨率:1x, 2x, 3x,并且以多种方式进行分享 。

回到目录

组合对象

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

组合

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

Multi-Selection

解除组合

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

组合对象的修改

如需修改某个组合对象的内部对象及其布局,可先临时解除组合。修改完成后,再重新组合:

Multi-Selection

组合对象的交互

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

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

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

回到目录

保存为模版

点击 保存为模版,会将组合对象作为用户自定义的对象模版进行保存,并使其出现在 对象面板 中的 用户控件 中,方便今后重复使用。

label

可以通过 偏好设置 菜单来管理这些自定义对象模版。

回到目录

各种对象

文本

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

格式

label

underline

单 / 双下划线

strikethrough

删除线

autowrap

自动换行(如果尺寸足够)。

提示:

如果需要显示大段文字,并且需要支持卷动,请使用 可卷动文本 对象。如果需要给文本添加背景颜色、背景图、边框,或者需要给形状添加文字,请使用 按钮 对象。

回到目录

可卷动文本

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

显示滚动条

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

允许选择

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

回到目录

图片

型雕 支持独立的图片对象。同时,作为图片属性,型雕 中的很多对象也都会使用图片。

image fill

使用图片

可以通过多种方式来使用图片:

💡提示: 并不是所有类型的对象都支持上述全部使用方式。

💡提示: 在导入图片时,型雕 支持简单的缩放与裁剪。借助 苹果商店 上的一些第三方图片处理应用,可以很方便地进行“长图”拼接,或者其它图像处理。预先准备好它们,随后导入到 型雕 中。

图片绘制模式

💡提示: 并不是所有类型的对象都支持上述全部绘制模式。

图片尺寸

对于 图片 对象,除了使用各种 常规方式 来改变其大小之外,还可以使用 属性编辑器调整到图片内容尺寸 功能来迅速改变图片尺寸,将其调整为图片内容的真实尺寸。如果图片的尺寸超出页面的尺寸,该功能会将其尺寸限制在页面尺寸内,并保持图片的原始长、宽比例。

回到目录

椭圆、三角、多边形

型雕 除了支持最常见的圆角矩形对象之外,还支持椭圆形、三角形、多边形对象。与圆角矩形对象不同,这些特殊几何图形对象既不支持圆角半径,也不支持阴影。

回到目录

按钮

按钮对象由一个图标、一个标题文字,以及一个作为背景的圆角矩形(使用颜色/图片填充)这些基本元素组成。

背景图片

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

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

image insets

拉伸效果

image stretching

专用动作

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

回到目录

状态条

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

标签栏

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

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

回到目录

导航条

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

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

回到目录

播放进度标签

媒体播放进度标签 在原型需要表现媒体播放功能时十分有用而方便。在演示模式下,它的文本内容是自动生成的,会以实时显示当前正在播放的音/视频媒体的时间总长和当前播放进度,形如 SS:MM / SS:MM。

回到目录

数据驱动

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

变量与绑定

型雕 引入了 变量 的概念。变量用于存储内部数据,每一个变量就是一个内部数据存储区。如果页面中的某个对象支持数据驱动引擎,则它的内容/样式可来自于一个或多个数据变量。

变量的作用域

变量的作用域是整个项目,而不是局限在单个页面内。实际上,为了防止“跨页面传参”的副作用,我们常常在 页面出现 事件中执行动作 清除变量

回到目录

文本

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

page action property

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

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

回到目录

步进器

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

比如,如果我们在编辑模式下将一个 步进器 对象的 绑定到变量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"
                }
           ]
        }
    ]
}
       

回到目录

图表

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

对于 饼图 组件,唤出其 属性编辑器 ,通过 当前项 来设定当前操作的是哪一条数据,然后修改 数据项数值 。而 条形图 组件的操作与之相似。

回到目录

事件驱动

事件与动作

型雕 原型由事件驱动。每种事件均对应一个或多个响应动作,进而与变量结合使用,让原型无限灵活,轻松实现跨页面传参、条件判断等高级逻辑。

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

回到目录

动作前置条件(即将发布)

在设定 动作 后,可以为该动作的执行施加一个(或者一系列)前提条件。

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

在引入条件前,型雕 中的机制是 事件 -> [动作]。当事件被触发时,执行相应的一系列动作。

在引入条件后,型雕 中的机制是 事件 -> [条件-动作]。当事件被触发时,执行相应的一系列动作。对于其中的每个动作,都仅当满足其全部前提条件时,才会被执行。

目前,支持的条件包括:

回到目录

事件

页面事件

页面事件

页面事件 作用于整个页面,是一种全局事件,并触发一个或多个响应动作 。

回到目录

对象事件

对象事件

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

常见的对象事件有:

回到目录

通用事件

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

回到目录

动作

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

页面动作

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

对象动作

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

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

链接与转场

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

基于对象事件

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

热点

Hotspot

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

基于页面事件

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

转场

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

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

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

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

回到目录

数据输入与处理

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

input value

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

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

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

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

回到目录

更换图片

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

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

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

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

回到目录

改变图层

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

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

回到目录

显示对话框

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

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

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

回到目录

生物特征授权

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

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

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

回到目录

动画

如需使用交互动画,请先确认相关选项处于 开启 状态:页面菜单 -> 偏好设置 -> 对象编辑器 -> 动画

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

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

动画曲线

回到目录

播放音频

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

在播放过程中,型雕 会把这个音频的当前播放时间进度默认输出到 变量2 ,把这个音频的总时长输出到 变量3

回到目录

播放视频

播放视频。

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

play video

回到目录

挑战:结合运用

拨打真实电话

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

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

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

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

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

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

回到目录

扫描与跳转

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

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

进入编辑模式:

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

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

Title Label

回到目录

性能优化

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

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

关闭自动保存

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

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

避免大尺寸图片

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

坚持简单的设计风格

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

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

隐藏不需要的图形对象

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

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

回到目录

内购

付款后仍无法使用

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

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

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

回到目录

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

适用于您的所有设备。只需在您的设备上下载 型雕 并点击订购窗口底部的 恢复 按钮即可。

回到目录

重新安装后

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

回到目录

订阅结束后

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

回到目录

其它

备份

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

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

加入测试

每次面临版本更新时,我们始终努力确保您的旧版文档能无缝迁移,并会告知已知的兼容性问题。更进一步的,如果您成为了 型雕 测试员,就可以随时使用苹果公司的 TestFlight 应用来回滚 型雕 应用的历史版本,然后再恢复您预先备份的旧版文档。这样,既可以提前尝鲜新功能,又可以保证文档安全。

💡 如果您想申请加入 型雕测试组,可以给我们发送申请邮件,并将您的 Apple ID 告诉我们,或者在应用内 主菜单 上点击 加入前瞻测试 。如果您在应用内主菜单上找不到 加入前瞻测试 这个选项,说明我们暂时没有公开招募新的测试成员。

回到目录