Adobe Muse CC 心得


「Adobe Muse CC 是為了想要建立網站但不想撰寫程式碼的設計師而設計。」官網開章明義就直接寫了這句話。好吧如果是為了不會手寫Code的設計師、只需要產出一些不需要套用程式的網站的話,Muse 是滿有吸引力的。(先不提它產出的 Code 很噁心這件事…)

CC 一出我就衝去把所有新的 app 都抓來試用,滿心期待它能簡化 Responsive Web 的開發,不過主推 Responsive 是 Edge Reflow,強調網頁互動的是 Edge Animate,看來 Muse 被定位成進化過的 Frontpage 斷腿版吧,太專業會打到 Dreamweaver…

回過頭來想想我自己的工作流程…

  1. Functional Map,XMind。
  2. UI Flow,XMind。
  3. Wireframe,手繪。
  4. Wireframe,Balsamiq。
  5. Mockup,photoshop。
  6. Prototype,Keynote、photoshop。
  7. HTML、CSS,Sublime。

Prototype 第一要件就是「會動」,就算是 Wireframe 只要有互動性就可以稱做 Prototype。

線框稿 > 不能操作、靜態 = Wireframe
線框稿 > 可以操作、會動 = Prototype
漂亮的畫面 > 不能操作、靜態 = Mockup
漂亮的畫面 > 可以操作、會動 = Prototype

1. Muse 做出來的 Prototype 無法直接當成最後產出。

客戶如果要求修改就得修改兩份檔案。Muse 改完後、得回過頭去改 PSD 檔。而且最終還是得回到 PSD 上切圖、手寫產出 HTML。那為什麼要多花一份工?直接用 photoshop 產生切片設 Link 能更快產出 Prototype。如果是為了樹狀圖功能,可以把做好的 Mockup 扔回 UI Flow 就有圖片版的 Flow 了。

2. 完成 Wireframe 後跳過 Photoshop,直接用 Muse 產出。

測了一下,Muse 沒辦法直接吃 PSD 檔轉成 HTML,在避免重工的情況下如果放棄使用 photoshop 之類的軟體製作 Mockup,Wireframe 畫完就開 Muse 直接取代 Photoshop 製作稿件、直接產出 HTML…但這就不是 Prototype 了啊。

3. Muse 修改容易。

如果沒有版本控管、多方人士可以隨意自行修改檔案的話會產生非常恐怖的後果…(抱頭)

4. Muse 不支援 Retina。

非常誇張的鋸齒邊緣,MBPR 上連開啟舊檔視窗和所有文字都是糊的。

5.不能拿 Muse 產出的檔案給工程師…

不管是 PS 還是 Muse 最後產出的檔案,拿給 F2E 只會讓他們吐血, 可以隨便打開官方推薦用 Muse 產出的網站、右鍵、檢視網頁原始碼感受一下。http://muse.adobe.com/site-of-the-day (難怪要強調 Muse 可以操作 SEO。 )

結論

如果是不會寫 Code 的 網頁設計師 視覺設計師,做的網站又不需要和工程師合作,Muse 這套軟體可以納入考慮使用的範圍,不過 Dreamweaver 彈性還是比較大…好吧我實在搞不懂這套軟體夾在 Edge Reflow、 Edge Animate、Dreamweaver 中間主要是為了什麼?感覺上就是個和 80 級時代的神聖新星差不多的東西…打不痛怪補血又杯水車薪的 AE 技、帶新手刷監獄用洗 EXP 專用…

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
Note:Prototype 製作軟體

最近在找做 Prototype 的軟體或服務,狂測了一堆眼都花了。 Prototyping Tools 搜集很多做 Prototype 的工具,我還沒把每一款都摸過,先筆記有沾水的部份。可能某些服務的功能我沒摸透,如果你有其他的想法歡迎補充。

為何明明是「好設計」,卻讓人用得很痛苦?
為何明明是「好設計」,卻讓人用得很痛苦?

你有沒有遇過這種狀況?
門推不開、按鈕搞不懂,結果發現「設計害了你」?
其實 UX 不只在螢幕裡,生活處處是可用性考驗!

試閱:網頁設計職人必修:網頁設計鐵則&問題對策 84
試閱:網頁設計職人必修:網頁設計鐵則&問題對策 84

感謝旗標出版社贈書試閱,我有好好把這本書看完。本文除了心得外、另寫了些個人和書中觀點不同的部份。這是本值得入手的好書。

初學者的 Mockup

在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種,最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧,其實指的就是製作 Mockup 的能力,字體設計、按鈕樣式、扁平化、擬物風等等。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close