转载

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

如果你是個科技產業中的網頁設計師，你一定遇到或讀過時下有關於設計最夯的話題：在瀏覽器中設計。這個想法就如同字面上一樣簡單。

與其花上幾小時、幾天、甚至到好幾週、好幾月的時間在 Photoshop 中設計並遵守傳統的瀑布型流程；直接在瀏覽器中設計不但能使用任何草稿及初步工作，還可直接進入修改文本編碼的階段。

● 但是你要如何有效的在瀏覽器中設計網頁？

● 要如何得知在計畫的哪一個時間點必須使用？

讓我來一步步告訴你何時、為何、及如何來決定使用瀏覽器來設計；或者是使用傳統的方式，也就是利用 Photoshop 來設計網頁。

首先，我的版本的「使用瀏覽器來設計」其實存在比較少的「設計」成分，而比較像是「駭進瀏覽器來得到想要的東西」。

對我來說，設計就像是為使用者解決問題。而「在瀏覽器中」就像是你在軍火庫眾多武器中的另一種工具，也是能夠最快能夠在眾多討論與擬定草稿中得出最終編碼（coding）的方式。

首先我們先來看有哪些狀況，你可能不適合使用「瀏覽器設計」

在科技的社群當中有許多文章都在讚揚使用瀏覽器來設計的方式，像是：「網頁設計的未來」、「我們應該抹殺掉 Photoshop 」……等等文章。

我同意在瀏覽器設計是一種著手設計企劃的方式，但肯定會有些時候，因為一些因素，像是客戶需求、時間限制等等並不允許你選擇這樣的方式。

而以下是一些可能的「不允許」情境：

● 客戶的需求並不適合在瀏覽器中設計

你可能會告訴自己：「反正不要跟他們合作就好了。」

但我們知道不能每次都發生；也許這個客戶希望的就是經過高度修飾的網站，好讓他們能夠從眾多競爭者中脫穎而出，或者是得到投資者更多的資金投入。也許他們的特點是千變萬化的，或是他們有幾個基本要求。

在這種案例下，傳統的原型設計與合成也許會是較有效率的方式。

● 許多客戶常以視覺效果為結果

有時 10–20 張的高保真度圖層，會相較於 5 頁功能正常但毫無生氣的網頁來的有效果。

● 網站的系統與編排在「同時視覺化呈現」與「處理編碼」上過於複雜

我們是人類，大多數的人都有受限制的腦容量來同時思考兩件事。

然而可能有些人會告訴你寫程式與設計是高度相關的，但想像一個編排複雜並充滿動畫部分的網頁同時還要寫 div 區塊標籤，這對我來說實在是有點難。許多研究都顯示我們無法同時一心多用，尤其在設計網頁的時候。

的確，時間與經驗會讓我們視覺化更快並且寫出更簡潔的編碼。所以，繼續加油吧。

● 你正處在設計的「改良」階段

假設你已經過了 Model View Presenter 在計畫中的階段。而你的網頁有個像樣的編排，而你正準備要加上更多功能。如果使用者已經反映過某些你使用瀏覽器設計上的缺點，像是 call to action 不夠清楚、或是他們不知道這個網頁的第一個著眼點在哪，這大概就是個機會回頭使用 Photoshop 來改善這些缺點得時候了。

回到重點「瀏覽器設計」，其實它就是一種工具

對我來說，利用瀏覽器設計最大的挑戰可以用 Andy Budd 說過的話來總結：

「最好的設計工具就是那些在創作者與發明物之間產生最小障礙的方式（鉛筆就是個很好的例子），而瀏覽器設計網頁就是在過程中增加了不必要的障礙。」

這句話的前提是：你必須相當享受在畫板上將一些圖案拉來拉去的過程。有些正式圖畫設計背景的網頁設計師就有可能非常想將我們的腦袋剖開來研究吧。

我們利用瀏覽器來設計的理由各自不同，而這個我們高度依賴的方法應該由我們自己來決定是否使用。也就是說，如果真的有情況必須使用這個方法，那我們就會毫不猶豫的執行。

該如何開始利用瀏覽器設計？

有許多方式可以開啟一個企劃，但在這篇文章中我們用這個例子來解釋：這是我們和一個剛組織、籌資的新創公司產品所有人一同開啟的企劃。

許多設計界的領導者，像 Dan Mall，詳述了許多促進新創公司成功開案的方式，在此我就不多加贅述。

在開案的這段期間，讓我們假設是已經決定了一組使用者以及他們對於產品所無法忍受的點；一個定義目的、理由、方法的品牌說明；以及我們意圖解決的一個假設性問題；甚至是初步的線框圖、功能列表。到這邊，我們對於設計所針對的對象以及客戶希望傳達的訊息已經有了些微的理解。

● Step 1

我想要從情緒收集版（moodboard ）開始 。他們幫忙找出這個品牌的代表顏色，並且不花太多的時間與精力。這個步驟我會使用 Pinterest 以及 Dribbble 來找尋圖片。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

這裡我挑選一個架構來快速建立起整個網站編排，並貼在使用者介面當中。對於行銷或是面對消費者的網站，我會選擇 Foundation ，因為他們都把選擇以編碼形式呈現出來了，而且他們比較基本而且容易修改。相較之下， Bootstrap 堅實的架構對於管理相關的公司就較適合。

● Step 2

接著是「風格的引導、指南」。以風格的導引做開端，或是一系列的「 style tiles 」；這是個將設計元素組織化、簡單化的重要步驟。

我不會開始說明風格引導的重要性，因為其他人可以解釋得更清楚，但我會說找一個簡易指南會是將雜亂的設計組織、規則化最簡單的方式，而這也是我們會使用瀏覽器設計的大原因之一。

我已經相當習慣根據需要，手動建立風格、引導使用者介面元素，但你可以使用 KSS 或是 Hologram 來幫忙。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

● Step 3

最後，是「網頁構成」。有時候我必須提醒自己：別忽略了設計的原則；視線的移動、階層分類、對比，在程式語言中真的很容易迷失。

過去我只在 Photoshop 上設計時，讓我思考了更多關於設計的概念，我能夠實驗更多 call to action 的方式、不同的佈局、以及令人注目的動畫。

但以瀏覽器設計基本上就是要避免太過跳脫的思考。最簡單的方式就是由保真度的低到高來檢視，也就，明文、接著 HTML 標籤，接著加上框架設計、選擇器、然後是 CSS 的風格選擇器。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

之後要一客戶更定，你可以使用瀏覽器的工具

現在你已經使用瀏覽器創造了第一個網頁，是時候與客戶一同檢視一番了！這裡就是神奇的地方了，你可以在一個會議中打理所有客戶給予的回饋，而不用再如同從前一般來來回回討論的設計迴圈。

以下是我使用 Chrome 的檢查功能：

▲ 客戶想要做複製設定改變，你可以打開檢查器利用「編輯文本」。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

▲ 我們決定在網頁上增加「新內容」專欄，打開檢查器，按下「編輯 HTML」

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

▲ 我們要改變某個東西的顏色、大小、任何有關於網頁風格的東西。編輯「風格（style）」。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

關於我偏好以螢幕截圖來紀錄編碼，而不是 Chrome 工具，是因為使用檢查器並不是創造出最漂亮的程式語言，而是個設計上的偷吃步或是希望得到客戶認可。

而利用螢幕截圖則是希望能保存修改的變化，並且再之後找到更好的方式來結合原先編碼的基礎。

團隊通力合作

相較於我在文章開頭所提到的瀑布型流程（waterfall process），使用「瀏覽器設計」能夠與整個團隊以 2-4 周的開發時辰行動。

第一個 sprint 可能主要包含 foundation 或 bootstrap 的風格。第二個 sprint 可能慢慢的建立品牌、修改網頁字體、階層、以及其他團隊共同決定的升級，甚至可以進入改良階段，並使用 Photoshop。

而有關於我們是如何整合設計層面進入 Pivotal Tracker，我發現創造一個使用者層專門給前端的作業，並且與後端業務做切割，會相當的有效。如此一來設計就能在開發之前，也就是讓工程師建立模型與控制器，接著再讓你來做風格設計，不過這兩者是可以替換的。

舉例來說：

作為前端開發者，你能夠設計風格、創造靜態頁面像是首頁、聯絡頁面、文字頁面；而作為後端開發者則產生登入之後的投入與瀏覽，接著前端開發者就能夠跳到登入頁面然後修改風格。

什麼時候可以屏棄 Photoshop 使用「瀏覽器」設計網頁？

如何在現實中實行？

在我們最近一個企劃當中，我們決定使用瀏覽器來設計的方式是維持預算又能提供乾淨、漂亮的外觀的方式。我使用 Bootstrap 來快速的決定編排與頁面架構，並使用 Sublime Text 文本編輯，接著在一些重要的地方做一些能夠負擔的升級。我同時也與開發者一同工作，負責前端的呈現，而他們則是後端的支援。

在流程的途中，客戶要求要改變首頁的設計方向。我判斷使用 Photoshop 為最佳的工具來執行許多結構完整的設計。只要在一個頁面上就能滿足客戶之需求，使得整個過程相對順利。

藉著這幾個風格在 Photoshop 上的組合，以及我的使用者介面放置的恰到好處，我只要在一個地方改變風格，整個網站就會符合新的首頁設計了。