谁知道Adobe CC的线框工具？

本文概述

• 使用Adobe InDesign作为线框和原型制作工具的利弊
• 良好的线框准备工作已完成一半
• 组装线框/样机/原型套件
• 创建线框套件组件
• CC库中的Adobe Illustrator资产
• Adobe InDesign具有内容和复制的灵活性
• 使用现有资源
• 创建InDesign线框模板
• 建筑线框
• 增加互动
• 导出成品文件

线框图是设计任何用户界面(无论是网站, 应用程序还是软件产品)的主要步骤。无需以视觉, 颜色, 版式, 样式和效果的形式分散注意力, 你可以更加专注于定义内容层次结构和用户体验。

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

有很多不同的线框图工具可供选择。你选择哪一种取决于你的个人喜好和工作流程样式。

就像许多从印刷世界转向数字设计的设计师一样, 我是Adobe应用程序(例如Illustrator, InDesign和Photoshop)的专家。我可以随时随地高效, 直观地使用它们(即使有人在半夜把我叫醒并且拒绝给我一杯咖啡)。

毫不奇怪, 这些通用应用程序也已成为我用来进行Web和应用程序可视化设计的工具。因此, 为了使我的工作流程最高效, 我也将它们用于线框图。

Adobe CC的设计应用程序套件可用于有效地创建线框。

对于每个项目, 我通常从在纸上或者在不靠近办公桌的情况下在iPad或智能手机屏幕上绘制非常粗糙的草图开始设计。这些草图可以使我集中思考所选概念。客户可能永远都看不到他们中的任何一个。当我确信自己的想法行得通时, 便进入了线框图。我通常将Adobe Illustrator和InDesign结合使用：Illustrator用于创建大多数UI套件元素, 而InDesign用于线框图本身。

在本文的后面, 我将分步说明如何将这些工具也集成到你的线框图工作流中, 但是在详细介绍之前, 让我向你展示使用InDesign作为主要的线框图工具的优缺点。 。

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

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

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

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

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

良好的线框准备工作已完成一半

首先调整你的工作环境。如果你在Illustrator和InDesign中还没有针对这种工作的已保存工作区, 请创建一个。在Illustrator中, 从预定义的Web工作区开始并使其适应你的喜好：关闭不常用的面板, 确保打开要使用的面板, 然后根据你的工作风格进行排列。

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

组装线框/样机/原型套件

使用Illustrator和InDesign的高效线框图工作流程需要你花一些时间首先制作用户界面资产工具包。自从引入Adobe Creative Cloud以来, CC库是存储所有UI工具包组件的最佳方法。

你可以创建一个或多个用于线框图和原型制作的库。例如, 你可以为网站线框图创建一个库, 为iOS应用程序创建一个库, 为Android应用程序创建第三个库, 依此类推。

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

使用Adobe CC库来构建线框工具包并容纳普通资产。

如果你是较大团队的成员, 则可以在团队成员之间共享图书馆资产。库可以包含颜色, 图形, 图层样式(仅适用于Photoshop)以及段落和字符样式。通过单击CC Library面板底部的相应按钮并选择相应的元素, 可以在库中添加资产。你还可以通过将图形资产直接从画板上拖动到”库”面板中来添加图形资产。

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

创建线框套件组件

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

首先, 请列出线框中所有需要的元素, 例如导航元素, 包括图像, 视频帧和文本框的页面元素, 图标, 化身, 表单元素以及所有其他界面元素。列表完成后, 你可以转到Illustrator和InDesign来创建这些元素。

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

使线框套件资产尽可能简单, 因为它们需要提供快速的视觉提示, 以代表它们所代表的内容, 而不必太详细。你应该使用非常有限的调色板, 最好使用一些灰色阴影。在视觉上强调更重要的元素, 方法是使用更深的阴影为它们着色或提供更高的对比度。

对于高保真模型或原型, 请使用每个项目各自的调色板创建包含更详细元素的UI套件。为了轻松访问调色板, 请将其添加到CC库中。

创建一个Adobe线框套件。

CC库中的Adobe Illustrator资产

默认情况下, 从Illustrator添加到库的资源是链接的(自Adobe CC 2015起)。这意味着当你在Illustrator中修改库资产时, 更改将反映在所有使用的实例中。如果要将未链接的资产添加到文档中, 请在将其从面板中拖动时按Option / Alt键。

Adobe Illustrator中的Adobe CC线框资产库

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

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

Adobe InDesign中的样式指南和资产库

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

如果你忘记了由哪个应用程序创建了哪个图形资产, 则在将”显示项目”用作列表时, 在”库”面板中查看每个项目的右侧。

Adobe InDesign具有内容和复制的灵活性

为确保你可以轻松地更改线框中的副本和字体, 请在InDesign中创建文本容器。 InDesign有一个很好的功能, 可以用占位符文本填充文本框。绘制文本框时, 右键单击它, 然后选择”用占位符文本填充”。

像拖动任何其他图形元素一样, 将文本框添加到Adobe库。以后将这些文本资源用作线框布局的一部分时, 可以修改文本框及其在线框中的内容。

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

切换到”自动调整大小”选项卡, 然后选择适当的自动调整大小(可能只有”宽度”)和方便的参考点。如果你不想让InDesign将文本分成多行, 请选中”无换行”选项。

使用现有资源

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

如果要针对特定​​平台(例如iOS或Android应用程序)进行设计, 请确保你仔细阅读其人机界面指南并使用适当的资产。在工具包中具有特定于各种平台的UI元素可能会很方便。

在开始实际的线框图制作过程之前, 不要过分专注于尝试说明库中的每个将来资产或状态。你可以稍后将资产添加到库中, 并在此基础上继续进行构建。

创建InDesign线框模板

还剩下一个重要的准备步骤：创建用于制作线框的InDesign模板。首先创建具有Web或Digital Publishing意图的新文档, 然后为要设计的屏幕定义适当的页面大小。

InDesign中的线框模板

由于建议你使用某种网格来布置线框元素, 因此通过设置所需的列数和装订线间距来设置边距并创建列网格。你可以稍后在”布局”>”页边距和列”中更改这些设置, 并在”页面”面板中选择其各自的主页。

如果需要水平参考线和互补的垂直参考线, 请手动创建它们, 或使用”布局”>”创建参考线”来制作其他网格。创建网格时, 使用诸如Gridulator等在线网格计算器工具会很有帮助。

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

尽管乍一看似乎很复杂, 但这实际上是一个非常简单有效的工作流程。将实际的线框保存在单独的文档中, 可以更轻松地继续从批准的线框构建为优美的视觉设计。

创建易于演示的模板也很简单, 可以在其中放置线框, 添加标签和注释, 并向客户展示最佳解决方案。对线框文件进行修改时, 只需像演示文稿文档中的任何其他链接一样对其进行更新, 就可以了！所有更改也都在你的演示文稿中。

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

完成创建后, 将模板另存为InDesign.indt模板文件。保存所需的所有模板后, 你终于可以开始有效地开始线框图了。

建筑线框

首先, 首先要从母版页开始。从库中将所有相同的全局元素拖到项目的所有屏幕上。如果要设计网站, 则这些通常是带有徽标, 导航和页脚的标题。由于你可以创建多个母版页并且它们可以彼此继承, 因此可以利用嵌套母版页的优势。

例如, 根据项目的不同, 你可以为一个UI元素(如模式或对话框弹出窗口)创建一个母版页, 然后基于第一个母版制作新的母版, 仅更改需要不同的元素。

在Adobe InDesign中使用主模板

你不能选择, 更改或删除常规文档页面上的母版元素, 除非在按住Command / Control + Shift的同时单击它们以覆盖母版。覆盖元素后, 你可以更改其任何参数或将其完全从布局中删除。

请记住, 即使你覆盖了该元素, 你仍未更改的参数仍将继承自母版。例如, 如果通过更改元素的颜色覆盖元素, 则其大小不会更改, 因为它仍连接到主对象。此外, 如果你在母版页上对其进行更改, 则还将在先前覆盖的元素上对其进行修改。

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

如果要创建一个以上屏幕尺寸的设计, 请从”布局”>”创建替代布局”或”页面”面板中进行替代布局。创建备用布局时, 可以使用液体布局规则来自动采用从一种尺寸和方向到另一种尺寸和方向的页面元素, 也可以手动控制它们。要应用和测试液体布局规则, 请使用页面工具或打开面板窗口>交互式>液体布局。

InDesign中Adobe线框图的液体布局

增加互动

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

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

你还可以将超链接添加到驻留在母版页上的对象, 这可以是实时保存程序。一次在母版页上创建链接, 它们将在文档的所有屏幕上工作。

你可以从任何图形, 文本, 图像或元素组创建按钮。要从所选对象创建按钮, 请使用”窗口”>”交互”>”按钮和表单”面板, 然后单击”转换为按钮”图标。

按钮可以具有不同的状态, 分别用于正常, 过渡和单击外观。要将过渡或单击状态添加到按钮, 请在”按钮”面板中单击它们, 然后编辑每种状态的按钮外观。要将动作添加到按钮, 请单击加号并从列表中选择它。请注意, SWF / EPUB下的操作在交互式PDF中不起作用。

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

如果你想使用InDesign CC 2015在线发布功能将文档转换为HTML原型, 则可以使用更多交互选项, 例如动画, 多状态对象和多个按钮操作, 包括所有用于SWF / EPUB导出的选项。

你可以使用”动画”面板并从下拉菜单中选择内置预设之一并设置其属性来添加简单动画。一个对象只能应用一个动画, 但是如果你需要添加更多的动画, 请将你的对象与一个空框组合在一起, 然后对该新创建的对象使用新的动画。

对于需要显示不同状态的UI元素, 请创建一个多状态对象。为每个状态创建一个单独的对象。对象可以是单个元素(图片, 文本框, 图形), 也可以是一组不同的元素。打开”窗口”>”交互式”>”对象状态”面板, 选择为多状态对象创建的所有对象, 然后单击面板底部的”新建”按钮。

制作多状态对象后, 你需要创建按钮以从一种对象状态转移到另一种状态。 “转到下一个状态”或”转到上一个状态”操作通过”转到状态”操作显示特定的对象状态。

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

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

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

如果你尚未使用Adobe InDesign交互式功能, 请先做好准备, 因为这需要学习一些技巧。但是, 只要稍加练习和反复试验, 你就可以快速掌握它们。

导出成品文件

完成线框和演示文件的创建后, 剩下的就是以最好的方式向客户展示你的出色创意。为此, 你需要以客户可以预览的格式导出线框。尽管InDesign文件可以多种格式导出, 但是如果要测试功能低保真或高保真原型, 你可能会使用Interactive PDF或Online Online功能。若要另存为交互式PDF, 请从”导出”对话框的”格式”下拉菜单中选择” Adob​​e PDF(交互式)”, 然后根据需要调整属性。如果要包含交互元素, 请不要忘记在”表单和媒体”上打钩。客户可以在免费的Adobe Reader中查看PDF线框, 并将所有注释写在同一文件中。

你还可以使用从InDesign导出的PDF文档来创建InVision(或其他支持PDF的工具)原型。如果你的标准原型制作工具(也许是Marvel)无法导入PDF, 则可以将InDesign线框页面导出为JPEG或PNG图像。

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

“在线发布”功能的缺点是, 它对导出没有任何其他控制, 并且文件始终存储在Adobe的服务器上。此外, 它仍然是预览功能, 你无法确定Adobe会朝哪个方向开发它, 甚至无法使用它。

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