Adobe 發布的網頁設計工具 Muse 怎麼樣？

02-09

Adobe 發布了新的網頁設計工具 Muse beta 版， Muse 希望幫助設計師完成網頁的交互設計，而無需了解過多的代碼。它支持HTML5、CSS3的複雜頁面，也能夠方便嵌入 Google map、YouTube 等代碼並預覽。從之前 DW 重視頁面實現轉向了頁面交互設計。http://muse.adobe.com

斷斷續續花了三個禮拜的時間，終於用muse把網站頁面做好了，這裡正好來總結一下。大家可以訪問 index來體驗。

當時起因是看到了產品經理導航想到能不能做一個以產品為導向的信息展示網站，後來詢問了在知乎上結識的徐開源同學KyXu，得知了muse這一神器。

剛開始畫了一點點，又從知乎上結識了衛星學姐衛星(交流了近一個月還不知學姐真名)，當時她在畫一個產品分類的腦圖，把我的想法說給她後她簡單畫了一下，我自己覺得並不是我腦中的樣子，於是畫了個這樣的圖給她。（抱歉第一次用Mind Manager,質量較低）（最開始是叫社交網路研習社）

於是一個內燃機專業的產品小白漫長的網頁設計拉鋸戰開始了。改了一遍又一遍，最終是這個樣子。

登錄頁：

最開始是抄知乎的登錄頁，將個人信息輸入框放在中間，整體設計也90％一樣，後來發現知乎的登錄頁之所以能夠在簡潔而不簡陋，在於其動態背景的襯托。於是用Firefox copy下知乎該頁面的源碼，想用Adobe dreamwevear改一改文字、顏色和logo等，才明白圖片都是調用的，拋去各種調用單純的html只是個極其簡單的輸入框。於是放棄模仿知乎。

因為也在找實習工作，經常逛逛拉勾網，覺得拉勾的的登錄界面雖然沒有什麼特色，但還實用，於是便模仿其做了登錄界面，又在UI中國和站酷上看了些別人的素材，也看了包括花瓣、堆糖等網站自己的登錄界面，前後改了三次，加入了我自認為簡約並扁平的理念。（其實用戶協議也是大量抄的拉勾網的）

點擊提交就進入首頁：

實話講至今我只會給文字和按鈕添加鏈接，包括上面的登錄和註冊的切換都做不出。首頁還是很想知乎，甚至第一版也是主菜單純藍色背景，頁面為白色。後來改動的分塊明顯起來，文字也變少（包括用顏色來區分排行的123和後幾名，而不是標上數字），感覺不再使用知乎的風格，最終選擇了主菜單抄花瓣網，下面的頁面抄新浪微博，菜單的按鈕還是抄知乎。

顏色最開始就是在花瓣網找了個五色的配色卡，logo和個人頁那裡的幾個圖標都是Adobe ps自己畫的。圖標，模仿的github，目標或者說大餅也就是產品領域的github，這是一個倒立並半開的盒子。（寓意就不過多解釋了）

好像一直沒有說muse的事，插幾句小細節吧。muse的智慧型參考線有點像我所熟悉的auto cad的對象捕捉，但是開關就沒有auto那麼簡單了，居然在偏好設置裡面。當我選擇把矩形1和矩形2在某個方向對齊後，再移動矩形1，矩形2也會跟隨其移動，並且我所見的都是看起來無規律的移動。

還有關於預示，「設計」旁那個「預示」就是在muse中預示，而在瀏覽器中預示關聯到microsoft的某個查看器後與預示效果是不一樣的，特別是文字框內的換行，大概由於其換行符寫入的不規範，比如說按一次enter就寫一個&

剛找到圖了，登錄頁原本是這個樣子：

很滑稽。

首頁更是這個樣子：

總之最開始腦袋裡只有這樣簡單的界面，這是一個從0到1的過程，雖然哪怕最終版對於大家來說也只有從0到了0.3。

點擊某個產品進入界面這樣，這是Chorme的效果，裡面體驗和關注那裡換行就除了問題。

然而firefox就沒有這個問題，並且效果要比chorme好很多。比如矩形框內首行文字與線框的上間距。

右邊的體驗框，很顯然它一定要以彈窗的形式出現才對，可惜沒有找到如何實現。並且請相信，我沒有那麼粗心讓該框內的「pc」"ios"等的按鈕遮住「下載」文字，很可惜在瀏覽器中它確實是這個結果。

這是上傳頁：

把它單獨摘出來是想說域名的問題，我原以為它的域名會是index/uplode，就像規劃里的層級結構一樣：

包括最底層的cfollowers，（公司的關注者），應該是/demo/index/productbox/product/company/cfollowers，可它就是/demo/cfollowers，不是很明白這個層級結構的作用。感覺需要我自己在主機空間的後台文件管理器中不停的建立子文件，並且將網站拆分成多個網站再上傳。

設置界面：

這個是通過瀏覽器縮放，67％，看起來很糟？再縮放到33％，簡直崩潰。

好吧，本來我是想通過縮放把整個界面截圖下來，就在剛剛，我終於明白Chorme的換行問題了，原來我常年設置的90％顯示，錯怪了chorme，自己逗比了！不過也說明了關於縮放的問題。

最後說一下這個欄目：

最開始是想像36kr那樣做新聞，所以最開始的排行會是「知乎」、「豌豆莢」和「36kr」，這與最初想法相關，本來是看到產品經理導航才開始做的，想著文章跳轉到知乎、下載跳轉到豌豆莢、新聞跳轉到36氪，這個網站製作刪選和展示。但是後來想的就多了哈。

欄目在瀏覽器填色還在純白的時候，是抄簡述的文章顯示方式，現在也能看出來，配圖在標題右側，並且相對虎嗅或36氪更小。然後分隔方式為灰色的橫線，橫線就是很細的矩形，因為muse居然沒有插入橫線！（簡書是虛線）。

大概就是這些了，更多的有興趣的還是通過訪問文初的鏈接，或者手動輸入jianxue.ren/demo來看吧。（千萬不要點「關於產品盒子」，全是我瞎掰的）（我的聯繫方式在「聯繫我們裡面」）

萬一真的有人瀏覽到了這裡，你們注意到了首頁測試版體驗里的那幾個產品了嗎？一頁書是學長做的，這裡打個小廣告，微知和AA是我前一段時間畫的APP原型，and大面積的出現微信，因為迷戀小龍君啊。嘿嘿，老實講這個AA和前幾天google io16里的Allo有一點很像，只不過我畫的放大文字方法是點擊一個固定按鈕，一點點的放大，看了Allo之後才頓時懵逼，並沒有一個Alt鍵使其縮小。我是想還原現實聊天場景中的 speak louder，殊不知還有lower，，，哎，也是，幾個月不和異性說話了。

沒有用過，但從 Muse 生成的代碼質量來看( view-source:http://muse.adobe.com/index.html ) ，我們這些前端工程濕現階段還不至於失業……

還有如果用 Muse 生成一個站點，之後的維護成本將會很高吧。

個人感覺這個軟體不像是專業製作網站的，專業做網站當然還是dw。網站製作方面的話，有專門負責頁面設計的，通過html5,CSS3,js,jQuery等實現的做後台處理的等。設計頁面的美工如果僅僅通過一個psd的靜態圖的話可能很難描述一些抽象的東西，如果通過muse來製作的話，用來表現一些抽象的東西效果會更好一些。然後至於代碼的兼容性，規範性等問題可以交給編程人員去做，因為各種效果已經很直觀的顯示出來了。

我公司的網站是用muse做的，http://www.tianrendesign.com，你可以看看，我覺得挺好用的，就是沒有上傳和文章系統。

我也想問一下，我剛用adobe muse 做好了網站，我是發布到FTP主機上，還是business catalyst?我不清楚如何掛到網上，請問一下誰能回答我的問題？

wigdet太少了，最好能有axure里那些常用的