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

08/25 | 使用者介面留言(0)

本週進入響應式網頁設計主題的第三篇,前兩篇請參考

響應式網頁設計 – 響應式選單設計模式
響應式網頁設計開發實戰 – 企劃面

 

關於響應式網站的設計面,我想從設計師最常用的設計工具photoshop開始談起。

 

根本就沒有「網頁設計」軟體!?

開發網站的成員之中,企劃人員常用的工具是word、PowerPoint,進階一點的還會用到網站原型繪製軟體,像Axure rp;而工程師會用notepad++、visual studio、或是最近非常火紅的sublime text2

 

至於設計師,多半用photoshop做圖像與版面的設計,縱使是習慣用向量創作的設計師,最終也是要將圖像點陣化,才能在網頁上順利呈現,然而這些再平常不過的慣用工具,在響應式網頁設計中會碰到許多麻煩,最主要的原因是photoshop為平面設計工具,網頁與平面看似相同,但卻有著本質上的巨大差異。

01

 

1、文件尺寸

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

 

2、文件解析度

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

 

3、文件互動性

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

上述的差異性,讓Photoshop不適合成為網頁設計的唯一工具,那該用什麼來做呢?平面設計最終的產出工具是印表機,而網頁設計最終的產出工具是…沒錯!就是瀏覽器。既然最終的成品會在瀏覽器上呈現,它又能符合文件在各種裝置下的情境,以及達成即時互動功能,沒有任何一套軟體比瀏覽器來得更適合了。

 

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

 

所以Photoshop再也不需要?

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

 

responsiveNav-4

 

<一>使用Photoshop設計網站主視覺

雖然有很多撰寫CSS的方便工具,但還是不可能比Photoshop直接在螢幕上畫出元素來得更方便,許多細節的感受,沒有在畫面上直接看到是很難做調整的,更不用說風格的營造,Photoshop絕對是最強大的圖像製作工具,所以還是可以跟以前一樣,開一個固定尺寸的文件來設計主視覺與介面細節,而這尺寸也是桌面版網站的支援程度(通常是用1024px),接下來再考慮到小裝置的尺寸。

 

<二>使用Photoshop決定起點和終點

第一步設計的桌面版頁面,可以把它看做是響應式變化的終點,至於起點就是,就是預定支援的最小畫面,通常是手機螢幕。設計方法是把桌面版中的主要框架元素截取出來,然後放到新開啟的小尺寸固定文件中(通常是用320px),並針對行動裝置設計不同的導覽模式,如果不知該如何設計的話,可以參考這篇文章—>響應式網頁設計 – 響應式選單設計模式

 

而先設計桌面版的好處就在這邊,所有設計好的視覺元素可以縮小後給手機版面使用,如果是針對iPhone的視網膜解析度也不用擔心圖片不夠大而需重新設計,所以在做設計稿時建議是以桌面版為優先。

 

<三>使用瀏覽器決定路線

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

 

小結

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

 

 

 

 

 

回覆文章