今天要跟大家分享的是我在製作網頁時會遇到的一些問題，不管是設計師或是工程師應該會常常聽到所謂的RWD，Responsive Web Design (RWD) 一般翻譯成「響應式網站設計」，指的是網站在不同裝置上，隨裝置螢幕視窗寬窄的不同改變網頁的佈局。
除了使用者不用再辛苦的縮放，平移外，網站設計師與前端工程師也不需要再不同裝置做不一樣的設計，後台維護也變得比較容易，隨著越來越多尺寸的裝置出現，RWD已成為網站開發的趨勢。
那不多說～我們開始製作網站吧!一開始打開sketch
若打開sketch預設的web design template的話會出現以下畫面。而上面的尺寸就是sketch裡預設的一些裝置尺寸，是不是感覺比較有頭緒了？
這些預設尺寸可以是你斷點(breakpoint)的選擇，斷點是什麼呢？為了因應不同的尺寸上呈現最好的排版，在設計時應該在不同裝置時考慮不同的樣子，而網頁在縮放時會根據斷點去做響應的變化，好讓網頁在什麼情況下都能夠清楚的呈現。
那為什麼是這些尺寸大小呢？該從哪個尺寸開始製作呢？這邊我們可以先看看世上大部分的人使用多大的螢幕裝置尺寸：
由以上統計圖的尺寸再做裝置的區別的話會像是以下的圖：
而這麼多的裝中，其中根據統計手機最常使用的是360 x 640、平板則是786 x 1024、電腦是1366 x 768。你可以先跟你的開發人員溝通並確認你們最後要的驗收最終尺寸應該是哪個，通常可以選擇是自己電腦或是要demo的裝置的尺寸來進行繪製。
不知道自己的螢幕解析度嗎？
若你覺得恩？這跟sketch上給的範例都不一樣啊？那我自己該如何選擇斷點呢？
有幾種方法：
- 根據上面畫出來的圖來分別在600/ 900/1200/1800設置斷點，這樣就會符合世上大部份人的裝置。
- 根據bootstrap中的響應點來設置320/480/768/1024，若你的網站是要用 bootstrap來建置。
- 或者你只需要製作桌面版與手機版兩種，其他的響應規則與工程師溝通好就好，例如圖片大小或間隔要依照比例放大縮小或是設置最大寬度。
以上哪種方法其實都可以，應該說要跟據你所設計的網頁複雜度或使用者情境來選擇。在排版稍微複雜一點的頁面，平板或是手機時的排版必定會跟電腦的有所不同，而工程師沒辦法自行想像你在不同大小裝置時要的排版是如何，所以必須周全的考慮每個細節並在設計圖中加以標示，若有更多的複雜動畫，最好能有影片來讓工程師參考，才不會做出來後跟自己的想像完全不一樣。
而開始製作設計稿時的順序，一般是建議從小螢幕開始思考，因為需要先去考慮取捨，之後在大螢幕上再一步步把元素加進來。但也可以考慮使用者情境，若主要會是在電腦上使用，考慮大螢幕多一點、若主要是在行動裝置上，再更著重於小螢幕上。
這篇文章告訴大家設計RWD網站時的一些小技巧：
還有可愛的動畫可以讓你更理解更多有關RWD是什麼：
另外這篇文章也是在提醒大家，不一定要幾個裝置就幾個斷點，因為世界上的裝置越來越多，大家可以因應自己的設計在什麼大小下會有更好的排版表現方式再來決定要設置在哪裡，或是跟工程師溝通好你的排版要如何在畫面變動的時候漂亮的響應。
總結一下上述所說的步驟好了，如果你今天要開始製作網站：
Step1 : 確定網頁的用途與類型
Step2 : 訂出自己想要有哪幾種版本排版
Step3 : 與工程師確認好最終尺寸
Step4 : 開啟sketch畫出所有你需要的畫布大小
就可以開始設計了噢～
今天的分享就到這裡，感謝你閱讀完這篇文章，希望有幫助到大家解決一些疑慮，如果有任何問題或是需要改正的地方歡迎留言告訴我，有任何想法都歡迎跟我分享。
