【UI設計】我的設計需要做RWD嗎？
什麼是RWD?
RWD又稱響應式設計，是指網頁能自動因應不同瀏覽器去調整網頁排版。可以改變文字大小、行距、整體排版、區塊位置、圖片縮放等等樣式。
RWD的H5、PC，平板同網址。同一個 HTML 文本，CSS 能依照不同螢幕寬度的條件，來改變排版。如果把 HTML 當成一種內容的文件，那麼 CSS 則在說明這些「內容」要擺哪裡、有什麼樣的外觀樣式。
很多人在設計界面的時候，通常只會設計PC和H5兩個畫面，但現在螢幕尺寸落差很大，想想大型iMac為27英吋，而iPhone12為6.1英吋，如果要把一個iMac螢幕的內容都塞進去iPhone中那會有多亂，這時候RWD 就能解決這種問題了。
為什麼RWD這麼重要 ？
- 支援任何裝置，方便網頁閱讀
手機和電腦尺寸繁多，RWD可以適應不同螢幕尺寸帶來的各種問題。不管你是要放大縮小，變長變短，移動拉伸，RWD都可以幫你重新排版，讓用戶更輕鬆地瀏覽你的產品資訊。 - 增加用戶信任度
美國的SEO公司 — Tyton Media曾經做過一個報告，94%的用戶會因為網站設計不良而不信任這家公司，因為網頁難用會讓用戶不由自主的懷疑這家公司的專業度。例如在電商平台中，付款頁面的好用程度會大幅影響客戶的信任度。 - 降低開發維護成本
以前大部分公司為了製作手機版網頁，都必須多開發一個手機專用網頁版本。經過判讀程序，如果使用者是來自手機，就把使用者引導到手機版網頁。例如網站網址為：http://www.aa.net/ , 那手機版本就是：http://m.aa.net/。多了一個版本，那自然增加後期維護成本啦～ - 提升搜尋排名，利於SE0(Google喜歡)
如果你有自己的手機版網頁，和PC網頁是不同網誌，那有可能會分散網站在搜尋排名上的力道，試想同樣的內容卻存在兩個網址，那搜尋排名肯定也被分攤掉了。而Google為了增加用戶體驗，也增加了新的演算法，讓對手機友好的網頁排在搜尋結果的上方。這個演算法會檢查網站是否為RWD，加載時間，字體大小間距等等，而Google了。
你一定會好奇，既然RWD 這麼好用，那每個網站都使用RWD製作就好了啊？！何必再多分出來一個手機版網頁呢？？
那是因為RWD也是有缺點的～他的缺點包含：
- 不適合複雜的網頁內容
手機螢幕大小有限，設計時不太適合把PC網頁整個內容直接縮小到手機裡，因此通常會針對手機做特別的設計規劃。通常會把內容藏在導航， tab欄裡，但內容藏得太深用戶會找不到，我一般最多設計深入到第3層頁面就會停止，到達第4層的我都會建議重新畫交互圖，或是不用使用RWD。 - 不支援太老舊的瀏覽器
由於 RWD 是採用最新的 HTML5 + CSS3 網頁技術來處理，因此早期的瀏覽器並不支援，例如IE7就不支援。使用版本過時的瀏覽器來觀看，可能會產生版面破壞的情況。 - 前期開發時間和設計成本比傳統方式多
RWD網頁是在後續維護比較省時間(因為只要更新一份html)，但前期開發可就費工夫了，在製作過程需要一直比對各載具的相容性(版面、效能)，所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情，光是規劃界面就會讓你花上好幾個月時間燒腦了。 - 載入網頁速度問題
因為所有的載具都讀取同一份網頁，手機或平板效能較差的載具，會有讀取速度慢的問題。但也就是因為這樣，不同的載具效能不同，就會呈現不同的效果，如果網頁是需要很多特效的話，載具的載入速度差異性會更大。
最後，你還在苦惱你的產品網頁要做RWD嗎？那你可以思考：
❶ 我的網頁內容是否複雜
複雜的例如：股票證券網頁，論壇，大型社交平台(例如 facebook)
簡單的例如：部落格，新聞網頁
如果是簡單的個人部落格或產品展示頁，那簡單的RWD可以快速滿足你的需求。但如果是像股票證券這種功能繁多的網頁，那就真的不太建議使用RWD去製作，因為複雜的功能和流程絕對會讓你畫交互畫到想哭。而在這瞬息萬變的時代，當你花了多倍時間開發上線後，可能你設計出來的網頁也不再流行了，哭～
❷ 行動優先還是網頁優先？(Mobile first or Web first?)
可以先參考一下後台數據，觀察用戶足跡。以80/20法則來說，若8成的用戶都是用電腦網頁瀏覽，當然可以使用 RWD 的設置，反之，若有8成的用戶是以手機瀏覽網頁，行動優先的設計就是必需的。
如果確認做RWD，通常我會建議先規劃手機端再規劃電腦端，除非，你的網站是類似PPT編輯網頁這種，用戶大部分都是在電腦操作，手機端可能就是放映分享PPT這種簡單功能，那電腦端優先就很必要了。
❸ 開發時間充裕，前期有大量時間設計溝通
RWD 網頁其實很吃前期界面設計時間成本，從網頁到平板再到手機，每個功能流程該如何規劃安排，電腦和手機交互效果不同，這些都需要重新思考設計，前期界面沒規劃好，後期更改會更困難。
這樣你能找出自己的網頁適合RWD設計了嗎？其實RWD雖然流行，但還是找到適合自己網站的工作方式最重要，多參考用戶，後台數據，找到自己的產品定位，其實才是最重要的！ 💓
👉 另外，如果有興趣的人，可以點擊下方圖片領取“ RWD斷點設置圖 ” 👈
找到正確的斷點( Breakpoint )，才能在不同尺寸上呈現最好的排版！
而我繪製的是以600/900/1200/1800為斷點，是現在業界做常用，也符合大部分裝置的設置點。
★可以點選下方，關注我的IG來獲得更多即時訊息★
希望大家最後給我拍個手,讓我賺一杯奶茶的錢吧～按綠色拍掌按鍵可最多5次，讓Tiffany得到LikeCoin作回報。
想成為讚賞公民，真正支援網絡創作生態，請按這裡。鼓勵持續創作，支持化讚為賞！
