1. 事前準備
瞭解 Material Design 的通訊指南！
清楚簡潔的文字是優質使用者體驗的關鍵。瞭解 Material Design 的 UX 撰寫指南，並開始套用 UI 文字原則，協助使用者達成目標。
你知道嗎？Material 的溝通部分涵蓋的內容遠不只使用者體驗寫作，歡迎瀏覽各種主題，包括資料視覺化、新手上路和空白狀態模式。
像作家一樣思考！
無論您是否與使用者體驗文案或內容策略師合作，本程式碼研究室都會介紹各種方法，協助您為介面選擇合適的語言。您將學會提出一些撰稿人員可能會著重的問題，以改善產品體驗，例如標籤和通知等使用者介面文字的清晰度和簡潔度。
課程內容
- 什麼是使用者體驗寫作，以及為何重要
- 如何根據不同情境決定合適的語氣和用語
- 元件專屬的撰寫注意事項
- 其他學習資源
軟硬體需求
- 請準備好文件或紙張，以便跟著程式碼研究室練習操作。
必要條件
本研究室以 Material Design 的基礎寫作、文法和設計概念為基礎，大致瞭解 UI 中的互動式元素。
以英文為主，但適用於各種語言
本實驗室將介紹溝通原則，協助您打造更優質的使用者體驗。不過，範例和用字會依據美式英文的慣例。
這項指引會考量情境和文化差異，因此適用於任何語言的 UI。如要進一步瞭解非英文的注意事項，請參閱步驟 9 列出的資源。
2. 什麼是 UX 撰寫？
總覽
UX 撰寫 (UXW) 也稱為內容策略或內容設計。這是使用者介面文字背後的學科，也是一個獨特的領域，著重於透過清晰的敘述、字詞選擇、資訊階層等方式，以語言提升使用者體驗。
從 UX 撰稿人的角度思考，有助於提升工作完成度、使用者滿意度，以及整體易用性！
UX 撰寫有何不同？
使用者體驗文案是為真人撰寫的內容。
撰寫使用者體驗內容時，請先假設使用者介面文字的主要目標是支援使用者歷程。
文字的用字、長度、風格和結構，都會影響使用者對功能和工作目標及優點的理解程度。
樣式
撰寫風格的選擇應符合目標對象的需求和目標。UXW 結合了正式寫作的學術規則 (您在報紙或非小說書籍中讀到的內容)，以及人們在線上溝通時使用的非正式風格 (電子郵件、簡訊、即時通訊)。
應用程式和介面的撰寫風格較不正式，主要有兩個原因：
- 線上通訊比印刷或學術寫作更不正式
- 使用者介面文字會受到螢幕空間限制，因此字元長度會受到限制
以使用者為中心的撰寫方式，又稱「讓它運作」
UX 撰寫的重點是以目標為導向的風格，而非遵守文法。這並非表示文法對清楚一致的內容不重要，而是建議先考量使用者需求，再決定文法。
在字詞選擇和風格方面，風格決策的指導原則可能只是讓它運作。介面適用的最佳選擇，不一定與正式寫作的規則相同。
根據讀者的閱讀方式撰寫內容
UXW 應反映多種語言的讀者以 F 形模式掃描網頁的方式，而非閱讀完整段落。預測讀者的行為，就能根據實際的閱讀體驗撰寫內容。
如果是網頁內容，通常會轉換成簡短段落、可掃描的說明標題和策略性格式。
線上閱讀模式研究的眼球追蹤範例。圖片和研究資料來源：nngroup.com (2006 年；2017 年)。
測試
以相同文字滿足不同文化或年齡層的需求可能很困難。用適當的字詞傳達訊息聽起來很簡單，但語言和理解能力非常主觀。
為確保文字內容符合您的想法，請務必進行測試，評估實際的清楚程度、含義和效力。
Approaches
簡單又經濟實惠
- 大聲朗讀你寫的內容。這段話聽起來像是你會對真人說的嗎？如果不是，請嘗試重新撰寫。
- 請其他人閱讀你的文字，並向你說明他們認為你的文字代表什麼意思
- 向多位使用者展示 UI 中的撰寫內容範例，並進行問卷調查
- 使用 Google 搜尋趨勢或 Google 圖書 Ngram Viewer，瞭解特定字詞或詞組是否比其他字詞或詞組更常見
廣泛內容測試會使用啟發式方法，例如：
- 理解程度和可讀性
- 工作完成情況和工作耗時
- 語氣和觀感評估
3. 原則
總覽
Material 的撰寫指南原則旨在透過準確簡潔的語言建立信任感，並提升清晰度。您可以視需求增減 Material 的原則。
有了指引，多位使用者就能以群組身分做出更一致的決策。
簡明扼要，但不要像機器人
撰寫簡短的文字片段，讓觀眾能快速瀏覽，並將重點放在有限的幾個想法。
保持精簡並切中要點
使用簡單直接的語言，讓文字容易理解。每次撰寫內容時，請自問是否有更簡單的表達方式。
清楚向使用者說明
在英文中，第二人稱 (you 或 your) 通常更直接明確。強調擁有權時，可以使用第一人稱 (我、我的)。
「你」和「你的」是更直接的稱呼方式。
「我」可能會造成混淆，因為這會將使用者位置/聲音與應用程式的聲音結合。使用「我」或「我的」可強調內容或動作的明確擁有權。
避免混用第一人稱和第二人稱
為避免混淆，「我」和「你」不應出現在同一詞組中。
傳達重要細節
只傳達特定情境的必要詳細資料，讓使用者專注於手邊的工作，而不是解讀許多選項。在任何對話方塊或通知中，請考量需要哪些資訊來說明作業和任何重大後果。
4. 語音和語調
總覽
如果沒有考慮要為體驗營造的語氣和風格，就難以保持一致性和清晰度。
試想您正在閱讀五個句子，但每個句子都是由不同的人所寫，且他們並未看過其他四個句子。有時，使用者會根據自己的語氣和風格撰寫內容，導致使用者介面導覽體驗不連貫。
如果有多人為產品提供文字內容，語氣和風格指南有助於確保大家選擇的字詞具有共同的意義和目的。
以下是 Android 過去的廣告活動範例，採用直接的語氣，以清楚且包容的聲音傳達訊息。
什麼是語氣和風格？
語氣應在整個體驗中保持一致，而語調則會因情境而異。
語音
語氣是指在整個體驗中傳達的心情、態度或觀點。這是品牌「個性」的一環，可讓使用者熟悉產品的「聲音」。
語音原則可引導您選擇合適的字詞，並搭配範例說明實際應用情形，效果最佳。如果沒有範例，原則通常會過於抽象，無法引導團隊做出風格決策。
以下列舉幾項常見的語氣原則：
- 實用：撰寫提示時，請像人類一樣，而非機器。說明錯誤並建議解決方案。
- 淺顯易懂：確保新使用者都能輕鬆理解文字內容。請務必說明或替換技術或進階用語。
- 激勵人心：在整個體驗過程中強調優點和成就。以積極正向的語氣陳述目標和結果。
語氣
無論是否刻意，寫作語氣都會傳達情緒和情感。
舉例來說，如果語氣定義為「有幫助」和「人性化」，那麼為了強化這個目標，語氣可能要支持性且隨和，而不是要求性且簡潔。
畢竟每個人對「支持性」和「輕鬆」的定義不同，因此字詞清單和內容矩陣有助於將語氣和語調付諸實行。第 6 到 8 節會進一步說明。
重要性
適當的語氣可以建立使用者的信任感和信心。舉例來說，如果錯誤訊息是以笑話的形式呈現，而非提供支援，輕鬆的語氣可能無法讓使用者瞭解自己的挫折感是合理且可解決的。
製作色調對應
語氣地圖有助於規劃及記錄調整語氣的策略。
首先，請考慮使用者歷程中的重要節點。無論是製作遊戲、金融工具或購物應用程式，都應根據使用者歷程中的不同階段 (例如新手上路、確認和錯誤)，調整語氣。
舉例來說，收到日常安排確認通知時，一開始可能會覺得很有趣，但收到五次後，可能就會覺得很煩。
錯誤狀態是另一個例子，說明色調對應如何協助將色調從輕鬆對話轉變為支援性詳細色調。
1. 首先，請挑選兩個可代表所需色調範圍的維度或光譜。
以下提供幾個 UX 撰寫語氣的重要軸線：
- 嬉戲與嚴肅
- 簡潔與詳細
- 情緒性與中性
- 隨性與嚴謹
2. 繪製格線，並以兩條相交的線條標示出您想策略性運用的語氣維度。
在下方範例中，您可以看到「有趣 vs. 嚴肅」和「簡潔 vs. 詳細」是地圖的維度。
3. 接著，列出您常用的訊息類型或模式。您可能會對應的訊息類型包括：
- 新手上路
- 確認與確認
- 說明與意見回饋
- 錯誤
- 通知
- 標籤
- 空白狀態
4. 根據兩個軸向，將每種訊息類型放在地圖上。
請考量以下事項：
- 特定訊息可用的螢幕空間大小。
- 對訊息類型而言，理解有多重要或關鍵？是否有破壞性動作的風險？
- 您希望使用者在看到訊息類型意圖時，瞭解或感受到什麼？舉例來說，新手指引通常會搭配輕鬆但實用的意圖。
5. 完成範例
下表列出常見應用程式體驗的訊息類型。
如果應用程式處理付款或法律事宜，您可能需要調整語氣，在理解至關重要時，以更嚴肅和詳細的方式說明。反之，如果沒有隱私權或財務方面的風險，且說明中心也提供更多資訊，則可以選擇更簡潔的說明。
5. 內容結構
總覽
陳述句的結構可以提升理解程度，協助使用者專心處理手邊的工作。將圖片與文字配對時，資訊結構的另一個目標是提升無障礙程度。
從目標開始
以使用者的目標開頭。由於使用者體驗文案以工作為導向，因此常見的片語模式是先強調目標，建立工作的動機框架，然後句子會詳細說明完成工作所需的動作。
視需要顯示詳細資料
視需要顯示相關資訊。這種做法通常稱為「逐步揭露」。在使用者探索功能並需要更多資訊時，顯示功能詳細資料。
有策略地揭露資訊通常需要仔細考量使用者歷程中每個階段的資訊需求。目標不是隱藏或省略任何內容，尤其是無法復原的動作所造成的後果，但請記住，將焦點立即縮小到手邊的工作，有助於使用者。
無障礙內容設計
撰寫有效內容時，也應考慮圖片和文字的搭配，方便低視能使用者或螢幕閱讀器使用者閱讀。Material 的無障礙寫作章節提供圖片和說明文字的配對指南，確保網頁內容設計適合所有使用者。
可見和不可見文字
無障礙文字包括：
- 可見文字：UI 元素的標籤、按鈕上的文字、連結和表單
- 非可見文字：不會顯示在畫面上的說明 (例如圖片的替代文字)
如果可見和不可見的文字都具有描述性且有意義，有助於使用者透過畫面上的標題或連結瀏覽內容。螢幕閱讀器可協助測試無障礙文字，並找出可加入無障礙文字的位置。
替代文字
替代文字有助於將視覺化 UI 轉換為以文字為基礎的 UI。替代文字是程式碼中的簡短標籤 (最多 125 個半形字元)，用於向無法看到圖片的使用者說明圖片內容。
在下方範例中，螢幕閱讀器提供圖片最基本的描述元，藉此為周圍文字提供背景資訊。
由於替代文字僅適用於圖片，因此不需要在替代文字中加入「圖片」或「照片」等字樣。螢幕閱讀器會朗讀替代文字，取代圖片。
6. 字詞選擇
總覽
螢幕空間有限時，請務必選擇適當的字詞來傳達訊息和語氣。使用相同的字詞，有助於使用者熟悉體驗。
為所有閱讀程度的讀者撰寫內容
使用簡單易懂的常用字詞，讓各種程度的讀者都能輕鬆理解。
避免使用術語
如果簡單的詞組也能傳達相同概念，請避免使用產業專屬術語或為 UI 功能發明的名稱。
使用一致的字詞
在 UI 功能中一致使用字詞。
使用現在式
請使用現在式描述產品行為。請避免使用未來式描述產品的固定行為。
如需使用過去或未來時態，請使用簡單的動詞形式。
依標籤參照 UI 元素和控制項
標籤會說明控制項或元素的功能。這些標籤會顯示在控制項上或附近，例如按鈕或切換開關上的文字。如要參照 UI 控制項或元素，請使用標籤文字提及該項目。(請勿說明元素或控制項的類型)。
傳達重要細節
只傳達使用者執行工作時需要注意的詳細資料。
重點複習
- 為所有閱讀程度的讀者撰寫內容
- 使用一致的字詞，而非新奇的字詞
- 現在式
- 使用數字
7. 撰寫元件內容
總覽
Material 元件在 UI 中具有意圖，為特定元件撰寫內容可強化意圖。
如需這些元件的撰寫指南，請前往 Material.io：
對話方塊
對話方塊的用途包括：
- 導致應用程式無法正常運作的錯誤
- 需要特定使用者工作、決定或確認的重要資訊
構成要素 | 優先順序 | 使用者動作 |
點心吧 | 低優先順序 | SnackBar 會自動消失 |
橫幅廣告 | 顯眼，優先順序中 | 橫幅會持續顯示，直到使用者關閉，或導致橫幅顯示的狀態已解決為止 |
對話方塊 | 最高優先順序 | 對話方塊會封鎖應用程式使用權，直到使用者採取對話方塊動作或結束對話方塊 (如適用) |
標題
對話方塊的標題和按鈕文字應說明其用途。
標題應包含簡短明確的陳述或問題。
Snackbar
Snackbar 包含與執行程序直接相關的文字標籤。在行動裝置上，標籤最多可包含兩行文字。
Snackbar 可顯示單一文字按鈕，讓使用者對應用程式執行的程序採取行動。
8. 將所有內容整合到內容矩陣中
總覽
內容矩陣是用來追蹤寫作時會使用和重複使用的字詞和選擇的表格。內容矩陣是撰寫及追蹤詞組的重要資源，可供日後任何撰稿人參考。
這是試算表的別名 (沒錯，這違反了「不使用術語」的字詞選擇指南)。
設定內容矩陣
建立試算表或表格，追蹤效果良好且可重複使用的寫作和用字選擇。
內容矩陣的目標是協助您找出並記錄任何訊息與下列項目的關聯：
- 使用者目標和情境
- 明確指出支援特定目標的資訊需求
- 草稿和最終版 UI 文字，以簡短且不使用術語的方式重述資訊需求
內容矩陣中的 UI 文字決策也應反映：
- 語氣和語調原則
- 元件類型
最後，內容矩陣可以包含字詞清單：
- 列出用於描述功能、動作和目標的字詞
- 列出應避免使用的同義字或無助的詞組
提醒事項：
- 替換或定義技術用語
- 使用最常見的動作或名詞字詞
9. 進階主題與資源 (選用)
總覽
本程式碼研究室涵蓋使用者體驗撰寫的最佳做法和入門方法。這只是冰山一角。
資源
10. 恭喜！
太棒了！您即將能撰寫清楚且有影響力的 UI 文字！
