介面文案撰寫
清晰簡潔勝過耍聰明;一致勝過多變。最好的錯誤訊息是重新設計互動方式,讓錯誤根本不會發生。
文案如何呈現(透過 text-transform 的大小寫、截斷、智慧標點)屬於 better-typography(更好的排版)。錯誤標記與宣告(aria-invalid、即時區域)屬於 better-accessibility(更好的無障礙)。為翻譯字串預留空間屬於 better-layout(更好的佈局)。
檢視既有口吻
在撰寫或審閱之前,請先閱讀鄰近的文案。注意該產品的術語、其在地化慣例以及任何語調或內容風格指南。
刻意建立品牌語調並非缺陷。僅在偏離平實語言會造成不一致、模糊、翻譯風險或與情節不符的語氣時,才提出異議。
單一口吻,彈性語氣
產品有單一口吻,由其既有文案所確立。一個局部的編輯不能發明一個新的口吻。保持術語一致:如果選單中是「封存」,那麼 toast 通知中就不該是「移至儲存空間」。語氣根據情節彈性調整:
| 情境 | 語氣 |
|---|---|
| 成功、入門引導、空白狀態 | 溫暖,可以輕鬆 |
| 例行操作、設定 | 中立,極簡 |
| 錯誤、破壞性確認 | 冷靜、平實、零玩笑 |
| 資料遺失、安全性 | 嚴肅、明確 |
直接稱呼使用者
在說明性文案中,請寫「你」,而不是「使用者」。在錯誤訊息中,「我們」會引起模糊感且看起來像是推卸責任,因此建議用「無法載入內容」而非「我們在載入內容時遇到問題」。若已建立的第一人稱口吻在低風險文案中仍清晰易讀,則可以保留。
節制使用所有格:「我的最愛」勝過「你的最愛」。在整個流程中保持一致觀點。
使用平實詞彙而非花俏詞彙
選擇疲憊的使用者一眼就能看懂的詞彙,並刪除每一個沒有作用的詞。沒有成語、沒有俗語、沒有無法翻譯的幽默。
跳過不必要的性別區分:「訂閱者可以發布食譜」,而不是「每位訂閱者可以發布他或她的食譜」。符合輸入裝置:觸控螢幕用「點按」、使用指標用「點擊」、兩種皆可能時用「選取」。
絕不要用片段圍繞變數來組合句子(例如 "您有 " + n + " 則新訊息"),因為不同語言的詞序不同。請使用具有適當複數形式的完整樣板字串。
以動詞為首的按鈕
按鈕標籤應以命名該動作的動詞開頭:「傳送」、「儲存草稿」、「刪除專案」。絕不要使用「好!」、「我們走吧!」或在重要動作上使用單純的「是」與「否」。
確認按鈕應重複後果,讓對話框無需閱讀主體內容即可回答。「要刪除這個專案嗎?」提供「刪除專案」與「取消」按鈕。
一致的流程用詞
多步驟流程應從頭到尾使用同一套詞彙:「開始使用」進入、「繼續」或「下一步」(擇一)前進、「完成」結束。交替使用同義詞會讓使用者懷疑按鈕功能是否不同。
連結描述其目的地
連結文字在脫離上下文時仍須有意義,因為螢幕閱讀器使用者是透過頁面上連結清單來導航。請寫「閱讀帳單文件」。「點擊此處」同時違反了這條規則與裝置動詞規則。
孤立的「了解更多」在一個頁面上出現兩個以上時就會失效。請為每個連結加上後綴:「了解更多關於匯出的資訊」。
統一大小寫政策
根據元素類型選擇標題大小寫或句子大小寫,然後套用至該類型的每個實例。句子大小寫是較安全的預設值。它更冷靜,沒有需要記憶的逐字規則,且在地化上更為乾淨。「儲存變更」與「放棄變更」並排顯示會顯得不夠嚴謹。
設定描述「開啟」狀態
為切換開關標註開啟時會發生的情況。「傳送已讀回條」讓使用者能推斷關閉狀態;負面描述(「不要傳送已讀回條」)則會將切換開關變成雙重否定。
直接連結到被引用的設定,而非描述到達該設定的路徑:使用「通知設定」連結,而不是「前往 設定 > 通知 > 電子郵件」。
錯誤訊息說明修正方法,並顯示在發生處
錯誤訊息就是一則指示,應緊鄰失敗的欄位顯示:
| 不佳 | 良好 |
|---|---|
| 該密碼太短 | 請選擇至少 8 個字元的密碼 |
| 名稱無效 | 姓名請僅使用字母 |
| 哎呀!發生錯誤。 | 無法儲存。請檢查您的連線後再試一次。 |
不責備、不「哎呀」、不驚嘆號。以正向方式表達提示(「僅使用字母」,而不是「不要使用數字或符號」),並在錯誤發生之前就顯示它們。當相同錯誤持續觸發時,應重新設計互動方式,而非改寫文案。
空白狀態指引方向
空白狀態應說明這是什麼地方、如何填充內容,並提供一個明確的下一步動作:
<!-- 不佳:聳肩 -->
<p>無結果。</p>
<!-- 良好:導向加下一步 -->
<p class="font-medium">尚無專案</p>
<p class="text-sm text-zinc-500">專案能將您的任務與檔案整合在一起。</p>
<button class="mt-4">建立專案</button>
搜尋或篩選的空白狀態應說明查詢內容並提供退出方式:「查無 '季度' 的結果。清除篩選條件」。絕不要將永久性資訊放在空白狀態中。一旦有內容存在,它就會消失。
佔位符是範例,而非標籤
佔位符顯示預期格式:[email protected],DD/MM/YYYY。它會在輸入時消失,因此絕不能作為唯一的標籤。每個欄位都應保留一個可見的標籤。
報告
嚴重性。 HIGH 誤導使用者或隱藏如何從錯誤復原。MEDIUM 破壞了口吻、術語或大小寫的一致性。LOW 是孤立的措辭潤飾。
驗證。 此處僅需原始碼即可。檢查每個標籤與其呼叫的動作是否相符、每個錯誤是否說明了修正方法,以及術語是否與周圍文案一致。無需瀏覽器檢查。
格式。 依照違反的原則將發現結果分組,按嚴重性排序,每個根本原因一行,列出其出現的每個位置:
| 嚴重性 | 位置 | 修改前 | 修改後 | 原因 |
|---|
位置 為 path/to/file:line。原因 說明違反的原則以及對使用者的影響。
當仍存在任何 HIGH 項目時,以 封鎖 結尾;否則以 核准 結尾,並將剩餘項目留在表格中作為待辦事項。切勿對你未檢查的範圍給予 核准。若無任何可報告事項,請說明「無可採行之文案發現」並報告驗證完成。