Adobe 發布的網頁設計工具 Muse 怎麼樣?
Adobe 發布了新的網頁設計工具 Muse beta 版, Muse 希望幫助設計師完成網頁的交互設計,而無需了解過多的代碼。它支持HTML5、CSS3的複雜頁面,也能夠方便嵌入 Google map、YouTube 等代碼並預覽。從之前 DW 重視頁面實現轉向了頁面交互設計。http://muse.adobe.com
斷斷續續花了三個禮拜的時間,終於用muse把網站頁面做好了,這裡正好來總結一下。大家可以訪問 index來體驗。
當時起因是看到了產品經理導航想到能不能做一個以產品為導向的信息展示網站,後來詢問了在知乎上結識的徐開源同學KyXu,得知了muse這一神器。
剛開始畫了一點點,又從知乎上結識了衛星學姐衛星(交流了近一個月還不知學姐真名),當時她在畫一個產品分類的腦圖,把我的想法說給她後她簡單畫了一下,我自己覺得並不是我腦中的樣子,於是畫了個這樣的圖給她。(抱歉第一次用Mind Manager,質量較低)(最開始是叫社交網路研習社)
因為也在找實習工作,經常逛逛拉勾網,覺得拉勾的的登錄界面雖然沒有什麼特色,但還實用,於是便模仿其做了登錄界面,又在UI中國和站酷上看了些別人的素材,也看了包括花瓣、堆糖等網站自己的登錄界面,前後改了三次,加入了我自認為簡約並扁平的理念。(其實用戶協議也是大量抄的拉勾網的)
點擊提交就進入首頁:
顏色最開始就是在花瓣網找了個五色的配色卡,logo和個人頁那裡的幾個圖標都是Adobe ps自己畫的。圖標,模仿的github,目標或者說大餅也就是產品領域的github,這是一個倒立並半開的盒子。(寓意就不過多解釋了)
好像一直沒有說muse的事,插幾句小細節吧。muse的智慧型參考線有點像我所熟悉的auto cad的對象捕捉,但是開關就沒有auto那麼簡單了,居然在偏好設置裡面。當我選擇把矩形1和矩形2在某個方向對齊後,再移動矩形1,矩形2也會跟隨其移動,並且我所見的都是看起來無規律的移動。
還有關於預示,「設計」旁那個「預示」就是在muse中預示,而在瀏覽器中預示關聯到microsoft的某個查看器後與預示效果是不一樣的,特別是文字框內的換行,大概由於其換行符寫入的不規範,比如說按一次enter就寫一個&
剛找到圖了,登錄頁原本是這個樣子:
這是上傳頁:
好吧,本來我是想通過縮放把整個界面截圖下來,就在剛剛,我終於明白Chorme的換行問題了,原來我常年設置的90%顯示,錯怪了chorme,自己逗比了!不過也說明了關於縮放的問題。
最後說一下這個欄目:
大概就是這些了,更多的有興趣的還是通過訪問文初的鏈接,或者手動輸入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里那些常用的
推薦閱讀:
※層級式與節點式究竟差異在哪裡,還有各自的優勢劣勢在哪裡?
※Project Felix逆天神器!助你玩轉3D
※Indesign 混合油墨組