Adobe Edge Reflow Cc

Adobe發布了一款名為Edge Reflow的工具，可以用於回響式設計的可視化創作，提高通過HTML5和CSS3技術在不同設備上所進行的網頁開發效率。Adobe Reflow現已免費開放下載，付費Creative Cloud用戶將免費更新Dreamweaver、Edge Animate和最新的代碼編輯器Edge Code。使用Adobe Edge Reflow做出的回響式設計作品將會實時展示在運行Edge Inspect tool 的實體設備上。將是未來做回響式網站的主要軟體。

基本介紹

• 軟體名稱：adobe edge reflow cc 
• 軟體平台：win7,win8,win10,mac
• 軟體版本：cc
• 更新時間：11.01
• 軟體語言：英文
• 軟體大小：31.4M
• 軟體授權：免費

市場需求

目前，Web 設計人員在執行項目的過程中面臨著許多新挑戰。尤其需要一提的是，他們需要確保其設計在不斷變化的各種設備中都能夠正常工作。一種流行的做法稱為回響設計。使用諸如 CSS 布局和媒體查詢之類的技術是應對該挑戰的首個步驟，不過，這不是一個非常直觀或有創造性的流程。這正是我們打造下一代 Web 設計工具 Edge Reflow 的主要原因之一。

雖然 Edge Reflow 才問世不久，但它很有希望從根本上改變 Web 設計工作流程。為實現這一目標，Adobe 正在改變我們開發軟體的方式。首先，我們希望我們正在開發的軟體以及開發它們的原因都是非常公開和透明的。更重要的是，我們希望傾聽早期用戶的聲音，讓他們來告訴我們，對於下一代設計工具，用戶有什麼期望。

目前，Edge Reflow 側重於解決回響設計的核心難題，並提供多種方式向項目干係人或項目開發人員表達您的“回響式意圖”。Edge Reflow 不是一款所見即所得設計軟體，而是一個用來創建回響式產品的設計工具。我們將繼續發展，提供與設計和開發流程中的其他工具（例如 Photoshop、Illustrator 和 Edge Code）更為緊密的集成。

接下來讓我們看看 Edge Reflow CC 提供的一些功能和工作流程。

獲取方法

要獲得 Edge Reflow，您需要一個免費或付費的 Creative Cloud 訂閱。通過 Creative Cloud 桌面應用程式直接前往 Adobe 的 Creative Cloud，下載並安裝 Edge Reflow。Edge Reflow 經常會更新，因此請確保在 Edge Reflow 通知您有更新可用時從 Creative Cloud 獲取最新版本。

Edge Reflow 仍然處於（早期的）預覽版階段。我們特別期望得到您的反饋！如果您遇到問題，或者對缺少的功能或現有功能有任何其他想法，請按照我們的方式傳送它們：

記錄問題：EdgeReflow 的 GitHub 問題

提問或者提供反饋：EdgeReflow 論壇

本指南提供了一個示例項目，我在本文的各部分中將使用該項目作為參考。

選擇流程

在開始設計流程之前，您必須做出一個重要的決策：是針對移動還是針對桌面進行設計。該決策將確定要使用哪種類型的媒體查詢，即使用最小媒體查詢還是最大媒體查詢。默認情況下，Edge Reflow 使用最大媒體查詢和桌面作為首選方式。要將移動改為首選方式，請使用媒體查詢管理器面板中定義的最小查詢。要顯示該面板，請按住位於媒體查詢標尺右端的按鈕。單擊 Minimum 按鈕，使用最小媒體查詢。

圖 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 為您提供了更改各種版式屬性，以及為文本添加背景、框線和陰影的選項。

使用字型

要向您的項目中添加 Typekit 或 Edge Web 字型，請選擇一個文本元素，然後轉到 Styling 選項卡。單擊 Typography 窗格下的圖示。這將打開有兩個選項卡的字型對話框。在第一個選項卡中，可以向您的項目添加任何 Edge Web 字型。

圖 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：資產面板

該資產面板顯示項目中的所有資產、其使用次數，它還提供了一個圖示，用於將該圖像替換為另一個，以及從項目中刪除資產的能力。在 Edge Reflow 中，刪除或替換資產是一個可撤消操作。
資產面板還會通知您某個資產是否已在 Edge Reflow 外部發生了修改。在這種情況下，圖示看起來將如下所示：

打開資產面板時，被修改的資產具有一個刷新圖示。單擊該圖示將使用修改後的版本刷新該資產。

圖 26：帶有使用次數、刷新、替換和刪除選項的資產面板庫項

Edge Reflow 不會在畫布上自動刷新已修改的資產，因為這些更改對您的設計可能有很大的破壞性。我們希望您明確接受被已修改的資產。

複製元素

您可以選擇元素並轉到 Edit -> Duplicate (Cmd/Cntl + D) 來複製畫布上的元素。這會將複製的項附加到游標，以便將其放在畫布上。由於布局和 CSS 複雜性原因，Reflow 目前不支持傳統的複製/貼上，但這是我們目前正在研究的事情。

導航

可使用多種方式選擇 Edge Reflow 畫布上的項。這些方式包括：

• 單擊某個元素，選擇該元素。
  
• 按住 Shift 鍵的同時單擊，選擇多個項。
  
• 拖動並創建一個選擇矩形，選擇矩形內包括的所有項。選擇某個方框內的子元素也將選中該方框。
  
• 按住 Cmd/Ctrl 的同時進行拖動，可實現與通過拖動進行選擇時相同的效果。不過，如果選擇方框內的子元素，這樣將不會選中該方框。下面是希望選擇某個方框內所有子元素但不選中該方框本身的一個示例。
  

圖 27：使用 SHIFT 可選擇方框內的子元素，但不選擇父代

選擇多個元素後，可以使用鍵盤上的箭頭鍵向上、向下、向右或向左微移這些元素。您無法在畫布上四處拖動多個元素。您還可以在屬性檢查器中為多個元素修改樣式。

進行單個選擇後，可以在 DOM 欄中看到所選的內容：

圖 28：DOM 欄

在這裡，我們可以看到已選擇了一個文本元素，並可以看到該元素的 DOM 層次結構。如果選擇了多個項，則 DOM 欄不會顯示任何內容。您可以單擊 DOM 欄中的任何元素名稱，在畫布上選擇該元素。

還可使用快捷鍵在畫布上的元素間進行導航：

• Alt+Cmd/Ctrl+向上箭頭鍵 - 選擇某個元素的父代。
  
• Alt+Cmd/Ctrl+向下箭頭鍵 - 選擇某個元素的第一個子元素。
  
• Alt+Cmd/Ctrl+向右箭頭鍵 - 選擇下一個同級。
  
• Alt+Cmd/Ctrl+向左箭頭鍵 - 選擇上一個同級。
  

單擊位於 DOM 欄左端的圖示可查看您的設計的 DOM 層次結構。該操作將打開元素麵板。

圖 29：元素麵板顯示了您的 DOM 層次結構。

從元素麵板中，您可以選擇畫布上的項，使用圖示隱藏/顯示元素，重命名元素以及重新安排元素。

DOM 欄和元素麵板中的默認標籤是可編輯的。只需雙擊名稱並重命名您的元素即可。該名稱元素將導致該名稱出現在瀏覽器預覽中創建的 HTML 和 CSS 中。

對齊元素

持續向畫布上添加元素時，有時您可能希望調整元素大小或者對齊元素，以便與其他元素相匹配。Edge Reflow 提供了您可能已在其他 Adobe 設計工具中很熟悉的對齊選項。對齊面板圖示位於螢幕的右下部，選擇兩個或更多元素並且這些元素能夠對齊時，該圖示將被啟用。單擊該按鈕將顯示用來靠左、居中、靠右、靠上、靠中間或靠下對齊的選項。

圖 30：對齊面板

此外，您可以使用對齊面板來匹配元素的大小，或者讓元素的間距在垂直或水平方向相等。

回響式產品

在 Reflow 中創建初始設計後，接下來應該使其成為真正的回響式產品。您應該使用可調整大小的畫布手柄，通過拖動讓設計畫布變得更大或更小。通過每次大小調整，就能查明會使設計遭到破壞的大小。一旦遇到了會使設計遭到破壞的大小，請返回到上個已知正常的大小並添加一個斷點。單擊圖示將向設計界面上方的標尺添加一個新的媒體查詢標記。您所做的任何更改都將特定於這個新的媒體查詢。在此大小更改設計時，此區域的特定 CSS 樣式在屬性檢查器中將高亮顯示為與當前區域顏色相匹配的顏色。

圖 31：屬性檢查器中高亮顯示了區域特定的樣式

除了單擊按鈕來創建斷點，您還可以雙擊位於畫布頂部的標尺來創建斷點。要刪除斷點，請選擇一個標記並單擊按鈕刪除它。在 Edge Reflow 中，刪除和添加斷點是不可撤消的操作。

通過單擊標尺上方的著色區域或單擊默認區域的默認部分，可在不同的區域之間來回切換。

圖 32：媒體查詢欄和標尺

在某些情況下，您會在自定義區域中執行您希望傳播到所有其他區域的樣式更改。在這種情況下，在屬性檢查器中將指針懸停在該樣式上會出現一個按鈕，用於將該樣式套用到所有區域。按下該按鈕會將該樣式值推送到默認區域。

圖 33：“套用於所有區域”按鈕

在 Reflow 可調整大小的畫布上創建了設計，創建了斷點並在會破壞設計的地方進行調整後，您的設計便成為完全回響式的。您的設計現在能夠在當前或未來市場上可見的任何設備上顯示。

公開設計

Reflow 的功能之一是它能夠表達您的設計的詳細信息。將 Reflow 產品提供給開發人員或項目干係人可讓他們查看您的回響式意圖。您可以輕鬆檢查用來描述設計界面上所有元素的 CSS。要獲取某個元素的 CSS，請選擇該元素，然後單擊 DOM 欄中的圖示。這將打開 CSS 面板。該面板中的 CSS 描述了您定義的每個媒體查詢的布局和樣式設定。

圖 34：代碼提取彈出視窗。

通過單擊彈出視窗底部的圖示，所選元素的所有 CSS 都將被複製到剪貼簿中，然後可以將其貼上到您選擇的代碼編輯器中。此工作流程為在生產站點上工作的開發人員提供了靈活性，允許他們邊查看合適情況邊構造代碼，而不會丟失原始的設計願景。通過將指針懸停在某個區域的 CSS 上，您還會看到一個剪貼簿圖示，可以用來僅複製該區域的 CSS。

從 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 右上角的圖示。這將打開 Edge Inspect 面板。在設備上啟動 Edge Inspect。從該設備上，通過指定您的桌面計算機的 IP 地址來添加與 Edge Reflow 的連線。設備成功連線後，您會看到如下所示的畫面：

圖 36：Edge Reflow 中的 Edge Inspect 集成

現在，您在 Edge Reflow 畫布中執行的任何更改都將實時反映到設備上！在設計過程中和客戶審核階段，此工作流程非常有用。

下一步方向

現在，您已完成了此 Edge Reflow 入門指南，立即去進行回響式設計吧！非常期待您針對應用程式以及我們可以如何改進提供反饋意見。現在，您可以直接從 Reflow 內向我們傳送您的想法和反饋。您只需進行在線上並通過應用程式右下角的對話框提交反饋。如上文所述，Reflow 每隔幾周就會推出更新版本並且正在飛快地發展！