Figma Design 教材 / Class LLL

多語服務預約：保住內容，再重走失敗與修正

把尺寸、元件回饋與流程證據放回同一個需求

用原創諮詢服務的繁中／英文長標題及三個固定時段，改窄寬、尺寸責任與時段排列；再走空值、載入中、錯誤、返回保已選與示意成功。網站真HTML可操作，與Figma視覺稿和真正預約系統分開驗證。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 20 分鐘

開啟互動教材查看參考來源

閱讀目標

從需要保留的服務資訊拆需求
用長繁中／英文與窄寬重判尺寸
區分內容屬性、元件狀態與真流程
重走無時段／空值／載入中／錯誤／修正／成功
把真HTML語義、原生Figma與真人證據分開

適用條件與學習範圍

服務名換英文、畫面變窄，還要能返回修正時，哪些資訊與已選狀態不能丟？成功畫面能證明真的完成預約嗎？

可直接操作案例；文字、響應卡片、可組合元件、多語壓力與可重走原型各有唯一正式頁，按卡住的責任補讀。

能在同一需求下說明資訊層級、逐軸尺寸、元件回饋與流程分工，用另一語言及窄寬重走，列真產品仍待驗證的資料、語義及服務條件。

兩組原創諮詢內容、三個固定時段及手動固定回覆，不連帳戶、庫存、付款、通知或後端；不是Figma原生排版／字型／元件／原型或真訂位，未真人試用。

原理與判斷

預約不是一張成功畫面。讀者先要知道約什麼、何時、要選哪一項、失敗後怎麼修，以及目前是否真的完成。長服務名、選填內容、沒有可用時段及載入回覆，都會改變版面與流程；不能只在短文案、桌面寬和成功路徑驗一次。本案例把相同原創需求放進一份真尺寸表單和服務櫃台：尺座看內容與寬，抽屜看已選，輸送台看目前流程。先修可讀性，再走錯誤與返回。所有送出只在本站改有限狀態，沒有網路請求或建立預約；真產品還要補資料／權限、可及性與裝置實測。

先拆要保留的資訊，不先選漂亮元件

原創需求是一場45分鐘的多語設計作品諮詢與輔具需求討論；繁中與英文各有真長標題、日期及同三個固定時段，沒有假文或真客戶資料。必要資訊是服務、日期／時長、可選時段、目前結果與下一步；選填需求不能掩蓋必要選擇。先列無時段、未選、載入中、錯誤、返回已選及成功，再選容器與元件。不聲稱這個案例已被受測者證明有效。

同一需求，換語言及窄寬重判

切服務內容語言是本站替換原創文案，不是自動翻譯或Figma根據檢視範圍自動換模式。英文長標題可能多行，日期長度及時段文字也要看真內容。原生字型、CJK、替代及文字尺寸調整回唯一文字頁；主題、密度、語言與來源屬性則回多語壓力頁。本站不縮20px標題去硬塞，也不以平均字寬猜原生排版。

逐層逐軸說出固定尺寸、填滿及依內容調整責任

本站Card外寬扣左右各16px才是可用寬。208外寬有176內容，初始內列固定尺寸320超出144；填滿內列才修這個責任。標題固定28高仍會疊後續內容，讓文字高隨內容才解文字高；Card固定260又可能包不下表單，外框高另決定。這些是本站CSS相應原理，用實際DOM／Range觀察，不冒充完整Figma 自動排版求解；功能條件與最小值／最大值回正式頁，案例不再造另一份規則。

時段卡要自然流，還是需要列欄關係

同寬時段卡要對齊二維列欄時可評估格線；自然寬、依順序流到下一行時評估換行。固定兩欄在窄寬會讓每欄更窄，時間仍必須讀完整，不因有格線就假裝響應完成。本站只比較自己的CSS排列與實際矩形，不自動找斷點，也不等於Figma tracks／跨格／依內容調整或全部定位規則；需要完整功能就回唯一卡片與格線教程。

文案、選填與狀態不是同一種變化

服務名與日期是內容，選填欄是否顯示是布林式顯示需求，按鈕的可用／載入中／錯誤回饋是離散狀態。這些不必每種文案都做成新變體，也不需要一有差異就解除連結。可變Body若真的要自由增減，才另核內容槽與來源邊界；時段本身不是Figma 內容槽屬性。本站元件回饋由明確流程推動，不把外觀變體當資料驗證，來源更新與局部覆寫回可組合元件頁查。

無時段、未選與載入中各有不同下一步

無可用時段不是欄位驗證錯誤：先告知沒有選項，再說可回哪裡改條件，不能顯示假的可訂時間。未選則指出需要選擇，返回修改後才再送。載入中表示本站已凍結當時時段與回覆樣本，按鈕停用防重送；本台不跑假網路計時，明按「推進本站固定回覆」才到下一站。固定資料不是庫存或服務承諾，真產品另核超時、取消、重複提交與服務端狀態。

錯誤後保已選，修正後仍只到示意成功

預設固定回覆是錯誤，先走過它才知道是否可返回。返回只回編輯、保已選時段與選填內容，再改成另一個時段與成功樣本重送。載入中中的樣本已凍結，事後改下一次回覆不改這次結果；成功顯示當時選擇並固定標「未建立真預約」。這不能證明真時段已保留、付款已收或通知已寄，正式產品應以服務端回覆及可追溯記錄驗收。

畫出按鈕，與成品真的有語義分開

Figma視覺意圖可記名稱、狀態、錯誤文案、順序與焦點；本站則用真form、fieldset／legend、radio、label及button做有限試片。只看得到radio外觀，不會自動讓設計稿或正式產品取得相同HTML語義。本台鍵盤、觸控及讀數只是本站證據；原生讀屏、Figma平台支援、真產品焦點／狀態宣告、觸控與對比仍各自驗，不能稱全面WCAG或真人驗收。

交付時說清已測與未測

本案例引用當日文字／auto 排版／元件／原型與可及性來源，原生變數及條件建立的付費／編輯與文字排版／元件功能條件分開。本站無需Figma帳戶，也不解鎖原生服務。交付記兩組內容、最窄寬、必要狀態、返回／保存、元件及資料來源，附原生待核與真人未測；不把來源數、可點通或示意成功當正式預約系統完成。

步驟與觀察

列需求及必要資訊
用原創服務名、日期／時長及三時段，列必要與選填；補上無時段、未選、載入中與錯誤。操作名稱對照（中文為本站教學譯名）： Design > Text dimensions／尺寸調整（介面原文：Design > Text dimensions／resizing）框架／nested auto 排版 > 寬度／高度尺寸調整（介面原文：Frame／nested auto layout > Width／Height resizing）自動排版 > 格線／換行（介面原文：Auto layout > Grid／Wrap）元件屬性 > Text／布林值／變體（介面原文：Component properties > Text／Boolean／Variant）原型 > 設定變數／條件判斷／導覽至（介面原文：Prototype > Set variable／Conditional／Navigate to）
換長內容與窄寬
切繁中／英文，從272到208或176外寬，保字級看真內容；不是把整張縮小。
逐層修尺寸與排列
看可用寬與內列固定尺寸差值，再分文字高與外框高；依可讀性比較內容流或二維格線。
走未選與錯誤
未選送出觀察空值；選一個時段進載入中，手動推固定錯誤，再返回確認保已選。
修正並核凍結結果
改時段／下一次樣本，重新送出；只以這次凍結回覆呈現示意成功，不建立真預約。
補讀後回來重走並交付限制
回唯一文字／元件／多語／分流／可及性頁補原因，原生返回保本案例；記真成品仍需的資料與語義測試。

常見問題

外框窄了，內列仍伸出

先扣內距，查固定尺寸320與可用176差144；填滿寬不自動修文字與外框高。

換英文就把標題縮到難讀

保字級與完整資訊，讓高度隨內容並核字型；不要把縮字當全部響應策略。

沒有時段還能按出成功

空資料與欄位空值分開，先提供改條件路徑；本站固定成功也不保證服務有庫存。

載入中時改樣本，正在等的結果也被改掉

凍結當次選擇與回覆，只讓樣本影響下一次；避免用新設定改寫已開始的事件。

錯誤返回丟掉已選

把返回修改與整台重設分開，保時段／選填，再送才開始新流程。

可點表單就稱原生或真人驗收

分開Figma視覺、本站HTML與真服務／裝置／讀屏；示意成功固定標未建立預約。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：沿當日文字、巢狀／格線、元件屬性、付費條件及工具可及性；原生平台／字型、帳戶及服務另外核。來源狀態：保留FG11／55／56／58／54實際同日Scrapling來源metadata，按本案例責任重讀，不冒稱本票新抓或原生驗證。示意限制：兩組原創服務文案、三個固定時段、單一真HTML表單與實測DOM／Range、服務櫃台及手動固定回覆。沿有限分流模型，不重現Figma引擎或真後端。原生軟體實測：未Figma原生稿、帳戶、手機App／讀屏或真預約服務實測；只驗本站公開瀏覽器。學習成效驗證：未真人試用或學習／遷移成效實測。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。