具体实施方式

现在将详细参考附图中示出的示例实施方案。通过解释本技术而不是限制本技术的方式提供了每个示例。实际上，对于本领域技术人员而言将明显的是，在不脱离本技术的精神和范围的情况下，可在本技术中进行各种修改和变化。举例来说，示出或描述为一个实施方案的一部分的特征可与另一实施方案一起使用以产生又一个实施方案。因此，意图在于本主题涵盖所附权利要求以及其等效形式的范围内的所有此类修改和变化。

本文公开的实施方案通常涉及响应式图形设计，并且更具体地涉及响应式网页原型的设计。如上所述，响应式图形设计与设计的响应性成比例地为图形设计人员产生额外的工作。在以上参考图1所描述的解决方案中，横屏设计被复制到用于指定竖屏设计的区域中。对于每种设计大小，该方法都可节省初始设置过程的时间。然而，在完成复制步骤之后，这些解决方案可带来的所有效率益处将被消耗掉。如果项目管理人员在稍后的时间决定需要修改设计要素，则需要对单独的设计中的每一个进行手动修改。例如，如果管理人员决定每个页面上的标题文本应为绿色而不是黑色，则图形设计人员将必须加载横屏设计101，修改标题文本106，加载竖屏设计100和修改标题文本103。

本文描述的示例实施方案通过使每个设计要素成为整个设计中的单个可编辑实体来缓解上述问题。为此，设计人员仅需要将标题文本106从绿色更改为黑色，并且标题文本103也将更改，因为它们是以不同大小观察到的相同对象。通过使用通过单次编辑将更改传播到设计的多个页面的响应式母版，可合成这种益处。与图1的示例一致，主页横幅105和标题文本106可能保留在网站的每个页面上。本文描述的示例实施方案允许母版的使用，该母版将在网站的每个页面上包括这些设计要素，并且将允许对母版的任何修改传播到设计的所有其他页面上的母版的每个实例。

通过使用响应式微件，包含响应式微件的母版以及本身为响应式的母版，至少部分提供了上一段中描述的益处。响应式微件是具有微件特性(诸如，大小、绝对位置、相对位置、边距、布局或其他相关特性)的微件，使得微件在多种装置、取向和屏幕大小上都能很好地渲染。类似地，响应式母版或容器是具有相应特性(诸如，大小、绝对位置、相对位置、边距、布局或其他相关特性)的母版或容器，使得母版或容器在多种装置、取向和屏幕大小上都能很好地渲染。容器微件是可向其添加其他微件的微件。可将响应式微件添加到设计中并进行指定，使得它们的特性可针对各种尺寸版本具有各种状态。尺寸版本是与特定尺寸(例如，显示屏上的X-Y或高度-宽度尺寸)相关联的设计的呈现或渲染、其中正在渲染设计的情境的最佳适配或最近匹配。例如，网页的与所述网页的竖屏取向(例如，Y尺寸＞X尺寸)相关联的第一设计被认为是第一尺寸版本。网页的与所述网页的横屏取向(例如，Y尺寸＜X尺寸)相关联的第二设计被认为是第二尺寸版本。因为在尺寸版本中的每个中渲染了同一微件，所以可将对一种设计大小的微件所做的编辑自动传播到所有其他尺寸。本文公开的一些实施方案还允许用户通过提供在全尺寸编辑模式、单尺寸编辑模式和多尺寸编辑模式之间切换的方法来限制特定修改影响其他尺寸版本下的微件。本文公开的一些实施方案还允许用户为设计设置继承结构，该继承结构确定设计的哪些尺寸版本将受到对特定尺寸版本做出的更改影响。相关联的实施方案还允许用户为设计设置继承特性，该继承特性可确定在对特定尺寸版本做出更改时，微件的哪些属性将跨尺寸版本发生更改。所述属性可包括存在属性，该存在属性设置是否在给定的尺寸版本中放置或未放置微件。存在属性不应与允许微件被隐藏或可见的属性混淆，后者取决于播放器中尺寸版本的渲染后状态。如果未放置微件，则根本无法使其在尺寸版本中可见。如果隐藏了微件，则该微件位于尺寸版本中，但是只有在发生使微件可见的事件后才能看到。另外，母版可包括在设计中，以将更改传播到设计的不同页面中。母版还可包括响应式容器微件，所述响应式容器微件被配置成在同一设计的不同页面上存储不同的微件。母版用于限制与响应式web设计相关联的设计努力，因为对图形设计中的一个对象做出的修改可自动传播到该对象的众多实例。可将响应式母版添加到设计中并进行指定，使得它们的特性可针对各种尺寸版本具有各种状态。本文公开的一些实施方案还允许用户为每个母版指定多个视图，并以每个母版实例为基础针对母版的实例从多个指定的视图中进行选择。

在相关方法中，通过使用媒体查询来使设计具有响应能力。媒体查询嵌入在网页代码中，并且是标准web浏览器已知的。浏览器将在渲染页面时辨识媒体查询，并在浏览器肯定地评估媒体查询时为设计加载具体的样式表。媒体查询可指定渲染空间的特定宽度，渲染空间的特定高度，装置的颜色渲染能力等。如果由浏览器提供的渲染设计的渲染空间满足指定的特性中的任何一个，则可以响应于更改设计而加载特定样式表。例如，如果用于渲染设计的屏幕宽度减小到某个预定义宽度以下，则可将媒体查询设置为减小与特定微件相关联的字体大小。媒体查询提供了一种对已内置于超文本标记语言(HTML)和级联样式表(CSS)的设计提供响应性的方法。然而，媒体查询在某种程度上受到限制，因为它们只能用于调整样式表。因此，媒体查询没有提供更多参与的响应式web设计，诸如更改设计要素的交互性的能力。

本文所述的示例实施方案通过使用对象模型事件处理程序来为网站设计提供响应特性，所述对象模型事件处理程序允许用户产生响应性程度更高的网站原型。对象模型事件可将网页视为其对象，并且可侦听页面的大小调整。如果调整页面大小，则对象模型事件可触发呈脚本形式的事件处理程序，该脚本修改设计要素的任何期望的特性。例如，脚本可为用于更改微件链接至的网页的URL的javascript。换句话说，微件当以第一尺寸版本渲染时可链接至一个页面，而当以第二尺寸版本渲染时可链接至不同的页面。

在相关方法中，通过将要素堆叠在网格的行和列中、为网格指定边距、然后使边距和行/列位置具有响应能力，来使设计中的要素具有响应能力。例如，图1中的横屏设计101中的标题文本106的规约将被定义为：第2列，第1行，边距33％；而竖屏设计100中的标题文本103的规约将为：第1列，第1行，边距50％。对于更复杂的示例，与跟踪相对定位输入相关联的努力变得异常困难，尤其是对于没有多少技术含量的图形设计人员而言。

本文描述的示例实施方案为网站设计提供了响应式微件，所述响应式微件基于微件应位于网页上的位置的预定绝对位置而进行响应。所产生的用于指定微件位置的方案比基于相对定位的方案要直观得多，并使交互响应式web设计的设计对所涉及的设计人员和开发人员而言更加容易。可使用各种可能的单位以x坐标和y坐标指定绝对位置，所述单位包括米制距离单位(诸如厘米)、US距离单位(诸如英寸)和特定于设计的单位(诸如像素)。

设计环境：响应式交互微件

本文描述的示例实施方案提供了用于指定响应式图形设计的工具和方法。在一些实施方案中，响应式图形设计可能是响应式网页原型。图形设计工具可允许用户指定诸如微件等设计要素以包括在图形设计中。所述微件可能是交互式的。图形设计工具还可允许用户指定设计的尺寸规约。

尺寸规约是指渲染空间的尺寸，并且被响应式设计用来确定在特定的可用渲染空间下应渲染哪个尺寸版本。尺寸规约可用作触发点，该触发点定义一个尺寸，在该尺寸处，设计从根据一个尺寸版本进行渲染切换为根据另一尺寸版本进行渲染。例如，尺寸规约可指定浏览器窗口宽度为5英寸，并且响应式设计可使用该尺寸规约在浏览器窗口宽度小于5英寸时渲染第一尺寸版本，并且在浏览器宽度大于5英寸时渲染第二尺寸版本。尺寸规约还可用作定义具体设置的尺寸的目标尺寸，在该尺寸下应渲染设计的不同尺寸版本。如本文所述，使用多视图母版，可使母版与依据每个母版的尺寸版本相关联，并且可由用户或者根据容器微件的特性来选择在设计或容器微件内渲染母版的实例时要使用的尺寸版本，而与设计的尺寸规约和/或容器微件的尺寸规约无关。

一旦用户已经指定了至少一个尺寸规约和至少一个微件，图形设计工具就可允许用户针对设计的不同尺寸版本为微件指定不同的状态。换句话说，微件可在设计的一个尺寸版本中具有第一状态，而在设计的另一版本中具有第二状态。微件和设计要素从一种状态到另一种状态的转变为设计提供了其响应性。这些工具和方法的示例在下面参考图2至图5进行描述。

可参考图2描述用于设计响应式图形设计的工具。图2示出了图形设计环境200，即“工具”或“图形设计工具”，该环境允许用户指定响应式图形设计。图形设计环境200包括用于显示响应式图形设计的渲染的窗口201。在一些实施方案中，窗口201将被配置成显示设计的各种指定尺寸版本。例如，该窗口可用于显示设计的智能电话尺寸版本，然后用于显示设计的平板计算机尺寸版本。然而，设计环境还可包括窗口库，所述窗口库同时显示设计的每个尺寸版本的版本。设计环境可提供接口以接收来自用户的输入，从而从所述库随意添加和移除不同的尺寸版本。每当向设计中添加额外的尺寸规约时，该工具还可自动将尺寸版本添加到库。

图形设计环境200还包括微件接口202。微件接口允许用户将微件添加到窗口201。微件可能是与设计相关联的任何设计要素，包括按钮、下拉菜单、超链接、文本框或页面。在一些实施方案中，可通过将微件从微件菜单203拖放到窗口201中来添加微件。微件接口还允许用户通过提供具体属性的值来指定微件的状态。微件状态由该微件的属性中的每个的值集定义。在一些实施方案中，可经由文本输入将所述值键入到微件接口202。然而，也可使用下拉菜单或通过使用键盘命令来添加微件。可在如图2中的单独接口中提供具体状态的值，或者可通过用户单击具体要素以在窗口201本身中弹出接口来在诸如窗口201等窗口中直接指定具体状态的值。这种选择可利用特殊的选择动作，诸如在微件的选择期间用鼠标右键单击或按下特殊的键，以将选择与使微件定位在窗口201中的标准选择区分开。

图形设计环境200还包括尺寸规约接口204，该尺寸规约接口允许用户指定用于描绘各种尺寸版本的尺寸或尺寸集。在一些实施方案中，尺寸规约接口将包括按钮205以选择不同的尺寸版本。如图2中所示，用户能够通过选择不同的按钮205在智能电话尺寸版本与默认尺寸版本之间进行选择。在一些实施方案中，当选择了这些按钮时，窗口201将显示选定的尺寸版本。当设计在窗口201中显现时，将根据该尺寸版本对其进行渲染。在具体实施方案中，在窗口201中显示的尺寸版本通常将是当从用户接收到对设计的编辑时将所述编辑应用于的尺寸版本。如图2中所示，尺寸规约接口204包括两个尺寸版本：默认和智能电话。在用户开始指定设计之前，这些尺寸版本和其他尺寸版本在设计环境中可能是可用的。然而，尺寸规约接口204还可允许用户指定和添加额外尺寸规约并创建额外尺寸版本。此外，用户可在接收到任何尺寸规约之前开始指定设计，使得可在将尺寸规约添加到尺寸规约接口并随后进行响应式设计过程之前，以非响应式状态完全指定设计。

可以各种方式添加额外的尺寸规约和尺寸版本。用户可在尺寸规约接口中以文本形式键入尺寸值，然后单击键入按钮以存储尺寸规约。尺寸规约的键入可自动创建对应的尺寸版本。尺寸规约接口还可允许用户标记每个尺寸版本。尺寸规约接口还可为用户提供尺寸版本的预定义集合，诸如智能电话目标大小、平板计算机目标大小和台式机目标大小。尺寸规约还可允许用户基于诸如窗口201等窗口的当前大小而指定尺寸规约。在窗口201是可调整窗口的实施方案中，用户可将窗口201的大小调整到给定大小，然后在尺寸规约接口中键入命令以基于可调整窗口的当前大小而存储新的尺寸规约。使用图2作为示例，可沿着窗口201的一个或多个边缘显示标尺，以在正调整窗口来促进该过程的同时显示窗口的当前大小。替代地，可将标尺放置在图形设计环境200的一个或多个边缘上以服务于相同的目的。保存的尺寸规约可为可调整窗口的实际大小的缩放版本。缩放因子可由用户配置。

微件接口202可允许用户为设计中的每个微件指定状态，并将这些状态中的每个与特定尺寸版本相关联。状态可以各种方式与不同的尺寸版本相关联。例如，设计环境可提供接口以接收来自用户的输入，从而指定主页横幅206将以第一状态显现在网页上的一组具体的x坐标和y坐标上，并以第二状态显现在网页上的第二组x坐标和y坐标上。可使用绝对位置规约接口207来完成该特定规约。绝对位置规约接口可具有用于针对给定尺寸版本指定微件在设计中的位置的x输入和y输入。然而，输入不必在如图2中示出的单独条目中，因为两者可能是在由逗号或其他指示符分隔的单个提示下的输入。此外，绝对位置接口可具有在可视化地将微件定位在设计窗口中时自动填写的数字。通过在微件接口202中为个别微件属性提供重复字段并用与它们相关联的尺寸版本标记重复字段，可将微件的指定绝对位置与特定尺寸版本相关联。通过切换窗口201和微件接口202，也可使微件的指定绝对位置与特定尺寸版本相关联，使得它们瞬时仅反映当前正在查看和编辑的尺寸版本。然后，对微件所做的任何编辑都将应用于该特定尺寸版本，直到选择了另一版本为止。最后，可通过使用库显示方法使状态与特定微件相关联，其中对显示特定尺寸版本的子窗口所做的编辑将仅与该尺寸版本相关联。在这些情形下，图形设计环境可包括与用于特定尺寸版本的各种子窗口相关联的多个微件接口202。

虽然在前一段落中使用了绝对位置属性的示例，但是上述将属性与具体尺寸版本相关联的各种方法也适用于其他属性。使用微件接口202添加到设计中的微件可具有各种响应式用户可定义属性。通过为不同尺寸版本中的属性定义不同的值，可将这些属性全部配置为响应式的。例如，可设置微件的文本属性，使得微件的文本内容在平板计算机尺寸版本中为“单击此处以密码登录”，而在智能电话尺寸版本中为“登录”。如前一段落中所述，微件接口202可允许用户为给定尺寸版本下的微件指定绝对位置。此外，微件接口202还可允许用户指定不同的颜色、字体样式、图像分辨率、线宽、富文本格式、相对定位以及可在CSS样式表中为微件定义的任何属性。微件接口202还可允许用户为不同尺寸版本下的微件指定不同的文本内容。例如，大尺寸版本中包含大量信息文本的文本框可压缩为较小尺寸版本中的摘要格式。最后，微件可具有用于跟踪该微件是否会在给定的尺寸版本中完全显现的存在属性。存在属性的值可能是指示“放置”状态或“未放置”状态的二进制值。如上所述，可将存在属性与隐藏属性或可见属性区分开，即使此类属性也可具有影响微件是否以给定尺寸版本显现的二进制值。

使用微件接口202指定的用户可定义属性也可为事件处理程序和相关联的交互式属性。交互式属性包括响应于用户输入并通常响应来自利用该设计的人员的刺激而提供额外信息的能力。可使这些属性具有响应性。例如，微件可在一个尺寸版本中链接至一个页面，而在另一个尺寸版本中链接至不同的页面。作为另一示例，微件可包含链接，或者在不同的尺寸版本下完全不交互。可将事件处理程序添加到微件中，以促进其交互属性，并且可使事件处理程序具有响应性，以促进这些交互属性的响应性。例如，微件可能是对于其“鼠标单击”事件具有“示出面板A”事件处理程序和“示出面板B”事件处理程序的按钮，并且在播放器为某个大小时单击按钮时，可显示面板A，而当播放器为不同的大小时单击按钮时，可显示面板B。此外，可使事件处理程序的事件部分具有响应性，使得微件将在一个尺寸版本中对“鼠标单击”事件实行某个动作，并在另一尺寸版本中对“鼠标键入”事件实行同一动作。在这两种情况下，事件处理程序都可能取决于所渲染的尺寸版本，而不考虑播放器的大小。

可以各种方式指定上述所有微件属性。例如，微件规约接口202可更改其外观，使得其可用于指定在特定微件上可修改的任何属性。例如，如果微件是文本框，则微件规约接口可能会更改为包括输入字段，以用于键入要在文本框中显现的文本。微件的许多属性也可直接在窗口201中指定。与文本框的示例一致，设计环境可提供接口以接收来自用户的输入，从而选择已经在窗口201中的文本框，并且在文本框中提供光标以开始在文本框本身中直接指定文本。设计环境可提供接口以接收来自用户的输入，该输入可能是在窗口201中的微件上单击鼠标右键，或使用某种其他唯一选择机制来弹出可直接在微件上指定的微件属性列表。具体参考存在属性，通常还可使用微件接口202定义该值。然而，在微件接口202仅显示单个尺寸版本的微件的属性和/或仅反映当前选定微件的状态的实施方案中，将优选地使用替代接口来指定微件的存在属性的值。在这些实施方案中，未放置的微件将不可访问以供选择，因此将不可能经由微件接口202访问存在属性，并且将需要单独的接口。

尺寸规约可采用各种形式。尺寸规约可等同于被提供用于渲染设计的区域的宽度、被提供用于渲染设计的区域的高度、高度和宽度两者、对角线尺寸，以及可能与被提供用于渲染设计的空间相关联的任何其他尺寸或尺寸的集合，包括有关空间本身的区域的标量值。因为设计人员在指定设计时必须考虑大量播放器，所以尺寸规约的多样性非常重要。例如，如果允许的唯一值是渲染空间的区域的标量值，则用户将无法创建响应具有不同取向的屏幕的设计(例如，可以以在两种情形下总面积相同的竖屏模式或横屏模式显示设计的智能电话)。

尺寸规约与尺寸版本之间的关系可采用各种形式。如上所述，可在每次指定尺寸规约时将尺寸版本添加到设计中。然后，尺寸规约可用作该尺寸版本的目标尺寸。例如，智能电话尺寸规约可用作智能电话尺寸版本的目标尺寸，使得当以精确的智能电话尺寸规约渲染设计时，将渲染智能电话尺寸版本。作为另一示例，智能电话尺寸规约可用作触发点或阈值尺寸，使得每当在具有小于智能电话尺寸规约的相关渲染空间尺寸的装置上渲染设计时，将渲染智能电话尺寸版本而不是默认尺寸版本。如果添加了多个尺寸规约，并且每个尺寸规约都与不同的尺寸版本相关联，则所述尺寸规约可用作多个阈值尺寸或触发点，使得将在最大版本中渲染设计，对于该最大版本，装置的相关渲染空间尺寸小于该版本的尺寸规约。

在遵循最后一段末尾阐明的规则的方法中，可对尺寸规约进行处理，使得如果未指定尺寸，则假定尺寸是无穷大的。因此，默认尺寸版本不必与特定尺寸规约相关联，因为无穷大是假定值。另外，即使仅指定了单个尺寸，使用这种方法，具有多个输入的尺寸规约(诸如既要求宽度又要求高度的尺寸规约)仍可操作。例如，如果尺寸规约包括3英寸的宽度，但用户不包括高度值，则设计将像高度值是无穷大的那样进行操作，并且将仅基于宽度值而进行响应。

用户可配置通过图形设计使尺寸规约和尺寸版本相关的方式。例如，用户可指定给定的尺寸规约为目标尺寸，并且仅在可用的渲染空间等于尺寸规约所指定的大小时才渲染相关联的尺寸版本。设计环境可提供接口以接收来自用户的输入，从而还指定给定的尺寸规约为触发尺寸，使得每当可用的渲染空间超过尺寸规约中指定的大小时，都应渲染相关联的尺寸版本。相反，设计环境可提供接口以接收来自用户的输入，从而指定仅当可用的渲染空间小于尺寸规约中指定的大小时，才应当渲染相关联的尺寸版本。在具有多个视图的母版的情况下，这些母版的实例的尺寸版本可由用户配置，而不考虑其他尺寸规约。

可参考图3描述用于允许用户指定响应式设计的方法300。在步骤301中，向用户提供显示设计的页面的图形用户界面。图形用户界面可与上述图形设计环境200相同。在步骤302中，向用户提供微件表征接口，以允许他们向页面添加交互式微件。可将微件添加到默认尺寸版本。在步骤303中，从用户接受表征以与默认尺寸版本中的交互式微件相关联。在步骤304中，向用户提供尺寸规约接口，以允许用户指定第二尺寸版本。在步骤304中，尺寸接口可经由以下方式接受规约：手动输入尺寸规约和相关联尺寸版本的自动创建，选择默认的或先前用户定义的尺寸版本，或者通过调整可调整的窗口和选择即时窗口大小作为尺寸规约并自动创建相关联的尺寸版本。在步骤305中，从用户接受微件的第二表征以与第二尺寸版本中的交互式微件相关联。可多次实行步骤304和305，以允许用户指定多个尺寸版本并为每个指定尺寸版本中的微件提供不同的表征。然而，微件不必使每个尺寸版本具有不同的状态，并且因此，对于特定的迭代，可跳过步骤305。可通过使用计算系统来完成接受步骤303和305，该计算系统从用户接收输入并将其路由到处理器，在处理器中表征与交互式微件相关联。该计算系统可在计算机内路由网络、局域网、互联网或任何计算系统网络中路由来自用户的输入。该计算系统可能是下面在图18中讨论的计算系统。

在设计工具中指定的最终设计可使用图3的方法中的目标尺寸，以选择在渲染设计时应将哪些状态应用于设计中的微件。例如，如果渲染设计的浏览器的屏幕大小具有与第二尺寸版本关联的相关尺寸，则将根据第二表征来渲染交互式微件。然后，如果调整了浏览器的屏幕大小，使得其具有与默认尺寸版本相关联的相关尺寸，则将根据其他表征来渲染交互式微件。

可参考图4A和图4B来描述参考图3所描述的方法如何与具体图形用户界面一起操作的具体示例。图4A显示了图形用户界面400，其包括微件表征接口401和尺寸规约接口402。在该示例中，微件表征接口是绝对位置规约接口，所述绝对位置规约接口被配置成接受微件的x坐标和y坐标。接口401将在以上步骤302中提供给用户。可使用由用户键入到微件表征接口401中并在步骤303中接受的x坐标和y坐标来指定绝对位置。在步骤304中，可以以尺寸规约接口402或404的形式向用户提供尺寸规约接口。如果向用户提供了规约接口402，则规约接口的另一部分对于用户将是必需的，以添加“智能电话”按钮404(图4B)，从而允许用户经由图形用户界面403选择不同的尺寸规约。可通过上述方法中的任何一种添加该按钮，包括从工具已知的默认大小中进行选择，或手动指定新尺寸规约。一旦选定，“智能电话”按钮就可将编辑和查看模式切换到该尺寸版本。然后，在步骤305中，可使用与步骤302中所使用的接口相同的接口401来定义呈同一微件的第二绝对位置形式的第二表征，从而以“智能电话”大小为微件指定一组新的x坐标和y坐标。

根据上面图3中的方法指定的微件的表征可存储在计算机存储器中的同一位置处。在将默认表征和第二表征存储在存储器中的步骤中，微件的所述默认表征和第二表征可在从用户接受之后存储在计算机存储器中。此外，对于未指定为在不同尺寸版本中具有不同值的属性，该属性的值可存储在存储器中的同一位置处。例如，文本属性的文本内容从一个尺寸版本更改为另一尺寸版本并且绝对位置也随之更改的按钮可具有保持不变的颜色属性，而不考虑在哪个尺寸版本中渲染按钮。在这种情形下，该微件的颜色属性的值可存储在存储器中的同一位置处，并且该属性对于微件的不同状态是通用的。

一旦在设计中已经将微件指定为具有多个尺寸版本的多个状态，就可在工具中验证该微件如何响应各种尺寸规约。可参考图5描述用于显示工具中根据各种尺寸规约的设计的响应性的方法500。图5的方法可在如图3中所描述已经接收到规约之后立即开始，或者可在根据任何其他方法已经接收到两个微件状态之后开始。在步骤501中，从用户接收调整大小指令。例如，可从按钮的选择、下拉菜单中的条目的选择或者通过单击并拖动用以调整窗口大小的窗口调整器输入来接收调整大小指令。调整大小指令将调整页面大小，使得其具有调整大小后的尺寸。在步骤502，响应于接收的调整大小指令，提供页面的调整大小后的版本以向用户显示。在最简单的情况下，调整大小后的尺寸不会更改工具显示与尺寸规约的关系。因此，设计中的微件无需修改即可渲染。

在尺寸规约用作阈值的实施方案中，其中设计的一个尺寸版本在阈值以下渲染，而另一个尺寸版本在阈值以上渲染，如果调整大小后的尺寸大于尺寸规约，则将以一个表征来渲染交互式微件，并且如果调整大小指令选择了小于尺寸规约的尺寸，则以另一表征来渲染交互式微件。例如，在图5中显示的方法中，如果调整大小后的尺寸大于尺寸规约，则该方法将移至步骤503，而如果调整大小后的尺寸小于尺寸规约，则该方法将移至步骤504。将根据步骤503中的默认尺寸版本和步骤504中的第二尺寸版本来渲染设计。应当注意，如果先前已经指定了第二尺寸规约，则显示的表征可能取决于两个尺寸规约的相对大小。例如，在图5中显示的方法中，如果第二尺寸规约小于第一尺寸规约，则如果调整大小后的尺寸小于两个尺寸规约，则该方法将移至步骤505。在步骤505中，将根据与第二尺寸规约相关联的第三尺寸版本来渲染设计。

在为各种尺寸版本的微件指定不同状态的一些示例实施方案中，与现有技术相比，产生了某些益处。特别地，在尺寸版本中的每个中，同一微件作为设计的一部分存在这一事实有助于设计的修改和创建。与下面描述的不同大小的编辑模式结合使用，可通过在单个尺寸版本中编辑微件并使编辑选择性地传播到整个设计中来轻松完成对整个设计进行编辑。在一些实施方案中，这通过将微件的表征存储在存储器中的公共位置儿得以促进。存储器将在第一状态和第二状态下存储微件以及有关微件的属性的值集。微件的属性在第一状态和第二状态下相同的特定值将存储在存储器中的单个位置处。通过应用该方法和其他方法，用于提供设计环境的计算机系统会将微件视为单个整体要素，从而为存储设计中所使用的微件所需的设计过程和计算机资源两者提供效率。

设计环境：响应式母版

在一些实施方案中，设计环境提供接口以将母版添加到设计中。母版是一个微件或一系列微件，它们被维持在单个源位置中，然后在整个设计中重复使用。对母版所做的编辑可自动应用于设计内使用母版的所有位置。可将母版添加到页面、容器和其他母版。设计中放置了母版的实例而不是母版本身。除非被覆盖，否则对母版所做的更改传播到母版的实例。然而，对母版的实例所做的更改不会传播到母版。母版可能包含在母版内指定的微件。微件可能是响应式的。母版可用作设计中需要重复多次的任何设计要素的母版。例如，设计的页眉、页脚和导航内容通常会呈现在设计的多个页面上，以为设计提供统一的界面外观(look and feel)，并且允许更轻松地访问设计的各种部分。然而，也可使用母版来促进就像放置在单个设计中的各种位置的单个图像一样简单的内容的编辑。母版也非常适合于管理响应式设计的任务，因为它们允许编辑轻松地传播到整个设计中。如前面所提及的，响应式图形设计增加了整个设计需要完成的设计工作量，因此母版的允许对这些设计努力进行集中管理的能力是有益的。可参考图6至图9F描述用于使用具有响应式微件的母版来指定设计的工具和方法。

与参考图2描述的接口类似的接口可用于使用具有响应式微件的母版来指定设计。可从接口中选择母版并将其拖动到设计中，或者也可通过其他方式(诸如快捷键的组合)来指定母版。然而，也可在它们自身单独的设计窗口中个别地指定母版，然后在完全定义母版之后将其拖入主设计窗口。同样地可保存用户定义的母版模板定义，使得可容易地检索并将其带回到设计空间中。最后，虽然下面的讨论通常涉及可拖入设计的页面的母版，但是本文的教示同样适用于充当设计本身的页面的母版。

可参考图6描述用于使用具有响应式微件的母版来指定设计的方法600。在步骤601中，经由通信系统从用户接受母版选择。母版选择可为预定义的母版，或者可涉及新母版的单独规约以及从定制库中选择该母版。在步骤602中，将微件添加到具有特定表征的母版。在步骤603中，经由路由系统从用户接受尺寸规约。然后，用户可以不同的尺寸版本查看母版，并且用户可选择为同一微件指定第二表征。在步骤604中，可将母版的实例添加到设计中的各种页面。在步骤605中，可更改母版中的微件的属性，所述属性将被自动应用于设计中的所有各种页面。例如，可更改微件边框的颜色，并且更改将传播到母版显现在的每个页面上。

可参考图7A至图7D描述该方法可如何改善响应式设计的设计过程的示例。图7A显示了网页700、母版701以及两个微件702和703。如上所述，微件702和703被放置在母版701内，并且可能已经在与网页700不同的设计窗口中被指定。在这种情形下，微件702和703是文本要素，需要在设计中的多个页面上由母版701占据的网页700上的位置中一致地显现。换句话说，设计中的众多页面都涉及以示出的取向位于网页左上角的文本。图7B显示在将同一网页调整大小为较窄的大小后显示该网页。应当注意，虽然母版701尚未更改其位置，但是微件702和703现在相对于彼此位于不同的位置。这是因为微件响应了如设计人员先前指定的网页大小的调整。图7C和图7D示出了相同的网页和微件，但是还包括图像704。在指定了图7A和图7B中的设计之后，对母版进行了该编辑(即，将图像添加到了母版)。这种方法的益处来自于这一事实，即图像704将包括在整个设计中母版所在的所有位置，这会大大减少实现修改所需的编辑。

可按照通常在设计中指定的相同方式为母版指定微件和尺寸规约。值得注意的是，可相对于母版以从母版中心或拐角的比例偏移或者通过微件的x坐标和y坐标的规约(其中坐标系是参照母版定义的)来指定微件的位置。此外，用于指定母版的特性的编辑方法可在一定程度上与用于指定微件的特性的编辑方法重叠。

在一些实施方案中，母版本身可为响应式的。例如，可修改用作页眉的母版，以随着页面宽度的减小来更改母版的形状、外观和内容。因为页眉需要显现在每个网页上，并且页眉通常跨越网页的整个宽度，所以它们特别适合于用作设计中的母版。然而，与响应式母版相关联的益处通常适用于重复使用的任何设计要素，即使仅在设计的单个页面上多次使用它也是如此。

在设计环境中使用响应式容器微件和母版提供额外益处，所述益处可参考图8和图9进行描述。图8示出了用于使用母版中的容器微件来指定设计的方法800。在步骤801中，经由路由系统从用户接受母版选择。母版选择可为预定义的母版，或者可涉及新母版的单独规约。在步骤802中，将容器微件添加到具有特定表征的母版。表征将包括容器微件在母版中的位置和容器微件的大小。在步骤803中，从用户接受尺寸规约。然后，用户可查看母版，并且用户可选择为同一容器微件指定第二表征。在步骤804中，可将母版的实例添加到设计中的各种页面。在步骤805中，可更改母版的属性，所述属性将被自动应用于设计中的所有各种页面。

方法800还可包括步骤806和807。如图8中所示，可在将母版的实例添加到设计中的各种页面之后进行这些步骤。在步骤806中，将微件添加到容器微件。然后，在步骤807中，为在步骤806中添加的微件接受不同的表征。可应用不同的表征为与不同尺寸版本相关联的微件创建不同的状态。与在步骤805中对母版的属性所做的更改不同，在步骤806和807中的微件添加和表征将仅修改母版的单个实例。这是因为容器微件与母版相关联，但容器的内容不与母版相关联。该程序的最后效果将在于，可独立于与放置在母版中的容器微件中的微件相关联的响应性程度，而编辑与母版相关联的响应性程度。

可参考图9A至图9F来描述该方法的结果的示例。图9A显示了设计的页面900，包括母版901以及两个容器微件902和903。对容器微件902和903进行定义，使得当调整页面大小(如通过比较图9A和图9B所示)时，容器微件902和903位于母版901中的新位置中。图9C显示页面904，其中母版901的另一实例包括已添加到容器微件902和903的额外微件。如图9C中所示，额外微件中的一个是文本块，而额外微件中的另一个是树的图像。图9E显示页面905，它是同一设计的不同页面，具有母版901的另一实例。页面905上的母版901的实例包括已添加到容器微件902和903的额外微件。如图9E中所示，额外微件中的一个是文本块，而额外微件中的另一个是太阳的图像。应当注意，如通过分别将图9D与图9F和图9C与图9E进行比较所示，在页面的内容不同时，维持了容器的响应性。因此，可通过编辑母版901中的容器微件来集中管理布局的响应性，而可通过编辑页面904和905上的容器微件902和903的内容来独立地指定个别页面的内容。

因此，使用容器微件，可能够将母版的可从母版的单个实例中进行编辑的各方面与仅在本地更改的方面进行分割。这为设计人员提供了另一种自由度，以在设计中维持足够的相互关系的同时帮助维持设计灵活性，以有助于在设计过程继续进行时容易操纵设计。

在本文示出和描述的一些实施方案中，设计环境提供接口以将母版与“视图”相关联，并在独立于为其他母版实例选择的视图而呈现每个母版的每个实例时选择应使用哪个视图。可独立于设计的其他视图来选择为每个母版以及每个母版的每个实例显示的视图，而无需切断母版的实例与母版本身之间的继承关系。

在一些实施方案中，视图是母版的设计图案，诸如微件布局、微件样式方案、微件母版、表单或用于在母版内布置微件的其他图案。在其他实施方案中，视图是如本文先前所描述的响应式母版的尺寸版本。在此类实施方案中，有利的是，母版实例的所呈现的尺寸规约不由包含它的页面、母版或容器的尺寸规约来确定。而是，在设计环境内，例如从用于选择视图的接口接收要显示的具体尺寸版本(即，视图)的选择。

在一些示例实施方案中，未使用设计环境的选择接口明确地选择为母版显示的特定视图。而是，定义了规则以自动指定所显示的视图。规则可指定，例如，如果包含母版的实例的网页或移动应用程序的宽度大于500像素，则应根据与母版的第一视图相关联的第一微件表征(例如，第一颜色、第一大小、第一绝对位置、第一锚定规则、第一样式等)显示母版的实例内的微件。另一个规则可指定，例如，如果包含母版的实例的网页的背景样式具有某种样式，则应根据与母版的第二视图相关联的第二微件表征(例如，第二颜色、第二大小、第二绝对位置、第二锚定规则、第二样式等)显示母版的实例内的微件。另一个规则可指定，例如，如果当以原型渲染(例如，在web浏览器或移动应用程序中)时，母版的实例被调整大小为大于300像素的尺寸，则应根据与母版的第三视图相关联的第三微件表征(例如，第三颜色、第三大小、第三绝对位置、第三锚定规则、第三样式等)显示母版的实例内的微件。除了基于该母版的包含情境而确定母版的实例视图的规则外，规则还可基于母版本身的实例的属性(例如，样式、尺寸、位置等)而确定母版的实例视图。例如，规则可指定，如果母版的实例被调整大小(在设计环境或在原型环境中)为宽度大于500像素，则应根据与母版的第一视图相关联的第一微件表征(例如，第一颜色、第一大小、第一绝对位置、第一锚定规则、第一样式等)显示母版的实例内的微件。另一个规则可指定，例如，如果母版的实例的背景样式具有某种样式，则应根据与母版的第二视图相关联的第二微件表征(例如，第二颜色、第二大小、第二绝对位置、第二锚定规则、第二样式等)显示母版的实例内的微件。

除了能够从设计环境内为母版的每个实例选择视图外，在一些实施方案中，可独立于呈现原型所用的任何视图在生成的原型(例如，网页或移动应用程序)中选择母版的实例的所显示的视图。

在一些实施方案中，视图的特性在于父代-后代继承关系(例如，父代-子代)。后代视图(例如，子代视图)会从其父代视图继承属性，除非在后代视图中覆盖了这些属性。父代视图可具有多个后代视图。例如，父代视图可具有第一子代视图，第一子代视图可具有第二子代视图、第三子代视图和第四子代视图，第二子代视图可具有第五子代视图，依此类推。母版可具有一个以上的父代视图，并且这些父代视图中的每个可具有零个或多个后代视图。

可将同一母版的两个或更多个实例添加到包含情境(例如，页面或另一母版)中，并且可根据母版的不同视图显示该母版的每个实例，而不会破坏与母版的继承关系。也就是说，在母版的父代视图中应用于母版的微件的微件表征将传播到母版的子代视图中的那些微件，除非它们已在子代视图中被覆盖。将母版放置在包含情境中会创建该母版的实例。例如，在母版指定设计的实施方案中，将该母版放置在包含情境中创建了该设计的实例。类似地，将微件放置在包含情境中会创建该微件的实例。因此，将微件放置在母版中会创建该微件的第一实例。将该母版放置到包含情境中会创建该母版的第一实例和微件的实例，该微件的实例基于该微件的第一实例。

可参考图10描述用于为多视图母版(即，具有多个相关联的视图的母版)独立地指定视图的方法1000。仅出于说明性和解释性目的示出了特定步骤、步骤次序和步骤的组合。其他实施方案可实现不同的特定步骤、步骤次序以及步骤的组合，以达成类似的功能或结果。在步骤1001中，例如经由设计环境的输入接口从设计人员接受或接收用于母版选择的输入。母版选择可选择预定义的母版，或者母版选择可涉及新母版的单独规约。在步骤1002中，例如经由设计环境的输入接口从设计人员接受或接收用于母版的第一视图选择的输入。例如，第一视图选择可包括母版的父代视图或母版的子代视图。在一些实施方案中，在接收到第一视图选择时，根据第一视图(例如，第一微件布局、第一微件图案、第一微件样式等)来呈现母版的微件。在步骤1003中，例如通过设计人员经由在设计环境内提供的接口，将微件(即，微件的实例)添加到母版。在一些示例实施方案中，将微件添加到母版，而无需首先添加到母版的容器微件。在其他示例实施方案中，将微件添加到先前添加到母版的容器微件中。在一些示例实施方案中，微件本身是母版。如果将微件与母版的父代视图相关联地添加到母版，则该微件将默认地显现在母版的每个后代视图中。然而，如果将微件与母版的子代视图相关联地添加到母版中，则该微件将默认地仅与母版的该子代视图以及母版的作为该子代视图的后代的任何视图相关联地显现。在步骤1004中，例如经由设计环境的输入接口从设计人员接受或接收用于微件的第一微件表征的输入。在一些示例实施方案中，第一微件表征包括以下中的一个或多个：微件的第一绝对位置、微件的第一样式、微件的第一尺寸、微件的第一状态、微件的第一相对位置、微件的第一锚定规则或微件的另一可配置表征。

在任选步骤1005中，如果先前未创建第二视图，则例如可通过设计人员经由设计环境的输入接口来创建第二视图。在一些实施方案中，创建第二视图包括与母版相关联地创建和存储数据结构。在一些实施方案中，数据结构可为母版的数据结构的一部分，在其他实施方案中，数据结构可包括对母版的引用。数据结构可包括第二视图的名称，以及第二视图与母版的其他视图之间的继承关系的指示。例如，如果母版的第一视图是父代视图，则第二视图的数据结构可指定第二视图是母版的父代视图的子代视图。或者，如果母版的第一视图是父代视图，则第二视图的数据结构可指定第二视图是母版的另一父代视图。

在步骤1006中，例如经由设计环境的输入接口从设计人员接受或接收选择母版的第二视图的输入。在一些实施方案中，在接收到第二视图选择时，根据第二视图(例如，第二微件布局、第二微件图案、第二微件样式等)来呈现母版的微件。在步骤1007中，例如经由设计环境的输入接口从设计人员接受或接收用于微件的第二微件表征的输入。在一些示例实施方案中，第二微件表征包括以下中的一个或多个：微件的第二绝对位置、微件的第二样式、微件的第二尺寸、微件的第二状态、微件的第二相对位置、微件的第二锚定规则或微件的另一可配置表征。因此，第一微件表征与母版的第一视图相关联，而第二微件表征与母版的第二视图相关联。如果第一视图和第二视图各自是母版的父代视图的后代，则为母版的父代视图中的微件接收的第三微件表征将传播到母版的第一视图和第二视图中的微件，除非在第一视图或第二视图中覆盖了第三微件表征。

可参考图11A至图11J描述方法1000可如何改善响应式设计的设计过程的示例。图11A示出了在设计环境的设计窗口1101中显示的第一母版1104(母版1)。第一母版1104包括实现按钮的微件的实例。根据对应于第一母版1104的第一视图(视图1)的第一微件表征来显示第一母版1104的按钮微件。该母版/视图组合被定名为M1.V1。在示出的示例中，第一母版1104的按钮微件的第一微件表征指定白色背景颜色填充(例如，第一样式)。图11B示出了在设计窗口1101中显示的第一母版1104(母版1)。根据对应于第一母版1104的第二视图(视图2)的第二微件表征来显示第一母版1104的按钮微件。该母版/视图组合被定名为M1.V2。第一母版1104的按钮微件的第二微件表征指定灰色背景颜色填充(例如，第二样式)。

图11C示出了在设计环境的设计窗口1101中显示的第二母版1112(母版2)。在示出的示例中，第二母版1112包括文本框微件1114的实例和第一母版1104的实例1106。根据第二母版1112的与第二母版1112的第一视图(视图1)相关联的第一微件表征来显示文本框微件1114和第一母版1104的实例1106中的一个或两者。该母版/视图组合被定名为M2.V1。因为第二母版1112包含第一母版1104的实例1106，所以第二母版1112被认为是包含情境。包含情境的其他示例包括容器、微件、表单、页眉、页脚、导航栏和页面。第二母版1112的文本框微件1114的第一微件表征指定例如文本框微件1114相对于第一母版1104的实例1106在第二母版1112内的位置。

接口1118的简化示例使设计人员能够从第一母版1104的可用视图的列表(M1.V1或M1.V2)中选择第一母版1104的实例1106的实例视图。在图11C中示出的示例中，接口1118中用于第一母版1104的实例1106的选定实例视图M1.V1指示应根据第一母版1104的视图1显示第一母版1104的实例1106，因此根据第一微件表征(白色背景)显示实例1106的按钮微件。

在图11D中示出的示例中，接口1118中用于第一母版1104的实例1106的选定实例视图M1.V2指示应根据第一母版1104的视图2显示第一母版1104的实例1106，因此使用第二微件表征(灰色背景)呈现实例1106的按钮微件。未被第一母版1104的视图1或视图2覆盖的对第一母版1104的按钮微件所做的其他微件表征仍将传播到第一母版1104的实例1106的按钮微件(例如，按钮形状、按钮大小等)。

图11E示出了设计环境的设计窗口1101的简化示例，其中已经将第一母版1104的第一实例1106a(母版1a)和第一母版1104的第二实例1106b(母版1b)放置在第二母版1112(母版2)中。如图所示，在示例接口1118a中选择了第一母版1104的第一实例1106a的实例视图M1.V1，这指示应根据第一母版1104的视图1来呈现第一母版1104的第一实例1106a的按钮微件。第一母版1104的视图1与按钮微件的第一微件表征(白色背景)相关联。类似地，在示例接口1118b中选择了第一母版1104的第二实例1106b的实例视图M1.V1，这指示还应根据第一母版1104的视图1(即，按钮微件的第一微件表征)来呈现第一母版1104的第二实例1106b的按钮微件。另外，第一母版1104的第二实例1106b的文本已更改为“确定”。

图11F示出了最先在图11E中呈现的简化示例，然而在示例接口1118b中选择了第一母版1104的第二实例1106b的实例视图M1.V2，这指示应根据第一母版1104的视图2来呈现第一母版1104的第二实例1106b的按钮微件。第一母版1104的视图2与按钮微件的第二微件表征(灰色背景)相关联。

如先前所描述，除非被覆盖，否则在父代视图中对母版的微件所做的更改将传播到后代视图中母版的微件，除非这些更改正被或已被覆盖。母版的不同视图不会覆盖此类更改。也就是说，如果在母版的父代视图中更改了微件的背景颜色，则更改后的背景颜色传播到母版的每个后代视图中的微件。另一方面，如果在母版的第二视图中更改了微件的背景颜色，从而覆盖了第二视图中的微件表征，则在父代视图中对微件的背景颜色所做的进一步更改仍将传播到第一视图中而不是第二视图中的微件。

微件表征可应用于母版的实例内的微件实例，并且除非在特定视图中将其覆盖，否则这些应用的微件表征将在母版的每个视图中应用于该微件实例。例如，参考图11E至图11F，第一母版1104的第二实例1106b的按钮微件的文本从“按钮”更改为“确定”。如图所示，在第二实例1106b的实例视图M1.V1和M1.V2中，第一母版1104的第二实例1106b的文本显示为“确定”。然而，第一母版1104的第一实例1106a的按钮微件的文本保持为“按钮”，除非它也被更改。因此，第一母版1104的文本(微件特性)在第二实例1106b中已被覆盖，但在第一母版1104的原件中未被覆盖，因此该更改未并入第一母版1104本身或传播至第一母版1104的其他实例(例如，第一实例1106a)。

多视图母版的继承结构不限于视图的单个父代-子代关系。而是，母版可具有多个父代视图，母版的每个父代视图可具有母版的多个子代视图，并且母版的子代视图中的每个可为母版的多个子代视图的父代视图。因此，可为母版实现多个设计图案，同时仍然允许非覆盖的更改从该母版传播到该母版的实例。

图11G示出了设计窗口1101中的第一母版1104(母版1)的父代视图(视图P)的简化示例。在该示例中，视图P是参考图11A至图11B描述的第一母版1104的后代视图(视图1和视图2)的父代视图。在图11H中，在第一母版1104的父代视图(视图P)中接受第一母版1104(母版1)的按钮微件的第三微件表征。在示出的示例中，第三微件表征是椭圆形的按钮形状。第三微件表征是在第一母版1104的视图1或第一母版1104的视图2中的第一微件表征中先前未被覆盖的微件表征。因此，如图11I中所示，按钮微件的第三微件表征传播到第一母版1104的第一实例1106a(在图11E中引入)的微件按钮和第一母版1104的第二实例1106b的按钮微件。

虽然在图11C至图11F中仅示出了两个母版(第一母版1104和第二母版1112)，但是母版的多个实例可放置在包含母版内。类似地，多个母版可放置在彼此内。也就是说，第一母版可包含第二母版，第二母版可包含第三母版，第三母版可包含第四母版和第五母版，依此类推。可独立于母版的包含母版的视图，而为这些母版中的每个独立地选择每个母版的每个实例的视图。这种实施方案的简化示例在图11J中示出。设计环境的设计窗口1101包括第三母版1120(母版3)、第二母版1112的实例1132和第一母版1104的实例1106a至1106c。第一母版1104的实例1106a至1106b包含在第二母版1112的实例1132内，而第一母版1104的第三实例1106c包含在第三母版1120内。第二母版的实例1132还包括第二母版1112的文本框微件1114的实例1134。如示例接口1122a至1122e中所示，可独立地选择第三母版1120、第二母版1112的实例1132和第一母版1104的实例1106a至1106c的相应视图。示例接口1122a示出已经选择了用于第三母版1120(母版3)的第二视图(视图2)。该母版/视图组合被定名为M3.V2。示例接口1122b示出已经为第二母版1112的实例1132选择了第二母版1112(母版2)的第一视图(视图1)。该母版/视图组合被定名为M2.V1。示例接口1122c示出已经为第一母版1104的第一实例1106a选择了第一母版1104(母版1)的第一视图(视图1)。该母版/视图组合被定名为M1.V1。示例接口1122d示出已经为第一母版1104的第二实例1106b选择了第一母版1104(母版1)的第二视图(视图2)。该母版/视图组合被定名为M1.V2。示例接口1122e示出已经为第一母版1104的第三实例1106c选择了第一母版1104(母版1)的第一视图(视图1)。该母版/视图组合被定名为M1.V1。

在一些实施方案中，已经为包含在母版或该母版的实例内的母版实例选择的实例视图的特定集合与该母版的视图相关联。例如，在图11J中，视图选择的集合(包括：第二母版1112的实例1132的M2.V1；第一母版1104的第一实例1106a的M1.V1；第一母版1104的第二实例1106b的M1.V2；以及第一母版1104的第三实例1106c的M1.V1)与第三母版1120(M3.V2)的视图2相关联。第三母版的不同视图可与视图选择的不同集合相关联。例如，视图选择的集合(包括：第二母版1112的实例1132的M2.V1；第一母版1104的第一实例1106a的M1.V2；第一母版1104的第二实例1106b的M1.V1；以及第一母版1104的第三实例1106c的M1.V2)可与第三母版1120(M3.V1)的视图1相关联。

在为母版指定一个或多个视图(可包括父代视图)之后，可在设计环境中将母版的实例添加到设计中。在已经将母版的实例添加到设计中之后，仍然可经由用于接收实例视图选择的接口和/或经由确定实例视图选择的规则，在设计内有利地选择每个母版的每个实例的视图。

可参考图12描述用于使用多视图母版指定设计的简化方法1200。仅出于说明性和解释性目的示出了特定步骤、步骤次序和步骤的组合。其他实施方案可实现不同的特定步骤、步骤次序以及步骤的组合，以达成类似的功能或结果。在一些示例实施方案中，方法1200的步骤在方法1000的所有步骤或一部分步骤之后。在步骤1201中，将(例如，方法1000的)母版的实例添加到设计(例如，页面)中。在步骤1202中，根据(例如，方法1000的)第一视图在设计内显示母版的实例。在步骤1203中，例如从设计人员或基于规则而接受或接收选择(例如，方法1000的)第二视图的输入。在步骤1204中，根据第二视图在设计中渲染母版的实例。

可参考图13A至图13B描述方法1200可如何改善响应式设计的设计过程的示例。图13A示出了在设计环境的设计窗口1302中呈现的页面1322(页面1)中显示的(图11C的)第二母版1112的实例1312。第二母版1112的实例1312包括(图11C的)第一母版1104的实例1304和文本框控件1114的实例1314。设计环境的接口1318的简化示例使设计人员能够：i)为第二母版1112的实例1312选择实例视图，以及ii)独立于为第二母版1112的实例1312选择的视图而为第一母版1104的实例1304选择实例视图。在示出的示例中，为第二母版1112的实例1312选择了实例视图M2.V1，并且为第一母版1104的实例1304选择了实例视图M1.V2。根据实例视图M1.V2，以灰色背景显示第一母版1104的实例1304的按钮微件。在一些实施方案中，当将母版的实例放置到包含情境中时，设计人员选择实例视图。在其他实施方案中，当将母版的实例放置到包含情境中(例如，基于用户偏好设置或系统默认设置)时，通过设计环境的参数选择实例视图。在其他实施方案中，基于与母版相关联的一个或多个规则而选择实例视图。例如，规则可指定如果母版的实例的包含情境的背景颜色是黑色，则可自动选择母版的实例视图，使得以白色背景颜色填充来显示母版的实例内的微件。另一规则可指定，如果母版的实例的包含情境的尺寸小于300像素宽，则可自动选择母版的实例视图，使得在第一绝对位置处显示母版的实例内的微件。另一规则可指定，如果母版的实例的包含情境的尺寸小于1200像素宽，则可自动选择母版的实例视图，使得在第二绝对位置处显示母版的实例内的微件。

图13B示出了替代地为第一母版1104的实例1304选择了用于第一母版1104的实例视图M1.V1的示例。根据第一母版1104的视图1，以白色背景显示第一母版1104的实例1304的按钮微件。

在一些实施方案中，在原型环境内使用与接口1318类似的接口来接收对第一母版1104的实例1304的实例视图选择，并且当页面1322在原型环境中渲染为原型时接收对第二母版1112的实例1312的实例视图选择。设计的原型是可在设计环境外部显示的格式或编码的设计的实现。例如，被编码以根据设计显示和表现的网页是该设计的原型。或者，被编码以根据设计显示和表现的移动或桌面应用程序是设计的原型的另一示例。在原型环境中渲染设计的原型。在原型环境中渲染原型会根据用于生成原型的设计来显示原型，并且渲染后的原型会根据设计中指定的行为在原型环境内表现。原型环境可为外部播放器，诸如web浏览器，用于显示移动应用程序原型的移动应用程序，用于显示移动或桌面应用程序原型的桌面应用程序，用于显示实现为独立可实行应用程序的原型的操作系统，或适合于显示原型的另一种环境。在一些实施方案中，原型的用户例如经由原型或原型环境的输入接口来选择原型内母版的实例的实例视图。在其他实施方案中，基于与母版相关联的一个或多个规则而选择原型内母版的实例的实例视图，所述规则类似于先前描述的那些规则。此类规则还可包括基于以下项的实例视图选择：原型环境的显示屏大小，原型环境的制造设置，原型环境的网络连接状态，原型环境的显示屏取向，原型环境进行的环境光测量(例如，选择与高对比度设计相关联的视图)，原型环境的背光设置，原型环境的可访问性模式，原型环境的检测到的运动或速度(例如，为驾驶车辆的用户选择简化设计)，原型环境的三维位置(例如，地球坐标)，原型环境的语言设置，原型环境的用户的用户偏好，原型环境的操作模式(例如，与智能电话的通话中行为相关联的第一视图，与智能电话的空闲行为相关联的第二视图)，与原型环境的用户相关联的使用许可状态，原型环境的用户的用户数据或人口统计信息(例如，为年轻用户选择简化视图或受限视图)，授予原型环境的用户的权限级别(例如，有关组的管理人员的第一视图，有关组的雇员的第二视图)，原型环境的用户的组关联(例如，有关第一焦点组的参与者的第一视图，有关第二焦点组的参与者的第二视图)，在其中实行了原型的确定的操作系统(例如，与Android操作系统相关联的第一视图，与Windows操作系统相关联的第二视图)，或其他规则。

使用户能够独立于为包含情境(诸如，页面、微件、容器或其他母版)选择的视图而为母版选择视图，这为设计人员提供了另一种自由度，以帮助在设计中维持足够的相互关系的同时维持设计灵活性，以有助于在设计过程继续进行时容易操纵设计。

设计环境：多个尺寸版本编辑

本文描述的示例实施方案有助于跨尺寸版本和多页面设计的各种页面的响应式设计的规约。特别地，其中跨各种尺寸版本渲染单个微件的实施方案允许对该特定微件所做的编辑快速传播到设计的所有尺寸版本中，因为每个版本中都是相同的微件。然而，响应式设计的尺寸版本必须是不同的，这意味着每个尺寸版本中的微件状态必须是可区分的。因此，下面描述的一些示例实施方案还使用户能够快速指定表征是否将在尺寸版本的有限集合中修改微件，或者是否将在所有尺寸版本中全局地修改微件。

可参考图14描述使用不同的编辑模式指定设计的方法1400。方法1400开始于选择编辑模式的步骤1401。方法1400可与先前描述的方法中的任何一个结合使用。在一些实施方案中，可选择的编辑模式包括单尺寸编辑模式、全尺寸编辑模式和多尺寸编辑模式。步骤1402可在步骤1401之前，在步骤1402中，将尺寸版本的子集分组以定义将在多尺寸编辑模式下编辑的尺寸版本。在步骤1401中，用户选择前述的编辑模式中的一个。然后，根据在该步骤中做出的选择，方法会在不同的分支中进行。

用户可在步骤1402中以各种方式选择编辑模式。在一些实施方案中，默认模式将是单尺寸编辑模式，其中微件将仅接收针对当前正在查看或当前选定的设计的尺寸版本的规约。在这些实施方案中，可要求用户在进入该编辑模式之前从下拉菜单中选择全尺寸或多尺寸编辑模式。在将新尺寸规约添加到设计之后第一次将规约添加到微件时，可自动触发用于允许在步骤1401中选择编辑模式的接口。例如，如果添加了新尺寸，则下一次用户尝试为微件指定特性时，弹出窗口可能会要求用户指定是否仅在当前尺寸版本上全局应用该编辑，或者是否应将当前尺寸版本添加到在多尺寸编辑版本中编辑的预定义尺寸版本子集中。

可提供各种措施来防止将不想要的编辑添加到设计中。可在图形设计环境中包括明显不同的标志，以告知用户当前的编辑模式是什么，以防止用户在看不到所做的更改的情况下将更改应用于其他尺寸版本。例如，每当工具处于全尺寸编辑模式时，文本“全局”可能会在用于图形设计环境的窗口的装订线中以彩色文本显现。这样将防止用户错误地编辑他们不意图修改的尺寸版本。同样地，可采用先前描述的库视图通过在编辑尺寸版本时自动打开和关闭尺寸版本来防止不想要的更改。例如，全尺寸编辑模式将为设计环境当时已知的尺寸版本中的每个打开一个窗口。当用户返回单尺寸编辑模式时，库视图也可自动终止。而且，当在全尺寸或多尺寸编辑模式下修改特性的子集时，尤其是当正编辑的特性是在各种尺寸版本中通常没有以不同方式指定的特性时，可在屏幕上显示警告提示。

在一些实施方案中，单尺寸、多尺寸和全尺寸编辑模式是由对在诸如尺寸规约接口204中发现的那些尺寸规约的尺寸规约列表进行操作的用户以高度可定制的方式指定的。在一些实施方案中，用户可通过在尺寸规约接口204中选择不同的尺寸规约，在所有可用的单尺寸编辑模式之间进行选择。例如，通过选择默认按钮，用户将进入指向编辑默认尺寸版本的单尺寸编辑模式。同样地，通过选择智能电话按钮，用户将进入指向编辑智能电话尺寸版本的单尺寸编辑模式。另外，用户可在尺寸规约接口204中选择额外按钮以在各种多尺寸编辑模式之间进行选择，并且可在尺寸规约接口中选择所有按钮以选择全尺寸编辑模式。可通过按住诸如“SHIFT”键等键并单击各种按钮来选择多个按钮。此外，尺寸规约接口可包括尺寸版本列表和每个标签旁边的一系列复选框，借助于这些复选框可通过选择各种复选框来选择多个版本进行编辑。

如果用户选择单尺寸编辑模式，则该方法将继续到步骤1403，在该步骤中，用户能够指定微件的当在用户当前正在编辑和/或查看的尺寸规约中渲染时将仅应用于该微件的特性。方法1400包括在该模式下禁用某些接口控件的任选步骤1404。例如，可能无法在该模式下更改微件的名称，因为该名称用于辨识微件而不考虑正在查看或编辑的微件的是哪个尺寸版本。如果用户选择全尺寸或多尺寸编辑模式，则该方法将继续到步骤1405，在该步骤中，用户能够指定选定微件的当以多个尺寸版本渲染时将应用于该微件的特性。规约将应用到的多个尺寸版本取决于用户已经选择的编辑模式以及多尺寸编辑模式中包括的尺寸版本。无论选择哪种编辑模式，该方法都以步骤1406结尾，在该步骤中，将规约应用于适用尺寸版本的微件。

可以各种方式来实现在步骤1406中将规约应用于微件的方式。如前所述，可在设计模型中存储一次在各种尺寸版本之间共享的具体属性值。可将该共享值视为该属性的“基本”值。如果在步骤1406中应用的规约被应用于尺寸版本的有限集合，则可将值存储为对基本值的覆盖，并将其链接到尺寸版本的该有限集合。同样地，可在步骤1406中通过更改基本值并清除模型中存储的属性的所有覆盖来应用全尺寸规约。在单独存储了微件在每个尺寸版本中的属性值的实施方案中，步骤1406中的规约的应用将遵循更直接的方法来更改正被编辑的尺寸版本的属性值。

方法1400还可包括任选步骤1407，作为防止不想要的编辑传播到整个设计中的额外措施。在步骤1407中，用户能够确认应当将特定编辑或编辑集合传播到多个尺寸版本中。可响应于当用户完成单个编辑时、当用户关闭编辑会话时、当用户选择不同的编辑模式时或当用户选择不同的尺寸版本时显示的提示而提供确认。特别地，可逐尺寸版本地提供确认，并且将要求用户确认自上次图形设计环境为用户渲染该特定尺寸版本以来传播到该尺寸版本中的所有未决编辑。提示可提供正在批准的编辑的摘要，并且可允许用户选择要批准或拒绝以特定尺寸版本实现的特定编辑。图形设计环境还可显示要寻求编辑的批准的尺寸版本的重影渲染，使得如果提供了批准，则用户可查看尺寸版本的外观预览。

还可通过使用继承结构来帮助编辑多个尺寸版本。继承结构定义了多个尺寸版本之间的关系，通过该关系，某些尺寸版本中的编辑会自动传播到其他尺寸版本。继承结构的最基本示例将使用两个尺寸版本来定义，其中两个版本具有父代-子代关系。一旦确立了关系，对父代尺寸版本所做的更改就将自动传播到子代尺寸版本，但是对子代尺寸版本所做的更改将不会传播到父代尺寸版本。

通过为设计中的每个尺寸版本定义继承属性，可实现该结构。因此，该结构将由设计中的所有继承属性值的合并组成。二维继承结构将为用户提供效率益处，并且此类效率益处将随着继承结构所关联的尺寸版本数目的增加而增加。继承结构可包括多个继承链，并且不限于具有单个层次的层次结构。替代地，继承结构可包括与两个单独的父代尺寸版本相关的子代尺寸版本，使得对任一父代所做的更改都将传播到该单个子代尺寸。相反，父代尺寸版本可具有多个子代尺寸版本。

更改可以各种方式传播到继承结构中。例如，可将在一个尺寸版本中改变了微件的属性的微件规约存储在所有该尺寸版本的子代都可访问的存储器位置中。作为另一示例，可复制相同的微件规约并存储在子代尺寸版本独立访问的多个存储器位置中。在将更改复制到多个存储器位置的示例中，该更改可瞬时地进行传播，或者可响应于类似于参考图14中的步骤1407所述的方法的提示而排队等待传播。在这些情形下，对属性所做的更改将存储在一个存储器位置中，以由做出了更改的尺寸版本访问，然后将响应于从用户接收到传播命令而将其复制到其他存储器位置。

可以众多方式定义继承结构。例如，可在将额外尺寸版本添加到设计中时自动创建继承结构。这种继承结构可遵循预定图案，诸如使每个较小尺寸版本成为下一个最大尺寸版本的子代的图案，反之亦然。通常而言，在已创建或编辑任何其他尺寸版本之前，设计中的原始尺寸版本将用作继承结构的基本或默认尺寸版本，并且将用作添加到设计中的所有额外尺寸版本的父代。在用户肯定地形成继承结构之前，也可能尚未定义该结构。在打开新设计后立即向用户提供多个尺寸版本的情形下，用户可选择一个尺寸版本作为该设计的基本版本。还可为用户提供以下能力：在设计中在各种尺寸版本之间创建任何期望的继承结构并在进行设计时连续配置该继承结构。取决于如何定义继承结构，可允许用户通过将所有尺寸版本关联回结构中的单个层次来利用全局编辑模式。该层次将不限于设计中的最大或最小尺寸版本，因为如先前所提及的，用户可定义期望的任何关系，使得基本尺寸版本可为平均大小尺寸版本，而较大尺寸版本和较小尺寸版本两者都将继承对中等大小尺寸版本所做的编辑。同样地，继承结构可允许用户通过在包括多个链的层次中编辑一个子代尺寸版本链的父代来利用子组编辑模式。

在图15中示出了用于允许用户使用根据上述具体实施方案的继承规约来指定响应式网页设计的计算机实现的方法1500。方法1500从步骤1501开始，在该步骤中，为用户生成了网页的第一尺寸的渲染。可在诸如图2中的窗口201等窗口中显示该渲染。该渲染可包括交互式微件。方法1500继续到步骤1502，在该步骤中，从用户接收继承规约。继承规约定义了设计的继承结构。例如，由继承规约定义的继承结构可将第二尺寸版本定义为第一尺寸版本的子代。定义的继承结构可能是为设计指定的初始继承结构，或者可能会覆盖默认继承结构，该默认继承结构在从用户接收到任何输入以肯定地定义继承结构之前就已经存在。方法1500继续到步骤1503，在该步骤中，在用户编辑第一尺寸版本时，从用户接收微件属性规约。在步骤1503中，可在用户编辑第一尺寸版本时通过在图2中的窗口201或微件接口202中键入交互式微件的第一属性的值来接收微件属性规约。方法1500继续到步骤1504，在该步骤中，在用户编辑第一尺寸版本时，存储有关第一尺寸版本和第二尺寸版本两者的第一属性的规约。如上所述，步骤1504可自动进行，使得在用户编辑第一尺寸版本时，将在第二尺寸版本中同时修改第一属性。可使用一种数据结构实施该同时修改，在该数据结构中，针对第一尺寸版本和第二尺寸版本两者中微件的属性访问了存储器中的相同位置。

可参考图16中的继承规约接口1600来描述将允许用户指定继承结构的图形用户界面。如以上参考图2所讨论的，可由用户在尺寸规约接口204中键入尺寸规约。除了提供用于输入继承结构的接口之外，继承规约接口1600还提供可如何键入这些尺寸规约的示例。可通过工具栏或来自图形设计环境200的其他链接来访问继承规约接口1600。继承规约接口1600允许用户在键入尺寸规约和创建尺寸版本时定义继承结构。一旦创建了尺寸版本，设计环境就可提供接口以接收来自用户的输入，从而还返回继承规约接口1600以根据需要修改设计的继承结构。

继承规约接口1600包括继承规约显示窗口1601、继承规约输入接口1602和顶层规约按钮1603。规约按钮允许用户接受指定的继承结构，取消当前会话中制定的规约，或将继承结构还原为默认配置。显示窗口1601以图形方式向用户显示当前继承结构的描述。输入接口1602允许用户输入继承结构的规约。

显示窗口1601可以众多不同方式显示当前继承结构。例如，该结构可被示出为层次连接网或按继承分支分组的列表。如图所示，显示窗口1601使用按继承分支分组的列表来说明继承结构，该继承分支带有缩进以指示子代-父代关系。缩进1604提供了包括当前继承结构的父代-子代关系的图形表示。在图16的具体说明中，“电话”尺寸版本是“平板计算机”尺寸版本的子代；而“监视器”尺寸版本是“膝上型计算机”尺寸版本的子代。显示窗口1601还可显示尺寸版本与其尺寸规约的关系。例如，在图16的具体说明中，当设计的渲染空间小于320像素的宽度时，将在播放器中渲染“电话”尺寸版本。

输入接口1602允许用户指定新的尺寸版本或编辑当前的尺寸版本。在图16的具体说明中，用户正在编辑“电话”尺寸版本。通过在显示窗口1601中选择尺寸版本的名称或通过在输入接口1602中键入尺寸版本的名称，可识别在输入接口1602中要编辑的特定尺寸版本。当添加新的尺寸版本时，用户将需要通过键入尺寸来输入相关联的尺寸规约，并且用户可能还需要键入使尺寸规约与尺寸版本相关联的条件。如图所示，每当提供给设计的渲染空间小于或等于320像素时，就会指定要渲染“电话”尺寸版本。尺寸键入的单位也可呈物理距离单位。“条件”属性被示出为在下拉菜单中指定，但未示出该菜单的内容。与上述实施方案一致，条件可为：小于、大于、小于或等于、大于或等于、或者等于。选择的条件将确定尺寸规约是用作触发点还是目标尺寸。该说明还示出了“电话”尺寸版本的继承属性的下拉窗口。如图所示，用户可选择所定义的尺寸版本中的任何一个以将其设置为“电话”尺寸版本将从其继承修改的尺寸版本。当将其他尺寸版本添加到设计中时，“继承”下拉菜单可能反映额外版本的存在。也可在不使用下拉菜单的情况下指定输入接口中识别的条件和尺寸版本。设计环境可提供接口，以接收来自用户的以文本形式键入符号“>”来指定继承条件或者键入单词“平板计算机”以指定继承规约接口1600中的尺寸版本的输入。

返回参看图15，可使用继承结构接口1600来进行步骤1502。根据这种方法，步骤1502可包括生成继承规约接口1600、继承规约显示窗口1601和继承规约输入接口1602；以及通过从按钮1603中选择“接受”按钮来允许用户确认指定的继承结构。当将额外尺寸版本添加到设计中时，可多次重复该步骤。

也可在图形设计环境200中以工具栏的形式将继承结构显示给用户。在这种情形下，方法1500还将包括生成要与渲染一起显示的继承规约工具栏的步骤。可参考在窗口201上方示出了工具栏1700的图17显示这种工具栏的示例。工具栏1700允许用户通过选择标有不同尺寸规约的按钮来在不同的编辑模式之间进行选择。例如，如果用户选择了按钮“1200”，则与尺寸规约“1200”相关联的尺寸版本将显示在窗口201中，并且用户可编辑该尺寸版本。用户还可选择“全部”按钮以进入全局编辑模式，在该模式下，对当前尺寸版本所做的编辑将传播到设计中的所有其他尺寸版本。如前所述，用户可能还可通过(也许是)在按下“SHIFT”键的同时选择多个按钮来选择尺寸版本的子集，此时他们将编辑设计的所有选定版本，而不是其他尺寸版本。工具栏还可显示设计的继承结构，因为可安排不同的尺寸规约来象征继承结构。例如，如图所示的工具栏1700被布置成组1701和1702，每个组显示从左到右延伸的单独继承结构分支。该图形布置描述了设计的继承结构，因为对“默认”所做的编辑将被所有其他尺寸版本继承，对768所作的编辑将被320而不是被1600继承，对1600或320所做的编辑将不会被任何尺寸版本继承。因此，工具栏1700为用户提供了一种便捷方式来在尺寸版本之间跳跃以及一种便捷方式来跟踪当前如何指定尺寸结构。

可修改方法1500，使得用户可指定未通过继承修改的微件的某些属性。将属性划分为以不同方式传播的类别可称为指定设计的继承表征。可默认设置设计的继承表征。例如，微件的位置、大小和样式可能会受到继承的影响，而微件与文本内容的交互性则不受此影响。作为另一示例，对微件的文本样式所做的更改可能会根据设计的继承结构而更改，但是对任何尺寸版本的微件的文本内容所做的更改都可能会传播到微件中，因为它会在所有其他尺寸版本中显现而不考虑继承结构。作为另一示例，微件的存在属性可能不会通过继承自动传播，但是微件在设计中的绝对位置可能会自动传播。不同属性通过继承传播的方式对于不同的微件属性可能是不同的。例如，微件的颜色可能会自动传播，而微件的大小可能会被继承，并且在更改传播到另一微件之前，需要来自用户的确认性响应。用户还可逐类别属性地配置设计的继承特性。例如，用户可能能够将文本内容属性设置为通过继承自动传播的属性，而颜色属性则不是。用户还可逐微件地配置继承特性，使得用户可配置对通过继承传播的特定微件所做的更改的方式。

可以众多方式指定继承表征。例如，可为用户提供有关特定微件或特定设计的带有一组复选框的属性列表，用户可标记所述复选框以确定该属性是否将通过继承传播。复选框中的一些可能会变灰，因为设计环境可能会阻止某些属性被继承。作为另一示例，用户可通过在子代尺寸版本中编辑属性来间接指定继承表征。在这些实施方案中，对子代尺寸版本所做的编辑用于移除该特定微件的该属性，以免后续通过继承进行修改。这种指定继承表征的方式所适用的属性集可能是有限的。例如，微件的颜色可被表征为在已对子代尺寸版本做出更改之后不应继承的属性，但仍可通过继承修改微件的绝对位置。在这些实施方案中，对子代尺寸版本所做的编辑可称为覆盖微件属性规约，因为它覆盖了经由继承更改属性的任何后续尝试。

可参考图18来描述用于允许用户为交互式图形设计指定继承特性的计算机实现的方法1800。在步骤1801中，从用户接收继承表征规约。继承表征将某些属性表征为受继承影响的属性和不受继承影响的属性。如前所述，可经由专门设计用于从用户接收特征的用户界面来接收规约，或者可在用户肯定地指定了子代尺寸版本中的属性或属性集的情况下通过接收覆盖属性规约来间接接收规约。第一种方法中使用的用户界面可称为继承表征规约接口。图18中未单独示出用以表征属性子集的第二种方法，因为应该将其视为步骤1801的不同方法，而不是额外或替代步骤。在步骤1802中，渲染了交互式图形设计的第一尺寸版本。根据设计的继承结构，第一尺寸版本与第二尺寸版本具有父代-子代关系。在步骤1803中，在用户编辑第一尺寸版本时，从用户接收微件属性规约。在步骤1804中，根据继承结构和继承表征，针对第一尺寸版本和第二尺寸版本存储在步骤1803中接收的微件属性规约。如果继承表征将在步骤1803中改变的所有微件属性表征为免于继承的属性，则在步骤1804中将不会有任何更改传播到第二尺寸版本。然而，如果在步骤1803中改变的微件属性中的任何一个未免于传播，则在步骤1804中将会使这些更改应用于第二尺寸版本中的微件。

方法1800还可包括替代步骤1805。可通过将在步骤1803中接收到的属性规约存储在存储器中由多个尺寸版本访问的单个地址处来进行步骤1804。然而，也可将属性复制到存储器中将由多个尺寸版本访问的多个位置。在这种情形下，方法1800可包括替代步骤1805，在该步骤中，从用户接收传播命令以将有关属性规约的值复制到多个尺寸版本中的每个的替代位置。可经由上述提示中的任何一个直接或通过替代动作间接接收该命令，该替代动作用于指示应通过继承结构传播更改(诸如，打开不同的尺寸版本)。

在跨多个尺寸版本编辑设计的情形下，存在属性的管理尤为重要。如上面的第一章节中所提及的，有时需要除设计渲染窗口之外的单独接口来管理这种属性，因为设计中将没有微件的可视化表示来从其启动对微件的属性的编辑。此外，使微件的删除自动传播到整个设计可能会带来问题，因为设计人员在切换到不同的尺寸版本时可能不会注意到有情况发生，因为不会有视觉线索来指示编辑被错误地移除，诸如当用户切换到不同的尺寸版本时，对微件或文本大小属性的颜色更改显而易见时。另外，除非将某种交叉版本管理系统应用于存在属性，否则当用户首先切换到小得多的尺寸版本时，大尺寸版本中的多个微件的存在会使设计混乱得难以接受。例如，台式机尺寸版本可包括30个等距隔开的微件，这些微件将充斥移动电话尺寸版本的屏幕，并在切换到较小尺寸版本时使选择个别微件变得困难。

可利用存在属性来有助于具有多个尺寸版本的设计规约。可通过设计的继承结构以与上面讨论的其他属性相同的方式处理存在属性。然而，各方法带来了某些益处，在这些方法中，出于继承的目的，以与其他属性不同的方式处理存在属性。例如，将微件放置在尺寸版本中会导致该尺寸版本的所有子代都收到该微件的放置表征，而该尺寸版本的所有父代都接收到有关该微件的未放置表征。在此类实施方案中，出于继承表征的目的，对存在属性的处理略有不同，因为对子代尺寸版本中的微件属性做出修改会影响父代尺寸版本中的微件属性。作为另一示例，当将微件添加到父代尺寸版本并且该尺寸版本的微件的存在属性被设置为放置值时，子代尺寸版本中的微件的存在属性可保持未放置。换句话说，在继承表征中，存在属性将被表征为不受继承影响的属性。而是，设计人员将必须肯定地改变需要添加微件的所有尺寸版本中的属性。这种方法的益处在于，将大量的微件放置在大尺寸版本中不会自动使较小尺寸版本混乱。可将相同的方法应用于微件的存在属性从放置状态到未放置状态的更改，因为更改不会根据继承结构传播，并且需要在所有尺寸版本中手动移除该微件。

在一个尺寸版本中删除微件可视为微件的存在属性的改变，而不是从整个设计中移除微件。在这些情形下，可根据设计中有关更改如何根据设计的继承结构来传播的标准规则处理微件的存在属性的改变。换句话说，微件将在正在编辑的尺寸版本以及其所有子代中从放置状态转移到未放置状态，但是删除不会改变微件在其父代中的存在状态。

可参考图19来描述用于允许用户指定交互式图形设计并管理跨多个尺寸版本的存在属性的方法1900。方法1900从步骤1901开始，在该步骤中，渲染了图形设计的第一尺寸版本。微件具有存在属性，并且该属性具有放置值。该方法还包括步骤1902，在该步骤中，将有关第二尺寸版本中的同一微件的存在属性的未放置值存储在存储器中。步骤1902和1901按顺序显示，但是步骤1902可在步骤1901之前进行，并且在步骤1901的发生期间持续进行。方法1900还包括：步骤1903，在该步骤中，生成了存在属性接口；以及步骤1904，在该步骤中，生成了设计的第二尺寸版本的渲染。在步骤1904中，微件不会在第二尺寸版本中显现，因为该微件的存在属性在第二尺寸版本中具有未放置值。

在存在属性随继承结构自动传播的情形下，方法1900可包括步骤1905，在该步骤中，渲染了设计的第二尺寸版本。在这种情形下，在步骤1901中以第一尺寸版本放置和渲染的微件也将处于放置状态，并在步骤1905中以第二尺寸版本渲染。然后，方法1900可继续到步骤1906，在该步骤中，从用户接收存在属性规约以将微件的存在属性更改为未放置状态。步骤1906可涉及在用户编辑第一尺寸版本时从用户接收删除微件的规约。然后，该方法将继续到步骤1902，在该步骤中，将第二尺寸版本中微件的未放置状态保存在存储器中。在这种情形下，将响应于在步骤1906中接收到存在属性规约而进行保存。为了与继承结构如何影响其他属性保持一致，在第二尺寸版本中，如果删除了同一微件，或者如果该微件的存在属性被更改为未放置状态，则第一尺寸版本中微件的存在属性的值将保持不变。

在图20中，存在属性接口的示例被示出为存在属性接口2000。如先前所提及的，存在属性由于其特定的特性通常可能需要单独的接口。如图所示，存在属性接口2000提供设计中所有微件的列表以及在当前显示的尺寸版本中它们的存在属性值的指示符。在用库视图代替窗口201的实施方案中，只要单个存在属性接口2000能够反映当前正在编辑的库中的尺寸版本的状态，就仍然可采用它。如图所示，标题和主页横幅206具有有关其存在属性的放置值，而链接列表104具有未放置值。存在属性接口2000可通过允许用户点击存在属性接口2000中的微件的名称来允许用户逐微件地双态切换存在属性的放置值或未放置值。在示出的示例中，用户可单击文本“链接列表”，并且将放置链接列表104，并且在窗口201中显现该链接列表。同时，链接列表微件的存在属性的状态将从存在属性接口2000中的“未放置”更改为“放置”。存在属性接口还可反映设计中微件的实时状态，并且每当用户利用添加命令将微件添加到设计中时，该存在属性接口就会填入额外微件。同样地，该接口可实时反映微件的未放置值，因为它们是来自用户的删除命令的主题。通常而言，如果微件与尺寸版本同时显示，则存在属性接口2000将指示微件放置在尺寸版本中；如果微件未与尺寸版本同时显示，将指示微件未放置在尺寸版本中。隐藏属性还可用于提供该功能性，并通过类似的接口进行管理。然而，通常期望的是在设计环境中以重影或轮廓形式渲染隐藏的微件，因此该方法无法很好地提供减少混乱的益处。

存在属性接口可采用各种配置，只要它提供一种管理未放置在设计的尺寸版本中的微件的方法即可。存在属性接口2000还可显示尺寸版本中当前未在设计环境中渲染的微件的存在属性。例如，存在属性接口可提供微件的矩阵，并跨设计中的所有尺寸版本为这些微件中的每个提供存在属性。存在属性接口2000还可限于显示当前未放置在正在渲染的任何尺寸版本中的微件。这可能是有益的，因为接口中的微件列表将受到限制，并且因为可通过选择微件并发出删除命令来直接将放置的微件编辑为未放置。

设计环境：调整大小事件

如上所述，用户能够通过改变渲染微件的状态来指定一种设计，该设计响应于对提供设计的渲染空间的调整。以类似的方式并使用相同的设计环境，用户还能够通过在调整渲染空间时实行动作来指定一种设计，该设计响应于对提供设计的渲染空间的调整。所得的功能性可在窗口201中显示，或者可仅在将其从设计环境中导出后才授予设计。可为特定转变添加这些动作，所述转变诸如转变为特定尺寸版本或在一组特定的尺寸版本之间转变。

可指定设计，使得在调整提供设计的渲染空间的大小时实行各动作。可将事件处理程序添加到设计中，并以渲染空间的宽度是等于、小于还是大于尺寸规约为条件。事件处理程序不必与微件相关联，因为它可替代地通过其他方式与设计相关联。当调整渲染空间时，事件处理程序可利用“调整大小时”事件来实行期望的动作。在这种情况下，事件处理程序可描述为对“调整大小时”事件的“侦听”。在发生“调整大小时”事件后，事件处理程序会将渲染空间的当前大小与一个或多个预设尺寸规约进行比较，然后选择性地实行其相关联的动作。例如，页面可具有“示出显示面板”事件处理程序，并且当用于渲染设计的播放器的宽度被设置为某一大小时，可显示该面板。

还可指定设计，使得当选择具体尺寸版本进行渲染时实行动作，而不考虑为该版本提供的渲染空间。例如，设计的查看器可能够显示设计的“智能电话”尺寸版本，而无需更改先前用于渲染该设计的“台式机”尺寸版本的播放器的大小。可通过各种方式提供该功能性。例如，可将“假”事件添加到设计中，只要渲染的尺寸版本更改，该事件就会开始。该事件为“假”，因为用于渲染设计的浏览器将没有等效事件。该假事件可能被相关联的事件处理程序“听到”，并被事件处理程序用来实行其动作，就好像已经调整了渲染空间的大小并且尽职地开始了“调整大小时”事件一样。作为另一示例，可将用于选择新尺寸版本的输入设置为直接触发该动作。这种方法不需要设计代码检测到事件的开始。

所导出设计：响应式编码和呈现

使用上述工具和方法在设计环境中指定的设计可用于生成设计的实例化，以在外部播放器中进行渲染。设计的实例化是允许在设计环境和/或外部播放器中显示或渲染设计的编码、翻译、编程、重现或转换。已经实例化一种设计，该设计已经被编码、导出、翻译或转换，使得可在设计环境和/或外部播放器中渲染该设计。设计的实例是实例化的设计。在一些实施方案中，将以实例化的形式从工具中导出设计，可在任何时间在工具外部存储和渲染该实例化。所导出设计可为网页或网站的原型，而外部播放器可为web浏览器。在此类情况下，即使设计的工具内渲染可能未利用任何标记语言，也可完全用样式表和标记语言对所导出设计的实例化进行编码。用户可配置在设计的所生成的实例化中表达设计的响应性质的程度。同样地，就实例化如何实现其响应性质而言，可由用户配置实例化的性质。设计的响应性由用于指定设计的过程确定。在每个尺寸版本中将微件修改成的状态是预定义状态，所述预定义状态仅取决于外部播放器的渲染空间的显示尺寸。可参考图11至图13描述了用于定义导出的性质和设计的所导出实例化的性质的工具和方法。

在一些实施方案中，设计的所生成的实例化可具有所表达的不同程度的设计响应性质。例如，用户可选择导出并非响应式的设计的实例化。用户可选择特定的尺寸版本并严格基于该尺寸版本而生成实例化。作为另一示例，设计环境可提供接口，以接收来自用户的输入来生成设计的实例化，该实例化不响应外部播放器提供的渲染空间的任何尺寸，但仍包含与设计相关联的所有尺寸版本。可使用选择器框的编码来导出该实例化，该选择器框将允许所渲染的实例化的查看器在不同尺寸版本之间进行选择。选择器框可跨所有尺寸版本在设计的每个页面上显示，并且可包括一组按钮，可按下所述按钮来在一个尺寸版本与另一个尺寸版本之间切换所渲染的设计。最后，设计环境可提供接口，以接收来自用户的输入来生成设计的实例化，该实例化完全响应于外部播放器提供的渲染空间的尺寸，如设计环境中所指定的。

参考图15可更好地理解诸如前一段落中所描述的选择器框等选择器框。图21显示了图2中所示出的设计中的单个页面的尺寸版本，其中添加了选择器框2100。所导出设计的查看器可单击复选框以指示查看器想要查看设计的哪个尺寸版本。在切换到尺寸版本之后，查看器将能够导览设计并查看相同尺寸版本下的各种页面，并且可通过在选择器框2100中做出不同选择来随时切换到不同的尺寸版本。

在一些实施方案中，所生成的实例化可以各种方式实现其响应性。例如，所生成的实例化可包括实例化的编码中的媒体查询，所生成的实例化可包括用于触发脚本的对象模型事件，或者所生成的实例化可包括使用诸如选择器2100等选择器链接在一起的设计的每个尺寸版本的整个实例化。下面更详细地描述了这些选项中的每个。

媒体查询是浏览器理解并用于自动将样式表应用于设计的标记语言定义。为此，它们提供了一种实现设计中的响应性的方法。可将媒体查询的变量设置为设计的尺寸规约，并且可定义与媒体查询相关联的样式表，以根据与该尺寸规约相关联的尺寸版本的要求设置特定微件的特性。例如，微件可为文本框，该文本框被指定为在默认状态下使用12号字体，而在设计的渲染空间宽度小于10英寸时使用10号字体。在该示例中利用的媒体查询特征将是“宽度”特征，并且条件将是“小于10英寸”。特定媒体查询的相关联样式表会将文本框中使用的字体设置为10号字体。媒体查询是浏览器固有的，因此非常有效。然而，它们仅限于仅对可被样式表修改的微件的特性提供响应性。对于更深入的响应式设计，应当使用不同的方法。

对象模型事件处理程序侦听各种编程对象以监测其特性，并当这些特性满足某些条件时实行事件。在具体实施方案中，这些对象模型事件处理程序可用于向响应式设计的所导出实例化提供响应性特性。例如，由对象模型监测的对象可为用于渲染设计的页面。该事件可为“调整大小时”事件，使得每次调整页面大小时，该事件将实行并确定用于设计的渲染空间的当前尺寸。基于该尺寸与各尺寸规约的比较(这也将在设计中进行编码)，经编码的实例化可运行脚本来修改设计。该脚本将改变提供给外部播放器的设计，使得播放器将渲染不同的尺寸版本。该脚本可为javascript。因为对象模型提供的对设计的修改仅受javascript中可编码的内容限制，所以设计可表现出深度的响应性，包括基于提供给设计的当前渲染空间而使设计中微件的交互属性更改的能力。

可通过多种方式实现包含选择器的所导出设计的响应性。例如，可通过将设计的每个尺寸版本导出为单独的实例化来实现响应性，并在尺寸版本中每组对应页面之间添加链接。在这些实施方案中，该添加的功能性将仅需要修改不同的尺寸版本以包括定义每个页面上的选择器的标记语言。当选定时，选择器可用来将用户从尺寸版本的一个页面链接到不同尺寸版本的另一对应页面。然后，在使用选择器中提供的链接传递回到现有尺寸版本之前，查看器将能够导览一个尺寸版本尽可能长的时间。作为另一示例，可通过使用框架来实现设计的响应性。可导出实例化，使得当渲染时在包含选择器的渲染空间中提供框架。在设计的整个渲染过程中该框架不会更改，而是将保持静止，而设计的不同页面由浏览器在渲染空间中的另一框架中渲染。

根据前一段落的响应式设计的实例化将允许某人能够演示设计的响应性，而不必实际调整播放器的大小。在具体情形下，该方法将为尝试查看网页的原型的人提供一个优势，因为它可有助于以相同的审查程度分析每个尺寸版本，同时仍确保已完全指定设计的每个尺寸版本。

用户可选择使用导出接口从设计环境中导出设计的实例化。导出接口将在用户与导出模块之间提供连接，该导出模块用于生成设计的所导出实例化。可从上面参考图2讨论的图形设计接口访问导出接口。导出接口可为在图形设计接口上显示的永久按钮、下拉菜单中的可选选项，或者可为显示各种可选选项以指定导出的性质的更为复杂的窗口。复杂的导出接口可允许用户指定实例化将如上所述表现出什么程度的响应性。同样地，导出接口可允许用户指定将如何实现设计的响应性。对于该选项，可基于已使设计的微件的哪些特性具有响应能力而禁止某些选项。例如，在已使微件的交互属性具有响应能力的设计中，可在导出接口中禁止导出实例化的选项，在该实例化中，媒体查询提供设计的响应性。

图22中示出了一种用于导出和显示已经通过使用上述工具和方法中的任何一个指定的响应式图形设计的实例化的方法2200。在步骤2201中，从设计环境中导出设计。在该步骤之前，可能已经根据上述方法中的任何一个指定了设计，并且用户也可能已经使用上述方法中的任何一个来选择导出的性质。

在步骤2202中，在外部播放器中渲染设计的实例化。播放器可显示设计的预定尺寸版本。该设计可实行脚本以感测由播放器提供的渲染空间或播放器的任何其他特性，并且使播放器能够基于感测到的特性而在特定尺寸版本中渲染设计。最后，播放器本身可基于标记语言媒体查询而确定适用的合适尺寸规约，并在不使用脚本的情况下渲染适当的尺寸版本。应当注意，播放器可能会以与编码特别要求的方式不同的方式渲染设计，特别是可将偏移应用于所渲染的微件的任何绝对定位规约。

在步骤2203中，由设计的查看器调整外部播放器的渲染空间尺寸。可进行该步骤以查看设计的响应性质。然后，该方法将继续进行到步骤2204，在该步骤中，检测设计的大小调整，并确定是否需要更改所渲染的尺寸版本。这可通过感测外部播放器的渲染空间的新大小并将其与尺寸规约进行比较来完成。如果需要更改，则该方法将如下所述继续进行到步骤2205。

在步骤2206中，选择另一尺寸版本以进行渲染，而无需调整外部播放器的渲染空间尺寸。如上所述，这可通过按下快捷键或在选择器中选择不同尺寸来完成。这些方法的目的是允许查看器对如将在不同尺寸版本中显现的设计进行分析，但为版本中的每个使用相同大小的查看器。

在步骤2205中，实行代码以在播放器中渲染设计的不同尺寸版本，如由步骤2206或步骤2203和2204的组合起始的。代码可以是javascript，其修改设计中特定微件的状态，使得微件以与新渲染的尺寸版本匹配的状态显现。代码也可以是与不同网页相关联的HTML，其可用于渲染该不同网页并显示所需的尺寸版本。在该步骤中实行的不同代码将取决于生成所导出的实例化的方式。在步骤2207中，新渲染的尺寸版本将在外部播放器中显示，其中设计中的微件根据在被显示的特定尺寸版本中如何指定微件来渲染。

图23显示了根据一些示例实施方案的用于渲染响应式图形设计的另一种方法2300。在步骤2301中，渲染具有至少一个微件的图形设计，以允许在具有可调尺寸的窗口中显示图形设计。图形设计可为网页，并且至少一个微件可为交互式微件。图形设计可为使用上述工具和方法中的任何一个指定的设计的实例化，并且可在上述任何导出或生成过程期间生成的编码中进行编码。在步骤2302中，在设计中以第一状态渲染微件。在步骤2303中，使用对象模型事件检测javascript函数来检测对可调整尺寸的调整，该JavaScript函数以与设计本身相同的编码进行编码。步骤2303可利用调整大小时事件。在步骤2304中，响应于检测到的调整后尺寸而实行对象模型事件检测javascript函数的事件处理程序部分。在步骤2305中，事件处理程序的实行致使以第二状态渲染微件，该第二状态由处理器基于检测到的可调整尺寸和预设尺寸定义的集合的比较而选择。第一状态和第二状态在微件的交互性方面可能不同。预设尺寸定义可以相同的设计编码进行编码。预设尺寸定义可包括宽度值、高度值、两者的组合或任何其他物理尺寸。

虽然已经主要参照实施方案的具体实施方案讨论了一些实施方案，但是其他变化也是可能的。可使用所描述的系统的各种配置来代替或补充本文提出的配置。本领域技术人员将了解，前述描述仅是举例，而不意图限制本文所公开的主题。例如，一个以上用户可以协作的方式与其他用户合作以在设计环境中指定设计，该设计可用于电子分发期刊的设计，尺寸规约可提前确定并根据一组流行的长宽比或装置来贴标签，可在三个维度中指定设计，使得尺寸规约可指定用于渲染设计的体积，母版可在用于母版的预定义位置具有将用作页眉或页脚的容器微件，并且可将母版中的预定义容器配置成以预定义方式响应预定义尺寸规约。此外，本公开中的任何内容都不应指示本文所公开的主题限于涉及web浏览器的系统和方法。通常而言，所呈现的任何图仅意图指示一种可能的配置，并且许多变化是可能的。本领域技术人员还将了解，与本文所公开的主题一致的方法和系统适合于在广泛的应用中使用，所述广泛的应用包括与响应式图形设计有关的任何应用。

可通过使用如图24中示出的计算机系统2400来进行本文所述的方法中的任何一个。例如，可由与存储器2402串联作用的处理系统2401提供设计环境。用户2403将能够通过使用路由系统2404和用户界面系统2405来访问设计环境。可使用接口系统2405进行涉及向用户提供事物或从用户接受事物的任何方法步骤。可单独使用或与存储器2402组合使用处理系统2401来进行涉及实行动作的任何方法步骤。图24仅是根据一些示例实施方案的适于操作的说明性计算机系统，并且可替代地使用变型计算机系统拓扑。该描述中的任何内容都不应将处理系统2401的处理器限制为单个处理器，因为该框的功能可由位于单个工作站或服务器上或通过网络分布的多个物理处理器来实现。存储器2402在物理上可与处理系统2401区分开是不必要的，因为出于调用计算系统如何操作的通用概念的目的，存储器仅作为单独的块示出。路由系统2404可为单个工作站、LAN、WAN、有线或无线网络、互联网的内部路由系统，或能够路由信号的任何其他系统。用户界面系统2405可为工作站、计算机、移动电话或其他移动装置，或者能够从单个用户或用户组接收输入的任何计算装置或计算装置组。图24也不应被视为指示本文所公开的主题仅涉及设计环境或设计程序，所述设计环境或设计程序仅可由一个用户访问，因为可能存在多个用户2403，并且多个用户2403的组可使用任何数目的路由系统2404访问设计环境。这些用户还可同时访问设计环境。

虽然已参照一些具体实施方案详细描述了本说明书，但是应当了解，本领域技术人员在获得对前述内容的理解后，可容易构想出这些实施方案的改变、变化和等效形式。在不脱离所附权利要求中更确切地阐述的本文所公开的主题的精神和范围的情况下，本领域技术人员可实践本文所公开的主题的这些和其他修改和变化。