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

目錄

本週進入回應式網頁設計主題的第三篇,前兩篇請參考 回應式網頁設計 – 回應式選單設計模式回應式網頁設計開發實戰 – 企劃面   關於回應式網站的設計面,我想從設計師最常用的設計工具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 的主要原因。

文章標籤RWD設計軟體

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章寫得好再幫我鼓個掌吧!

相關文章

【 書摘 】價值主張年代 Value Proposition Design

Alex Osterwalder 的前一本大作「獲利世代」,奠定了我多年來發想各種商業模式的根基,而這本「價值主張年代」是他的續作...

回應式網頁設計 – 回應式選單設計模式

接續上週回應式網頁設計主題,本週將繼續探討在回應式網頁中導覽系統設計的模式,並分析其優缺點與適用情況,以快速應用於實際工作流程之中...

1 則留言

  1. 我以前的公司就是用 Photoshop 製作網頁設計稿,改整站設定 (Header, Footer) 很痛苦 ><

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2022 想點創意科技有限公司

Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!