本週進入回應式網頁設計主題的第三篇,前兩篇請參考 回應式網頁設計 – 回應式選單設計模式 、回應式網頁設計開發實戰 – 企劃面 關於回應式網站的設計面,我想從設計師最常用的設計工具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 的主要原因。
1 則留言
我以前的公司就是用 Photoshop 製作網頁設計稿,改整站設定 (Header, Footer) 很痛苦 ><