為什麼我們跳過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

    全站熱搜

    sleepingwolf 發表在 痞客邦 留言(0) 人氣()