Content
目前，Web 设计人员在执行项目的过程中面临着许多新挑战。尤其需要一提的是，他们需要确保其设计在不断变化的各种设备中都能够正常工作。一种流行的做法称为响应设计。使用诸如 CSS 布局和媒体查询之类的技术是应对该挑战的首个步骤，不过，这不是一个非常直观或有创造性的流程。这正是我们打造下一代 Web 设计工具 Edge Reflow 的主要原因之一。 虽然 Edge Reflow 才问世不久，但它很有希望从根本上改变 Web 设计工作流程。为实现这一目标，Adobe 正在改变我们开发软件的方式。首先，我们希望我们正在开发的软件以及开发它们的原因都是非常公开和透明的。更重要的是，我们希望倾听早期用户的声音，让他们来告诉我们，对于下一代设计工具，用户有什么期望。 目前，Edge Reflow 侧重于解决响应设计的核心难题，并提供多种方式向项目干系人或项目开发人员表达您的“响应式意图”。Edge Reflow 不是一款所见即所得设计软件，而是一个用来创建响应式产品的设计工具。我们将继续发展，提供与设计和开发流程中的其他工具（例如 Photoshop、Illustrator 和 Edge Code）更为紧密的集成。 接下来让我们看看 Edge Reflow CC 提供的一些功能和工作流程。 如何获得 Edge Reflow？要获得 Edge Reflow，您需要一个免费或付费的 Creative Cloud 订阅。通过 Creative Cloud 桌面应用程序直接前往 Adobe 的 Creative Cloud，下载并安装 Edge Reflow。Edge Reflow 经常会更新，因此请确保在 Edge Reflow 通知您有更新可用时从 Creative Cloud 获取最新版本。 Edge Reflow 仍然处于（早期的）预览版阶段。我们特别期望得到您的反馈！如果您遇到问题，或者对缺少的功能或现有功能有任何其他想法，请按照我们的方式发送它们： 记录问题：Edge Reflow 的 GitHub 问题 提问或者提供反馈：Edge Reflow 论坛 本指南提供了一个示例项目，我在本文的各部分中将使用该项目作为参考。 选择您的设计工作流程在开始设计流程之前，您必须做出一个重要的决策：是针对移动还是针对桌面进行设计。该决策将确定要使用哪种类型的媒体查询，即使用最小媒体查询还是最大媒体查询。默认情况下，Edge Reflow 使用最大媒体查询和桌面作为首选方式。要将移动改为首选方式，请使用媒体查询管理器面板中定义的最小查询。要显示该面板，请按住位于媒体查询标尺右端的 
图 1：Orientation 面板
除了设置要在项目中使用的媒体查询类型，该面板还允许您命名、定义和管理所有媒体查询断点。如果您不熟悉媒体查询，那么我告诉您，媒体查询在浏览器中就像 CSS 的条件逻辑。它是根据不同参数（例如宽度或方向）来定义更改的一种方式。如果您对使用 Edge Reflow 感兴趣，但需要更好地了解媒体查询，我建议您在继续深入学习之前研究一下媒体查询。 设计优先，而不是设备优先世界上有数千种屏幕分辨率需要去支持，而且市场上每个月都会增加新的屏幕分辨率。要在所有这些设备上测试您的设计是不可能的。因此，请首先创建您的设计，而不要考虑它将支持的特定设备。使用 Reflow，您可以使用可变大小的画布测试您的设计能够在任何大小的屏幕上工作。 在 Reflow 中开始一个项目时，系统会向您介绍该应用程序的主要部件，我在本文中从头至尾都将引用这些部件。 
图 2：Edge Reflow
位于 Edge Reflow 设计界面顶部的标尺可以帮助您确定设计界面的当前宽度。拖动画布手柄可以使画布变得更大或更小，并且可以帮助您查看您的设计在 899、1223、982、433 或任何其他屏幕大小时的外观。 在本指南后面的内容中，我们将讨论如何创建媒体查询断点并在其断开处调整您的设计。 选择网格属性决定是针对移动还是针对桌面进行设计后，您需要指定网格的属性。要在 Edge Reflow 中更改网格设置，请确保您已选中了主容器。在画布的底部，您应该会看到： 
图 3：在 DOM 栏中选中了 Container
现在，在 Layout 选项卡中找到 Grid Options 窗格。Grid Options 窗格允许您指定要使用的列数、隔条大小，用于显示外侧隔条的选项以及不透明度设置。可以并且应当针对您在设计中创建的所有断点来调整这些设置。对于本指南中的示例项目，我们使用了默认设置 12 个列。 开始在 Edge Reflow 设计界面上放置、移动对象或调整其大小时，各个元素将对齐到网格。您可以选择关闭对齐功能：View -> Snapping -> Snap to Grid。 
图 4：左侧有网格设置的 Edge Reflow 画布
文档级样式在定义网格后，您需要指定文档级样式。这包括默认的字体样式和背景样式。要在 Edge Reflow 中定义这些样式，请确保已选中了 Body，方法是在 DOM 栏中单击文本 Body。您的 DOM 栏看起来应如下所示： 
图 5：在 DOM 栏中选中了 Body
Styling 选项卡定义样式，例如基础版式和背景样式。基础版式的值是用 1em（Web 设计中使用的一个相对大小单位）来定义的。该值在各个断点之间可能会有所不同并且会影响任何基于 em 的元素的大小。在示例项目中，我们定义了基础字体 Source Sans Pro，这是一种 Edge Web 字体。Edge Reflow 目前支持向您的项目中添加 Edge Web 字体或 Typekit 字体。 
图 6：基础版式设置和背景
工具栏在 Reflow 中设计响应式网站时主要使用四个工具。这四个工具包括选择、方框、文本和图像工具。工具栏位于应用程序窗口的左上部。 
图 7：工具栏
选择方框、文本或图像工具，开始在 Edge Reflow 画布上放置您的设计原始。 布局
图 8：布局属性检查器
在 Reflow 中开始新项目时，有两个可供您使用的元素，即 Body 和 Container。在下文中，我通常将此初始容器称为“主容器”。您添加到画布的任何元素都将成为此主容器的子元素。 可以通过拖动、调整大小或者在 Layout 选项卡中更改属性来操纵您放置在设计界面上的方框、文本和图像。属性检查器中的所有输入值都允许您编辑值和所使用的单位类型，例如像素、em 和百分比。 默认情况下，画布上元素的设置为 position:static 和 float:left。您可以在 Layout 选项卡的 Advanced 窗格中更改这些布局属性。如果您选择使用绝对或固定定位的项目，还可以在 Advanced 布局窗格中使用选项来更改 z-index。 
图 9：Advanced 布局面板
您可以将方框、文本或图像放在主容器中，或者将其作为其他方框的子元素。四处移动方框时，会出现边距可视元素来显示元素在画布上的相对位置。如果将一个方框悬停在另一个方框上方，则会看到一个较亮的蓝色高亮区，它指示将方框放在此处将会使高亮显示的方框成为所放置方框的父代。 
图 10：确定父代方框
调整方框大小可能会移动布局中的其他元素。这些移动是由其他元素上设置的 css 布局属性确定的。例如，如果所有方框都是靠左浮动的，则在它们的尺寸变大时可能会将彼此推到一边。 组合和确定父代开始在画布上布置元素时，您可能希望“组合”多个元素或者为一组元素指定一个父代，从父代继承属性。 要添加父代，请在画布上选择任意数目的元素，然后选择：Edit -> Add Parent。如果您选择的元素无法共享一个父代，则此选项将被禁用。您还可以通过选择 Edit -> Remove Parent 来删除父代。 方框具有子元素时，默认情况下子元素是可选择的。不过，在某些情况下您可能希望不再操纵方框的子元素。在这种情况下，您将希望“组合”这些项。选择父代方框并选择 Edit -> Group。您应该看到 DOM 栏中显示一个组图标。
图 11：显示了 Group 名称和图标的 DOM 栏
您还可以通过单击元素名称旁边的 样式设置
图 12：Typography 窗格
样式设置是创建响应式产品过程中的关键步骤之一。这是在属性检查器的 Styling 选项卡中执行的。样式设置选项包括添加边框、背景、阴影和自定义字体。此选项卡视图上的样式将根据您所选元素类型的不同而变化。例如，如果选择了一个文本元素，则会在该视图的顶部看到一个 Typography 窗格，但如果选择了一个方框，则不会出现该窗格。 Edge Reflow 允许从一个元素“将可视样式复制到”任意数目的选定元素，从而帮助简化了设计工作流程。要执行此操作，请选择一个已为其设置了样式的元素，然后选择以下菜单项：Edit -> Copy Visual Styles。
图 13：复制可视样式
选择一个或多个其他元素并选择：Edit -> Paste Visual Styles。
图 14：粘贴可视样式
操作文本您可通过两种不同的模式来操作文本元素。首次在画布上放置文本时，实际的字符将高亮显示。
图 15：文本编辑模式
这意味着您处于编辑模式下。在编辑模式下，您可以修改文本字段中的字符或者设置文本块中各个字的样式。要设置特定文本的样式，请选择所需的文本并在 Styling 选项卡中进行更改。设置特定文本的样式时，您会看到背景、阴影和边框不可用。对于具有样式的每个子字符串，Edge Reflow 在每个段落元素内创建一个<span> 。下面是在文本元素中添加了一个跨距的示例。
图 16：选择文本的子字符串
如果您希望设置整个文本元素的样式，而不只是该文本的一部分，请确保您未处于编辑模式下并且选中了文本块。在该模式下，您应该会看到文本元素的大小调整手柄。应该没有字符处于高亮显示状态。
图 17：文本选择模式
设置文本元素的样式时，您将在段落标记上定义各种 CSS 属性。Edge Reflow 为您提供了更改各种版式属性，以及为文本添加背景、边框和阴影的选项。 使用 Edge Web 字体和 Typekit要向您的项目中添加 Typekit 或 Edge Web 字体，请选择一个文本元素，然后转到 Styling 选项卡。单击 Typography 窗格下的
图 18：Edge Web 字体
默认显示已针对 Sans-Serif 字体进行了筛选。单击左栏上的任何按钮可以修改过滤器。要向您的项目中添加字体，请单击缩略图。缩略图的右上角将出现一个蓝色复选框，以指示已将一种字体添加到您的项目中。 选择要添加的字体后，这些字体将出现在 Typeface 下拉框的顶部。再次单击缩略图取消选中字体，可以从您的项目中删除该字体。
图 19：自定义字体显示在 Typeface 下拉框的顶部。
此弹出对话框上的第二个 Custom 选项卡允许您向项目添加 Typekit 字体。要执行此操作，请将由七个字符组成的工具包 id 添加到输入字段。要获取工具包 id 的查找说明，请将指针悬停在对话框中的
图 20：添加嵌入了 Typekit 的代码
同样，在提供某个工具包后，该工具包中可用的字体将被添加到 Typeface 下拉框的顶部。 操作图像Edge Reflow 支持向画布中添加 jpg、gif、png 和 svg 元素。单击图像按钮将打开一个文件对话框，从中您可选择要添加的图像文件。与方框和文本一样，您可以将图像放在画布上的任何位置。放置图像之后，您可以用拖动方法将图像调整得比原始图像更小，但无法将之调整得更大。如果您希望将图像调整得比其原始大小更大，可以通过属性检查器执行此操作。 SVG 元素可以调整得比其原始大小更大或更小。 在属性检查器的 Styling 选项卡中，您可以更改图像的来源，添加边框、阴影或修改其不透明度。
图 21：操作图像
背景图层可以向任何方框元素添加多个背景图层。这些图层可以包括背景颜色、背景图像或背景渐变。要添加背景图像，请转到 Styling 选项卡并单击 Backgrounds 窗格中的第一个按钮
图 22：添加背景图像
您可以向方框添加多个背景图像、颜色或渐变。可以重新安排或删除这些元素。要重新安排背景图层，请使用图层左侧的手柄并将其向上或向下拖动。
图 23：重新安排背景图层
要删除某个背景图层，请将指针悬停在该图层上：您应该在图层的右端看到一个 x。单击此按钮可删除背景图层。
图 24：删除背景图层
在资产面板中管理图像添加到项目中的所有图像都将被复制到 Reflow 项目文件夹中的 assets/img 目录内。可以在“资产面板”中查看该目录中的所有图像资产。要查看资产面板，请单击位于 Edge Reflow 右侧栏中的
图 25：资产面板
该资产面板显示项目中的所有资产、其使用次数，它还提供了一个图标，用于将该图像替换为另一个 打开资产面板时，被修改的资产具有一个刷新图标
图 26：带有使用次数、刷新、替换和删除选项的资产面板库项
Edge Reflow 不会在画布上自动刷新已修改的资产，因为这些更改对您的设计可能有很大的破坏性。我们希望您明确接受被已修改的资产。 复制元素您可以选择元素并转到 Edit -> Duplicate (Cmd/Cntl + D) 来复制画布上的元素。这会将复制的项附加到光标，以便将其放在画布上。由于布局和 CSS 复杂性原因，Reflow 目前不支持传统的复制/粘贴，但这是我们目前正在研究的事情。 在设计中进行导航可使用多种方式选择 Edge Reflow 画布上的项。这些方式包括：
图 27：使用 SHIFT 可选择方框内的子元素，但不选择父代
选择多个元素后，可以使用键盘上的箭头键向上、向下、向右或向左微移这些元素。您无法在画布上四处拖动多个元素。您还可以在属性检查器中为多个元素修改样式。 进行单个选择后，可以在 DOM 栏中看到所选的内容：
图 28：DOM 栏
在这里，我们可以看到已选择了一个文本元素，并可以看到该元素的 DOM 层次结构。如果选择了多个项，则 DOM 栏不会显示任何内容。您可以单击 DOM 栏中的任何元素名称，在画布上选择该元素。 还可使用快捷键在画布上的元素间进行导航：
单击位于 DOM 栏左端的
图 29：元素面板显示了您的 DOM 层次结构。
从元素面板中，您可以选择画布上的项，使用 DOM 栏和元素面板中的默认标签是可编辑的。只需双击名称并重命名您的元素即可。该名称元素将导致该名称出现在浏览器预览中创建的 HTML 和 CSS 中。 对齐元素持续向画布上添加元素时，有时您可能希望调整元素大小或者对齐元素，以便与其他元素相匹配。Edge Reflow 提供了您可能已在其他 Adobe 设计工具中很熟悉的对齐选项。对齐面板图标
图 30：对齐面板
此外，您可以使用对齐面板来匹配元素的大小，或者让元素的间距在垂直或水平方向相等。 成为响应式产品在 Reflow 中创建初始设计后，接下来应该使其成为真正的响应式产品。您应该使用可调整大小的画布手柄，通过拖动让设计画布变得更大或更小。通过每次大小调整，就能查明会使设计遭到破坏的大小。一旦遇到了会使设计遭到破坏的大小，请返回到上个已知正常的大小并添加一个断点。单击
图 31：属性检查器中高亮显示了区域特定的样式
除了单击 通过单击标尺上方的着色区域或单击默认区域的默认部分，可在不同的区域之间来回切换。
图 32：媒体查询栏和标尺
在某些情况下，您会在自定义区域中执行您希望传播到所有其他区域的样式更改。在这种情况下，在属性检查器中将指针悬停在该样式上会出现一个按钮，用于将该样式应用到所有区域。按下该按钮会将该样式值推送到默认区域。
图 33：“应用于所有区域”按钮
在 Reflow 可调整大小的画布上创建了设计，创建了断点并在会破坏设计的地方进行调整后，您的设计便成为完全响应式的。您的设计现在能够在当前或未来市场上可见的任何设备上显示。 公开您的设计详细信息Reflow 的功能之一是它能够表达您的设计的详细信息。将 Reflow 产品提供给开发人员或项目干系人可让他们查看您的响应式意图。您可以轻松检查用来描述设计界面上所有元素的 CSS。要获取某个元素的 CSS，请选择该元素，然后单击 DOM 栏中的
图 34：代码提取弹出窗口。
通过单击弹出窗口底部的 从 Photoshop 文件中艰难地提取颜色、渐变和字体信息的时代一去不复返了！ 在浏览器中预览Edge Reflow 允许您在 Google Chrome 中预览您的设计。要进行预览，请保存您的文档并选择以下菜单项：View -> Preview in Chrome。执行此操作时，Reflow 将打开 Chrome 让您预览您的设计。此外，还将在 Edge Reflow 项目文件夹的 assets 目录中生成 CSS、Boilerplate 和 HTML 文件。
图 35：在 Chrome 中预览时生成的 CSS 和 HTML 文件
可以很轻松地将 HTML、CSS 和图像资产放到任何 Web 服务器上，从而与团队中的人员或者与客户共享您的设计。 在设备上共享要向客户展示您的设计如何用各种屏幕大小完成响应式工作，有什么比在实际的设备上查看该设计更好的方式呢？Reflow 提供了与 Edge Inspect 的直接集成，这让您可以在设备上无缝地共享设计。您需要在所有设备和桌面计算机上安装 Edge Inspect。可以在 Adobe 的 Creative Cloud 和设备应用商店中找到安装程序。 要将 Inspect 与 Edge Reflow 一起使用，请在您的桌面计算机和所有设备上启动 Inspect。如果还有 Edge Inspect Chrome 扩展，需要禁用该扩展。单击 Edge Reflow 右上角的
图 36：Edge Reflow 中的 Edge Inspect 集成
现在，您在 Edge Reflow 画布中执行的任何更改都将实时反映到设备上！在设计过程中和客户审核阶段，此工作流程非常有用。 下一步阅读方向现在，您已完成了此 Edge Reflow 入门指南，立即去进行响应式设计吧！非常期待您针对应用程序以及我们可以如何改进提供反馈意见。现在，您可以直接从 Reflow 内向我们发送您的想法和反馈。您只需进行联机并通过应用程序右下角的对话框提交反馈。如上文所述，Reflow 每隔几周就会推出更新版本并且正在飞快地发展！ 特别感谢 Jacob Surber 和 Victor Mitnick 对本文所做的贡献。 |
|
|
按钮。单击 Minimum 按钮，使用最小媒体查询。
