5000字干貨!界面交互文案設(shè)計(jì)指南
本文將文案設(shè)計(jì)的基礎(chǔ)內(nèi)容總結(jié)為三個(gè)關(guān)鍵部分:設(shè)計(jì)原則、通用要素和應(yīng)用場(chǎng)景。通過(guò)這三個(gè)部分的綜合運(yùn)用,可以建立起科學(xué)化、規(guī)范化的文案設(shè)計(jì)基礎(chǔ)準(zhǔn)則。這些準(zhǔn)則為交互文案設(shè)計(jì)提供指導(dǎo),使文案更貼合目標(biāo)用戶的需求,并提升用戶體驗(yàn)。
一、交互文案概述
界面文案指的是在用戶界面中使用的文字內(nèi)容,基于文案使用場(chǎng)景的不同可以分為交互文案、營(yíng)銷文案、廣告文案等。界面交互文案通常與用戶的操作緊密關(guān)聯(lián),操作前用于引導(dǎo)用戶如何操作,操作中用于給用戶提供實(shí)時(shí)的操作反饋,操作后告知用戶操作結(jié)果。交互文案在用戶體驗(yàn)中起著至關(guān)重要的作用,好的交互文案可以提升系統(tǒng)的可用性,是交互設(shè)計(jì)不可忽略的部分。
二、文案設(shè)計(jì)原則及策略
1. 內(nèi)容結(jié)構(gòu)
①表述清晰易懂
通過(guò)使用清晰易懂的常用詞、準(zhǔn)確的數(shù)字表達(dá)、具體的結(jié)果表述、明確的操作按鈕,避免歧義的詞語(yǔ)和習(xí)語(yǔ),并使用主動(dòng)語(yǔ)態(tài),可以確保界面交互中的信息傳達(dá)清晰易懂,提供良好的用戶體驗(yàn)。具體設(shè)計(jì)策略可分為以下 6 點(diǎn):
(1)使用簡(jiǎn)潔明了的常用詞匯:避免使用針對(duì) UI 發(fā)明的行業(yè)術(shù)語(yǔ)或業(yè)務(wù)場(chǎng)景專業(yè)術(shù)語(yǔ),這樣可以降低用戶的認(rèn)知負(fù)擔(dān),使用戶更容易理解界面內(nèi)容。
(2)選擇準(zhǔn)確的數(shù)字表達(dá)方式:描述數(shù)量時(shí),阿拉伯?dāng)?shù)字比漢字更清晰。阿拉伯?dāng)?shù)字能夠直接傳達(dá)準(zhǔn)確的數(shù)值,避免因漢字的表達(dá)而產(chǎn)生歧義或誤解。
(3)清晰表述操作結(jié)果:用戶需要清楚地了解某一種的操作將帶來(lái)什么具體結(jié)果,這樣可以增加用戶滿意度。
(4)操作按鈕指出明確的動(dòng)作:沒(méi)有明確的步驟條時(shí),少用“下一步”這種模糊類表述,而是使用更明確的指令,以確保用戶清楚下一步該做什么。
(5)避免使用產(chǎn)生歧義的詞語(yǔ)或習(xí)語(yǔ):這些詞語(yǔ)可能因?yàn)椴煌幕⒈尘盎蛘Z(yǔ)言理解的差異而引起用戶的困惑或誤解。
(6)使用主動(dòng)語(yǔ)態(tài):在寫(xiě)交互文案時(shí),傾向于使用主動(dòng)語(yǔ)態(tài)而不是被動(dòng)語(yǔ)態(tài)。主動(dòng)語(yǔ)態(tài)更加直接和清晰,能夠更好地傳達(dá)指令或信息,使用戶更容易理解和執(zhí)行相應(yīng)的操作。
②表述形式統(tǒng)一
表述形式統(tǒng)一可以提升產(chǎn)品內(nèi)部的一致性,幫助用戶建立穩(wěn)定的認(rèn)知模式,降低用戶重復(fù)學(xué)習(xí)和理解成本。當(dāng)用戶在不同功能頁(yè)面中遇到相似的文案表達(dá)時(shí),他們可以更自然地理解。這種認(rèn)知模式的建立能夠使用戶感到熟悉和舒適,增強(qiáng)用戶對(duì)產(chǎn)品的信任感,進(jìn)而提升用戶體驗(yàn)。具體設(shè)計(jì)策略可分為以下 5 點(diǎn):
(1)用戶人稱:統(tǒng)一使用第一人稱或第二人稱,避免第一人稱和第二人稱同時(shí)使用。
(2)語(yǔ)言風(fēng)格:語(yǔ)言風(fēng)格需要統(tǒng)一為正式、輕松等,避免多種風(fēng)格同時(shí)存在
(3)相同場(chǎng)景用詞:同樣的操作使用一致的詞語(yǔ)
(4)語(yǔ)句結(jié)構(gòu):盡量使用結(jié)構(gòu)一致的短句,包括“動(dòng)詞+名詞”、“名詞+動(dòng)詞”等
(5)代詞統(tǒng)一:指代人、指代事物的代詞在同一個(gè)產(chǎn)品中應(yīng)當(dāng)是一致的
③簡(jiǎn)單突出重點(diǎn)
簡(jiǎn)單的表述可以減少文案的冗余和累贅,使用戶更快速地理解和消化所閱讀到的內(nèi)容。這樣不僅減少了用戶閱讀的文本量,還避免了用戶在冗長(zhǎng)的文案中迷失和疲勞。在文案設(shè)計(jì)時(shí),設(shè)計(jì)師需要將用戶重點(diǎn)關(guān)注的信息突出,置于用戶的注意力焦點(diǎn),使其更易被察覺(jué)和理解。具體設(shè)計(jì)策略可分為以下 4 點(diǎn):
(1)省略不重要的標(biāo)點(diǎn)符號(hào),例如彈窗、toast、表格中的內(nèi)容、按鈕、頁(yè)面標(biāo)題等不加句號(hào)、嘆號(hào)等
(2)利用刪減測(cè)試來(lái)判斷可省略的內(nèi)容,刪減某些字詞后看文案是否依舊連貫,意思明確
(3)分步或者分條展示,避免一個(gè)模塊文案表述過(guò)多
(4)考慮語(yǔ)音/文案展示優(yōu)先級(jí),多條內(nèi)容沖突時(shí)需要規(guī)定先后順序,避免多個(gè)提示同時(shí)彈出
④考慮用戶場(chǎng)景
考慮用戶場(chǎng)景就是考慮用戶當(dāng)前所處的上下文環(huán)境,這包括用戶當(dāng)前的操作狀態(tài)、位置、任務(wù)、目標(biāo)等。預(yù)測(cè)用戶的下一步行動(dòng)和用戶的潛在需求,并在適當(dāng)?shù)臅r(shí)間提供用于引導(dǎo)用戶行為的關(guān)鍵信息。
2. 表述語(yǔ)氣
①語(yǔ)氣友好
友好的語(yǔ)氣能夠傳達(dá)出產(chǎn)品對(duì)用戶的尊重和關(guān)懷。當(dāng)用戶感受到友好的語(yǔ)氣時(shí),他們會(huì)感到被重視、被理解,從而更加愿意與產(chǎn)品進(jìn)行互動(dòng)和溝通。具體設(shè)計(jì)策略可分為以下 3 點(diǎn):
(1)一般場(chǎng)景中不要使用感嘆號(hào),在向用戶表達(dá)祝賀或恭喜時(shí)可以使用
(2)不要使用命令和質(zhì)疑的詞語(yǔ)
(3)根據(jù)用戶的操作費(fèi)力程度來(lái)決定表述語(yǔ)氣,當(dāng)費(fèi)力程度較大時(shí)可以使用“成功”等詞匯表述,費(fèi)力程度較小時(shí)使用“已 xx”表述
三、通用文案要素規(guī)范
以上一章節(jié)的文案設(shè)計(jì)原則為基礎(chǔ),提煉出各個(gè)用戶場(chǎng)景中通用的文案要素,也是文案設(shè)計(jì)的基本準(zhǔn)則之一。本次通用文案要素規(guī)范包含數(shù)字、時(shí)間、人稱、易混詞和標(biāo)點(diǎn)。在實(shí)際應(yīng)用中注意這些規(guī)范可以幫助設(shè)計(jì)師提升文案的準(zhǔn)確性、可讀性、規(guī)范性,減少錯(cuò)別字或錯(cuò)誤用法的出現(xiàn)。
1. 數(shù)字
(1)統(tǒng)計(jì)數(shù)據(jù)展示:使用阿拉伯?dāng)?shù)字會(huì)更容易引起注意,避免使用漢字
(2)混合使用數(shù)字:用兩種方式表述,最需要用戶注意的使用阿拉伯?dāng)?shù)字
(3)多位數(shù)字:收入/支出金額、運(yùn)單量、車(chē)輛數(shù)等數(shù)據(jù)經(jīng)常出現(xiàn)數(shù)量較大的情況,應(yīng)當(dāng)遵循每千分位展示一個(gè)逗號(hào)的形式,小數(shù)部分不加逗號(hào),便于用戶閱讀。
(4)運(yùn)單號(hào)/包裹號(hào):需要突出不同運(yùn)單或包裹的差異點(diǎn),一般可以突出運(yùn)單號(hào)后 4 位、包裹號(hào)的包裹數(shù)
2. 時(shí)間
(1)實(shí)時(shí)提醒/倒計(jì)時(shí):一般用于對(duì)時(shí)間要求比較嚴(yán)格的用戶場(chǎng)景,倒計(jì)時(shí)可以引起用戶的格外關(guān)注
- 精簡(jiǎn)文案結(jié)構(gòu):剩余「xx」小時(shí)「xx」分「xx」秒;已超時(shí)「xx」小時(shí)「xx」分「xx」秒
- 詳細(xì)文案結(jié)構(gòu):距「xx」剩余「xx」小時(shí)「xx」分「xx」;「xx」已超時(shí)「xx」小時(shí)「xx」分「xx」秒
(2)時(shí)間規(guī)則靜態(tài)展示:一般是界面常駐提示,用于告知用戶,任務(wù)緊急程度不高
- 文案結(jié)構(gòu):請(qǐng)?jiān)凇竫x 時(shí)間」內(nèi)「用戶要完成的事項(xiàng)」,超時(shí)將「xx 后果」。
- 時(shí)間描述需具體,例如 1 小時(shí) 12 分鐘,避免使用 1.2 小時(shí)表述。
(3)更新時(shí)間提示:一般用于數(shù)據(jù)定期定時(shí)更新的場(chǎng)景中,告知用戶更新規(guī)則。
- 文案結(jié)構(gòu):「信息內(nèi)容」更新時(shí)間:「xx」
- 例如“數(shù)據(jù)更新時(shí)間:11/02 12:00”“數(shù)據(jù)更新時(shí)間:每月 15 日”
3. 人稱
(1)你 or 您?
“你”是普通稱謂,“您”是尊敬稱謂。通常用“你”稱呼表明兩人同輩或者關(guān)系親密,用“您”表明兩者處于不同輩的情況,而且表明兩者并不親密。
“你”能與用戶建立親密感,使用“您”容易產(chǎn)生距離感,如需體現(xiàn)用戶的尊貴感可以使用“您”。
(2)此 or 該?
“此”經(jīng)常指比較具體的小事物,比如“此人”“此物”“此情”“此景”,“該”指的事物比較廣泛,經(jīng)常指代某個(gè)團(tuán)體,比如“該單位”“該廠”“該集團(tuán)”。
當(dāng)要表達(dá)當(dāng)前的小事物,“此”更明確,例如“此運(yùn)單”“此任務(wù)”“點(diǎn)擊此按鈕”。
4. 易混詞
在實(shí)際文案的使用中常常會(huì)因?yàn)槌WR(shí)失誤、輸入法的諧音文字帶來(lái)一些錯(cuò)別字或錯(cuò)誤用法的情況,產(chǎn)品的文案設(shè)計(jì)中需要注意避免使用錯(cuò)別字,為用戶帶來(lái)困惑或誤導(dǎo)。通過(guò)實(shí)際工作經(jīng)驗(yàn)總結(jié),本次總結(jié)了 6 個(gè)易混詞:
①登錄 or 登陸?
在界面中從來(lái)沒(méi)有登陸的用法,應(yīng)當(dāng)使用“登錄”,避免諧音帶來(lái)錯(cuò)別字。
②賬號(hào) or 帳號(hào)?
“帳號(hào)”為舊時(shí)用法,現(xiàn)在正確的表述是“賬號(hào)”,《現(xiàn)代漢語(yǔ)詞典》第 7 版中只有“賬號(hào)”詞條,而無(wú)“帳號(hào)”詞條。
③定金 or 訂金?
定金,具有擔(dān)保合同履行之意,支付定金方不履行合同,無(wú)權(quán)請(qǐng)求返還,而接受定金的一方不履行應(yīng)當(dāng)雙倍返還定金。
訂金,一般視為預(yù)付款,在交易成功時(shí),訂金充當(dāng)貨款;在交易失敗時(shí),訂金應(yīng)全額返還,收受訂金的一方即使違約,仍應(yīng)承擔(dān)返還訂金的義務(wù)。
④稍候 or 稍后?
稍候是請(qǐng)等一等的意思,相當(dāng)于 loading;
稍后是今后的意思,但不確指是什么時(shí)候。系統(tǒng)加載需要用戶等候需要使用“稍候”
⑤預(yù)定 or 預(yù)訂?
預(yù)訂,指事先訂約購(gòu)買(mǎi)東西,通常需要提前預(yù)付一定的金錢(qián)。
預(yù)定,指預(yù)確定,事前規(guī)定、決定或約定。比如預(yù)定婚期、預(yù)定時(shí)間。
兩者最大的差別在于關(guān)涉的對(duì)象不同,預(yù)訂關(guān)涉錢(qián)款交易,而預(yù)定則與時(shí)間、計(jì)劃、方案、目標(biāo)、地點(diǎn)等相聯(lián)系。
⑥模板 or 模版?
模板,是指作圖或設(shè)計(jì)方案的固定格式。 模板是將一個(gè)事物的結(jié)構(gòu)規(guī)律予以固定化、標(biāo)準(zhǔn)化的成果,它體現(xiàn)的是結(jié)構(gòu)形式的標(biāo)準(zhǔn)化。
模版這個(gè)詞語(yǔ)是錯(cuò)誤不存在的。
5. 標(biāo)點(diǎn)符號(hào)
①空格
- 中文與數(shù)字之間要增加空格
- 中文與英文之間要增加空格
②感嘆號(hào)
感嘆號(hào)會(huì)讓語(yǔ)氣表現(xiàn)的很強(qiáng)烈,僅在表達(dá)強(qiáng)烈情感或慶祝時(shí)使用,一般情況下不建議使用感嘆號(hào)。
③句號(hào)
中文使用“?!?,英文使用“.”。中文句號(hào)一般用于長(zhǎng)文本中,標(biāo)題、按鈕、短提示等一般末尾不使用句號(hào)。
(4)省略號(hào)
統(tǒng)一使用“…”,三個(gè)點(diǎn)即可。
四、文案應(yīng)用場(chǎng)景及案例
通過(guò)對(duì)用戶場(chǎng)景的梳理,我們將文案場(chǎng)景劃分為三大類:通知提示、反饋提示、防錯(cuò)確認(rèn)。
1. 通知提示
通知提示是指在特定情境下向用戶傳達(dá)重要信息或事件的文案,通過(guò)簡(jiǎn)明扼要的方式及時(shí)告知用戶關(guān)鍵事件、消息或變化,讓用戶能夠第一時(shí)間了解到最新動(dòng)態(tài),以便能夠及時(shí)采取相應(yīng)的行動(dòng)。通知提示一般包含用戶操作前的引導(dǎo)、系統(tǒng)觸達(dá)給用戶的通知公告等類型。
①系統(tǒng)通知
系統(tǒng)通知主要包含待辦任務(wù)、未讀消息、系統(tǒng)/業(yè)務(wù)公告幾種類型。
待辦任務(wù):在通知中清楚地告知用戶待辦任務(wù)的數(shù)量,并提供便捷的前往任務(wù)處理的操作??梢允褂?quot;你有 X 條任務(wù)"的表述方式,以及給出明顯的操作按鈕或鏈接,引導(dǎo)用戶直接跳轉(zhuǎn)到任務(wù)處理界面。
未讀消息:通知用戶未讀消息的數(shù)量,并使用標(biāo)題+內(nèi)容的結(jié)構(gòu)展示消息內(nèi)容。需要確保標(biāo)題能夠吸引用戶的注意力,內(nèi)容簡(jiǎn)潔明了,可以使用"你有 X 條未讀消息"的形式,然后列出每條消息的標(biāo)題和摘要,以便用戶能夠快速瀏覽并了解消息的重要信息。
系統(tǒng)/業(yè)務(wù)公告:由于系統(tǒng)和業(yè)務(wù)公告通常與具體業(yè)務(wù)場(chǎng)景和要求相關(guān),暫無(wú)統(tǒng)一規(guī)范。在設(shè)計(jì)這部分內(nèi)容時(shí),建議根據(jù)具體業(yè)務(wù)情況進(jìn)行設(shè)計(jì),確保公告內(nèi)容與用戶所處的業(yè)務(wù)環(huán)境相關(guān),并使用明確的語(yǔ)言傳達(dá)重要信息。
②操作提示
操作提示類文案在引導(dǎo)用戶進(jìn)行特定操作或交互時(shí)起到重要的作用,操作提示文案一般需直入主題,強(qiáng)調(diào)關(guān)鍵信息,給用戶明確的指引,減少重復(fù)話術(shù),例如不要描述為“手機(jī)號(hào):請(qǐng)輸入手機(jī)號(hào)”,應(yīng)當(dāng)描述為“手機(jī)號(hào):請(qǐng)輸入”
操作提示通常伴有對(duì)應(yīng)的操作按鈕:按鈕通常使用 4 種表述結(jié)構(gòu) [動(dòng)作],[動(dòng)作]+[名詞],[動(dòng)作]+完成,[語(yǔ)氣]+[動(dòng)作],若沒(méi)有明確的步驟條時(shí)盡量不要使用類似“下一步”這種動(dòng)作模糊的文案,因?yàn)橛脩舨⒉磺宄乱徊降膬?nèi)容,需要指引明確。
2. 反饋提示
反饋提示是在用戶與產(chǎn)品、服務(wù)或系統(tǒng)進(jìn)行互動(dòng)時(shí)提供的重要信息,其目的是告知用戶操作是否成功、出現(xiàn)的問(wèn)題或錯(cuò)誤是什么以及如何糾正錯(cuò)誤或挽回,良好的反饋提示能夠增強(qiáng)用戶體驗(yàn),幫助用戶更好地理解和使用產(chǎn)品或服務(wù),讓用戶與系統(tǒng)間的交互更順暢。
反饋提示包括成功的確認(rèn)信息、友好的錯(cuò)誤提示、建議和指導(dǎo)等。根據(jù)反饋過(guò)程和反饋結(jié)果,可將反饋提示類型劃分為:操作異常/錯(cuò)誤、等待中、操作成功三類。
①操作異常/錯(cuò)誤
對(duì)于操作異常/錯(cuò)誤類文案提示,可以根據(jù)屏幕展示空間或者使用控件類型進(jìn)行詳略提示選擇,對(duì)于詳細(xì)完整的異常/錯(cuò)誤提示,需要展示出錯(cuò)誤原因或解決建議,一般話術(shù)結(jié)構(gòu)為:[動(dòng)詞]+[失敗]+[錯(cuò)誤原因/解決建議],需要使用平和而不是命令強(qiáng)迫的語(yǔ)氣,若文案展示空間/時(shí)間受限,可以使用更為簡(jiǎn)練的語(yǔ)言,僅說(shuō)明出錯(cuò)原因/解決建議即可。
②等待中
用戶在上傳、下載、刷新等操作過(guò)程中可能需要等待加載,可以根據(jù)用戶需要等待的時(shí)長(zhǎng)進(jìn)行文案設(shè)計(jì),通用話術(shù)是:[動(dòng)作]中+[進(jìn)度](可選)。
反饋時(shí)長(zhǎng)在 0-0.3s 時(shí),用戶不會(huì)感覺(jué)到任何延遲,無(wú)需加載;
反饋時(shí)長(zhǎng)在 0.3-2s 時(shí),用戶雖能感覺(jué)到延遲,但思維不會(huì)被打斷,用戶仍可以集中精力于當(dāng)前的任務(wù),可使用無(wú)限循環(huán)加載;
反饋時(shí)長(zhǎng)在 2s-8s 時(shí),需要增加進(jìn)度提示;
反饋時(shí)長(zhǎng)超過(guò) 8s 時(shí),需要增加進(jìn)度提示并且允許用戶手動(dòng)關(guān)閉加載或進(jìn)行后臺(tái)加載;
③操作成功
對(duì)于操作成功類文案提示,可根據(jù)用戶操作成本高低和操作結(jié)果的正負(fù)向考慮文案和語(yǔ)氣:
若用戶操作成本較低或操作結(jié)果偏負(fù)向時(shí),僅反饋動(dòng)作結(jié)果即可,話術(shù)結(jié)構(gòu)為:已+[動(dòng)作];
若用戶操作成本偏高或操作結(jié)果為正向時(shí),可在結(jié)果反饋的基礎(chǔ)上加上成功語(yǔ)氣,話術(shù)結(jié)構(gòu)為:[動(dòng)作]+成功
3. 防錯(cuò)確認(rèn)
防錯(cuò)確認(rèn)是一種文案策略,旨在幫助用戶避免錯(cuò)誤和失誤。它們通常出現(xiàn)在關(guān)鍵的決策點(diǎn)上,需要用戶再次確認(rèn)自己的選擇,避免出現(xiàn)嚴(yán)重或者不可挽回的結(jié)果。
防錯(cuò)確認(rèn)提示文案可以根據(jù)結(jié)果影響程度大小增減話術(shù),一般通用話術(shù)為:確定+[用戶要進(jìn)行的動(dòng)作]+嗎?底部操作按鈕為[動(dòng)作]和[再想想],若該操作會(huì)產(chǎn)生比較嚴(yán)重的后果,還需要增加[影響后果描述]話術(shù)。
五、總結(jié)
無(wú)論是 B 端還是 C 端產(chǎn)品,精心設(shè)計(jì)的文案都能夠?yàn)槲覀兣c用戶之間的溝通和表達(dá)增益良多,讓我們與受眾更好地溝通、理解、建立共鳴,并最終實(shí)現(xiàn)預(yù)期的行動(dòng)目標(biāo)。本文通過(guò)概述文案的重要性,從內(nèi)容結(jié)構(gòu)和表述語(yǔ)氣兩個(gè)層面介紹了文案設(shè)計(jì)的原則與策略,規(guī)范了通用的文案要素,并展示了在不同場(chǎng)景中的應(yīng)用案例。希望通過(guò)這些內(nèi)容可以為大家提供有關(guān)文案設(shè)計(jì)和應(yīng)用的參考,讓我們一起努力,通過(guò)精心設(shè)計(jì)的文案,創(chuàng)造出更具影響力和效果的溝通表達(dá)方式。
作者:JellyDesign
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)