回應式網頁設計開發實戰 – 設計面

本週進入回應式網頁設計主題的第三篇，前兩篇請參考 回應式網頁設計 – 回應式選單設計模式 、回應式網頁設計開發實戰 – 企劃面   關於回應式網站的設計面，我想從設計師最常用的設計工具Photoshop 開始談起。  

根本就沒有「網頁設計」軟體！？

開發網站的成員之中，企劃人員常用的工具是 Word、PowerPoint，進階一點的還會用到網站原型繪製軟體，像Axure rp。至於設計師，多半用 Photoshop 做圖像與版面的設計，縱使是習慣用向量創作的設計師，最終也是要將圖像點陣化，才能在網頁上順利呈現。

然而這些再平常不過的慣用工具，在回應式網頁設計中會碰到許多麻煩，最主要的原因是Photoshop為平面設計工具，網頁與平面看似相同，但卻有著本質上的巨大差異，原因如下：

文件尺寸

在 Photoshop 中，當一份新檔案被建立時，它的尺寸就被固定了，在回應式網頁中，能隨行動裝置調整版面尺寸是主要特徵，在 Photoshop 中完全無法在這樣的環境下進行設計，因為它是給「固定尺寸」的平面設計而用。  

文件解析度

承上，文件解析度也是在檔案新建時就被決定，但在行動裝置上，網路速度決定使用體驗，而影響的主因之一，就是圖像的解析度，在小螢幕的手機上瀏覽網頁不需要高解度的圖像來延緩下載速度。  

文件互動性

平面作品完成後需要輸出，而網頁則是要能在螢幕上讓使用者以滑鼠進行互動，在 Photoshop 上無法即時呈現互動的元素，因為它是平面設計軟體。

上述的差異性，讓 Photoshop 不適合成為網頁設計的唯一工具，那該用什麼來做呢？平面設計最終的產出工具是印表機，而網頁設計最終的產出工具是…沒錯！就是瀏覽器。

既然最終的成品會在瀏覽器上呈現，它又能符合文件在各種裝置下的情境，以及達成即時互動功能，沒有任何一套軟體比瀏覽器來得更適合了。  

因此要完成這件事，網頁設計師一定要會 HTML / CSS，這不是工程師的責任，而是身為一位設計師想把作品做到完美而要了解印刷的知識一樣，是非常基本且必要的。  

所以 Photoshop 再也不需要？

前面提過，Photoshop 是作為平面設計的主要工具，而網站也是充滿平面圖像的成品，所以如何讓 Photoshop 跟瀏覽器更好的進行合作，是本篇文章接下來分享的重點：

使用 Photoshop 設計網站主視覺

雖然有很多撰寫 CSS 的方便工具，但還是不可能比 Photoshop 直接在螢幕上畫出元素來得更方便，許多細節的感受，沒有在畫面上直接看到是很難做調整的，更不用說風格的營造，Photoshop絕對是最強大的圖像製作工具。

所以還是可以跟以前一樣，開一個固定尺寸的文件來設計主視覺與介面細節，而這尺寸也是桌面版網站的支援程度（通常是用1024px），接下來再考慮到小裝置的尺寸。  

使用Photoshop決定起點和終點

第一步設計的桌面版頁面，可以把它看做是回應式變化的終點，至於起點就是，就是預定支援的最小畫面，通常是手機螢幕。設計方法是把桌面版中的主要框架元素截取出來，然後放到新開啟的小尺寸固定文件中(通常是用320px)，並針對行動裝置設計不同的導覽模式。

如果不知該如何設計的話，可以參考這篇文章–>回應式網頁設計 – 回應式選單設計模式   而先設計桌面版的好處就在這邊，所有設計好的視覺元素可以縮小後給手機版面使用，如果是針對iPhone 的視網膜解析度也不用擔心圖片不夠大而需重新設計，所以在做設計稿時建議是以桌面版為優先。  

使用瀏覽器決定路線

完成手機與桌面版的設計稿後，就到了該跟 Photoshop 說再見的時候了，因為我們又用瀏覽器來設計網頁從小到大的版面樣式，這過程十分有趣，因為不用去考慮裝置的大小，只要去想在什麼狀況下那種使用行為最優先，然後根據內容去調整版面的配置方式。真正的用 CSS 去設計出適合的結果，以符合使用者的閱讀模式。

而這部份會牽涉到大量的 CSS 與微量的 Javascript，所以放在下一篇文章來繼續探討。  

小結

Photoshop 無法完全滿足回應式網頁設計的需求，但圖像的創造還是必須仰賴它，至於牽涉到網頁的部份，還是在瀏覽器中進行設計最實際，這也是身為網頁設計師必須要學會 HTML / CSS 的主要原因。