網頁大小版要怎麼規劃呢？在設計稿階段，因為過去工作的關係，比較習慣提桌機版及手機版兩個尺寸。但進入切版階段後，就必須實現每個尺寸下畫面都是符合需求的，所以我會利用斷點設計，分成桌機、筆電、ipad、手機尺寸...等，最先切桌機版，再依每個裝置常用尺寸做調整，最後微調較不常見的尺寸。
今天就會以如何規劃大小版畫面為主題，說明我在作品集時是如何做的。Luna的線上作品集

斷點設計

所謂「斷點設計」，就是將各種市面上有的螢幕解析度分成多個斷點(Breakpoint)，依據不同斷點去調整畫面的呈現，而螢幕解析度百百種，若每個尺寸都花時間調整，會導致工作時兼變長、效率變差，所以通常會選常用的幾個斷點作為標準。

常用斷點(常用螢幕解析度)

(截圖取自 statcounter)

上面的圖示為全球螢幕解析度市占率，我的習慣主要是會分以下這幾個斷點。桌機最常見尺寸就是1920寬度，筆電的話1280寬度的筆電在台灣意外的多，所以我也會列入，而pad橫向、直向都需要觀察，最後手機尺寸雖然看數字差距不大，但在螢幕上看差一點差蠻多的，所以在設計稿階段，我換選擇以較中間的375尺寸來編排，後續要改動的地方才會比較少。

• 桌機: 1920 x 1080(設計稿)
• 筆電: 1366 x 768
• 筆電: 1280 x 720
• pad: 1024 x 768
• 手機: 414 x 896
• 手機: 375 x 812(設計稿)
• 手機: 360 x 800

區塊規劃

除了依斷點規劃切版之外，因為RWD的特性都是一塊一塊疊成的，從上往下、由左而右分區塊切版會是比較好的選擇。另外把握先切首頁，定好共用Layout及主要設計後，再切內頁。先切桌機版，再依每個裝置常用尺寸做調整，最後微調較不常見的尺寸。

重點及次要，畫面顯示規劃

雖然網站就是為了把所有資訊呈現給使用者，但資訊中還是會有主要、次要之分，尤其是對內容繁雜的網站而言，手機版若還是直接把所有內容大辣辣的全部擺出來，那使用者就會看到吐血，所以當pad、手機版的情況下，通常會為了吸引使用者，將次要的資訊收起，或乾脆不顯示，當使用者想知道相關訊息時，再點選內容查看，才是好的RWD設計。
ex.像是大部分網站的手機版，都會把menu收起，用圖示標示(我們通常稱它為漢堡)，點擊後才會顯示menu，為的就是節省空間。

而需要舉例、有多個項目類型的區塊，桌機版通常一個橫向顯示的量會最多、內容最完整，越往小版，一個橫向顯示的數量會減少，排列方式有可能會將項目換行，也有可能使用輪播或其他方式來更換項目，顯示的內容相對也會比較不完整。
ex.像是作品集中，我將相關技能的LOGO排列，桌機版能看到最多項，越小版一次看到的項目會減少。

今天講了RWD要怎麼規劃大小版及分享幾個我用過的設計手法，明天就會正式進入到切版程序，我會盡量用文字的方式說明該如何切版，但最重要的還是需要實際去練習！就算身邊只有幾項簡易的作品也不錯，能的話一起跟著製作第一個自己的作品集吧。