60 秒決策
先確認使用者要完成的事。
適合使用
- 撰寫者熟悉輕量文字標記,且內容需要純文字、版本控制或可攜性。
- 來源碼與渲染後結果都需要被清楚檢視。
不適合使用
- 主要使用者不認識 Markdown,也沒有學習它的理由。
- 內容只是一小段沒有結構的純文字。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
來源與預覽要分得開
使用者應知道左邊在寫標記、右邊在看結果,不能讓兩種模式混在同一塊。
預覽是受限的渲染結果
預覽前要處理輸入與允許語法,不能把任意 HTML 當成可執行內容塞進頁面。
即時回饋維持可讀
字數、錯誤與預覽更新應幫助寫作,不要每輸入一個字就搶走焦點。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
撰寫來源
可直接看到 Markdown 語法與範例。
即時預覽
標題、粗體與清單等支援語法轉成可讀結果。
空白或語法未完成
保留輸入文字,預覽以安全且可理解方式處理。
提交前
明確說明會儲存原始 Markdown、渲染結果或兩者。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
技術公告 Markdown
先觀察:來源、預覽與字數是否同時清楚,不必猜目前在哪一種模式。
操作:修改標題、粗體文字或新增清單項目。
預期結果:預覽安全更新;來源仍保持純文字且不會失去輸入焦點。
可操作 Demo
原始 Markdown 與安全預覽
支援標題、粗體與項目清單;右側是安全預覽。
目前 0 個字元。
預覽
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「技術公告」Markdown Editor。左側為可編輯 Markdown 來源,右側為即時安全預覽;支援標題、粗體與項目清單,並顯示目前字元數。明確標示來源與預覽,不能把 HTML 直接當成可執行內容插入預覽。驗收清單
不要只確認欄位能不能點。
- 來源與預覽是否有清楚名稱?
- 預覽是否安全處理輸入?
- 是否只支援任務需要的語法?
- 字數與更新狀態是否易懂?
- 讀者不熟 Markdown 時是否有合適替代方案?