如何寫出優秀的UX文案？來看高手的總結！

如何寫出優秀的 UX 文案？

在框架層除了界面設計和導航設計，還有一個非常重要的模塊——信息設計。經常有設計師問我，信息設計屬于交互或UI的設計范疇嗎？我都會回答是的，因為我們每個設計師都肩負著信息傳達設計的責任。

圖1 信息設計與用戶體驗設計的關系

我將信息設計拆分為信息形式和信息內容，產品中所有可感知的元素都是信息內容，包括可見的文本、圖片、視頻，不可見的振動、聲音……

圖2 信息設計的分類

而這些內容被用戶感知到的狀態就是其形式，比如文本的字體、字號、顏色，圖片的大小、清晰度、動靜，聲音的音量、音色、音調等。

今天我們要聊的 UX 文案，則隸屬于文本信息設計，除了標簽系統和數據內容之外，其他所有告知、引導、解釋、說明性的文案都屬于 UX 文案。

圖3 UX文案與信息設計的關系

以瀏覽器為例：

圖4 各類文本信息舉例示意

標簽系統包括底部導航、各個設置項名稱、各個站點的名稱等

數據內容包括框內的熱詞、新聞的標題、來源、時間、評論等。

UX 文案則包括系統/功能當下所處的狀態、操作前后的說明、狀態、引導文案等。

在項目流程中，并沒有明確規定 UX 文案的具體責任人（除了少數大廠有 UX writer 的角色），所以往往會出現產品、交互、視覺都以為是他人在負責，導致結果沒人真正為文案負責的情況，所以我才倡導每一個設計師都要將其視為己任，以提升整體的產品體驗。

1. WHAT | 什么是 UX 文案

① UX 文案的起源

UX 文案，又稱微文案（microcopy），由 Joshua Porter 在 2009 年在“Writing Microcopy”一文中提出。

圖5 UX文案的案例

他在文章中介紹了一個電子商務網站。用戶在該網站的購買流程中需要填寫付款表單，但 5%-10%的交易由于地址填寫錯誤而意外終止，導致了一部分轉化的流失。當時 Porter 提供了一個修改方案是在地址欄下方增加了一行提示語：”請務必輸入與您信用卡相關聯的地址“。這個提示不僅為用戶提供了正確的引導信息，改善了網站的轉化率，也為網站帶來了可觀的收入。UX 文案由此誕生并取得了行業的重視。

② UX 文案的類型

Google 曾將 UX 文案總結為 8 大類：

圖6 Google歸納的微文案類型

分別是：行動按鈕、簡介、導航按鈕、確認信息、錯誤信息、隱私條款、加載頁面、404 錯誤。也就是把標簽系統和內容數據之外的信息都可以看做是 UX 文案（國內大廠的隱私條款是由法務撰寫的，不屬于 UX 文案的范疇）。

8 種類型不太好記憶，所以我將其歸納為 2 大類：

圖5 悅姐歸納的微文案類型

1. 名稱類：主要包括按鈕名稱和鏈接名稱；
2. 說明類：包括操作前的規則、引導、預期說明，操作時的狀態、進度、預期說明、操作后的（成功/失敗）狀態、結果、下一步引導說明等。

2. How | 如何撰寫 UX 文案？

Google 曾介紹過撰寫優秀 UX 文案的模型，我也是比較認同的，所以跟大家一起分享一下：

圖6 Google的文案寫作模型

在文案撰寫之前，我們先要想清楚我們到底想通過文案傳達什么信息？讓這些文案符合寫作的 3 個基本原則，然后再結合我們的品牌基調，看看以什么口吻和語氣來傳達這些信息與產品氣質更一致。

① UX 文案寫作 3 原則

UX 文案不同于營銷文案，不是為了銷售，吸引用戶，追求讓用戶過目難忘。

圖7 UX文案與營銷文案的差異

而是以產品體驗為目標，以簡短的文字幫助用戶在每個與產品交互的瞬間提供自然的對話，輔助用戶快速準確地達成目標。

基于此，Google 設計師歸納了 UX 協作的 3 個原則，我調整了其順序將其整理如下：

圖8 UX文案寫作3原則

實用性

結合奧卡姆剃刀原理：如無必要勿增實體。這個原理普適于所有功能、信息和元素，文案也不例外。任何一句文案，都要先考慮其價值。如果能通過形式明確傳達信息的，就不應該增加文案徒增干擾。

圖9 不重復顯示文案

如很多表單，都會顯示標簽名，然后再在輸入框內重復顯示與標簽名相同的引導提示（如左上圖），這就屬于顯示了沒有提供增量價值的文案，這種情況下輸入框內不必顯示引導文案。

相比上圖中規中矩的表達方案，我更喜歡 Google 靈動的解決方案：

圖10 Google關于輸入框的提示方案

默認在輸入框內顯示引導提示，無標簽名稱，當用戶開始輸入后，引導提示上移變成標簽名，框內顯示輸入的手機號。這個設計讓默認界面簡潔，輸入過程也一直能知道應該輸入什么內容。

文案除了有用以外，還要貼合場景，讓用戶能夠通過文案預知下一步的行為或反饋。

圖11 為下一步的行為提供預期

比如上圖中，如果按鈕是「下一步」用戶就只能點擊后才能從下一個界面上知道反饋，而「獲取短信驗證碼」則提前告知了用戶系統接下來的行為，讓用戶可以馬上準備接收和輸入驗證碼，增加了用戶對系統和自身行為的掌控感。

清晰性

清晰性側重文案要以用戶視角出發，準確無歧義，易于用戶理解。

比如要盡量避免技術術語：

圖12 避免技術術語

這種研發術語自從設計師介入后，基本不會再出現了，研發同學每次遇到這些提示都會找產品或設計師要提示語（如果研發同學喜歡自己發揮，那用戶就很有可能還會遇到上述的技術術語提示）。

再比如設計中比較常見的 CTA 按鈕舉例，為什么要用行動召喚按鈕，也是因為行動召喚按鈕更清晰，用戶甚至可以忽略提示語，直接根據按鈕的名稱就做出選擇：

圖13 行動召喚按鈕更清晰

多數行動選擇我們都可以這么處理，但是當用戶的召喚行動本身具有取消涵義時，則不能再套用這個形式，否則又會出現歧義：

圖14 行動召喚按鈕具有取消涵義時的設計

比如，當詢問用戶是否要撤銷輸入時，如果同時用撤銷和取消就會有些混淆，這個時候就建議將取消按鈕，直接改為不撤銷，讓按鈕涵義更清晰。

清晰的按鈕不僅可以傳遞更有價值的信息，而且還可以促進功能的轉化，帶來巨大的業務價值，給大家舉兩個案例：

圖14 UX文案的價值

第一個來自 Google。當 Google 把文案「Book a room」改成「Check availability」后，減輕了用戶點擊的壓力，訂單的轉化率提升了 17%。

第二個來自滴滴。當滴滴把模糊的「查看詳情」按鈕改為清晰的「點擊領取」按鈕后，點擊率提升了 287%。

這都屬于改變文案，讓文案的下一步行為更清晰，操作更明確所帶來的價值提升。

簡潔性

在表達清晰的基礎上，還要力求簡潔，減少用戶的閱讀成本。

圖15 力求簡潔

這就需要設計師惜字如金，不僅要去掉重復的提示，而且還要把提示中不影響信息傳達的修飾語都去掉。甚至可以回到第一步，思考是否需要用提示語。比如 iPhone 登錄時，如果密碼輸入錯誤，并不會顯示提示，而是左右搖晃然后刪除密碼，讓用戶重新輸入。

最后我們再以一個密碼輸入的案例，來串聯 UX 文案協作的 3 原則：

圖15 力求簡潔

首先要確保文案的有用性，然后力求清晰、簡潔、最后再加入下一步的引導說明，一個合格的 UX 文案就誕生了。

② UX 品牌文案

UX 文案的本質是產品與用戶之間的對話。

我們需要考慮產品的定位（自己）、用戶的畫像（對方），以及當下的場景，才能輸出合適的 UX 文案，構建一場愉快的對話。

UX 文案的 3 原則，可以指導設計師完成一些工具型產品的文案，幫助用戶快速完成任務。但對于希望通過文案來鞏固其品牌認知的產品而言，UX 文案更重要的是符合其品牌信念，強化其品牌個性。

先給大家舉 2 個有品牌感的文案案例：

圖15 夸克的品牌文案

夸克。在一堆中規中矩工具化/平臺化的瀏覽器類產品中，夸克的文案就明顯獨樹一幟，其語言風格與其產品定位、用戶畫像更加契合。

圖15 躺平的品牌文案

躺平。在一大批積極陽光正能量的產品中，躺平以其獨特的形象切入用戶的視野，文案充滿了對現實生活中年輕人生活狀態和心態的洞察，戳中了很多年輕用戶的心聲，讓人過目難忘。

從這個角度來看，品牌文案其實有點類似于前面的營銷文案，除了傳達準確的信息之外，還致力于給用戶打造特定的品牌印象。這一趴我們在基礎課程中不再展開。

最后在小結一下 UX 文案的寫作清單：

1. 用戶導向：以用戶視角撰寫文案，而非產品開發視角。
2. 實用：確保每一句文案都有價值，能夠引導用戶的下一步行為。
3. 清晰：去掉專業術語，準確無歧義，
4. 簡潔：惜字如金，沒有冗余的字詞，把關鍵信息放在最前面。
5. 品牌一致性：根據品牌基調定義語言風格，使 UX 文案助力品牌形象的建設。

好了，到這里 UX 文案的設計就介紹完畢了。

歡迎關注作者微信公眾號：「悅姐聊設計」