使用通用編輯器建立回應式Forms — 完整指南
現代的網頁環境要求表單能夠在裝置規格和螢幕尺寸不斷擴大的環境中維持順暢運作。從大型的桌面顯示器，到小巧的智慧型手機螢幕，無論使用者選擇何種裝置，都希望獲得一致且直覺易用的體驗。建立回應式表單不再是選項，而是提供專業、可存取並達成最佳轉換成效之數位體驗的基本需求。
通用編輯器提供全面的工具和方法，可協助開發能夠智慧地適應各種螢幕尺寸、輸入方法及使用者環境的回應式表單。本指南將探討建立表單所需的技術基礎、實施策略以及最佳化技術，以便表單在所有裝置上皆有出色效能，同時維持可用性、無障礙設計和視覺吸引力。
建立回應式表單涉及兩個主要活動：
- 回應式測試： 使用裝置模擬器針對各種螢幕尺寸預覽及測試您的表單。
- 回應式設計： 選取並實施無縫適應不同裝置的版面配置模式。
閱讀本指南，您將瞭解如何：
- 在桌上型電腦、平板電腦和行動裝置上測試表單
- 為您的內容選取合適的版面配置模式
- 套用回應式設計最佳做法
- 回應式表單常見問題疑難排解
- 最佳化表單以提高在行動裝置上的效能
第一部分：在不同裝置上測試表單
在不同的裝置上測試表單，可以幫助您比使用者早一步發現回應式問題並予以解決。通用編輯器提供模擬器模式來模擬各種螢幕尺寸和方向。
如何測試表單
步驟 1：開啟裝置模擬器
- 在通用編輯器中開啟您的表單。
- 按一下「
- 將會出現裝置選擇器選單。
步驟 2：選取要測試的裝置
- 桌上型電腦 (寬度 1200px 以上)：預設編輯視圖
- 平板電腦 (寬度 768px 至 1199px)：中等螢幕測試
- 行動裝置 (寬度 320px 至 767px)：小螢幕測試
- 自訂：指定特定裝置的精確尺寸
步驟 3：測試裝置方向
使用 螢幕旋轉器 圖示來測試兩種方向：
- 縱向模式：標準行動裝置方向
- 橫向模式：旋轉後的平板電腦或手機視圖
裝置測試結果
每種裝置類型都表現出獨特的回應式行為：
各裝置的視覺範例
桌上型電腦視圖 (1200px 以上)：
全寬版面，表單欄位並排顯示。
平板電腦視圖 (768px 至 1199px)：
中等寬度版面，調整元件間距。
行動裝置視圖 (320px 至 767px)：
單欄版面且元件堆疊。
自訂裝置視圖：
使用者指定尺寸，用於特定目標測試。
測試工作流程
對於新表單：
- 在桌上型電腦視圖中建置： 開始即提供完整功能。
- 在平板電腦上測試： 檢查中等螢幕的適用情況。
- 在行動裝置上驗證： 確保在小螢幕上的可用性。
- 修復回應式問題： 根據需要調整版面。
- 重新測試所有裝置： 確認所有尺寸的裝置均已修正。
對於現有表單：
- 快速檢查行動裝置的情況： 該表單可以在手機上使用嗎？
- 確認發生問題的區域： 注意版面配置和可用性問題。
- 系統測試： 全面測試每種裝置尺寸。
- 記錄問題： 追蹤需要修正的問題。
- 實施修正： 按部就班地解決問題。
第 2 部分：選取回應式版面配置模式
版面配置模式決定表單內容如何適應不同的螢幕尺寸。正確的模式可以同時改善使用者體驗和表單在行動裝置上的效能。
版面模式概觀
快速決策指南
遇到以下情況請使用面板版面：
- 您的內容分為不同的類別
- 使用者需要同時檢視多個區段
- 內容相對簡單
遇有以下情況請使用精靈版面：
- 表單有多個邏輯步驟
- 您想減少認知負荷
- 行動裝置使用者是主要客群
遇到以下情況請使用摺疊式版面：
- 表單包含選用或次要內容
- 節約空間很重要
- 內容可以按邏輯分組
面板版面
面板版面會將相關內容整理成具有明顯視覺差異的區段，讓使用者能一次檢視多個區段。這種版面非常適合具有分類資訊的表單，方便在大螢幕上並排展示。
回應式行為
- 桌面 (1200px 及以上)： 面板並排顯示或以網格形式顯示，以達到最大可見度。
- 平板電腦 (768px 至 1199px)： 面板垂直堆疊，並維持適當間距以保持清晰度。
- 行動裝置 (320px 至 767px)： 面板採用單欄版面，各區段之間有明顯區隔，方便導覽。
如何實施
- 將面板元件新增至您的表單。
- 將各面板內的相關欄位組成群組，保持符合邏輯的組織方式。
- 對每個面板區段指派明確的描述性標題。
- 確保面板之間有足夠的間距，避免造成視覺混亂。
最佳做法
- 桌面顯示的面板數量應限於 3 或 4 個，避免使用者不知所措。
- 每個面板皆使用簡潔的描述性標題，有助於使用者理解。
- 按照邏輯將面板內的欄位整理分類，盡量減少認知負荷。
- 在觸控式裝置上測試面板導覽功能，確保在所有平台上皆可使用。
常見使用案例
- 工作申請： 個人資訊、教育程度、經歷和推薦人的區段。
- 產品註冊： 基本詳細資訊、技術規格和保固資訊的面板。
- 調查表單： 人口統計、偏好、意見和聯絡資訊分組。
精靈版面
精靈版面會引導使用者完成多步驟程序，每次呈現一個區段。複雜表單使用這種版面的成效特別好，因為此版面把程序分解成多個可管理的步驟，減少認知負荷並提高完成率。
回應式行為
- 所有裝置： 始終聚焦於單一步驟，最適合行動裝置使用者。
- 步驟內容： 每個步驟都具有回應式調整能力，會根據螢幕尺寸來堆疊或並排顯示各個欄位。
- 導覽： 具有方便觸控的按鈕且維持足夠的間距，方便互動。
- 進度指示器： 進度列或步驟指示器會針對不同的裝置進行適當縮放，並提供關於完成狀態的明確回饋。
如何實施
- 將精靈元件插入您的表單中。
- 將表單劃分為數個合理步驟 (理想情況下為 3 至 7 個步驟)，確保每個步驟都有重點，且易於管理。
- 新增進度指示器，幫助使用者了解其位於流程中哪個階段。
- 提供明確的導覽控制，例如「下一步」、「返回」和「儲存」按鈕。
行動裝置最佳化提示
- 使用大型觸控目標 (高度至少為 44px) 進行導覽控制，可增強無障礙設計。
- 確保步驟指示器在小螢幕上清楚可見且易於閱讀。
- 限制每個步驟的欄位數量，以便減少捲動和加強聚焦。
- 啟用自動儲存功能，防止因使用者離開表單而導致資料遺失。
最佳做法
- 設計步驟時應遵循邏輯性順序，每個步驟都要以上一個步驟為基礎。
- 每個步驟皆使用清楚的描述性標題，設定使用者的預期。
- 在每個步驟驗證使用者輸入，提早發現錯誤並減少挫折感。
- 讓使用者能夠向後導覽，以便審閱或編輯先前的資訊而不會遺失資料。
常見使用案例
- 保險索賠： 事件詳情、證據提交、個人資訊和審閱的各項步驟。
- 帳戶設定： 基本資訊、偏好設定、安全性設定和確認的各個階段。
- 訂單程序： 產品選擇、運送資訊、付款詳細資料和訂單摘要的各個步驟。
摺疊式版面
摺疊式版面將內容整理成可收合的區段，可以節省空間，是顯示選用或次要資訊的理想選擇。這種版面尤其適合內容可以按照邏輯分類，且不需要一次全部顯示的表單。
回應式行為
- 行動裝置效能： 僅展開相關區段，比較不需要捲動並縮短載入時間。
- 觸控最佳化的標頭： 支援在行動裝置上使用自然手勢，輕鬆點選和展開區段標頭。
- 流暢的動畫： 展開和收合區段，針對使用者互動提供視覺回饋。
- 空間效率： 收合的區段能盡量減少垂直空間，使得在所有裝置上皆更容易導覽表單。
如何實施
- 將摺疊式元件新增至您的表單。
- 將各個摺疊區段中相關的選用內容或次要內容分組。
- 各區段使用清楚的描述性標題，幫助使用者了解其中包含的資訊。
- 根據重要性和使用者需求，為各區段設定適當的預設開啟或關閉狀態。
行動裝置優勢
- 收合未使用的區段可以減少捲動，讓使用者能夠一次僅專注於一個區段。
- 方便觸控的互動功能支援自然的展開/收合手勢。
- 載入速度更快，因為只看見使用中的內容。
- 加強聚焦，因為使用者在任何特定時間內只會看到所需的資訊。
最佳做法
- 使用清楚的區段標頭，讓使用者在展開區段之前就能預期其中內容。
- 將各區段內的相關內容按照邏輯分組以幫助理解。
- 若是重要的區段需要立即關注，將其設定為一開始便展開。
- 提供簡短的區段預覽或摘要，幫助使用者決定要展開哪些區段。
常見使用案例
- 產品設定： 基本選項、進階設定、配件和支援的各個區段。
- 常見問題表單： 將帳戶、帳單、技術和一般性的問題分組。
- 設定表單： 隱私權、通知、外觀和進階選項的各個區段。
第 3 部分：回應式設計最佳做法
各個裝置類型的最佳做法
版面與互動：
- 所有表單內容皆使用單欄版面，以達到最高的可讀性和易用性。
- 確保所有按鈕和互動式元素的高度至少為 44px，以便維持觸控互動的可靠性。
- 使用看得見的返回和下一步按鈕，提供清晰、簡單的導覽功能。
- 拆解長表單，以便減少在各個區段中的捲動。
- 自動將焦點放在第一個輸入欄位，以便觸發行動裝置鍵盤。
欄位指南：
- 文字欄位的寬度應佔滿整個螢幕，並留下足夠的邊框間距方便觸控輸入。
- 使用原生的下拉式選單/選取元素，達到最佳的行動裝置可用性。
- 實施原生的日期選取器，維持一致的行動體驗。
- 提供廣大的檔案上傳區域並清楚標記，以方便存取。
版面與可用性：
- 對相關欄位使用兩欄式佈局以充分利用增加的熒幕空間。
- 測試縱向與橫式檢視時的表單外觀和可用性。
- 設計兼顧觸控和滑鼠輸入兩種方式，確保可以輕鬆存取所有控制功能。
- 擴大內容區域的範圍，同時保持清晰的視覺層次與可讀性。
進階功能與版面：
- 使用多欄版面，有效利用水平空間並減少垂直捲動。
- 提供常用動作的鍵盤快速鍵，支援進階使用者。
- 對互動式元素實施滑鼠停留狀態和視覺回饋。
- 為複雜表單提供進階驗證功能，並顯示清楚、詳細的錯誤訊息。
使用媒體查詢中斷點設定自訂版面
在使用 通用編輯器 為最適化Forms中的元件建立自訂配置時，您必須使用 CSS媒體查詢中斷點 來定義回應式行為。 這可確保表單可正確呈現不同的裝置和熒幕大小。
建議的中斷點(根據AEM核心元件)
min-width: 1200pxmin-width: 768px and max-width: 1199pxmax-width: 767px關鍵點
- 使用這些中斷點來控制元件在不同裝置上調整大小、棧疊或隱藏的方式。
- 遵循您組織的回應式設計准則，以維持一致的UX。
- 在多個裝置和方向上測試版面配置，以確保可用性和可存取性。
/* Example: Stack form fields on smaller screens */
@media (max-width: 767px) {
.custom-form-container {
display: flex;
flex-direction: column;
}
}
疑難排解
版面問題
可能的原因：
- 固定寬度的元素無法適應小螢幕
- 桌面優先的 CSS 覆寫行動裝置樣式
- 影像或內容溢出其容器
如何修正：
- 確保所有影像和容器都採用相對或基於百分比的尺寸設定。
- 從行動裝置優先的 CSS 方法開始，然後再針對大螢幕疊加增強功能。
- 使用裝置模擬器和真實裝置來測試表單。
- 避免使用固定尺寸；使用靈活的版面。
可能的原因：
- 小於 44px × 44px 的按鈕或連結
- 互動式元素距離太靠近
- 自訂 CSS 縮小預設的觸控目標尺寸
如何修正：
- 確保每個互動式元素至少為 44px × 44px。
- 在按鈕、連結和其他控制項之間加入足夠的間距。
- 使用真實的觸控裝置而非僅透過滑鼠進行測試。
- 視需要擴展觸控目標區域，以利無障礙設計。
可能的原因：
- 未換行的長段文字或標籤
- 寬度固定的容器
- 無法回應式縮放的影像
如何修正：
- 針對所有標籤和內容啟用文字換行。
- 使用會隨容器縮放的回應式影像。
- 設計靈活的版面，能適應不同的內容長度。
- 使用短內容和長內容進行測試，確保能夠調整適應。
效能問題
可能的原因：
- 未經最佳化的大型影像
- JavaScript 過多或過重
- 同時載入太多表單欄位
如何修正：
- 針對行動裝置將影像最佳化，並使用適當的檔案格式。
- 推遲或延遲載入非關鍵性的內容。
- 盡量減少使用第三方指令碼和小工具。
- 簡化表單欄位，僅載入必要內容。
測試和驗證問題
可能的原因：
- 瀏覽器轉譯引擎的差異
- 滑鼠無法準確模擬觸控互動
- 網路速度落差
如何修正：
- 除了模擬器之外，務必要使用真實裝置進行測試。
- 使用多種瀏覽器和裝置進行全方位的測試。
- 模擬各種網路速度，找出效能瓶頸所在。
- 收集目標客群中真實使用者的回饋。
回應式表單的成功量度
使用者體驗：
- 表單完成率： 在行動裝置上的目標是達到 85% 或更高。
- 完成所需時間： 行動裝置使用者完成表單所需的時間，應落在桌面使用者完成時間的 20% 以內。
- 錯誤率： 將驗證錯誤維持在 5% 以下。
- 放棄填寫點： 找出流失使用者的步驟並解決該問題。
技術效能：
- 頁面載入時間： 於 3G 連線上少於 3 秒。
- Core Web Vital： 達到或超過 Google 建議的臨界值。
- 無障礙協助工具： 達到 WCAG 2.1 AA 合規性。
- 瀏覽器相容性： 確保在所有主要瀏覽器上能維持 98% 以上的功能正常運作。
發佈前檢查清單：
- 在實際的行動裝置上 (而非僅使用模擬器) 測試表單。
- 確保所有觸控目標至少為 44px × 44px。
- 確認於所有支援之螢幕尺寸下的文字可讀性。
- 確認表單驗證在各個裝置和瀏覽器上維持一致的運作。
- 確保行動裝置的載入時間少於 3 秒。
- 檢查所有互動式元素是否皆能透過鍵盤和螢幕閱讀器存取。
- 在所有支援的裝置上測試表單提交。
後續步驟
立即採取行動：
- 稽核您目前的表單： 使用裝置模擬器測試現有表單。
- 找出可快速改善之處： 先解決明顯的行動裝置可用性問題。
- 優先處理高流量表單： 專注於對使用者影響最大的表單。
- 實施行動裝置優先的方法： 從最小螢幕設計開始進行。
進階最佳化：
- 效能監視： 設定分析以追蹤表單量度。
- A/B 測試： 使用不同的版面和方法進行實驗。
- 收集使用者回饋： 收集真實使用者的洞察。
- 持續改善： 定期審閱和最佳化表單。