如何寫出優(yōu)秀的 UX 文案？

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

圖1 信息設(shè)計與用戶體驗設(shè)計的關(guān)系

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

圖2 信息設(shè)計的分類

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

今天我們要聊的 UX 文案，則隸屬于文本信息設(shè)計，除了標(biāo)簽系統(tǒng)和數(shù)據(jù)內(nèi)容之外，其他所有告知、引導(dǎo)、解釋、說明性的文案都屬于 UX 文案。

圖3 UX文案與信息設(shè)計的關(guān)系

以瀏覽器為例：

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

標(biāo)簽系統(tǒng)包括底部導(dǎo)航、各個設(shè)置項名稱、各個站點的名稱等

數(shù)據(jù)內(nèi)容包括框內(nèi)的熱詞、新聞的標(biāo)題、來源、時間、評論等。

UX 文案則包括系統(tǒng)/功能當(dāng)下所處的狀態(tài)、操作前后的說明、狀態(tài)、引導(dǎo)文案等。

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

1. WHAT | 什么是 UX 文案

① UX 文案的起源

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

圖5 UX文案的案例

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

② UX 文案的類型

Google 曾將 UX 文案總結(jié)為 8 大類：

圖6 Google歸納的微文案類型

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

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

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

1. 名稱類：主要包括按鈕名稱和鏈接名稱；
2. 說明類：包括操作前的規(guī)則、引導(dǎo)、預(yù)期說明，操作時的狀態(tài)、進度、預(yù)期說明、操作后的（成功/失敗）狀態(tài)、結(jié)果、下一步引導(dǎo)說明等。

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

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

圖6 Google的文案寫作模型

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

① UX 文案寫作 3 原則

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

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

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

基于此，Google 設(shè)計師歸納了 UX 協(xié)作的 3 個原則，我調(diào)整了其順序?qū)⑵湔砣缦拢?/p>

圖8 UX文案寫作3原則

實用性

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

圖9 不重復(fù)顯示文案

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

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

圖10 Google關(guān)于輸入框的提示方案

默認在輸入框內(nèi)顯示引導(dǎo)提示，無標(biāo)簽名稱，當(dāng)用戶開始輸入后，引導(dǎo)提示上移變成標(biāo)簽名，框內(nèi)顯示輸入的手機號。這個設(shè)計讓默認界面簡潔，輸入過程也一直能知道應(yīng)該輸入什么內(nèi)容。

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

圖11 為下一步的行為提供預(yù)期

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

清晰性

清晰性側(cè)重文案要以用戶視角出發(fā)，準(zhǔn)確無歧義，易于用戶理解。

比如要盡量避免技術(shù)術(shù)語：

圖12 避免技術(shù)術(shù)語

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

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

圖13 行動召喚按鈕更清晰

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

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

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

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

圖14 UX文案的價值

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

第二個來自滴滴。當(dāng)?shù)蔚伟涯：摹覆榭丛斍椤拱粹o改為清晰的「點擊領(lǐng)取」按鈕后，點擊率提升了 287%。

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

簡潔性

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

圖15 力求簡潔

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

最后我們再以一個密碼輸入的案例，來串聯(lián) UX 文案協(xié)作的 3 原則：

圖15 力求簡潔

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

② UX 品牌文案

UX 文案的本質(zhì)是產(chǎn)品與用戶之間的對話。

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

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

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

圖15 夸克的品牌文案

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

圖15 躺平的品牌文案

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

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

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

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

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

歡迎關(guān)注作者微信公眾號：「悅姐聊設(shè)計」