當 RWD 遇上純平面設計師

響應式網頁設計(Responsive Web Design)簡稱RWD，又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計，這是一項開始於2011年由Ethan Marcotte[1] 發明的術語 Responsive Web Design (RWD)。2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗，是個因移動平台的用戶大量增加而想出的一個對應方法。[2]

當載具越來越多，RWD 便應運而生，對於設計師來說，需要去了解 RWD 的版面佈局，但是非固定的版面，對於沒有相關經驗的設計師來說，是很難理解的東西。

當初跟一位平面設計師溝通 RWD 網頁設計時，就遇到了難以想像的卡關，
因為對純平面設計師來說，桌機版、Pad版、手機版是三種不同的版面。

怎麼溝通

如果配合的設計師不曾做過 RWD 網頁，那麼當你跟設計師說設計的網頁要能在桌機版、Pad版、手機版正常呈現，那你很可能得到三個沒有關聯的設計XDDD

因此要解釋畫面的呈現就必須跟設計師解釋版面的『內容流』

會覺得需要解釋是因為曾經配合的設計師問過說：『我設計的桌機版面到平板跟手機會變成什麼樣子？』
那時候是用『紙張跟便利貼』來解釋版面如何移動，這時候用圖來說故事會簡單點。

如圖所示，基本上網頁的內容是由左到右，由上到下流動，因此如果沒有特殊要求，設計出來的版面流動基本上就是像圖示一樣。

如果某個區塊，在設計師的構想中，在平板跟手機是跳脫出原本的排版的，就必須請設計師另外提出備註與說明，才不會在製作過程出問題。

其實，如果懶得溝通(？)，還有一個放大絕就是，跟設計師說『如果你沒意見，你設計桌機版本的畫面就好，平板跟手機的畫面我來處理，讓它自動排就好。』，不過前提當然是設計師沒啥意見，有意見就只能慢慢溝通啦～XD

內容元素的製作

Banner

內容的製作其實遇過的問題不多，唯獨 Banner 比較特殊。
在絕大多數網站中，Banner 占了不小的份量，有展示與廣告的效果，在固定版面中，Banner 的設計不會有太大的問題。

但是在 RWD 網頁中，就必須決定：

• 是否直接等比縮放。 圖片擷取來源：美食家
  

• 是否針對平板與手機進行高度變更。例如：在手機版時 Banner 呈現滿版高。圖片擷取來源：Sony
  

• 圖片是否依各版本製作多份。圖片擷取來源：千葆
  

• 圖片是否只靠容器擷取局部。圖片擷取來源：themewagon
  

曾經遇到的奇妙事件

純平面設計師最熟悉的載體是紙張，印刷時圖片基本上需要 300dpi 才會清晰，所以一開始時，設計師會小卡在這裡，需要跟設計師解釋一下網頁上使用的圖片其實只要72dpi就好。

〖曾經的奇妙對話〗

Me：公司簡介的 Banner 用這張圖唷～
設計師：可是圖片不夠寬誒
Me：網頁用的圖片解析度只要72dpi就好，所以你可以拉大唷
設計師：可是 Banner 不夠高誒
Me：？？？還是你先放給我看
結果

傻眼之餘只好跟設計師說
Me：ㄜ～那個 Banner 的寬、高度就像是遮色片，圖片不需要全部的部分都看得到喔

然後我才得到正常的結果～QQ

只能說溝通的能力就是這樣來的～XDDD

呼～終於寫完 RWD 的部分，剩下一小部分跟設計師溝通有關的，明天再繼續講囉～各位看倌晚安啦～

參考資料

[1] https://ethanmarcotte.com/
[2] https://www.ibest.tw/page01.php