谁知道 Adob​​e CC 可以线框？

线框图是设计任何用户界面的重要步骤，无论是网站、应用程序还是软件产品。 无需在视觉、颜色、排版、样式和效果方面分心，您可以更专注于定义内容层次结构和用户体验。

制作低保真线框和原型将帮助您在流程中更早、更频繁地进行测试和迭代。 低保真线框使设计师能够更快地工作并开发出用户喜欢的产品。

在野外有很多不同的线框图工具可供选择。 您选择哪一个将取决于您的个人喜好和工作流程风格。

就像许多从印刷界转向数字设计的设计师一样，我是 Illustrator、InDesign 和 Photoshop 等 Adob​​e 应用程序的专家。 我可以随时随地高效、直观地使用它们（即使有人在半夜叫醒我并拒绝给我一杯咖啡）。

毫不奇怪，这些多功能应用程序也成为了我用来进行 Web 和应用程序视觉设计的工具。 因此，为了使我的工作流程最有效，我也将它们用于线框图。

对于每个项目，我通常通过在纸上或 iPad 或智能手机屏幕上（如果我不在办公桌附近）做非常粗略的草图来开始设计。 这些草图可以集中我对所选概念的想法； 客户可能永远不会看到它们中的任何一个。 当我确信我的想法可行时，我开始使用线框图。 我通常将 Adob​​e Illustrator 和 InDesign 结合使用：Illustrator 用于创建大部分 UI 工具包元素，而 InDesign 用于线框本身。

我将在本文后面逐步解释如何将这些工具整合到您的线框图工作流程中，但在详细介绍之前，让我向您展示使用 InDesign 作为主要线框图工具的优缺点.

使用 Adob​​e InDesign 作为线框和原型制作工具的利弊

一段时间以来，Adobe InDesign 不仅是一个桌面出版应用程序，而且广泛用于数字出版和 EPUB 创作。 它也是线框图的合适工具还有几个原因：

• 母版页——您可以使用母版页快速一致地应用全局设计元素，如导航、页眉、页脚等。 您可以根据需要创建任意数量的母版页，最重要的是，一个母版可以基于另一个。
• 坚实的网格支持- 允许您轻松创建和应用不同类型的网格、补充列、水平和垂直参考线以创建模块，以及子网格以提高复杂性和精度。
• 替代布局- 为同一文件中的多个设备和方向启用线框。
• CC Libraries – 生成一个包含不同可重用资源的库，例如常用对象、颜色、字符和段落样式。 在 InDesign、Illustrator 或 Photoshop 中或使用 Adob​​e Capture 移动应用程序（无论您喜欢哪一种）创建资源。
• 层- 提供在线框中有选择地组织、分组、显示/隐藏和锁定/解锁对象和内容的能力。 多页 InDesign 文档的每一页都具有相同的层数和顺序。 您对图层所做的所有更改都会反映在所有页面上，例如可见性、堆叠顺序或删除。
• 样式和表格——通过使用 InDesign 样式完全控制文本、对象和表格的外观。 样式可以相互继承，提供在整个文档中轻松级联所需格式的能力。 创建和格式化表格以用作线框内容元素甚至是用于布局目的的助手非常简单。
• Typekit 集成——在高保真模型中，您可以使用与桌面同步的任何 Typekit 字体。
• 交互性和动画——您可以使用 Adob​​e InDesign 的内置交互性和动画功能来创建不同状态的 Web 或应用程序设计元素以进行交互原型设计。 大多数人在为数字出版解决方案和固定版式 EPUB 导出创建杂志时使用这些功能，但它们也适用于原型设计。
• 导出选项——InDesign 可以以多种格式导出您创建的线框和原型。 在大多数情况下，交互式 PDF 可能是您选择的格式，但您也可以使用 Publish Online 功能将文档转换为交互式 HTML，可以在现代桌面和移动浏览器中查看。 遗憾的是，您对使用 Publish Online 的导出没有太多控制权，并且导出的文件托管在 Adob​​e 服务器上。 您可以将原型 URL 分享给您的客户或将其嵌入您的网站。 要获得更多控制和直接导出到 HTML5，您可以使用 Ajar Productions 的 in5 扩展。

Adobe InDesign有许多优点可用作线框和原型制作工具，但它也有一些缺点：

• 缺少预定义的线框模板和元素——由于 InDesign 并不是一个线框工具，因此您必须自己创建和准备模板和对象资源。 （我将在本文后面向您展示如何处理此步骤。）好消息是，大部分工作只需完成一次，经过几个小时的工作，您就可以开始您的工作了。 InDesign 线框图。 此外，您可以从互联网上下载大量资产和线框套件，因此无需自己绘制所有内容。
• 交互性和动画功能有限——尽管您可以轻松连接页面并添加一些交互性和动画，但该过程有时可能需要很长时间。 一些简单的交互工具不是很直观。 如果您没有使用过 InDesign 交互功能，则需要先克服一点学习曲线，然后才能有效地应用它们。
• InDesign 文档不能直接导出为分层的 PSD 文件——如果您在 Adob​​e Photoshop 中进行视觉设计，并希望使用单独的线框元素来构建您的设计，那么您必须先将线框导出为 PDF。 然后您需要在 Illustrator 中打开 PDF 并再次将其导出为分层 PSD。 在 Mac 上工作的人还可以使用 Rob Day 编写的免费脚本将 InDesign 文件保存为分层 PSD。

良好的线框准备是工作的一半

首先微调您的工作环境。 如果您在 Illustrator 和 InDesign 中还没有为此类工作保存的工作区，请创建一个。 在 Illustrator 中，从预定义的 Web 工作区开始并根据自己的喜好对其进行调整：关闭您不经常使用的面板，确保打开您将使用的面板，然后根据您的工作风格安排它们。

完成后，通过选择“窗口”>“工作区”>“新建工作区”来保存工作区... 在 InDesign 中使用 Digital Publishing 工作区作为启动器执行相同的操作。

组装线框/模型/原型套件

使用 Illustrator 和 InDesign 的高效线框工作流程需要您先投入一些时间来制作用户界面资产套件。 自 Adob​​e Creative Cloud 推出以来，CC 库是存储所有 UI 工具包组件的最佳方式。

您可以创建一个或多个库用于线框图和原型设计。 例如，您可以为网站线框图创建一个库，为 iOS 应用程序创建另一个库，为 Android 应用程序创建第三个库，等等。

要创建 Adob​​e CC 库，请打开“库”面板并从面板的汉堡菜单中选择“创建新库”。 您可以在使用您的 Adob​​e ID 登录的所有设备上的不同 Adob​​e 桌面或移动应用程序中制作和使用您放入库中的资源。 这意味着您可以在 iPad 或 iPhone 上开始项目，在办公室的台式计算机上继续，并在家用笔记本电脑上使用所有设备上可用的相同资产进行最后一刻的更改。

如果您作为更大团队的一员工作，则可以在团队成员之间共享库资产。 库可以包含颜色、图形、图层样式（仅限 Photoshop）以及段落和字符样式。 您可以通过单击 CC Library 面板底部的相应按钮在库中添加资源，并选择相应的元素。 您还可以通过将图形资源直接从画板拖到“库”面板来添加图形资源。

库中的资产按类别组织。 坚持良好的做法，并用有意义的名称重命名每个资产。 库是可搜索的，通过键入其名称的开头来查找资产将为您节省大量时间，尤其是当您的库中有许多不同的项目时。 要更改资产的名称，请双击它并输入一个新名称。

创建线框套件组件

尽管 Adob​​e InDesign 有一些与 Illustrator 非常相似的基本绘图工具，但 Illustrator 是在线框中绘制各种元素的更好选择。 根据经验，在 Illustrator 中创建需要一些比基本几何形状更复杂的绘图的所有套件元素。 在 InDesign 中创建包含您需要在布局中更改的文本的更简单元素，例如简单的按钮。

对于初学者，请列出您需要在线框中的所有元素，例如导航元素、页面元素（包括图像、视频帧和文本框）、图标、头像、表单元素和所有其他界面元素。 完成列表后，您可以前往 Illustrator 和 InDesign 来创建这些元素。

首先为线框或模型套件组件创建一个新文档。 仔细检查您是否选择了 Illustrator 中的 Web/设备配置文件或“新建文档”对话框中的 Web/数字出版意图。 这样可以确保以像素为单位，并将颜色模式设置为 RGB。

使线框套件资产尽可能简单，因为它们需要为它们所代表的内容提供快速的视觉提示，而不会过于详细。 您应该使用非常有限的调色板，最好是几个灰色阴影。 通过用较深的色调着色或赋予它们更高的对比度，在视觉上突出更重要的元素。

对于更高保真度的模型或原型，创建具有更详细元素的 UI 工具包，这些元素使用每个项目各自的调色板。 要轻松访问调色板，请将它们添加到 CC 库中。

CC 库中的 Adob​​e Illustrator 资源

您从 Illustrator 添加到库的资源默认是链接的（自 Adob​​e CC 2015 起）。 这意味着当您在 Illustrator 中修改库资源时，更改会反映在所有使用的实例中。 如果要将未链接的资产添加到文档，请在从面板中拖动它的同时按 option/alt 键。

当您在 InDesign 中使用链接的 Illustrator 资源时，在正常模式下查看文档时，它们的左上角会有一个小云图标。 它们也都列在“链接”面板中。 如果您在 Illustrator 中修改库资源，InDesign 文档中的更改将不会自动完成。 云图标将替换为修改后的链接感叹号图标，您必须更新这些链接。

您放置在 InDesign 文档中的 InDesign 资源未链接。 这意味着您可以独立于原始实例编辑实例，并且在修改原始资源时，这些更改不会反映在已放置到布局中的资源上。

在创建线框时考虑这些属性：当您认为需要全局修改和更新资源时，从 Illustrator 将资源添加到库中，或者当您知道要单独修改它们时从 InDesign 中添加它们。 请注意，您还可以在 Illustrator 中创建图形，将它们复制/粘贴到 InDesign，然后根据需要进行修改，然后再将其作为 InDesign 资源添加到库中。

如果您碰巧忘记了哪个图形资源是由哪个应用程序创建的，请查看“库”面板中每个项目的右侧，同时将“显示项目”用作列表。

Adobe InDesign 内容和副本的灵活性

为确保您可以轻松更改线框中的副本和排版，请在 InDesign 中创建文本容器。 InDesign 有一个很好的功能，可以用占位符文本填充文本框。 绘制文本框时，右键单击它并选择Fill With Placeholder Text 。

像任何其他图形元素一样，通过拖动将文本框添加到 Adob​​e 库中。 当您稍后将这些文本资源用作线框布局的一部分时，您可以修改文本框以及线框中的内容。

也可以考虑在 InDesign 中制作按钮 UI 元素。 要创建一个按钮，请创建一个文本框架，输入文本，然后使用对象 > 文本框架选项来定义插入间距。 通过从对齐下拉菜单中选择所需的选项来调整框内文本的垂直对齐方式。

切换到 Auto-Size 选项卡并选择适当的自动调整大小（可能是 Width Only）和一个方便的参考点。 如果您不想让 InDesign 将文本分成多行，请选中“无换行符”选项。

使用现有资源

互联网上有很多 Adob​​e Illustrator 线框图和原型设计 UI 工具包，如果您想要现成的解决方案，您可以购买甚至免费下载。 也许您已经拥有可以从已完成项目中挖掘出来的元素。 打开这些文档，根据需要调整任何先前创建的元素，然后将它们放入各自的库中。

如果您正在为特定平台（例如 iOS 或 Android 应用程序）进行设计，请务必仔细阅读他们的人机界面指南并使用适当的资产。 在您的工具包中拥有特定于各种平台的 UI 元素可能会很方便。

在开始实际的线框图过程之前，不要过分关注试图解释库中的每一个未来资产或状态。 您可以稍后将资产添加到您的库中，并随时在其上进行构建。

创建 InDesign 线框模板

还有一个更重要的准备步骤：创建将用于制作线框的 InDesign 模板。 首先创建一个具有 Web 或数字出版意图的新文档，并为您设计的屏幕定义适当的页面大小。

由于建议您使用某种网格来布置线框元素，因此设置边距并通过设置所需的列数和装订线空间来创建柱状网格。 您可以稍后从“布局”>“边距和列”更改这些设置，并在“页面”面板中选择相应的母版页（或多个页面）。

如果您需要水平参考线和互补的垂直参考线，请手动创建它们或使用“布局”>“创建参考线”创建额外的网格。 创建网格时，使用其中一种在线网格计算器工具（如 Gridulator）会很有帮助。

您还可以创建用于演示目的的其他模板，将设备模型用作线框的框架。 由于可以将一个 InDesign 文档链接到另一个文档，因此您可以在一个 InDesign 文档中创建线框，然后将其放入另一个文档中进行演示。

虽然一开始看起来很复杂，但这实际上是一个非常简单有效的工作流程。 将实际线框保存在单独的文档中可以更轻松地继续从批准的线框构建到精美的视觉设计。

创建演示就绪模板也很简单，可以在其中放置线框、添加标签和评论，并能够向客户展示您的最佳解决方案。 当您对线框文件进行修改时，只需像演示文档中的任何其他链接一样更新它，然后ta-daaa！ 所有更改也都在您的演示文稿中。

在“图层”面板中，您可以为不同类型的内容准备单独的图层：用户界面元素、交互功能、手势、标签和注释。 如果您需要为特定项目添加更多图层，您可以在线框制作过程中随时轻松添加它们。

创建完成后，将模板另存为 InDesign.indt 模板文件。 保存所需的所有模板后，您终于可以开始高效地进行线框图制作了。

构建线框

首先要做的事情是从母版页开始。 从库中拖动在项目的所有屏幕上相同的所有全局元素。 如果您正在设计一个网站，这些通常是带有徽标、导航和页脚的页眉。 由于您可以创建多个母版页并且它们可以相互继承，因此您可以利用嵌套母版页。

例如，根据项目，您可以为一个 UI 元素创建母版页，例如模式或对话框弹出窗口，然后在第一个母版的基础上创建新的母版，只更改需要不同的元素。

您无法选择、更改或删除常规文档页面上的主元素，除非您在按住 Command/Control + Shift 的同时单击它们以覆盖主元素。 一旦您的元素被覆盖，您可以更改其任何参数或将其从布局中完全删除。

请记住，即使您覆盖元素，您尚未更改的参数仍将从主节点继承。 例如，如果您通过更改元素的颜色来覆盖元素，则它的大小不会改变，因为它仍然连接到主节点。 此外，如果您在母版页上更改它，它也会在您之前覆盖的元素上被修改。

在您的线框图文档中插入其他页面时，请记住将它们基于它们各自的母版。 如果您需要更改布局中已有页面的母版，请在“页面”面板中选择它们，单击鼠标右键，然后选择“将母版应用于页面”。 使用库资源并使用智能参考线和对齐选项排列它们以创建最终的 UI 线框布局。

如果您要为多个屏幕尺寸创建设计，请从“布局”>“创建备用布局”或“页面”面板制作备用布局。 您可以在创建备用布局时使用流式布局规则来自动采用从一种尺寸和方向到另一种尺寸和方向的页面元素，或者您可以手动控制它们。 要应用和测试 Liquid 布局规则，请使用页面工具或打开面板 Window > Interactive > Liquid Layout。

添加交互性

Adobe InDesign 具有许多交互功能，您可以在创建线框或原型时利用这些功能。 您将包含哪些功能将取决于您的线框、原型或演示文稿所需的最终格式。

如果您要导出为 PDF，交互性将受到限制，但您至少可以使用超链接面板创建屏幕之间的链接。 选择要作为链接的元素，然后单击新建超链接图标。 从链接到下拉菜单中，选择页面并输入所需的页码。 对您希望充当屏幕之间链接的所有项目重复该操作。

您还可以向驻留在母版页上的对象添加超链接，这可以节省实时时间。 在母版页上创建一次链接，它们将适用于文档的所有屏幕。

您可以从任何图形、文本、图像或元素组创建按钮。 要从选定对象创建按钮，请使用 Window > Interactive > Buttons and Forms 面板并单击 Convert to Button 图标。

按钮可以为正常、翻转和单击外观创建不同的状态。 要为按钮添加翻转或单击状态，请在“按钮”面板中单击它们并编辑每个状态的按钮外观。 要向按钮添加操作，请单击加号并从列表中选择它。 考虑到 SWF/EPUB 下的操作不适用于交互式 PDF。

要创建弹出元素，请选择显示/隐藏按钮和表单。 要隐藏按钮直到触发选中隐藏直到触发选项。 您可以在交互式 PDF 中包含多状态对象，但前提是您先将它们导出为 SWF，然后再将它们放回 InDesign 版面以进行 PDF 导出。 这个工作流程很乏味，并且无法在所有 PDF 阅读器中正确查看 PDF，因此除非确实有必要，否则请尽量避免这样做。

如果您想使用 InDesign CC 2015 Publish Online 功能将文档转换为 HTML 原型，您可以使用更多交互选项，例如动画、多状态对象和多按钮操作，包括所有用于 SWF/EPUB 导出的选项。

您可以使用“动画”面板添加简单的动画，并从下拉菜单中选择一种内置预设并设置其属性。 一个对象只能应用一个动画，但如果您需要添加更多动画，请将您的对象与一个空框分组，并在该新创建的对象上使用新动画。

对于需要显示不同状态的 UI 元素，请创建多状态对象。 为每个状态创建一个单独的对象。 对象可以是单个元素（图片、文本框、图形）或一组不同的元素。 打开 Window > Interactive > Object States 面板，选择您为多状态对象创建的所有对象，然后单击面板底部的 New 按钮。

创建多状态对象后，您需要创建按钮以从一种对象状态移动到另一种状态。 Go To Next State 或 Go To Previous State 操作通过 Go To State 操作显示特定对象状态。

如果你想在你的线框/原型中有一个可滚动的框架，最简单的创建方法是使用 Ajar Productions 的通用滚动框架扩展。 下载并安装扩展后，您可以将其用作 InDesign 面板。 对于可滚动的框架，您需要为容器创建内容以及一个框架。

可滚动内容可以是文本框、图片或组合在一起的多个元素。 完成创建内容和容器框后，选择内容并编辑 > 剪切。 然后选择容器并使用“编辑”>“粘贴到”将内容粘贴到其中。 选择容器并使用通用滚动框架，调整所需的滚动方向。

通过组合按钮、多状态对象、动画和可滚动框架，您可以获得丰富的交互体验。 要在 InDesign 中测试交互性，请使用 EPUB 交互性预览面板。 您可以预览单个页面或整个文档。 根据需要放大预览面板。

如果您还没有使用过 Adob​​e InDesign 交互功能，请做好准备，因为一开始会有一些学习曲线。 但只要稍加练习和反复试验，你就会很快掌握它们。

导出完成的文件

当您完成线框图和演示文件的创建后，剩下的就是以最好的方式向客户展示您的伟大想法。 为此，您需要以客户可以预览的格式导出线框。 尽管 InDesign 文件可以以多种格式导出，但如果测试功能性低保真或高保真原型，您可能会使用交互式 PDF 或 Publish Online 功能。 要另存为交互式 PDF，请从“导出”对话框的“格式”下拉菜单中选择 Adob​​e PDF（交互式），然后根据需要调整属性。 如果您想要包含交互式元素，请不要忘记勾选表单和媒体。 客户可以在免费的 Adob​​e Reader 中查看 PDF 线框，并将他们的所有评论写在同一个文件中。

您还可以使用从 InDesign 导出的 PDF 文档来创建 InVision（或其他一些支持 PDF 的工具）原型。 如果您的标准原型制作工具（可能是 Marvel）无法导入 PDF，请将您的 InDesign 线框页面导出为 JPEG 或 PNG 图像。

要导出可在不同设备上的现代浏览器中看到的交互式 HTML 原型，请转到文件 > 在线发布，或单击应用程序栏中的在线发布按钮。 文档准备好在线发布并上传后，您可以复制文档 URL 以与利益相关者共享并开始审核过程。 您还可以在您的网站上嵌入已发布的原型。

Publish Online 功能的一个缺点是它对导出没有任何额外的控制，并且文件始终存储在 Adob​​e 的服务器上。 此外，它仍然是一个预览功能，您无法确定 Adob​​e 将朝哪个方向开发它，或者即使它会停止使用。

导出线框/原型后，就可以开始测试、审查和迭代过程了。