「為什麼我們跳過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開發上，先將內容與操作模型建立好，確立之後再請視覺設計在這個骨架上做出外觀，對生產力也許會很有幫助。
不過，視覺設計能不能從骨架出發去做設計，那又是另一個問題，我想這也是需要磨合的。
指的應該是某些時候最直接給使用者的感覺吧，像是你在操作 Google 或是一些頁面向是 ithelp 會發現介面的靈活度和親切感是比較重要的
為什麼跳過Photoshop
因為他們可能還沒看到Axure RP這套軟體。
當一個網站製作人/網站企劃/網站專案經理，可以不需在意HTML code，不用care Table結構要切成三欄九欄的麻煩，而可以隨意在畫面上放上各種介面元素把概念變成真實頁面，誰還會想使用Photoshop來企劃網站呢?
在Axure RP上畫好wireframe如同Powerpoint一樣簡單，再加上link，按下Axure RP的輸出button，在幾秒鐘之內就擁有Web Prototype了，再按下另一個鍵，Axure RP又幫你輸出成Word檔案，又擁有Spec文件了。
他們可能還沒看到Axure RP，所以跳過Photoshop直接進入HTML/css，但是又有多少設計團隊有這等功力 (直接進入HTML/css) 呢?
如果以37Signal的產品，例如backpack或highrise來看
Axure RP提供的按鈕、網頁元素，都過於制式化，
可以很方便的產生「制式」功能的網頁
如果是一般公務或資料庫系統應用，倒是還不錯用
要用來創造，恐怕有點困難...
Hi! Doz,
Axure RP跟Backpack/Highrise是不同類的軟體無法相題並論。Axure RP是網站原型設計工具，接近Visio的用途。而Backpack是EIP軟體系統，Highrise是CRM系統。拿Axure RP跟Backpack比較，就好像拿Visio跟Exchange比較一樣!
回應分享Axure，因為經驗上，在Web開發初期，採用Axure RP做prototype，速度快又可互動，是比Photoshop更好用的工具，倒不是說Axure RP可以跟37signal的產品比較，希望 Doz可以明瞭。
Wordsmith PO文分享「為什麼我們跳過Photoshop」這篇文章。37signals在規畫Web AP時，認為不該使用Photoshop來畫Mockup。文章很短，試著把重點翻出來(翻譯不當，請幫忙訂正) (接續下文...)
Wordsmith PO文分享「為什麼我們跳過Photoshop」這篇文章。37signals在規畫Web AP時，認為不該使用Photoshop來畫Mockup。文章很短，試著把重點翻出來(翻譯不當，請幫忙訂正)
37signals的Jason說:
1.你無法click Photoshop設計出來的畫面 (You can’t click a Photoshop mockup.)
2.Photoshop給太多的工具過度注意細節 (Photoshop gives you too many tools to focus on the details.)
3.在Photoshop的文字呈現跟Web上的不同 (The text in Photoshop is not the text on the web.)
4.Photoshop的重點在 Production，而不是Productivity。Photoshop是用來設計一些東西的外觀，而不是用來設計一些東西讓你使用的. (Photoshop puts the focus on production，not productivity.)
5.Photoshop會讓你多做一次工，因為你還得HTML/CSS再來一遍 (Photoshop is repeating yourself.)
6.Photoshop不適合多人協作 (Photoshop isn’t collaboration friendly.)
7.Photoshop不夠靈巧，因為光寫文字，得使用text tool來打字，shape tool來畫shape. (Photoshop is awkward.)
感謝分享資訊，但是像我從事網頁設計許久，至少在台灣視覺提案是接案的第一關，就客戶而言他們對你是陌生的，大多數的客戶都是由一份視覺提案及過往作品來評估這家設計公司的設計功力，縱使它只是個「假頁」Layout，但是在與客戶溝通解說及建立信賴卻是十分有用，如果說，我們今天只是做概略的UI來進行初步討論，甚至於僅手稿，我想這大多只適用於公司內部或者私人開發網站，這樣就滿不利於接案或搶標了，因為對方有的是選擇，通常不會有這麼多時間及興趣來聽取一份簡單的初稿，這或許是在台灣的一種現象吧，但是身為網頁設計的我們為了生存，縱然知道，設計假頁會造成開發過程的重覆，但是現實面就是得這樣操作，就好比建築師，就他們而言只要有CAD圖就可以進行施做了，為什麼還要去製作Render美美的透視圖，對他們而言只是多一份工沒太大意義，因為客戶他看不懂工程圖，無法想像他的房屋成像，而衍生的作法，所以說，只要市場需求沒變，採用Photoshop等假頁Layout就會持續下去，想想連做幾頁靜態提案都這麼難熬，怎麼可能還會加採用直接用HTML/CSS設計來增加成本，這在現實面反而是提案後的下一步了！
另一個思考方式，倒不如，這樣的工具，反而也比較適用於專案討論或者系統工程師以簡單的Web Layout Design做程式串接用途，也滿不錯的...
感謝分享資訊，但是像我從事網頁設計許久，至少在台灣視覺提案是接案的第一關，就客戶而言他們對你是陌生的，大多數的客戶都是由一份視覺提案及過往作品來評估這家設計公司的設計功力，縱使它只是個「假頁」Layout，但是在與客戶溝通解說及建立信賴卻是十分有用，如果說，我們今天只是做概略的UI來進行初步討論，甚至於僅手稿，我想這大多只適用於公司內部或者私人開發網站，這樣就滿不利於接案或搶標了，因為對方有的是選擇，通常不會有這麼多時間及興趣來聽取一份簡單的初稿，這或許是在台灣的一種現象吧，但是身為網頁設計的我們為了生存，縱然知道，設計假頁會造成開發過程的重覆，但是現實面就是得這樣操作，就好比建築師，就他們而言只要有CAD圖就可以進行施做了，為什麼還要去製作Render美美的透視圖，對他們而言只是多一份工沒太大意義，因為客戶他看不懂工程圖，無法想像他的房屋成像，而衍生的作法，所以說，只要市場需求沒變，採用Photoshop等假頁Layout就會持續下去，想想連做幾頁靜態提案都這麼難熬，怎麼可能還會加採用直接用HTML/CSS設計來增加成本，這在現實面反而是提案後的下一步了！
另一個思考方式，倒不如，這樣的工具，反而也比較適用於專案討論或者系統工程師簡單的Web Layout Design做程式串接用途，也滿不錯的...
嗯嗯，我想37Signals的立論在於他們是自己開發自己的AP，因此會有這樣的差別，qsmen的確點出了一個標案的現實的情形。
另外一點，我覺得國外的設計作業流程可能也和我們不太一樣，UI是骨，而photoshop是用來皮膚，UI確立了，其實皮膚是可以一直更換的。就像作業系統的theme或像winapm也有一些skin可以替換。UI著重的應該是使用經驗，美觀倒是其次。
其實大家所說的兩個論點我都有經歴過，也都有不同的成功及失敗經驗。關鍵在於是什麼樣的客戶；有的客戶比較沒有sense或是完全不懂技術，就只得用 photoshop 方式看假東西。也有的客戶急於看到能夠動或能夠點的效果，而不是炫目的東西，這時快速CSS演示法就起作用了。另一個方式是綜合CSS及photoshop，使用photoshop做好小小的視覺元件，用CSS組合起來，這樣子又有㘣角，又有背景，也有動態效果，在提案的時候就很容易把別人打槍了，因為有些人是畫得出來做不出來呀。有些地方關鍵就是在於綜合的功力及經驗，以及自己適應客戶需求的彈性。這也是37signals的人想要說的重點喔。
如果能直接跨過photoshop，直接拉HTML真的是很好
可是到底要用哪種工具 才可以達到用HTML進入設計階段阿?
iThome鐵人賽
看影片追技術