iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
Modern Web

前端路上那些重要與不重要的小事系列 第 3

Day03:小事之與純平面設計師溝通 - 中篇

當 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


上一篇
Day02:小事之與純平面設計師的溝通 - 上篇
下一篇
Day04:小事之與純平面設計師溝通 - 下篇
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言