基礎課程

穩固基礎

穩固的基礎是建構優質 PWA 的基本條件。為實現這個基礎，您需要使用以下幾項原則來設計及編寫符合網路限制的程式碼：

  • 使用行動裝置做為聚焦限制。確保每項設計檢視畫面只聚焦於重要內容和互動。
  • 在設計過程中強調內容和核心功能。
  • 視需要逐步強化。請先使用最簡單、最常見的工具，建構元件的核心內容和功能。提供無障礙的服務。接著，測試您想使用的進階功能，並利用這些功能強化元件。
  • 提供快速且良好的使用者體驗，並以以使用者為本的網路效能指標為重點，取得實際使用者指標，為所有使用者提供效能，無論他們的網路連線、輸入類型、CPU 或 GPU 效能如何。

只要遵循這些原則，並運用現代化模式和網頁功能加以強化，就能透過真正內在的設計，打造出快速且優質的體驗。設計以限制條件而非像素為基礎，讓每位使用者都能以最適合其特定瀏覽情境的方式存取內容和核心功能。

回應式網頁設計

自從 Ethan Marcotte 在 2010 年發表「回應式網頁設計」一文後，設計師和開發人員就一直受到鼓勵，打造出靈活的體驗，製作出可在各種螢幕大小和裝置上運作的使用者介面。

不過，這項功能後來縮減為行動裝置、平板電腦和電腦大小，寬度則受到 iOS 螢幕大小的影響。有了新式 CSS 和重新聚焦的回應式設計原意，我們可以將擠壓功能重新納入可擠壓的網站。

回應式網頁設計引入了三項技術元素：

  • 流動格線
  • 彈性媒體
  • 媒體查詢

Ethan 認為這些技術規定並不足以解決問題，我們也需要以不同的思維來思考未來的方向。

行動裝置使用者迷思

早期，採用回應式設計的假設是讓網站更易於設計。舉例來說，小型體驗適用於手機，寬度為 320 像素；中型體驗適用於平板電腦，寬度為 1024 像素；大於這個尺寸的體驗則適用於電腦。小螢幕支援觸控功能，大螢幕則不支援。手機使用者趕在設計時因人分心而分心，因此需要「輕盈的」使用體驗。

以上皆非如此；這些迷思會導致行動裝置迷思，但因為單一螢幕大小或裝置類型的使用者需求完全不同。我們必須嚴格把關。

舉例來說，您現在就能在行動裝置和電腦上安裝社交網路 PWA。在電腦上，許多使用者在工作時會縮小視窗，並將動態饋給放在螢幕的一側，因此如果假設他們是使用行動裝置，就會因為可用的寬度而出現錯誤。

瀏覽器分頁的 PWA 全新世界甚至為回應式設計環境帶來全新挑戰，例如迷你模式和摺疊式裝置運作等。

迷你模式

在電腦裝置上安裝 PWA 後，視窗大小可能十分小；比瀏覽器視窗小，比行動裝置可視區域更小。這是網頁上的新功能：我們可以支援迷你模式，也就是最小可達 200 x 100 CSS 像素的視窗。

在當今建立 PWA 時，建議您考慮在回應式網頁設計中提供哪些內容，例如音樂播放器上的控制按鈕、資訊主頁資訊或快速動作。

在電腦上，PWA 可在比您為瀏覽器設計的最小視窗更小的視窗中呈現。為回應式網頁設計新增一個中斷點：迷你模式。

摺疊式裝置與混合

摺疊式和混合式裝置在現今也相當常見：

  • 小型貝殼式手機。
  • 可以當做手機或平板電腦使用的折疊式裝置。
  • 可以轉換成平板電腦的筆記型電腦。
  • 可做為筆記型電腦、鍵盤和觸控板使用的平板電腦。
  • 手機就能透過中樞轉換成電腦。

雖然每個網站都會遇到這個問題，但您可以透過漸進式網頁應用程式，控制及負責應用程式安裝時的視窗。因此，您的設計必須隨之調整，並在各種情境下提供最佳體驗。

先完成所有作業

但該從何處著手呢？以行動裝置為優先，內容優先於離線？在設計網頁彈性時，下列哪項是正確做法？答案是，最重要的是。自 Luke Wroblewski 於 2009 年首次發射出「行動優先」這個詞，「行動裝置優先」一詞的解讀方式有很多種，包括模擬網路上的特定平台使用者介面和使用者體驗模式，以及建構行動應用程式之前，只須使用最小寬度的媒體查詢，一天就要進行呼叫。但本質上確實是這樣：行動裝置強迫您專注。正如 Luke 所說：

行動裝置要求軟體開發團隊只專注於應用程式中最重要的資料和動作。320 x 480 像素的畫面根本沒有空間放置不必要的元素。您必須設立優先順序。因此，當團隊採用行動優先設計時，結果就是專注於使用者想完成的重要工作，而不會出現目前電腦版網站上充斥的繞路和介面雜訊。這不僅能提供良好的使用者體驗，也能為商家帶來好處。

Luke Wroblewski

因此，請只將網站的每個資料檢視重點放在使用者想完成的重要工作上，不要因為螢幕空間較大，就不要加入更多內容。

回應式網頁設計中提到了第二個原則：「不同體驗的漸進式轉換」。為每位使用者提供單一、相同、完美的體驗，不應是您工作的目標；這幾乎是不可能的。

請勿將網站體驗視為固定的東西，而是將其視為一組建議，讓使用者的裝置可根據目前的情況，提供最佳的使用體驗。因此，您必須採用漸進式增強功能。

漸進增強

漸進式強化是一種模式，可讓我們撰寫可在任何地方執行的程式碼，從標準 HTML、CSS 和 JavaScript 開始，並在 API 無法使用時，在其上添加多層功能，並提供適當的備用方案。

如何提升？功能偵測是一種模式，您可以執行支援測試，並根據測試結果做出反應。可以使用幾種內建的網路平台工具和做法進行這項操作。

使用 @supports 檢查瀏覽器是否支援 CSS 功能，並根據結果套用規則。這同時適用於 CSS 屬性和值；如果支援特定屬性但不支援值，則這個屬性會失敗，與不支援的屬性。JavaScript 程式碼可以透過 CSSSupportsRule 存取此值。

大多數新的網路平台功能都會附加至現有物件，因此物件樣式偵測中的「feature」在 JavaScript 中運作良好，其他類似的查詢 (例如檢查元素的屬性或方法) 也是如此。

如要推出新型 JavaScript，您可以透過 module/nomodule 模式提供更強大功能，並向較新型的瀏覽器使用更小的酬載，並在舊版瀏覽器中提供備用體驗。這項功能的額外好處是，可確保支援 ES 模組的瀏覽器可使用新的 JavaScript 功能，例如 Promise、類別、箭頭函式，以及 const 和 let。

您甚至可以結合多種形式的特徵偵測功能，建立強化基準。這個概念由 BBC News 團隊提出，稱為「Cutting the Mustard」，可讓您向所有使用者提供核心體驗，並在達到特定的功能偵測門檻後，才開始改善使用體驗。

避免裝置偵測

您應直接測試功能支援情形，而非根據 User-Agent 字串做出支援假設。

使用者代理程式字串從未真正可靠。他們必須對每個瀏覽器、作業系統和裝置組合瞭若指掌，才能「正確猜測」使用者行為。即使如此，這些網站仍可能遭到使用者冒充，例如在行動瀏覽器上重新導向電腦版網站，只要冒充電腦版使用者代理程式字串，就能輕易達成。

此外，瀏覽器正在努力凍結使用者代理程式字串，讓功能偵測的使用者代理程式字串特別提及淘汰原因，因此比過去識別使用者和裝置時更不可靠。

以內容為先

另一個為網頁設計的設計原則是：先從內容著手。舉例來說，即時股票資訊顯示器含有股票價格圖表，其核心是股票表格，其中包含一段時間內的股票價格，可能還有用於重新整理網站的連結。

接著，您可以使用 JavaScript 和擷取要求強化這項功能，以便在計時器上更新資料表的值，或是使用通訊端提供即時的推播更新。您可以再次強化這項功能，以便繪製結果圖表，例如使用 CSS、SVG 或 Canvas。但核心內容始於內容。

內建函式設計

  • 行動裝置是使用者體驗的焦點限制。
  • 在設計過程中強調內容和核心功能。
  • 盡可能透過進階功能逐步改善成效 (如適用)。

這些原則結合起來，就會產生新事物：內在設計。在「設計內在版面配置」演講中，Jen Simmons 將說明如何使用新式 CSS 工具 (例如 Grid、Flexbox、流動版面配置和編寫模式) 設計及建構使用者介面。透過這些工具，她表示：

您可以讓版面配置與我們擁有的內容和想要的設計相符。

Jen Simmons

這項新的 CSS 可讓設計人員重新取得對版面配置的部分控制權，但必須符合最新的網頁設計原則。您不必根據固定螢幕大小建立固定表單，而是可以利用內容的內在屬性 (例如內容大小、文字大小和可用空間)，定義以內容為依據的規則，以便決定版面配置。這類廣告可讓你在與內容互動時實現設計，而不必控制每個像素的刊登位置。

內在版面配置可讓對話圍繞著網頁上的控制項進行，並提供定義。網站控制項並不會針對每位網站訪客的裝置、螢幕大小、顏色、字型、版面配置或功能進行規定。網頁控制項是指編寫瀏覽器用來組合使用者體驗的規則，並為漸進式網頁應用程式中的每位使用者建立獨特的體驗。

網頁效能

最後，但同樣重要的是，網頁效能是 PWA 的基礎。提供優質使用者體驗是必要條件，這麼做可在各方面帶來更多轉換。

網頁效能涉及以下幾個步驟：

  • 瞭解可用的以使用者為本位的關鍵指標。
  • 設定每個指標的目標。
  • 評估 PWA。
  • 在程式碼或伺服器中靜態套用技術和最佳做法，以改善指標。
  • 再測量一次。
  • 根據使用者的情境即時改善每位使用者的體驗。

目前的網站效能指標會評估內容在畫面上顯示的速度，同時也能評估網站的互動性，以及使用者對這項體驗的看法。

Core Web Vitals

過去十年來，我們一直使用不同的指標來評估網站成效。目前，一組稱為「Core Web Vitals」的建議指標著重於影響效能和使用者體驗的三個關鍵領域：

Core Web Vitals 的一組指標，顯示網站的效能結果。

透過網站使用體驗核心指標，您可以一目瞭然地掌握 PWA 在效能和使用者體驗方面的優缺。

PWA 基礎

為確保所有使用者都能享有優質體驗，請務必確保 PWA 具備回應式設計、行動裝置優先、內在設計和網頁效能方面的穩固基礎。

資源