60 秒決策
先確認使用者要完成的事。
適合使用
- 非技術使用者需要在內容中使用少量段落、粗體、斜體或清單格式。
- 格式化內容本身是任務成果,且後端能安全處理對應格式。
不適合使用
- 只需要一段純文字備註。
- 團隊不需要使用者自行控制格式,或尚未定義可接受的內容格式與清理規則。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
工具列只留任務需要的動作
公告通常只需要基本格式;十幾個按鈕會讓人花時間找工具,也增加驗收範圍。
編輯區要像可編輯內容
可見 Label、清楚 Focus、最小舒適高度與輸入後的狀態都不可缺少。
格式與安全一起設計
富文字輸出前需要定義允許的格式與清理策略,不能把使用者輸入直接信任為安全 HTML。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
空白或草稿
顯示要撰寫什麼與可用的最少格式。
選取文字
格式按鈕能對選取內容生效,且狀態可辨識。
已編輯
內容變更後提供儲存或未儲存提示。
唯讀或格式受限
說明不能編輯或不能使用某些格式的原因。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
活動公告草稿
先觀察:工具列是否只保留公告真正需要的格式,且編輯區可直接輸入。
操作:選取一段文字後按粗體或斜體,或插入清單。
預期結果:內容格式有變化;工具按鈕有名稱與選取狀態,不會出現無關的文書功能。
可操作 Demo
只保留必要格式的公告編輯器
活動公告
這份公告只需要強調、斜體與清單;工具列不必假裝成文書處理器。
活動公告
請在週五前完成報名;若需協助,請直接回覆這則公告。
目前為草稿,可選取文字後套用必要格式。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立「活動公告」Rich Text Editor。提供標題、粗體、斜體與項目清單等必要工具,編輯區可直接輸入並保留可見焦點;工具列按鈕要有文字或可理解名稱,按下後更新狀態。不要做成含字型、字級、色盤、表格與十幾個按鈕的迷你文書處理器。驗收清單
不要只確認欄位能不能點。
- 工具列是否只提供任務必要的格式?
- 編輯區是否有 Label、Focus 與最小高度?
- 按鈕是否有可理解名稱與狀態?
- 是否定義允許格式與輸出清理策略?
- 純文字情境是否改用 Textarea?