PWA 介面設計：先認識 RWD 設計

在 PWA 應用程式中，你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式，這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢？

鋩角（mê-kak），是指事物細小而緊要的部分，有秘訣的意思。

RWD（Responsive Web Design，響應式網頁設計），是一種網頁設計的方法，使得網站能在不同的裝置（包含電腦、平板、手機等裝置）瀏覽時，都能有合適的呈現，不用一直縮放、捲動等。近年來頻寬的進步，手機上的網站已經不像是以往的白底、列表的文字，不但隨處可見圖片，甚至連 YouTube 等影片網站在手機看都很常見，通常已經不再特別為手機設計「簡易版」的網站，而改用 RWD 的方式。不管你現在是用手機還是電腦閱讀這篇文章，可以試圖改變視窗大小、旋轉手機，你會發現還是可以正常閱讀，而且整體的佈局（Layout）沒有更改太多，這就是 RWD 的做法。

不過，一個網站要讓能在電腦上使用，也要能在手機上使用，到底什麼樣的設計才合理呢？例如，常見的 PChome 等電商網站，首頁五花八門的資訊，全部放到手機裡面會不會捲超級長？裡面每一個元素都很重要嗎？巨大的橫幅會長成什麼樣子？

因此有了行動優先（Mobile First）的概念。先思考你的網站在手機長什麼樣子，再來思考在電腦上長什麼樣子。 這樣的好處是不會遺漏資訊，而且強迫你先去思考最重要的內容是什麼。例如一個電商網站首頁最重要的可能是特價商品和推薦商品，商品資訊頁最重要的可能是商品圖片、商品資訊和價格，部落格網站最重要的可能是標題和文章；剩下那些其他人也買了什麼、近期最新文章、追蹤我們的社交網站，有空間再來擺。畢竟由儉入奢易，由奢入儉難，透過加法的概念決定加什麼東西上去，而不是透過減法的概念決定要捨去什麼，簡單多了。

Mobile First 的好處是，你一定不會漏掉最重要的資訊，而且只要透過 CSS 決定加下來加上去的東西不要在手機上顯示就好了，最後你只需要維持一套程式碼，開發成本、維護成本都大大的降低。

不過 Mobile First 也有缺點。在手機上只看到最少最重要的東西，接著到電腦版，螢幕越來越寬的時候應該多放一點不重要的東西進來。但如果你沒有多放，讓手機和電腦呈現一樣的內容，你的電腦版網頁就會變得很空虛。例如 7-ELEVEn 官網從 iPhone SE 的螢幕和 1080p 的螢幕看起來都差不多。

雖然 CSS 的 max-width 可以限制螢幕最大寬度，也就是說網站最寬只顯示到某個寬度，多出來的左右兩邊都留白。不過，這也不是最佳解法，這個辦法在 4K 螢幕上就看起來很怪，以 Twitter 為例。