flâneur

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

noob.tw · 128 words · saved by 1 readers

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

在 PWA 應用程式中，你能打造一款讓手機、Chromebook、電腦都可以操作的應用程式，這就像是在寫網站時設計 RWD 網站一樣。設計 PWA 有什麼鋩角呢？ 鋩角（mê-kak），是指事物細小而緊要的部分，有秘訣的意思。 什麼是 RWD RWD（Responsive Web Design，響應式網頁設計），是一種網頁設計的方法，使得網站能在不同的裝置（包含電腦、平板、手機等裝置）瀏覽時，都能有合適的呈現，不用一直縮放、捲動等。近年來頻寬的進步，手機上的網站已經不像是以往的白底、列表的文字，不但隨處可見圖片，甚至連 YouTube 等影片網站在手機看都很常見，通常已經不再特別為手機設計「簡易版」的網站，而改用 RWD 的方式。不管你現在是用手機還是電腦閱讀這篇文章，可以試圖改變視窗大小、旋轉手機，你會發現還是可以正常閱讀，而且整體的佈局（Layout）沒有更改太多，這就是 RWD 的做法。 一個網站要讓能在電腦上使用，也要能在手機上使用，到底什麼樣的設計才合理呢？例如，常見的 PChome 等電商網站，首頁五花八門的資訊，全部放到手機裡面會不會捲超級長？裡面每一個元素都很重要嗎？巨大的橫幅會長成什麼樣子？ Mobile First，行動優先 因此有了行動優先（Mobile First）的概念。先思考你的網站在手機長什麼樣子，再來思考在電腦上長什麼樣子。…

saved by

related reading