基礎課程

穩固的基礎

建構優質 PWA 時,必須奠定穩固的基礎。如要實作這個基礎,您必須使用下列幾項原則,針對網路限制設計及編寫程式碼:

  • 試著把行動裝置當成專注力限制。請確保每次的設計檢視都只著重關鍵的內容和互動。
  • 在設計過程中強調內容和核心功能。
  • 視需要逐步強化。因此,請先使用最直接、範圍最廣的工具建構元件的核心內容和功能。打造容易理解的內容。然後測試要使用的進階功能,以強化元件。
  • 無論使用者的網路連線、輸入類型、CPU 或 GPU 效能為何,您都能根據以使用者為中心的網站成效指標、取得實際的使用者指標,以及推動所有使用者提升成效,享受快速且良好的使用者體驗。

只要遵循這些原則,並運用現代模式和網路功能強化安全性,您就能以真正內建函式的設計打造出優異又快速的體驗。 以限制 (而非像素) 為基礎的設計,讓每位使用者都能根據特定的瀏覽情境,以最合適的方式存取您的內容和核心功能。

回應式網頁設計

自 Ethan Marcotte 於 2010 年發布《回應式網頁設計》一文,我們鼓勵設計人員和開發人員打造靈活彈性的體驗,讓使用者介面適用於各種螢幕大小和裝置。

但其實在過程中會縮短至行動裝置、平板電腦和桌機的尺寸,而寬度會嚴重受到 iOS 螢幕大小的影響。 隨著現代 CSS 以及回應式設計原始意圖的發展,我們能將這股力量回流到熱門網站。

回應式網頁設計會介紹三種技術要素:

  • 浮動格線
  • 有彈性的媒體
  • 媒體查詢

因此,這些技術需求還不夠;未來也必須採用不同的思考方式

行動裝置使用者的迷思

早期,我們對回應式設計的假設做出了一項假設,那就是讓網站更方便設計。 舉例來說,小型體驗適用於手機,寬度為 320 像素,適用於平板電腦、寬度為 1024 像素,且比桌機更多。 小螢幕具有觸控功能,大螢幕卻沒有。手機使用者匆忙且分心,因此需要「輕微」的體驗。

以上皆非;他們只假設使用者的需求,完全取決於螢幕大小或裝置類型,因此才是行動裝置迷思。這也不是什麼阻礙,

舉例來說,現在可同時在行動裝置和電腦上安裝的社群網路 PWA。 在電腦上,許多使用者會在工作時將畫面顯示在狹長的視窗上,並假設他們使用的是行動裝置,因為這個視窗的可用寬度不正確。

瀏覽器分頁以外的 PWA 環境,甚至能為回應式設計環境增添新的挑戰,例如迷你模式和摺疊式裝置。

迷你模式

在電腦上安裝 PWA 時,視窗可能會變得非常小,甚至比瀏覽器視窗小,更小的是行動裝置可視區域。這是網路上的新資訊:我們支援迷你模式,視窗最小可為 200x100 CSS 像素。

時至今日,建立 PWA 時,建議您思考一下迷你模式的功能,例如音樂播放器上的控制按鈕、資訊主頁資訊,或是快速操作等回應式網頁設計。

在電腦上,PWA 的算繪操作視窗,可能比您為瀏覽器設計的最小視窗還要小。這個程式庫會為回應式網頁設計新增中斷點,也就是迷你模式。

折疊式裝置和混合型

以下是常見的折疊式裝置和混合型裝置:

  • 小型貝殼式手機
  • 可做為手機或平板電腦的折疊式裝置。
  • 可轉換為平板電腦的筆記型電腦。
  • 平板電腦支援使用鍵盤和觸控板操作。
  • 之後就能透過中樞手機轉換至電腦。

雖然每個網站都有挑戰,但漸進式網頁應用程式由您掌控,但應用程式安裝後會由您掌控。因此,您的設計應視情況做出回應,並在各種情境下提供最佳體驗。

首要之務

但該如何著手呢?行動優先,內容優先是實體管道嗎?哪一項是網路彈性設計?嗯,答案是最重要的。自 Luke Wroblewski 於 2009 年首次推出「行動裝置優先」一詞後,許多人認為「行動裝置優先」一詞的解讀方式有很多:從模擬網路的使用者介面和使用者體驗模式,到建構行動應用程式前再建構行動應用程式,到只使用最小寬度媒體查詢,更每天呼叫即可。他們原本的意圖,其實是:行動裝置會迫使你專注於。如路克所說:

使用行動裝置時,軟體開發團隊只須專注在應用程式中最重要的資料和動作。320 x 480 像素的螢幕上會一直出現多餘的非必要元素。你必須決定優先處理順序。因此,當團隊設計「行動優先」策略時,他們能打造出這類服務,專注於使用者想完成的重要工作,而不會有繞進電腦瀏覽的麻煩和介面上的雜訊。這能為使用者提供良好的體驗,對業務也有利。

Luke Wroblewski

每一個瀏覽網站時,請只專注於使用者想完成的重要工作,不要因為螢幕空間較大,才加入更多內容。

第二個原則是「回應式網頁設計」的第二個原則:「不同體驗的梯度」。 因此,每位使用者在單一平台上,都能享有相同且與像素完美一致的體驗,這些體驗並非您的工作目標;而是不可能達成任務。

與其將網路體驗視為固定的東西, 只要將這類建議視為一組建議,可讓使用者的裝置根據目前的使用環境打造最佳體驗。為此,您需要採用循序漸進的增強功能。

漸進式增強

「漸進式強化」是一種模式,可讓我們編寫能在各種位置執行的程式碼,從標準 HTML、CSS 和 JavaScript 開始,以及在某個 API 無法使用時,額外添加多項功能,並添加適當的備用選項。

如何加強?功能偵測是指執行支援測試的模式,並根據測試結果進行回應。您可以透過多種內建網路平台工具與做法執行這項操作。

使用 @supports 檢查 CSS 功能的瀏覽器支援,並根據結果套用規則。 這同時適用於 CSS 屬性和值;如果系統支援某項屬性,但不允許有值,則該屬性會因不支援的屬性而失敗。JavaScript 程式碼可透過 CSSSupportsRule 存取

大多數新的網路平台功能都會附加至現有物件,因此物件樣式偵測中的「feature」和其他類似的查詢作業 (例如檢查元素屬性或方法) 同樣適用於 JavaScript。

如要發布新式 JavaScript,您可以使用模組/無模組模式,為新式瀏覽器提供更強大的功能並減少承載,為新世代瀏覽器使用者提供備用服務。這個做法可保證支援新的 JavaScript 功能基準,例如承諾、類別、箭頭函式以及 constlet,適用於支援 ES 模組的瀏覽器。

您甚至可以結合多種形式的功能偵測來建立進階基準。這項計畫是由 BBC 新聞團隊共同開發,名為「剪刀推手」,讓你可以為所有人提供核心體驗,並且只在使用者偵測到特定功能偵測列後,才能開始提升使用體驗。

避免偵測裝置

建議您直接測試功能支援,而不是根據使用者代理程式字串做出支援假設。

使用者代理程式字串從未如此可靠。他們仰賴的機制相當瞭解各種瀏覽器、作業系統和裝置組合,才能「猜對」。然而,它們也很容易遭到使用者假冒;舉例來說,在行動瀏覽器上進行電腦版網站重新導向,仍常像假冒電腦使用者代理程式字串一樣簡單。

此外,瀏覽器也正努力凍結使用者代理程式字串,並利用使用者代理程式字串來凍結功能,這稱為淘汰功能的原因,使得比先前識別使用者和裝置更加不可靠。

以內容為優先

為網頁設計策略的另一個原則,就是先呈現內容。舉例來說,內含股票價格圖表的即時股票代號,其核心就是包含歷來價格的股票表格,以及重新整理網站的連結。

之後還能運用 JavaScript 和擷取要求在計時器上更新資料表的值,或是利用通訊端強化這個功能,以提供即時推送式更新。您還能再次強化以繪製結果圖表,例如採用 CSS,例如採用可擴充向量圖形 (SVG) 或 Canvas。但最重要的是內容。

內建函式設計

  • 行動裝置成為使用者體驗的重心。
  • 在設計過程中強調內容和核心功能。
  • 在適用情況下,逐步透過進階功能進一步提升效能。

這些原則結合在一起,為我們帶來全新體驗:內在設計。在「設計內建函式版面配置」中,Jen Simmons 將說明如何使用新型 CSS 工具 (例如 Grid、Flexbox、流程版面配置和寫作模式) 來設計及建構使用者介面。使用這些工具時,她說:

只要使用我們想要的內容和設計,就能真正融入這個版面配置。

Jen Simmons

這個新的 CSS 可讓設計人員重新取得版面配置的某些控制權,但用途與最新的網頁設計原則一致。與其根據固定螢幕大小建立固定形式,您可以定義內容規則,一次使用內容內建屬性 (例如大小、文字大小及可用空間) 進行版面配置。可讓你在與內容互動時實現設計,不需要控制每個像素的位置。

內建函式版面配置,在網路中以完整的控制項呈現控管權,具有定義。網頁控制的方法,與指定裝置或螢幕大小、顏色、字型、版面配置或功能,網路控制是指撰寫瀏覽器用來組合體驗的規則,在漸進式網頁應用程式中為每位使用者打造獨特的體驗。

網站效能

網站效能的最後一個基礎,就是網站效能,也是 PWA 的重要基礎。 因此,良好的使用者體驗是必要的因素,能夠盡可能以各種方式促成更多轉換。

網站效能涵蓋數個步驟:

  • 瞭解以使用者為中心的主要指標。
  • 設定每個指標的目標。
  • 評估我們的 PWA。
  • 在程式碼或伺服器中以靜態方式套用技術和最佳做法,藉此改善指標。
  • 再次測量。
  • 根據使用者的情境改善每位使用者的使用體驗。

網頁成效指標現在可評估內容在畫面上顯示的速度 但也可以衡量網站的互動程度,以及使用者對購物體驗的感受

網站使用體驗指標

過去十年來,我們克服了許多不同指標,以衡量網站成效。 今天,一組建議指標會歸類在「網站體驗指標」專案中。 網站體驗指標著重於三個主要面向,會影響網站效能和觀感:

  • 載入中
  • 互動式
  • 視覺化內容的穩定性

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

透過網站體驗核心指標,你可以快速瞭解 PWA 在網站效能和使用者體驗方面的表現。

PWA 基礎

請務必在回應式設計、行動裝置等方面,奠定穩固基礎,並採用內建函式和網頁效能,確保 PWA 奠定穩固基礎,才能為所有使用者提供絕佳的體驗。

資源