編輯導(dǎo)語(yǔ)：在產(chǎn)品設(shè)計(jì)中，不論是產(chǎn)品經(jīng)理，還是交互設(shè)計(jì)師，在向用戶傳遞信息時(shí)，都需要盡量清晰簡(jiǎn)潔地進(jìn)行傳遞，并致力于提升用戶在使用產(chǎn)品時(shí)的使用體驗(yàn)。那么，如何寫出優(yōu)秀的UX文案，讓用戶可以感知到產(chǎn)品所想傳達(dá)的信息？本文作者進(jìn)行了總結(jié)，一起來(lái)看。

在框架層除了界面設(shè)計(jì)和導(dǎo)航設(shè)計(jì)，還有一個(gè)非常重要的模塊——信息設(shè)計(jì)。經(jīng)常有設(shè)計(jì)師問我，信息設(shè)計(jì)屬于交互或UI的設(shè)計(jì)范疇嗎？我都會(huì)回答是的，因?yàn)槲覀兠總€(gè)設(shè)計(jì)師都肩負(fù)著信息傳達(dá)設(shè)計(jì)的責(zé)任。

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

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

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

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

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

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

以瀏覽器為例：

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

• 標(biāo)簽系統(tǒng)包括底部導(dǎo)航、各個(gè)設(shè)置項(xiàng)名稱、各個(gè)站點(diǎn)的名稱等。
• 數(shù)據(jù)內(nèi)容包括框內(nèi)的熱詞、新聞的標(biāo)題、來(lái)源、時(shí)間、評(píng)論等。
• UX文案則包括系統(tǒng)/功能當(dāng)下所處的狀態(tài)、操作前后的說(shuō)明、狀態(tài)、引導(dǎo)文案等。

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

一、WHAT | 什么是UX文案

1. UX文案的起源

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

▲圖5 UX文案的案例

他在文章中介紹了一個(gè)電子商務(wù)網(wǎng)站。用戶在該網(wǎng)站的購(gòu)買流程中需要填寫付款表單，但5%-10%的交易由于地址填寫錯(cuò)誤而意外終止，導(dǎo)致了一部分轉(zhuǎn)化的流失。

當(dāng)時(shí)Porter提供了一個(gè)修改方案是在地址欄下方增加了一行提示語(yǔ)：“請(qǐng)務(wù)必輸入與您信用卡相關(guān)聯(lián)的地址”。這個(gè)提示不僅為用戶提供了正確的引導(dǎo)信息，改善了網(wǎng)站的轉(zhuǎn)化率，也為網(wǎng)站帶來(lái)了可觀的收入。UX文案由此誕生并取得了行業(yè)的重視。

2. UX文案的類型

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

▲圖6 Google歸納的微文案類型

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

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

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

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

二、How | 如何撰寫UX文案？

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

▲圖6 Google的文案寫作模型

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

1. UX文案寫作3原則

UX文案不同于營(yíng)銷文案，不是為了銷售，吸引用戶，追求讓用戶過(guò)目難忘。

▲圖7 UX文案與營(yíng)銷文案的差異

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

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

▲圖8 UX文案寫作3原則

① 實(shí)用性

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

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

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

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

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

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

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

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

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

② 清晰性

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

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

▲圖12 避免技術(shù)術(shù)語(yǔ)

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

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

▲圖13 行動(dòng)召喚按鈕更清晰

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

▲圖14 行動(dòng)召喚按鈕具有取消涵義時(shí)的設(shè)計(jì)

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

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

▲圖14 UX文案的價(jià)值

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

第二個(gè)來(lái)自滴滴。當(dāng)?shù)蔚伟涯：摹静榭丛斍椤堪粹o改為清晰的【點(diǎn)擊領(lǐng)取】按鈕后，點(diǎn)擊率提升了287%。

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

③ 簡(jiǎn)潔性

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

▲圖15 力求簡(jiǎn)潔

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

最后我們?cè)僖砸粋€(gè)密碼輸入的案例，來(lái)串聯(lián)UX文案協(xié)作的3原則：

▲圖15 力求簡(jiǎn)潔

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

2. UX品牌文案

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

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

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

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

▲圖15 夸克的品牌文案

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

▲圖15 躺平的品牌文案

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

從這個(gè)角度來(lái)看，品牌文案其實(shí)有點(diǎn)類似于前面的營(yíng)銷文案，除了傳達(dá)準(zhǔn)確的信息之外，還致力于給用戶打造特定的品牌印象。這一趴我們?cè)诨A(chǔ)課程中不再展開。

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

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

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

參考文獻(xiàn)：

1. UX文案怎么寫？來(lái)看看谷歌的方法總結(jié)。https://www.uisdc.com/ux-documents-conclusion
2. UX文案3篇保姆級(jí)教程-背景篇！https://www.zcool.com.cn/article/ZMTM2Nzc4OA==.html
3. 從流程到技巧，教你如何寫好UX文案 Part 1。https://zhuanlan.zhihu.com/p/449399287
4. 如何通過(guò) UX 文案構(gòu)建更好的產(chǎn)品。https://uxdesign.cc/how-to-build-a-better-product-with-ux-writing-926d78209ce8
5. 聊聊UX文案——最直接的用戶體驗(yàn)。http://www.codemsi.com/pd/4951038.html

#專欄作家#

悅有所思，人人都是產(chǎn)品經(jīng)理專欄作家。10年體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)，崇尚理論指導(dǎo)實(shí)踐，實(shí)踐迭代理論，熱衷于學(xué)習(xí)、解構(gòu)、建構(gòu)、傳播交互設(shè)計(jì)、服務(wù)設(shè)計(jì)、行為設(shè)計(jì)等設(shè)計(jì)相關(guān)領(lǐng)域知識(shí)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。