google也推網頁設計工具-Google Web Designer

google web designer logo

是的!你沒有看錯,Google竟然也推出了一套網頁設計工具,還號稱在任何一個裝置上都能正常瀏覽! Web Designer是由google推出的視覺化網頁設計工具,不僅可以直接相會圖軟體一般繪製出向量幾何圖形,還能自動產出對應的Javascript以及CSS原始碼,看起來頗有繪圖軟體的味道,經過Amos簡單的試玩了一下,感覺有一點點Adobe Muse的味道,但目前還遠遠遠遠的不足就是了.
google web designer
Google web desigener 使用HTML5以及CSS3技術,號稱可以讓你輕鬆視覺化編輯,但如果需要撰寫原始碼的話,則可以切換到原始碼檢視模式去編輯.

兩種動畫編輯模式

在編輯動畫時,google web designer提供兩種動畫編輯模式-快速/進階,你可以依據你的工作需求來使用不同的編輯模式以節省制作時間.
advanced view

全3D製作環境

google web designer擁有簡單快速的3D工具,可以讓你以視覺化的編輯方式來制作3D畫面,包含動畫效果.
3d view

簡易的廣告工作流程

Google web designer提供了一系列的現成元件,讓你可以直接取用,不用辛苦的撰寫原始碼,不過元件只有在廣告頁面檔才能使用喔。一般的HTML頁面是不能使用的(會呈現灰色)。
easy_workflow

試玩時間

看完了官方的介紹,當然就是要來試玩看看了,首先打開Google web designer之後,整個介面就跟Adobe CS6之後的版本一樣都黑漆媽烏的,說實在的Amos不是很喜歡這樣的配色,因為感覺眼睛要看的更加的吃力,是只有Amos有這感覺嗎?不然怎麼他們這麼愛用的黑黑的呢?不管如何,先從開啟一個新檔開始吧!
google web designer add new file
接著會出現新檔案的設定,看你是要哪一種檔案格式。目前看到有HTML、CSS、JAVASCRIPT、XML四種格式,至於google廣告Amos沒有測試,再來是設定頁面標題(title)、檔案名稱、位置以及動畫編輯模式,如同前面所說的,動畫模式分為快速以及進階兩種,這邊要注意的是,如果選了快速模式,之後要切換成進階模式是ok的,但是如果一開始就選到進階模式,後面就無法改成快速模式囉。(點圖可見大圖)
google web designer new page
google_web designer new page screen
開啟完新檔之後當然要來畫圖看看啦~左手邊是工具列,畫面上可以看到有鋼筆工具可以用,右手邊則是五大面板,有色彩、屬性、元件、活動、CSS這五種面板,簡單的來看,這些面板跟我們常用的繪圖軟體非常類似,所以不需要花太久時間就能快速上手了,CSS面板個人覺得不大好用,加上右邊面板其實蠻大的,空間佔掉不少,最多只能同時間打開四個面板而已,實用度實在太弱了。(點圖可見大圖)
google web designer design view

google web designer pen tool
可以看到右邊屬性面板的設定,這邊其實也沿用了拖拉設定法,只要在數值的區域按著滑鼠橫向拖拉就能快速的修改該欄位的數值,這功能Amos超愛的,想當初Photoshop有此功能而illustrator卻沒有此功能時,每次用illustrator總是會手卡卡的說。
google web designer edit size
下方則可以切換「設計檢視」或者是「程式碼檢視」,其實Amos一直覺得翻譯的很怪的是,許多軟體都把「原始碼檢視」翻譯成「程式碼檢視」,但是html跟CSS都不算是「程式」阿~個人認為應該要翻譯成「原始碼檢視」才對,可是似乎連Dreamweaver都還沒有人去反應過,真是奇怪?(點圖可見大圖)
google web designer code view
既然整個看過了,漂亮醜醜的圖也畫好了,那就開始來製作動畫吧,點選到畫出來的物件之後,在下方時間軸面板的位置直接按面板上大大的「+」號,Google web designer就會幫你加一個關鍵影格,你只要在下一張關鍵影格中,點選頁面上的物件並且移動就好了,這作法基本上有點像是Flash的「移動補間」模式,這樣應該很容易理解吧!
google web designer animation
動畫做好後,來看看原始碼,google web designer的確都幫我們把原始碼產出來了,有CSS3 animation的keyframes,transform則使用了matrix方式設定,看的我好暈阿@@,而向量圖形則是使用了javascript的canvas繪製出來的。
google web designer animation code
動畫製作好了當然就是要發佈來看看囉,發佈前其實可以先按視窗下面的播放箭頭做預覽,確定都沒有問題了,就到檔案功能表中去選擇「發佈」了,此時跳出的發佈視窗中,「名稱」欄位的設定是你要產出的資料夾名稱,位置欄位我就不用說明了,其他項目就隨意勾選吧,Amos還沒有特別去測試過。
google web designer publish
發佈完的檔案13K
google web designer final page
如果各位想看最後的成品的原始碼的話,請看此Demo頁面
如欲下載,請至Google web designer官方網頁下載