「為什麼我們跳過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這本書中,也常在字裡行間透露他們的開發思維。
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
因為他們可能還沒看到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) 呢?
Axure RP提供的按鈕、網頁元素,都過於制式化,
可以很方便的產生「制式」功能的網頁
如果是一般公務或資料庫系統應用,倒是還不錯用
要用來創造,恐怕有點困難...
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。文章很短,試著把重點翻出來(翻譯不當,請幫忙訂正) (接續下文...)
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.)
[-隱藏]
回應 grichard:
1
qsmen 說:
感謝分享資訊,但是像我從事網頁設計許久,至少在台灣視覺提案是接案的第一關,就客戶而言他們對你是陌生的,大多數的客戶都是由一份視覺提案及過往作品來評估這家設計公司的設計功力,縱使它只是個「假頁」Layout,但是在與客戶溝通解說及建立信賴卻是十分有用,如果說,我們今天只是做概略的UI來進行初步討論,甚至於僅手稿,我想這大多只適用於公司內部或者私人開發網站,這樣就滿不利於接案或搶標了,因為對方有的是選擇,通常不會有這麼多時間及興趣來聽取一份簡單的初稿,這或許是在台灣的一種現象吧,但是身為網頁設計的我們為了生存,縱然知道,設計假頁會造成開發過程的重覆,但是現實面就是得這樣操作,就好比建築師,就他們而言只要有CAD圖就可以進行施做了,為什麼還要去製作Render美美的透視圖,對他們而言只是多一份工沒太大意義,因為客戶他看不懂工程圖,無法想像他的房屋成像,而衍生的作法,所以說,只要市場需求沒變,採用Photoshop等假頁Layout就會持續下去,想想連做幾頁靜態提案都這麼難熬,怎麼可能還會加採用直接用HTML/CSS設計來增加成本,這在現實面反而是提案後的下一步了!
另一個思考方式,倒不如,這樣的工具,反而也比較適用於專案討論或者系統工程師以簡單的Web Layout Design做程式串接用途,也滿不錯的...
2008-06-11 11:26:31
另一個思考方式,倒不如,這樣的工具,反而也比較適用於專案討論或者系統工程師簡單的Web Layout Design做程式串接用途,也滿不錯的...
回應 :
請填寫您的回應,長度限為1,000個字,回應不計點數,也不限使用次數
廠商來幫忙
邦友收藏動態
安裝「收藏快捷鍵」,可以讓邦友直接透過Google工具列上的按扭,快速收藏站內、站外的網頁。
相關問答
- 新竹場敏捷開發(Agile Development)實戰經驗分享會
- 學習網路多媒體設計的心得
- jQuery UI slider問題
- JSP 和資料庫和 html Table的範例
- 比Hpricot更快的HTML/XML解析利器-Nokogiri(鋸子)
- 如何讓HTML網頁的內容能動態改變
- js有辦法作到透視嗎?
- [jQuery]外掛特輯18:成天組HTML字串手痠了吧,改用template幫忙吧
- windows7 64位元的軟體相容性
- T人之前世今生-真金不怕火鍊(2)
- Javascript面面觀:網頁篇《jQuery inside - 核心架構》
- Javascript面面觀:網頁篇《jQuery inside - plugin》
- JSP 和Java Mail part2
- 自由軟體分享-11
- 萬王之王3慶週年 加入MSN送限量好禮
- msn機器人應用實例與相關整合應用
- OUTLOOK收到的信只能用純文字讀
- Javascript面面觀:網頁篇《Frameworks/Libraries》
- [ASP.NET]ASP.NET 4.0 Overview-Web Forms
- 自由軟體分享-29








