為了準備一個關于設計師和開發人員的角色轉變，在如何互動幾個月前給出的談話，我采訪了20 +的網絡商店。 以我自己的經驗驗證，我發現他們中許多人面臨的挑戰響應裝修設計到他們的工作流程 ，以及大多數網頁設計師的角色發生了變化，包括編碼以某種形式或另一種。
至少有一半的設計師知道HTML和CSS很好，但想要一個更直觀的方式來得到它。 那么，新一代的可視化交互設計工具已經來臨。 這些響應式設計工具的人誰了解HTML和CSS（或者是愿意學習），并希望以可視方式設計一個負責任的網站 – 并有代碼來顯示它。
一些最新的和最顯著的視覺敏感濟南網站建設者是Webflow的，邊緣的Adobe回流CC和金剛鸚鵡。 是的，一百萬其他人都在那里，包括Squarespace，FROONT和畫架，但我們會集中在少數這篇文章。 我的目的不是為了冠軍這些工具，而是讓你熟悉他們，并討論他們的長處和短處。
為了記錄在案，我是一個前端開發誰使用多種框架和我自己的代碼作為起點（與WordPress的）手響應代碼的網站。 我一直持懷疑態度生成的代碼，有很好的理由（還記得GoLive的？），但我也明白，像這些工具有一個時間，一個地方，是的，觀眾，你可以在設計中使用這些工具之一進程創建響應譜曲 ，不管你是否打算使用生成的代碼。 我什至考慮使用一些快速原型設計。 褻瀆！
所以，讓我們來看看，從Webflow的。
Webflow的
像所有的我們將討論的工具， Webflow的是一個相對較新的場景。 這對于無需盯著代碼創建響應的網站在瀏覽器拖放式編輯器。 它需要一個包月并有多個價格水平的個人和團隊。
包括在所有訂閱的是舉辦一個內容交付網絡上使用一個子域（ yoursite.webflow.com ），除非你愿意支付幾塊錢的定制域名托管。 但你也可以簡單地導出生成的代碼，并把它在那里你想要的。 怎么就這么的Webflow生成的代碼，你問？它基于引導3.0，是的，我們中的一些可以編寫更干凈，更輕便，更語義代碼，但總而言之，Webflow的代碼也比較干凈。
在您注冊并登錄，你得到的Webflow的儀表盤。 這是你控制你的帳戶，管理網站設置并啟動您的網站。 默認情況下，有沒有什么，除了一個大的藍色按鈕盯著你的臉，要求你創建一個網站。 您可以使用模板或從頭開始。 甚至還有一個市場為模板，收費和免費，在那里你可以賣你自己的Webflow的模板。
積木
一旦你開始了一個網站，你正在考慮的Webflow的設計師，奇跡發生的地方。 在設計，目前只在Chrome和支持谷歌金絲雀 （這基本上是Chrome瀏覽器的開發者，與被添加的新功能幾乎每天都有），你會盯著在瀏覽器中的第一個頁面，在左側工具欄和幾個面板右側。
通用操作（如添加頁面，發布和預覽）在左邊，和基本事實的內容和格式選項是正確。 從右邊的“+”面板中，您可以將布局元素（div的或設置為最大寬度或100％的寬度HTML5元素）和一個自定義的網格到默認桌面布局。
有了您的地方基本結構，你可以開始插入頁面內容。Webflow的配備了一套標準的網絡組件（包括列表，鏈接和文本塊）等一系列定制的小部件（如社交媒體圖標和響應滑塊），您可以拖動到頁面的結構。 對于圖像，你可以使用GIF，JPG，PNG或SVG，以及為視網膜和高DPI顯示器優化的圖像。 您也可以將“嵌入”部件設計到添加自己的代碼。
設計
雖然Webflow的是拖放，經驗是不是很喜歡在Photoshop或Illustrator設計。 你建立的內容組合在一起更像是一個拼圖游戲，用典型的CSS屬性，例如定位padding ， margin和position 。
作為一個程序員，我明白如何有效Webflow的視覺顯示HTML結構和CSS屬性。 因此，工作的HTML和CSS的知識是必要的，而且第一次網站建設者可能會有點用幾個選項困惑，但是這是視頻的幫助是什么，以及內嵌幫助圖標（“？” ）無處不在。
說實話，樣式面板右邊，在那里你調整大部分的CSS屬性，也比較直觀，它處理的CSS屬性，如道路padding和margin是相當聰明。 CSS編碼人員可能會覺得它缺乏，并希望看到的代碼。 頁之間共享內容是相當簡單的 ，和一些SEO相關的內容，如標題和描述，可以為每個頁面進行設置。
定義你的響應式設計
當談到如何將內容實際響應瀏覽器的大小，Webflow的遵循業界最初是如何處理響應式設計：三個設備或斷點。 當您添加和設計的內容和領域，你可以決定哪些（三）設備的規格，它們將出現在。
您還可以輕松地預覽設計從界面中的三種尺寸。 目前，斷點是不可編輯的設計師，除非你加在儀表板您自己的代碼或導出代碼和編輯CSS的其他地方。
字體，媒體，表格和鏈接
- 字體
這些天來，主持字體是一個必須為任何自我尊重的設計師。 集成谷歌字體或從Typekit帳戶套件可在儀表板來完成，然后將這些字體將可以訪問在“字體”菜單中的設計區域。 - 媒體
添加媒體（包括或是Vimeo和YouTube視頻），非常的方便，太。 Webflow的使用Embedly從供應商的一個長長的清單中嵌入的內容。 - 表格
簡單的聯系表格也可，可設置和很容易設計。 您可以通過電子郵件發送的數據：剛剛從儀表板中的設置抓取的形式捕獲的數據，或鉤的形式，另一個腳本（或者只是插入您自己的表單代碼）。 - 鏈接
除了典型的連接選項（如網站的網頁，電子郵件和手機之間）的Webflow允許鏈接到您的網頁部分，具有自動插入錨之間平滑滾動。 還可以插入一個鏈接塊，這是內容與加到它的單個鏈路的區域。 你也可以很容易地通過他們的造型調整您的鏈接的外觀。
工作守則
與大多數其他工具，一些更先進的HTML和CSS的功能在默認情況下在工作區中隱藏的，但可以切換上。 如果你喜歡冒險的感覺，你也可以指定你自己的類內容，并重新命名，并在樣式管理器刪除它們。 如果你方便的使用代碼，你可以插入自己的head和body標記在儀表板。 這將打開大門，以添加自定義組件，像jQuery插件和更大量。
整合與CMS
Webflow的是目前靜態網站建設者，而不是依賴于一個內容管理系統（CMS）或博客系統。 你可以從你的Webflow設計導出代碼為出發點，以使用一個WordPress（或其他）的項目，甚至作為一個平面文件的CMS。 但一旦代碼被導出，它失去了它在Webflow的原始設計連接。
Webflow的一個有用的功能是保存網頁版本的能力 。 這些天來，我們大多數人誰開發網站為生使用某種版本控制的，所以在其最簡單的形式，我們可以恢復到早期版本，如果發生問題。 當Webflow的設計，你可以手動創建一個版本或離開它的Webflow自動每20節省創建一個。
還原點會在儀表板網站的設置來創建，并且可以在每個還原點添加備注。 然后，如果有事，你可以將整個文件（即網頁）恢復到先前保存的版本。 所以，自己寫一個音符每一個還原點來解釋其中的網址是是一個好主意。
出版和導出
發布到Webflow的內容交付網絡（計入成本）是非常簡單的，因為如果你喜歡拿其他地方的代碼是出口。 我可以想像幾種用途是：使用它來創建自己的靜態響應網站的人; 用它來演示一個響應式設計或導出的代碼，手頭寬裕的開發設計人員; 并使用生成的代碼塊在他們的項目開發。 的Webflow還使用戶能夠協同工作 （其中成本較高），包括通過分享模板，網站傳送給客戶等等。
使用Adobe邊緣回流CC
邊緣回流是邊緣工具和服務，使用Adobe近年來先后引進了家庭的一部分。 該系列包括邊緣回流，邊動畫和邊緣檢查，而且它是創意云，這是基于訂閱的一部分。 不像Webflow的，這是基于瀏覽器的，邊緣的回流是目前您下載并安裝到硬盤上的應用程序。 因為回流仍然是技術上的公共預覽模式 （例如一個測試這是提供給全世界），它不完全尚未出爐，并根據用戶反饋在未來的版本中的東西很可能會改變。
邊緣回流是一種設計工具，抓住了“在中間人”一個負責任的設計，這往往是很難移交時開了一個開發項目或提出設計概念到客戶端時傳達。 換句話說，邊緣回流使得Photoshop文件的響應友好。
積木
當開始回流中的一個項目，你可以按照以下方法之一。 您可以創建一個回流項目，其中包含您的網站的網頁，并從一個空白的畫布開始，可以這么說。 您可以導入網頁中的圖像和Photoshop的內容，然后建立自己的設計; 這樣做，你甚至可以將內容直接從一個Photoshop CC文件導入到你的項目中回流（版本14.1±只 – CS6和更早的版本將無法正常工作），如果Photoshop文件（PSD）已設置正確。
第三種方法是將回流項目從Photoshop CC（14.1 +）導出為出發點的響應式設計的回流。 這使您可以導入圖形，文本和您的Photoshop文檔中所定義的資產。 使用內置到Photoshop CC（14.1 +）發電機技術的基礎上，在Photoshop中的圖層名稱會自動生成Web優化圖像。 這種連接是回流的大賣點，對于我們這些誰依靠的Photoshop網頁設計之一。
設計
當涉及到設計，回流是相當類似于Photoshop和InDesign。 重新定位的元素在視覺上，而不是編輯CSS和HTML來移動它們。 回流也需要你在繪制設計空間包含元素，而不是將它們拖動的（如在Webflow的）。 該float: left聲明適用于回流焊的所有元素在默認情況下，這樣拖著內容，在頁面上可以是痛苦的開始。 再次，雖然，該應用程序需要你了解HTML和CSS的概念，因為大多數的布局相關的功能是基于他們。
為了幫助您設計，回流配備了一個可編輯的網格，它允許你編輯欄，排水溝和不透明度 。 每個響應斷點可以有不同的網格設置。 您可以創建多個頁面，并且最接近添加CSS是從一個元素復制并粘貼視覺樣式到另一個。 回流焊，您還可以訪問為基礎的CSS選項body風格（稱為“頁”）和包含分區（所有回流頁面都有）。
定義你的響應式設計
因為響應式設計是回流的目的，在生活中，有一件事，真正突出的是如何直觀地定義斷點。 在回流，整個反應譜表示（不只是三種設備的尺寸，如Webflow的）。 如果手機和平板之間的設計突破的部分，例如，你可以很容易地通過點擊一個按鈕，并進行必要的更改添加一個斷點。 回流焊甚至允許您設置最大和最小斷點??，這意味著你可以設計移動第一，如果你喜歡。
字體，媒體，表格和鏈接
- 字體
從Tyepkit帳戶字體可以很容易地在界面中使用，當您連接套件。 回流焊還帶有接入邊緣Web字體（中托管的Web字體來自Adobe，谷歌和其他的集合）。 - 媒體
因為除非你編輯生成的代碼，在邊緣回流添加媒體你不能注入自己的代碼是不可能的。 您可以設置一個占位符的媒體（如圖像），使用它作為一個視覺提示，用于生產網站。 - 表格
在回流，您可以添加一系列典型的表單元素，如按鈕，文本框和單選按鈕（等等）的。 這些插入表單元素在頁面中不會添加一個form標簽生成的代碼; 因此，表單元素并不意味著是功能開箱即用。 這再次提醒我們，回流是目前樣機工具，更適合用于創建概念驗證的設計比生成生產就緒代碼。 - 鏈接
在邊緣回流CC的最新版本中，您可以鏈接到該項目中，以及外部URL的網頁，以及像控制狀態hover和active在設計的任何對象。
整合與CMS
回流焊目前有沒有辦法用一個CMS，除非你把生成的代碼，做它的應用程序之外的自己集成。
工作守則
編輯代碼不回流的目的，因為它的意思是作為一個可視化設計工具。 然而，使用元素面板，你可以命名元素和組織代碼（即在DOM）中的層次結構，對你有意義（也許給你的開發人員）。 如果你想添加的東西像一個jQuery的幻燈片，平滑滾動或視頻，或將自己的HTML代碼，那么你需要編輯生成的代碼在另一個應用程序。
出版和導出
請記住，邊緣回流目前還沒有出口或發布功能。 當在預覽支持的瀏覽器的網站，回流生成HTML和CSS，但行內注釋警告你不要使用代碼在生產環境中。 在邊緣回流的論壇上的反應來看，這并沒有從停止嘗試的人 。 回流焊確實使您能夠復制并粘貼生成的CSS使用更下游您的實際網站。
對于里面看回流焊如何產生的，檢查出亞倫Shekey帳戶的過程 。
金剛鸚鵡
在現場的最新應用是金剛鸚鵡，它只是向公眾發布了1.0版3月31日。 金剛鸚鵡被定位為一個網頁設計工具，還寫語義化的HTML和CSS。 我覺得標語說，這一切，“停止寫代碼，開始繪制它?！毕襁吘壍幕亓?，金剛鸚鵡也是您下載并安裝到硬盤上的應用程序，并連接到一個注冊的帳戶。 但不像Webflow的和邊緣回流CC，沒有月租費。 您只需支付一次性的價格。
花了幾天的金剛鸚鵡后，我可以告訴你，它有很大的潛力作為一個負責任的網頁設計工具。 那是說，這是一個非常令人印象深刻的1.0版，完全用一些錯誤的好方法。 我來自一個網絡的背景，我可以說，界面很直觀，但我發現自己缺少像右鍵單擊上下文菜單的基本功能和變焦。 但考慮到極少數人踢這個東西了，不是一個大公司，讓我印象深刻。
積木
當您啟動一個金剛鸚鵡的項目，你面對的是一個空白頁，這是你的設計畫布。 你可以開始添加設計元素到頁面導入的圖像和添加文本框和格式跟他們一起去，或者你可以直接進入補充說，你可能希望使用斷點。 金剛鸚鵡的界面非常簡單，和一般的設計師真的不會需要很長時間來破譯那里的東西 – 那就是，只要有工作的HTML和CSS的知識。
像回流，金剛鸚鵡是非常類似于Photoshop和InDesign在其設計的方法。 你畫和重新定位的元素在視覺上，而不必編輯CSS和HTML。 流是計算所有將您的設計元素在靜態文件的流動性的引擎的名稱。 正如Webflow的和回流，你需要了解HTML和CSS的概念，因為大多數的布局功能是基于他們。
設計
金剛鸚鵡有什么似乎是一個非常有用的功能，稱為視圖模式，這表明你的頁面為“正?！?，“大綱”或“線框”的設計元素，因為我們很多人將使用金剛鸚鵡作為一個線框和實體模型工具，看到內容為黑色輪廓（“綱目”）或灰色框（“線框”）會有所幫助。
定義你的響應式設計
在邊緣回流一會兒工作過，我很驚奇地發現，類似金剛鸚鵡的工作空間是。 像回流，金剛鸚鵡可以讓你直觀地定義斷點，雖然它的界面是不是華而不實的回流在我看來。 整個反應譜表示（不只是三種設備的尺寸，如Webflow的）。
如果斷點之間的設計突破的地方，您可以輕松地添加一個斷點，并進行必要的更改。 可悲的是，金剛鸚鵡目前不允許移動的第一個設計，因為你不能設置max和min斷點。 DOM中也被鎖定在較小的斷點，使您無法添加內容（這些工具甚至變灰）。 但是，人們都在喋喋不休金剛鸚鵡的論壇， min-width斷點（移動先行的設計）都來了。
字體，媒體，表格和鏈接
- 字體
谷歌網頁字體都集成在工作區中，您還可以通過連接你的帳戶在設計領域的“字體”菜單中訪問Typekit字體。 - 媒體
目前，金剛鸚鵡不提供簡單的方法來插入媒體如YouTube視頻。 你可以，但是，插入一個占位符元素，并配合一些JavaScript給它，使用“腳本”面板。 - 表格
金剛有各種典型形式的元素，包括按鈕，文本框和單選按鈕，可以添加到一個設計的。 正如回流，這些都是視覺表示形式，而不是創建一個實際的工作形式。 如果你喜歡冒險的感覺，你可以將表單元素結合在一起，并切換到該標簽form在大綱編輯器。 這將至少給你一個函數形式的積木，如果你打算使用生成的代碼在您的網站制作。 - 鏈接
您可以在“鏈接”菜單鏈接類型鏈接到一個項目中創建的頁面，以及。
工作守則
最接近的代碼有金剛鸚鵡的工作（除了編輯出版的代碼）編輯元素在大綱面板，這是DOM的表示。 在大綱面板，你可以改變HTML標簽，鳥巢和重新排序的內容，應用CSS名稱等等。 您還可以創建全局樣式（CSS），可以應用到您的內容。
整合與CMS
像回流，金剛鸚鵡不會與CMS集成。 有些人在金剛界正試圖找出工作流程從金剛到WordPress的（和其他平臺），但沒有直接的聯系呢。
出版和導出
金剛鸚鵡有通向一個預覽窗口中的發布選項。 不像回流，金剛鸚鵡提供了導出選項，在“發布設置”。在對話框中出現，您可以選擇要導出的頁面，注入代碼（如谷歌分析）到head或body ，量身CSS您的需求（通過寫速記，增加供應商的前綴，鞏固款式等），生成高清晰的屏幕和更優化的圖像。
該設置告訴你，生成的代碼是不是作秀。 一旦發布，你都考慮到一個預覽窗口，在這里你可以查看所有的代碼（HTML，CSS，JavaScript的），甚至進入預覽頁面在您的默認瀏覽器。 三個應用程序中，金剛鸚鵡的代碼是最簡潔和最親密的到什么是前端開發實際上可能寫的。
結束語
下面是每個應用程序的最重要功能的快速綜述。 它不包括一切，我們已經討論了（要不然我早就只是頁面上的表格耳光，并把它稱為一天）。
| Webflow的 | 邊緣回流CC | 金剛鸚鵡 | |
|---|---|---|---|
| 價格 | 每月訂閱首發$ 14 | 為的Adobe Creative云（部分包月 ） | 179美元 （ 沒有月費計劃） |
| 托管 | 包括（每個計劃都有不同的特征） | 五個網站所包含的創意云認購，但邊緣回流目前不能導出到Adobe網站托管。 | 無 |
| 代碼質量 | 產品質量目前使用Normalize.css（2.1.3版本），Modernizr的和jQuery（1.11.0版本），連同其自己的圖書館。 代碼比較干凈，用來代替一噸ID的類。 一個基本的CSS文件時，你的修改都保存在一個單獨的文件。 | 測試質量： 代碼，目前只對WebKit的瀏覽器（Chrome和Safari瀏覽器）進行了優化。 從HTML5樣板的CSS是基礎，沒有JavaScript庫的使用。 該代碼有很多的ID，并且不允許您輕松地重復使用的樣式，當你直接編輯代碼。 被清理后，該代碼可以作為一個起點。 | 產品質量： 版本）和jQuery（版本1.8.3）的使用。 代碼比較干凈，用來代替一噸ID的類。 一個基本的CSS文件中被使用，并且每一頁都有網格設置一個單獨的CSS文件。 您的修改都保存在一個單獨的CSS文件。 |
| 響應式設計 | Webflow的有你設計的三個設備（或斷點）。 當你創建的內容和領域，你可以決定他們應該會出現。目前三者的器件尺寸，斷點是不可編輯的應用程序中。 | 添加和編輯是視覺。 整個響應頻譜表示。 添加斷點的方法是單擊按鈕并進行更改一樣簡單。 你甚至可以設置max和min斷點，這意味著你可以設計移動第一。 |
金剛鸚鵡可以讓你直觀地定義斷點，整個反應譜表示。 你可以不設置max和min斷點，并且不支持這樣的移動先行的設計。 DOM的鎖定在低斷點，導致您無法添加內容。 |
| 字體 | 谷歌字體集成，并從您的Typekit帳戶套件可在儀表板連接。 | 從Typekit的套件可以集成 。 它還提供了訪問邊緣Web字體集合。 | 谷歌字體都集成的工作區，您可以通過連接你的帳戶訪問Typekit字體。 |
| 媒體 | 添加媒體（或是Vimeo，YouTube等） 相當容易。 Embedly用于從供應商的一個長長的清單中嵌入的內容。 | 因為你不能在應用程序中注入自己的代碼，添加媒體是不可能 。 | 插入媒體，如YouTube視頻，是不容易呢。 你可以，但是，插入一個占位符元素，并配合一些JavaScript給它，使用“腳本”面板。 |
| 表格 | 簡單的聯系表格可和易于設置和 您可以通過電子郵件發送的數據或鉤的形式到另一個腳本（或只需插入自己的代碼）。 | 您可以添加典型的表單元素，但一個form標簽將不會被添加到生成的代碼。 的形式只是一個占位符，并不意味著能夠發揮作用。 |
您可以典型的表單元素，但它們多為視覺設計，而不是實際的工作形式。 |
| 用代碼工作 | 先進的HTML和CSS的功能都隱藏默認，但可以切換上。 您可以指定類內容，并重新命名，并在樣式管理器刪除它們。 您還可以插入自己的head或body標記。 |
編輯代碼是不是的選項。 您可以命名的HTML元素，統稱分配CSS樣式并組織成DOM的層次結構。 外部代碼不能被注入到內回流的一個項目。 | 最接近代碼工作正在改變HTML標簽，嵌套和重新排序的內容，應用CSS名稱等。 您也可以使用全局樣式的內容并生成類。 |
| CMS的整合 | Webflow的是一個靜態的網站建設者和不配合CMS或博客平臺。 你可以，但是，保存網頁版本。 | 沒有整合 | 沒有整合 |
| 發布和導出 | 發布到Webflow的內容交付網絡（計入成本）是非常簡單的，因為如果你喜歡拿其他地方的代碼是出口。 | 邊緣回流CC目前還沒有出口或發布的支持。 HTML和CSS當您預覽生成，但它們不能用于生產。 您可以復制并粘貼生成的CSS。 | 出版社授予購股權，以各種設置。 該代碼是最簡潔和最親密的到什么是前端開發實際上可能寫的。 |
這些響應式設計工具很可能在這里留下以某種形式或其他。 自從移動設備來到現場，我們一直在試圖配置我們的工作流程，以適應響應的設計。 這些工具有可能彌合這一鴻溝使用，也可以作為一個起點，前端設計或簡單的線框圖和原型時。
正如你所期望的，我已經看到人們試圖建立使用回流焊大基于CMS的網站，然后抱怨，當他們不能注入自己喜歡的響應幻燈片或哀嘆，代碼是不是他們會寫什么。 請介意，金剛鸚鵡和回流都意味著是一個工作流，而不是開頭和結尾的部分。通過使用這些工具，因為它們的目的（而不是強迫他們進入我們的工作流程），我們可以跨越響應的門檻，有可能挽救自己和我們的客戶的時間和頭痛。
