之前曾經去演講過的學校,有學生傳訊問了關於 RWD 設計的問題。

  1. 設計師在繪製 RWD 網站的 Wireframe 時,會繪製 PC 和 Mobile 兩個版本嗎?或是直接使用軟體去做版本之間的切換呢?

  2. 若是沒有軟體可以直接使用的話,那又要如何繪製兩種版本的 Wireframe 呢?

關於 RWD 設計

RWD 指的是網站能夠自動偵測不同裝置的瀏覽器尺寸,能針對不同尺寸自動調整網頁的內容(圖文表單控件…等)。

如果把 HTML 當成一種內容的文件,那麼 CSS 則在說明這些「內容」要擺哪裡、有什麼樣外觀樣式。

先撇開「外觀」單講「內容」的話,通常同一頁網頁在不同尺寸下,看到的「內容」大致上會是相同的,差別在於擺放位置外觀樣式。

既然「內容」都一樣,所以 RWD 很多時候只寫一個 HTML,透過 CSS 設定不同外觀,偵測不同的瀏覽器尺寸,決定呈現什麼樣子的網頁。

但是瀏覽器尺寸落差非常大,從手錶、手機、平板電腦、筆電、桌機、電視都有可能。肯定要針對落差這麼大的瀏覽器尺寸進行不同的外觀設計。

關於 Bootstrap 的尺寸

Bootstrap

https://getbootstrap.com/

目前業界流行使用 Bootstrap 處理 RWD 。 是一組用於網站和網路應用程式開發的開源前端框架,簡單來說,就是能夠幫你面對 RWD 尺寸變化這麼大的輔助工具,只是在開發上有些規定需要配合。

在 Bootstrap 的官方文件裡,將瀏覽器劃分成:手機 sm、平板 md、桌機 lg、大型桌機 xl。

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

設計師需要針對這 4 種尺寸進行設計,也就是說,一個頁面要出 4 個不同尺寸的設計

回到問題

設計師在繪製 RWD 網站的 Wireframe 時,會繪製 PC 和 Mobile 兩個版本嗎?或是直接使用軟體去做版本之間的切換呢?

剛剛提到,一個頁面基本上要出 4 個不同尺寸的設計,包含手機、平板、桌機、大型桌機。有的時候平板/桌機、或是桌機/大型桌機之間的設計變化不會太大,所以有偷懶不用 4 種尺寸全畫的空間。

也有的時候可能有瀏覽器更大或更小的設計需求,4 種尺寸不夠用。這時候就要和 F2E 討論更大或更小尺寸的切確 px 數值多少了。

至於 Wireframe 要繪製幾種尺寸,這樣看網頁外觀設計的變化程度。


圖片取自 https://mediaqueri.es/

像上圖這樣子的網站設計, 除了手機外,平板、桌機、大型桌機這 3 種版面樣式沒有變化太大時,我會偷懶只畫 sm、md 這 2 種尺寸。


圖片取自 https://mediaqueri.es/

但如果是這樣子的網頁…那 4 種全部都會畫出來,畢竟 4 種尺寸的外觀變化頗大。而且不只是外觀,在手機上的操作和在桌機上也有很大的不同,比如「HOVER」。

在手機或平板上「把滑鼠移到按鈕出現下拉選單」試試?

該畫 4 種尺寸的 Wireframe 就每一頁網頁都乖乖畫 4 次,沒得偷懶。用軟體也一樣,版面間的切換…也要先畫出來才有得切換啊!

2.若是沒有軟體可以直接使用的話,那又要如何繪製兩種版本的 Wireframe 呢?

最基本畫 Wireframe 根本不需要軟體,手繪啊!軟體只是項工具,很多時候紙筆就夠用了。紙筆畫不出來,開電腦就畫得出來嗎?

我上課都要求用紙筆,絕對不要一起手就開電腦軟體來用,先不提軟體操作是否夠熟悉或是軟體上的限制,電腦開下去很容易把腦袋放空去翻現成樣板或是爬 Dribbble 看有沒有差不多的可以參考、不太會動腦思考。而且會變成「手上現有的內容和元件怎麼套進這個樣板裡」,不是「我來想想這些內容元件該怎麼擺會比較好」。

免費 Wireframe 工具

通常學生說「沒有軟體怎麼辦」大概就是「我窮買不起」的意思,有很多免費的工具可以用啦!替代方案很多,當然會比要付費難用一些,交作業很夠了。

https://www.justinmind.com/
https://wireframe.cc/
https://mockflow.com/apps/wireframepro/
https://www.mockflow.com/

甚至 Wireframe、Mockup、Prototype 都可以用 Adobe XD,功能強大資源多又不用錢。 https://www.adobe.com/tw/products/xd.html

嗯,你想拿 Illustrator 或 Photoshop 來畫 Wireframe 也行,但我自己是不會用這麼苦的方式…

附錄連結

RWD 網頁設計參考

https://www.awwwards.com/websites/responsive-design/
https://mediaqueri.es/
http://responsive-jp.com/

免寫 Code 做 RWD 的工具

(只是交作業的話我會用逆推的方式吧,嗯…這心態不太好…)

https://blocsapp.com/
http://macaw.co/
https://webflow.com/

comments powered by Disqus