以下3個工具能讓程式猿下崗，題主學會了就再也不用受氣啦，下面就詳細介紹下這幾個讓設計師擺脫程式碼揚眉吐氣的工具！一、Adobe Muse它支援HTML5、CSS3的複雜頁面，也能夠方便嵌入 Google map、YouTube 等程式碼並預覽。Muse 希望幫助設計師完成網頁的互動設計，不需要敲程式碼也可以製作、釋出網站。先看看他的操作介面，首先是“計劃”介面，是負責頁面的數量和層級的。當建立多個頁面的時候，就會出現我們熟悉的樹狀圖。然後就是“設計”介面，個人感覺跟AI介面比較接近，非常好上手。Muse的構件庫裡面有一些現成的比如選單、照片播放、社交媒體插入、表格等控制元件，方便直接呼叫。另外Muse支援響應式網頁設計，從而讓網頁適配在不同的螢幕上，大大降低了程式設計師和設計師的工作量。細心的朋友可能有發現上圖說明有一項叫做“流動寬度（Fluid Width）”，如果想要設計響應式網頁，就選擇這個選項。網頁就會根據瀏覽裝置自己進行調整。有興趣的可以自行百度一下，但遺憾的是Adobe在5月31日釋出了Adobe Muse終止服務的說明，不再新增功能，並將於 2020 年 3 月 26 日停止支援。二、i-TOP定製H5編輯器這是i-TOP創意共享平臺自主研發的一款H5編輯神器，是一款無需程式碼即可完成定製級作品的線上H5製作工具。文字、圖片隨意切換，透過狀態集、時間軸、形狀遮罩及動態精靈等高階功能實現自由編輯操作，一個人就可以快速生成高階H5。換言之，這個編輯神器把原來H5開發過程中所需要的程式碼程式設計部分全部轉化為傻瓜式的視覺化操作了，任意設計師都能輕鬆駕馭。到底能做出怎樣水準的作品呢？市面上一些刷屏的定製級H5，設計師用這個工具一個人就能做出一模一樣的效果。下面就模仿網易《遊園驚夢》H5，來講解以下這款H5編輯神器的操作。歡迎大家先自行搜尋體驗一下這款翻頁H5——這樣在接下來的講解中你才能體會到i-TOP定製H5編輯器是怎麼高精度把它還原的~接下來表演時間到——我們先做第一頁，首先把背景和開場動畫的月亮、人物素材新增到畫板中。（所有的圖片素材都由我們設計師事先做好了上傳到素材庫，方便在此操作演示直接呼叫）接下來，新增文字，並且給文字設定動畫出場效果及時間。再接著，從圖片素材庫中找到定格動畫的人物、倒影等素材，新增到畫板。選中素材後即可製作右側設定動畫效果和時間，預覽效果，再點選儲存，第一頁就完成啦！來，跟原來的H5截圖對比一下，是不是一模一樣？接下來做第二頁，同樣的步驟，新增背景、人物等元素，調整位置，設定動畫。在設定整個背景左移的動畫及文字效果，第二頁完成。再跟原H5對比看看，你分得出哪個是原作品哪個是複製品？好了，演示就到這裡，有興趣的可以上i-TOP官網去摸索，官網上就有這個影片教程的。三、Sketch2Code前不久，微軟也推出了開源Sketch2Code，不得不說AI界的角逐越來越激烈了。這是一種基於Web 的解決方案，它可以將使用者介面的圖片轉換為可用的HTML 程式碼。現在我們就來體驗了一下。首先，使用者上傳自己的草圖到網站上。很快，Sketch2Code就識別草圖生成了html頁面，超讚的有有木有！這時候下載這個html頁面再用Sublime text開啟，就能看到輸出的程式碼。此外，Sketch2Code還能把將草圖中影象的位置、類別等識別並標記出來，點選生成頁面上的“Predicted object details”就可以檢視，簡直666！更多功能題主可以到官網上試試哦。有了上面這幾個去程式碼神器，程式猿哥哥可以回去歇著啦，設計師們可以擊掌狂歡了！再也不用跟程式猿幹架啦！
以下3個工具能讓程式猿下崗，題主學會了就再也不用受氣啦，下面就詳細介紹下這幾個讓設計師擺脫程式碼揚眉吐氣的工具！一、Adobe Muse它支援HTML5、CSS3的複雜頁面，也能夠方便嵌入 Google map、YouTube 等程式碼並預覽。Muse 希望幫助設計師完成網頁的互動設計，不需要敲程式碼也可以製作、釋出網站。先看看他的操作介面，首先是“計劃”介面，是負責頁面的數量和層級的。當建立多個頁面的時候，就會出現我們熟悉的樹狀圖。然後就是“設計”介面，個人感覺跟AI介面比較接近，非常好上手。Muse的構件庫裡面有一些現成的比如選單、照片播放、社交媒體插入、表格等控制元件，方便直接呼叫。另外Muse支援響應式網頁設計，從而讓網頁適配在不同的螢幕上，大大降低了程式設計師和設計師的工作量。細心的朋友可能有發現上圖說明有一項叫做“流動寬度（Fluid Width）”，如果想要設計響應式網頁，就選擇這個選項。網頁就會根據瀏覽裝置自己進行調整。有興趣的可以自行百度一下，但遺憾的是Adobe在5月31日釋出了Adobe Muse終止服務的說明，不再新增功能，並將於 2020 年 3 月 26 日停止支援。二、i-TOP定製H5編輯器這是i-TOP創意共享平臺自主研發的一款H5編輯神器，是一款無需程式碼即可完成定製級作品的線上H5製作工具。文字、圖片隨意切換，透過狀態集、時間軸、形狀遮罩及動態精靈等高階功能實現自由編輯操作，一個人就可以快速生成高階H5。換言之，這個編輯神器把原來H5開發過程中所需要的程式碼程式設計部分全部轉化為傻瓜式的視覺化操作了，任意設計師都能輕鬆駕馭。到底能做出怎樣水準的作品呢？市面上一些刷屏的定製級H5，設計師用這個工具一個人就能做出一模一樣的效果。下面就模仿網易《遊園驚夢》H5，來講解以下這款H5編輯神器的操作。歡迎大家先自行搜尋體驗一下這款翻頁H5——這樣在接下來的講解中你才能體會到i-TOP定製H5編輯器是怎麼高精度把它還原的~接下來表演時間到——我們先做第一頁，首先把背景和開場動畫的月亮、人物素材新增到畫板中。（所有的圖片素材都由我們設計師事先做好了上傳到素材庫，方便在此操作演示直接呼叫）接下來，新增文字，並且給文字設定動畫出場效果及時間。再接著，從圖片素材庫中找到定格動畫的人物、倒影等素材，新增到畫板。選中素材後即可製作右側設定動畫效果和時間，預覽效果，再點選儲存，第一頁就完成啦！來，跟原來的H5截圖對比一下，是不是一模一樣？接下來做第二頁，同樣的步驟，新增背景、人物等元素，調整位置，設定動畫。在設定整個背景左移的動畫及文字效果，第二頁完成。再跟原H5對比看看，你分得出哪個是原作品哪個是複製品？好了，演示就到這裡，有興趣的可以上i-TOP官網去摸索，官網上就有這個影片教程的。三、Sketch2Code前不久，微軟也推出了開源Sketch2Code，不得不說AI界的角逐越來越激烈了。這是一種基於Web 的解決方案，它可以將使用者介面的圖片轉換為可用的HTML 程式碼。現在我們就來體驗了一下。首先，使用者上傳自己的草圖到網站上。很快，Sketch2Code就識別草圖生成了html頁面，超讚的有有木有！這時候下載這個html頁面再用Sublime text開啟，就能看到輸出的程式碼。此外，Sketch2Code還能把將草圖中影象的位置、類別等識別並標記出來，點選生成頁面上的“Predicted object details”就可以檢視，簡直666！更多功能題主可以到官網上試試哦。有了上面這幾個去程式碼神器，程式猿哥哥可以回去歇著啦，設計師們可以擊掌狂歡了！再也不用跟程式猿幹架啦！