【開源節流】--> "開源" & "節流"

為什麼我們跳過Photoshop－37Signal談UI開發

http://ithelp.ithome.com.tw/question/10004281

「為什麼我們跳過Photoshop」(Why we skip Photoshop )是37Signal談UI開發設計的一篇簡要文章，強調不要浪費時間用Photoshop去做出Web Layout（模型），而是直接用HTML/css設計，這樣的流程更貼近Web開發的需求。

37Signal是專注於Web應用程式的軟體公司，產品有Basecamp、Campfire、Backpack等等。同時Ruby on Rails也是由他們的開發經驗中，提鍊出來的框架，推出後驚動整個Web開發領域，同時也將Web開發推向敏捷開發的風潮。他們的開發哲學，可以從Getting Real一書一探究竟，另外在 Agile Web Development with Rails這本書中，也常在字裡行間透露他們的開發思維。

我想台灣大多數的Web設計，仍是由視覺設計師做出Layout，然後討論、再回Photoshop修改，一再反覆，直到外觀大家都滿意後，才開始轉成HTML、CSS。但「為什麼我們跳過Photoshop」的作者Jason提及他們在開發UI時，通常紙上畫畫草稿後就用HTML/CSS做出模型，而跳過用Photoshop畫出Layout這個階段。

Jason給出了七個為什麼要這樣做的理由，我用我的理解簡單摘要如下：

1.Photoshop作出來的模型是靜態的，你不能去按按鈕、不能去填資料，這種模型並不真實，而HTML/CSS卻可以給出真實的體驗。

2.Photoshop給我們許多好用的工具去處理細節，而我們往往也就陷進去了。細節不是說不重要，但是在一開始的階段，它可以稍微後退一下，先讓位給具體的內容。

3.在HTML/CSS如果要變更文字，馬上就可以改動。但如果是Photoshop，回去開檔、修改、存檔，或許還要匯出之類的，相當不經濟。另外，文字呈現的效果和Web往往也有差距。

4.Photoshop焦聚在產品設計上，它的產出只是能看的東西，卻不是最終能用的產品，而HTML/CSS在你一改再改的過程中，會越來越接近實際的成品。

5.用Photoshop會造成開發過程的重覆。當你在Photoshop做得盡善盡美之後，然後還是得拿出HTML/CSS再把它做出的Layout刻一遍，時間在這樣的過程中就浪費了。而HTML/CSS所有的修改過程，都是在反覆完成產品的過程，而不是重建。這裡作者特別提出警語，如果覺得用HTML/CSS不夠快，並非回去用Photoshop的好理由，不夠快，就去學的如何用得更快吧。

6.Photoshop並協同開發而言並不好用，如果是HTML/CSS，不同的設計師隨時可以拿來改一改原始檔，按F5重載，就可以看到新的結果。

7.Photoshop比起用紙、筆畫出個梗概來說，它是難用多了，光是在紙上畫個方型、圓型，寫幾個字，你就要在Photoshop的工具列上做多少動作。

最後作者澄清他並非認為Photoshop不好或浪費時間、金錢，但對他們而言，用HTML/CSS是更好的開發經驗，因為HTML/CSS是如此具體、真實，而這是Photoshop永遠辦不到的。

就我自己的經驗而言，開發初期，UI變動的機會很高，而HTML/CSS要修改這些變動，比起Photoshop的確是簡單很多。所以在Web開發上，先將內容與操作模型建立好，確立之後再請視覺設計在這個骨架上做出外觀，對生產力也許會很有幫助。

不過，視覺設計能不能從骨架出發去做設計，那又是另一個問題，我想這也是需要磨合的。

參考資料：http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop