线框图是 设计中的一个重要步骤 任何用户界面，无论是网站、应用程序还是软件产品. 没有视觉上的干扰, 颜色, 排版, 风格, 和效果, 你可以更专注于定义 内容层次结构 以及用户体验.

制作低保真线框图和原型将有助于你在过程中更早、更频繁地测试和迭代. 低保真线框允许设计师更快地工作并开发出用户喜欢的产品.

有很多不同之处 线框图工具 在野外进行选择. 你选择哪一个取决于你的个人喜好和工作流程风格.

就像很多设计师搬到 数字设计 来自印刷业, 我是插画家等Adobe应用程序的专家, 排版软件名称, 和Photoshop. 我可以在任何地点、任何时间高效、直观地使用它们(即使有人在半夜把我叫醒，拒绝给我一杯咖啡)。.

毫不奇怪，这些多功能的应用程序也成为我用来做web和 应用程序视觉设计. 因此，为了使我的工作流程效率最高，我也将它们用于线框图.

对于每个项目，我通常都会开始 设计 通过在纸上画非常粗糙的草图, 或者在我不在办公桌附近的时候打开我的iPad或智能手机屏幕. These sketches are there to focus my thoughts regarding the chosen concept; the client will probably never see any of them. 当我确信我的想法可行时，我就开始画线框图. 我通常使用Adobe 插画家和 排版软件名称 结合使用:插画家用于创建大多数UI工具包元素，排版软件名称用于线框图本身.

我将在文章的后面一步一步地解释如何将这些工具合并到您的线框图工作流中, 但在我讲细节之前, 让我向你展示使用排版软件名称作为主要线框图工具的优点和缺点.

使用adobeindesign作为线框和原型工具的利弊

一段时间以来, adobeindesign不仅是一个桌面出版应用程序，而且广泛用于数字出版和EPUB创作. 也有几个原因，为什么它是一个合适的工具线框图:

• 掌握页面 -您可以快速和一致地应用全局设计元素，如导航, 头, 页脚, 等等，使用母版页. 您可以根据需要创建任意数量的母版页, 除此之外, 一个大师可以基于另一个大师.
• 实心网格支撑 -允许您轻松创建和应用不同类型的网格, 补充列, 创建模块的水平和垂直指南, 以及更复杂和精确的子网格.
• 备用的布局 -在同一文件中为多个设备和方向启用线框图.
• CC库 -生成不同的可重用资产库，如常用对象, 颜色, 字符, 段落样式. 在排版软件名称中创建资产, 插画家, 或Photoshop, 或使用Adobe Capture移动应用程序-您喜欢的任何一种.
• 层 -提供组织能力, 集团, 显示/隐藏, 并在线框中选择性地锁定/解锁对象和内容. 多页排版软件名称文档的每一页都有相同的层数和顺序. 您对图层所做的所有更改都会反映在所有页面上, 像可见性, 堆垛顺序, 或删除.
• 样式和表格 -完全控制您的文本的外观, 对象, 和表格通过使用排版软件名称样式. 样式可以相互继承，从而可以在整个文档中轻松地层叠所需的格式. 创建和格式化用作线框图内容元素或布局辅助工具的表格非常简单.
• Typekit集成 -在高保真模型中，您可以使用任何与桌面同步的Typekit字体.
• 交互性和动画 -您可以使用adobeindesign的内置交互性和动画功能来创建不同状态的web或应用程序设计元素的交互原型. 大多数人在为数字出版解决方案和固定布局EPUB导出创建杂志时使用这些功能, 但它们也适用于原型制作.
• 导出选项 - 排版软件名称可以导出线框图和原型，你创建在各种格式. 在大多数情况下，交互式pdf可能是您选择的格式, 但您也可以使用Publish Online功能将文档转换为交互式HTML, 哪些可以在现代桌面和移动浏览器中查看. 不幸的是, 使用Publish Online，您对导出没有太多的控制, 和导出的文件托管在Adobe服务器上. 您可以将原型URL共享给您的客户端或将其嵌入到您的站点中. 要获得更多的控制和直接导出到HTML5，您可以使用in5扩展 不和谐的作品.

Adobe 排版软件名称 作为线框图和原型工具，它有很多优点，但也有一些缺点:

• 缺乏预定义的线框模板和元素 -因为排版软件名称不是一个线框图工具, 你必须自己创建和准备模板和对象资产. (我将在本文后面向您展示如何处理这一步.好消息是，大部分工作只需要完成一次, 工作了几个小时之后, 您将准备好启动您的排版软件名称线框图. 也, 有很多资产和线框套件，你可以从互联网上下载, 所以没有必要自己画所有的东西.
• 交互性和动画功能是有限的 -虽然你可以很容易地连接页面，并添加一些交互性和动画, 这个过程有时需要很长时间. 一些简单的交互工具不是很直观. 如果你没有使用过排版软件名称的交互功能, 在你能够有效地应用它们之前，你需要克服一个轻微的学习曲线.
• 排版软件名称文档不能直接导出为分层PSD文件 -如果你在Adobe Photoshop中进行视觉设计，并希望有分离的线框元素来构建你的设计, 那么你必须先将线框导出为PDF格式. 然后你需要在插画家中打开PDF并再次导出为分层PSD. 在Mac上工作的人也可以使用由 抢一天 将排版软件名称文件保存为分层PSD.

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

从调整你的工作环境开始. 如果你还没有在插画家和排版软件名称中为这类工作保存工作区, 创建一个. 在插画家中, 从预定义的Web工作空间开始，并根据自己的喜好进行调整:关闭不经常使用的面板, 一定要打开你要用的, 然后根据你的工作风格来安排.

完成后, save the workspace by choosing Window > Workspace > New Workspace… Do the same thing 在排版软件名称 using the 数字 Publishing workspace as a starter.

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

使用插画家和排版软件名称的高效线框图工作流程要求您首先投入一些时间制作用户界面资产工具包. 自Adobe Creative Cloud推出以来, CC库是存储所有UI工具包组件的最佳方式.

您可以为线框图和原型目的创建一个或多个库. 例如, 你可以创建一个网站线框图库, 另一个用于iOS应用程序, 三分之一用于Android应用程序, 等等......。.

创建一个Adobe CC库, 打开Libraries面板，从面板中的汉堡包菜单中选择Create New Library. 您放入库中的资产可以在您使用Adobe ID登录的所有设备上的不同Adobe桌面或移动应用程序中制作和使用. 这意味着你可以在iPad或iPhone上开始这个项目, 在办公室的台式电脑上继续, 在家用笔记本电脑上进行最后一分钟的修改，并在所有设备上使用相同的资产.

如果您在一个较大的团队中工作，则库资产可以在团队成员之间共享. 库可以包含颜色, 图形, 图层样式(仅限Photoshop), 段落和字符样式. 通过单击CC Library面板底部的相应按钮，选择相应的元素，您可以在库中添加资源. 你也可以通过直接从画板拖拽到Libraries面板来添加图形资源.

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

创建线框套件组件

尽管Adobe 排版软件名称有一些基本的绘图工具与插画家非常相似, 在线框中绘制各种元素时，插画家是一个更好的选择. 根据经验, 在插画家中创建所有需要绘制比基本几何形状更复杂的套件元素. 创建包含需要在布局中更改的文本的更简单的元素, 比如简单的按钮, 在排版软件名称.

对于初学者来说, 列出线框图中需要的所有元素, 比如导航元素, 包含图像的页面元素, 视频帧, 文本框, 图标, 阿凡达, 表单元素, 以及所有其他界面元素. 在你的列表完成后，你可以转向插画家和排版软件名称来创建这些元素.

首先为线框或模型套件组件创建一个新文档. 再次确认在新建文档对话框中选择了Web/Devices Profile in 插画家或Web/数字 Publishing Intent. 这确保像素被用作单位，颜色模式被设置为RGB.

使线框套件资产尽可能简单，因为它们需要在不太详细的情况下为它们所代表的内容提供快速的视觉线索. 你应该使用非常有限的调色板，最好是一些灰色的阴影. 在视觉上，通过用更深的色调或更高的对比度来强调更重要的元素.

为 高保真度的模型或原型，使用每个项目各自的调色板创建带有更详细元素的UI工具包. 为了方便地访问调色板，请将它们添加到CC库中.

CC库中的Adobe 插画家资产

从插画家添加到库中的资源默认是链接的(自Adobe CC 2015起). 这意味着当你在插画家中修改一个库资源时, 更改反映在所有使用的实例中. 如果要将未链接的资源添加到文档中, 从面板中拖动时按下选项/alt键.

当你在排版软件名称中使用链接的插画家资源时, 在普通模式下查看文档时，左上角会有一个小的云图标. 它们也都列在链接面板中. 如果你在插画家中修改一个库资源, 排版软件名称文档中的更改不会自动完成. 云图标将被替换为修改后的链接感叹号图标, 你必须更新这些链接.

放置在排版软件名称文档中的排版软件名称资源没有链接. 这意味着您可以独立于原始实例编辑实例, 当原始资产被修改时, 这些更改不会反映在已经放置到布局中的资产上.

在创建线框时考虑这些属性:当你认为需要全局修改和更新时，从插画家中添加资源到库, 或者当你知道你想单独修改它们时，从排版软件名称中添加它们. 注意，你也可以在插画家中创建图形, 复制/粘贴到排版软件名称, 然后在将其添加到库中作为排版软件名称资产之前进行必要的修改.

如果您碰巧忘记了哪个图形资源是由哪个应用程序创建的, 当使用Show Items作为列表时，查看Library面板中每个项目的右侧.

adobeindesign内容和副本的灵活性

确保您可以轻松地更改线框中的复制和排版, 在排版软件名称中创建文本容器. 排版软件名称有一个很好的功能，可以用占位符文本填充文本框. 绘制文本框时，右键单击文本框并选择 用占位符文本填充.

将文本框像拖动其他图形元素一样添加到Adobe库中. 当你使用这些文本资源作为线框布局的一部分, 您可以在线框中修改文本框及其内容.

也可以考虑在排版软件名称中制作按钮UI元素. 创建一个按钮, 创建一个文本框架, 输入文本, and then use Object > Text Frame Options to define Inset spacing. 通过从“对齐”下拉菜单中选择所需的选项来调整框内文本的垂直对齐.

切换到Auto-Size选项卡，选择适当的自动大小(可能是Width Only)和一个方便的参考点. 如果您不想让排版软件名称将文本分割成多行, 选中“不换行”选项.

利用现有资源

互联网上有很多Adobe 插画家线框图和原型UI工具包，如果你想要一个现成的解决方案，你可以购买甚至免费下载. 也许你已经有一些元素可以从你已经完成的项目中挖掘出来. 打开这些文档, 根据需要调整任何先前创建的元素, 把它们放到各自的图书馆里.

如果您正在为特定的平台进行设计，例如, iOS或Android应用程序——确保你仔细阅读了它们的人机界面指南，并使用了适当的资产. 在工具包中使用特定于各种平台的UI元素可能会很方便.

在开始实际的线框图过程之前，不要过多地关注于试图解释库中的每个未来资产或状态. 您可以稍后将资源添加到库中，并在此基础上进行构建.

创建排版软件名称线框模板

还有一个更重要的准备步骤:创建排版软件名称模板，您将用于制作线框. 首先，创建一个具有Web或数字 Publishing意图的新文档，并为您正在设计的屏幕定义适当的页面大小.

因为建议你使用某种网格来布置线框元素, 设置页边距，并通过设置所需的列数和排沟空间创建列网格. You can 改变 those settings later from Layout > Margins and Columns with its respective master page (or pages) selected in the Pages panel.

如果需要水平导线和互补的垂直导线, create them manually or make an additional grid by using Layout > Create Guides. 在创建网格时，使用在线网格计算器工具(如the Gridulator.

您还可以创建用于演示目的的附加模板，将设备模型作为线框图的框架. 因为一个排版软件名称文档可以链接到另一个, 您可以在一个排版软件名称文档中创建线框图，然后将其放置到另一个排版软件名称文档中用于演示.

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

创建用于放置线框图的演示就绪模板也很简单, 添加标签和注释, 并能够向客户展示您的最佳解决方案. 当您修改线框文件时, 只需像更新演示文档中的其他链接一样更新它 ta-daaa! 所有的变化都在你的演示文稿中.

在图层面板中, 您可以为不同类型的内容准备单独的层:用户界面元素, 互动功能, 手势, 标签, 和笔记. 如果您需要为特定项目添加更多图层, 在线框图过程中，您可以随时轻松地添加它们.

创建完成后，将模板保存为排版软件名称.模板文件. 在保存了所需的所有模板之后，您终于可以开始高效地绘制线框图了.

建筑线框图

首先，从母版页开始. 从库中拖动在项目的所有屏幕上相同的所有全局元素. 如果你正在设计一个网站，这些通常是标头、导航和页脚. 因为您可以创建多个母版页，并且它们可以相互继承, 您可以利用嵌套母版页的优势.

例如, 取决于项目, 您可以为一个UI元素创建一个母版页, 例如模态或对话框弹出, 然后在第一个大师的基础上制作新的大师, 只修改需要不同的元素.

你不能选择, 改变, 或者删除常规文档页面上的母版元素，除非你按住Command/Control + Shift键来覆盖母版. 一旦你的元素被覆盖, 您可以更改其任何参数或从布局中完全删除它.

即使在重写元素时也要记住这一点, 未更改的参数仍将从主参数继承. 例如, 如果您通过更改元素的颜色来覆盖该元素, 它的大小不会改变，因为它仍然连接到主服务器. 进一步, 如果您在母版页上更改它, 它还将在您先前覆盖的元素上进行修改.

在线框图文档中插入额外页面时, 记住要以它们各自的主人为基础. 如果您需要更改布局中已存在的页面的母版, 在Pages面板中选择它们, 右键单击, 然后选择“将母版应用到页面”. 使用库资源，并使用智能参考线和对齐选项来排列它们，以创建最终的UI线框布局.

如果您正在为多个屏幕尺寸创建设计, make alternate layouts from Layouts > Create Alternate Layout or the Pages panel. 你可以用 液体布局规则 在创建替代布局时，自动采用从一种大小和方向到另一种页面元素, 或者你可以手动控制它们. 用于应用和测试液体布局规则, use the Page tool or open the panel Window > 互动 > Liquid Layout.

添加交互性

Adobe 排版软件名称有很多交互功能，你可以在创建线框图或原型时利用这些功能. 您将包含哪些功能将取决于您的线框图最终需要的格式, 原型, 或陈述.

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

您还可以向驻留在母版页上的对象添加超链接，这可以真正节省时间. 在母版页面上创建一次链接，它们将在文档的所有屏幕上工作.

您可以从任何图形、文本、图像或元素组创建按钮. 从所选对象创建按钮, use the Window > 互动 > Buttons and 为ms panel and click on the Convert to Button icon.

按钮可以为正常、滚动和单击外观创建不同的状态. 向按钮添加翻转或单击状态, 在按钮面板中单击它们，并编辑每个状态的按钮外观. 要向按钮添加操作，请单击加号并从列表中选择它. 考虑到SWF/EPUB下的操作将无法在交互式pdf中工作.

要创建弹出式元素，请选择显示/隐藏按钮和表单. 要隐藏按钮直到触发选中隐藏直到触发选项. 您可以在交互式PDF中包含多状态对象, 但前提是你先将它们导出为SWF，然后再将它们放回排版软件名称布局中以供PDF导出. 这个工作流程很繁琐，而且在所有的PDF阅读器中都不能正确地看到PDF文件, 所以尽量避免这样做，除非真的有必要.

如果您想使用排版软件名称 CC 2015在线发布功能将文档转换为HTML原型, 你可以使用更多的交互式选项，比如动画, 多态对象, 还有多个按钮动作, 包括所有用于SWF/EPUB输出的文件.

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

对于需要显示不同状态的UI元素，创建一个多状态对象. 为每个状态创建一个单独的对象. 对象可以是单个元素(图片、文本框、图形)或一组不同的元素. Open the Window > 互动 > Object States panel, 选择为多状态对象创建的所有对象, 然后点击面板底部的New按钮.

创建多状态对象之后, 您需要创建按钮来从一个对象状态移动到另一个对象状态. “转到下一个状态”或“转到上一个状态”操作显示使用“转到状态”操作的特定对象状态.

如果你想在你的线框图/原型中有一个可滚动的框架, 最简单的创建方法是使用 通用滚动框架 从Ajar制作扩展. 下载并安装扩展后，您可以将其用作排版软件名称面板. 对于可滚动的框架，您需要创建内容以及用于容器的框架.

可滚动的内容可以是文本框架、图片或组合在一起的几个元素. When you are finished with creating the content and container box, select the content and Edit > Cut. Then select the container and paste the content inside by using Edit > Paste Into. 选择容器并使用通用滚动框架，调整所需的滚动方向.

通过组合按钮, 多态对象, 动画, 而可滚动的框架可以实现丰富的交互体验. 要在排版软件名称中测试交互性，请使用EPUB交互性预览面板. 您可以预览单个页面或整个文档. 根据需要放大预览面板.

如果您没有使用adobeindesign交互功能, 做好准备, 起初, 这需要一点学习曲线. 但稍加练习和尝试，你很快就能掌握它们.

导出成品文件

完成线框图和演示文件的创建后, 剩下的就是以最好的方式向客户展示你的好想法. 为此，您需要以客户端可以预览的格式导出线框图. 尽管排版软件名称文件可以以多种格式导出, 如果测试功能性的低保真或高保真原型，您可能会使用交互式PDF或在线发布特性. 保存为交互式PDF, 从“导出”对话框中的“格式”下拉菜单中选择“Adobe PDF(交互式)”，并根据需要调整属性. 如果您想包含交互式元素，不要忘记勾选“窗体和媒体”. 客户可以在免费的adobereader中查看PDF线框图，并在同一文件中编写所有评论.

也可以使用从排版软件名称导出的PDF文档创建 InVision (或其他支持pdf的工具)原型. 如果你的标准原型工具，也许 奇迹例如，不能导入PDF，可以将排版软件名称线框页面导出为JPEG或PNG图像.

导出可以在不同设备上的现代浏览器中看到的交互式HTML原型, go to File > Publish Online, 或单击应用程序栏上的“在线发布”按钮. 在文档准备好在线发布和上传之后, 您可以复制文档URL与利益相关者共享，并开始审查过程. 您还可以将发布的原型嵌入到您的站点上.

Publish Online特性的一个缺点是它对导出没有任何额外的控制, 文件总是存储在Adobe的服务器上. 也, 它仍然是一个预览功能，你不能确定Adobe将朝哪个方向发展, 或者即使它将被停产.

一旦你的线框/原型被导出, 测试的时间到了, 回顾, 迭代过程开始.