【轉】學會這13個原則寫UI界面文案,用戶才能秒懂

原文網址:http://www.niaogebiji.com/article-12011-1.html

摘要: 首先,在寫UI文案之前,為了理清思路,要先搞清楚三個問題:我(設計師)想讓用戶做什么? – 我寫文案的目的為什么要讓用戶這么做?– 對用戶有什么好處或影響怎么寫才能符合用戶體驗?– 怎么以簡潔明了的表達,讓 ...
首先,在寫UI文案之前,為了理清思路,要先搞清楚三個問題:
?
我(設計師)想讓用戶做什么? – 我寫文案的目的
為什么要讓用戶這么做?– 對用戶有什么好處或影響
怎么寫才能符合用戶體驗?– 怎么以簡潔明了的表達,讓用戶立刻能懂,欣然接受
舉個例子,設計師希望提示用戶去設置交易密碼,此時前兩個問題的答案分別是:
?
我想讓用戶做什么? ? – 我想讓用戶去設置交易密碼
為什么要讓用戶這么做? ?– 讓用戶的交易更加安全
在寫之前花三秒想一下前兩個問題,就已經可以理清思路,確定文案內容:“為了讓用戶的交易更加安全,希望用戶去設置交易密碼”。但此時還有第三個問題沒有解決:“怎么寫才能符合用戶體驗?”
?
以上例,有經驗的文案設計師會寫成:“為了讓您的交易更安全,請設置交易密碼”。
?
為什么這樣寫更好?下面這些寫作原則會給你一些幫助。
?
原則一 ?風格
?
設計師在寫UI文案時,文風越是接近網站或APP整體的語言風格,就越融入整體,也就讓用戶的閱讀和使用越沒障礙。
?
寫作時可以參照當前網站或APP的文案風格,盡量抹去個人的寫作癖好,與整體風格統一。需要注意的是,一旦確定的寫作風格就應一直延續下去,除非有特殊情況或顛覆性的改版。
?

?
兩種不同風格的UI文案對比
?
原則二 ?直接
?

?
文案應直接,單刀直入,最大限度的降低用戶的理解負擔。間接、曖昧模糊的說法,生僻和過于“文雅”的用詞,都應盡量避免,因為UI文案只是溝通的工具,只有最有效的傳遞信息才是它的任務。復雜的修辭和句式、“只可意會”的深刻寓意,都是不需要的。
?
簡單來講,就是大白話,使用日常常用詞,平鋪直敘。
?
以形容詞來說,“肯定的表達”比“否定的否定”更直接,比如:“驗證碼錯誤”優于“驗證碼不正確”。
?
原則三 ?人稱
?
人稱的選擇,體現了設計師是如何看待用戶的。一般來說,設計師會把用戶當做一個虛擬的第三方,描述他們時往往是“用戶”、“他們”,然而UI界面是 以界面為媒介、與用戶的直接對話,是和一個真實人類面對面的溝通。在現實生活中,會稱面前的人為“你”“您”,那在UI界面中也應稱用戶為“你”“您”, 而不應使用第三人稱“用戶”“他們”。
?
使用第二人稱,體現了與用戶的近距離感,讓UI界面成為一個擬人的人格,能夠讓用戶沉浸在模擬真實對話的情境中,更有利于我們指引和鼓勵用戶操作。
?
比如,“當您投資成功時,我們會發送短信提示” 優于“當用戶投資成功時,證券網會發送短信提示”。
?
原則四 ?主動語態
?
既然UI界面始終以用戶為中心,UI文案就始終以用戶為主體來寫作。相對于使用賓語作為主語的被動態,用戶作為主語的主動態,與用戶直接相關聯,能調動其情緒,更能讓用戶直接、毫無負擔的接受信息。
?
比如:“您已修改此設置”(用戶作為主語的主動態)優于“此設置已被您修改”(賓語作為主語的被動態)。
?
原則五 ?動詞
?
為了促使用戶執行操作,多用及物動詞,少用不及物動詞和名詞。及物動詞,簡單來說,就是那些必須有賓語跟隨的動詞,像“解鎖”的“解”,“鎖”是跟隨“解”的賓語,動詞“解”必須與賓語“鎖”同時出現,才能保證意思的完整,此處的“解”就是及物動詞。
?
及物動詞能從行動者(用戶)的角度出發,“動賓”結構讓用戶直接代入自己作為主語,從而促使用戶執行操作。當我們希望用戶做某些操作時,可以有意識地使用及物動詞。
?
比如,當“修改”是重點時:
?
“請修改驗證碼”(及物動詞)優于“請對驗證碼進行修改”(不及物動詞),更優于“請進行驗證碼的修改”(名詞)。
?
原則六 ?積極
?
用積極的用詞,能鼓勵用戶去做給他帶來好處的操作,在情感上用戶也更愿意順從積極的指令。
?
比如:“為了順利投資,請您進行以下操作”優于“為防止投資失敗,請您進行以下操作”。
?
但有例外:
?
起報錯、提醒或警示作用時,消極用詞能更直接的點明重點,比如:“驗證碼錯誤”優于“驗證碼不正確”。
?
原則七 ?選詞
?

?
有時會遇到這個問題:相同含義的兩個詞,該用哪一個?在面對這類選詞問題時,首要原則是:統一性。
?
與整個APP的用詞統一
?
若是頻繁出現的詞匯,可直接采用曾用過的詞,可以保證整體的統一性,還能防止用詞偏差;若是新詞,應與整體用詞風格統一。
?
與主流用詞和行業術語統一
?
每個領域都有自己的專有詞匯,在考慮用戶理解力的基礎上,采用主流詞匯和術語,能保證用詞的準確性。
?
與目標用戶的語言統一
?
使用用戶語言,就是在了解用戶的基礎上,用用戶常用的語言來寫UI文案,從而讓用戶迅速理解。多了解目標用戶的年齡層、職業、使用偏好等各種特征,可以了解用戶語言。
?
比如,某個股票基金投資APP,目標用戶是有5年左右投資經驗的投資老手,這個APP里面就可以使用一些比較專業的術語,因為對于目標用戶(投資老 手)而言,用他們熟知的術語,比用一些給投資小白看的用詞,要容易理解。相反,目標用戶是投資小白的APP,就要慎重考慮是否使用老手才懂的復雜術語,或 者增加一些解釋說明和標注,來輔助用戶。
?
原則八 ?“先說目的”法則
?
當我們希望用戶進行一個操作,而這個操作會花費他們一些時間、很可能他們不愿意去做的時候,先說明操作的目的和重要性,能促使用戶更愿意去執行。這就是“先說結論”法則。
?
比如,“為了讓您的賬戶更安全,請設置手勢密碼”,如果此處不提目的,直接指示“請設置手勢密碼”,用戶在不了解這個新功能時就會產生疑慮,不明白這個操作的意圖,甚至產生不信任感,最后無視這個指令。“先說目的”可以直接說明重要性,讓用戶欣然接受。
?
當然,這里的“目的”應是從用戶角度出發,會讓用戶覺得這個操作對他是有意義的,而不是從系統和設計師自己的私利角度,否則用戶也不會執行(即使真實目的是從系統角度考慮,也可以轉化為是“為了用戶”的寫法)。

?

?
“先說目的”法則示例
?
原則九 ?“問題-方案”法則
?
對于寫提示性文案,有個小竅門,在點明問題之后,直接寫用戶需要做的判斷和操作。這就是“問題-方案”法則:
?
“說明問題(理由/原因)—給出解決方案(需要用戶去做某個操作)”
?
比如:驗證碼錯誤,請重新輸入。
?
原則十 ?“問題-后果-方案”法則
?
當我們需要用戶在方案A和B之間做一個選擇,而我們希望用戶選擇方案B(因為A有很嚴重的后果C)的時候,往往會使用這個法則。一般是寫提出問題,即如果采用方案A會有后果C,然后建議采用方案B,最后把問題拋給用戶自己選擇。
?
比如:當方案A-“退出編輯”,后果C-“無法保存所輸入的信息”,方案B-“先去保存”,文案如下:
?
退出編輯則無法保存所輸入的信息,建議您先去保存,您確認要立即退出嗎?
?
原則十一 ?“最簡”原則

?

?
在涵義不變的情況下,優先選擇最簡潔、字數最少的內容;去掉與用戶無關、對用戶無用的文字;完整而準確,每一個字都要有意義。這就是“最簡”原則。
?
事實上,要始終做到“最簡”是很難的,一般來說寫作都是“加法”,把想要表達的信息不斷累加,最后整理一下使語句通順,就呈現給用戶了。
?
但是從用戶的角度考慮,是否真的需要全部信息呢?再仔細推敲下,是否可以省略一些不需要用戶了解、但也完全不影響操作的文字呢?是否可以拆分文字成幾塊,改變文字的順序,或者依據流程的發展,只在最恰當的地方,放上用戶需要的文字?
?
只將自己想表達的意思,一股腦的扔給用戶,并不是好的UI文案,也不符合用戶體驗。怎樣做“減法”來達到“最簡”,需要針對不同情況,具體情況具體分析。
?
不過,對于初學者而言,在保持語義不變的基礎上刪減字數、或替換成更簡潔的句式,是個不錯的開始。
?
原則十二 ?有時也需要委婉
?
文案有時候并不是為了某個目的和功能,而是為了隱藏不能明說的原因和問題,或者只為了安撫用戶情感,這時文案就不能那么生硬直接。以委婉或者曖昧的文字來向用戶說明,暗示或引導用戶從我們希望的角度去理解。
?
比如,“支付需要一些時間,請稍候”優于“支付尚未成功”;
?
“抱歉,出現了一些問題,請稍后刷新重試”優于“系統錯誤”。
?
原則十三 ?禁區

?

?
有一些文案問題,會嚴重影響用戶的理解,造成阻礙,是絕對不可以出現的。比如:
?
英文或其他外語,對用戶的理解負擔很大,除非必要,一般不會在中文用戶界面使用外語,若使用也要考慮是否要標注中文解釋;
“banner”“后端開發”等內部術語,我們這些行話不該給用戶看到,若真有必要提及,應使用其他用戶能理解的詞替代;
設計稿暫定文字,比如“X天后”“須PM確認”,當然出現這種情況概率極其小。
?
簡言之,UI文案的任務就是將信息迅速傳達給用戶,最大程度上降低用戶的理解負擔,讓用戶毫無阻礙、心情愉悅的完成操作,所以任何生硬、模糊、繁 冗、意味不明、拐彎抹角的用詞和句式,都應該被摒棄。只有簡潔、直接、清晰,才是用戶最想看到的UI文案。用戶不需要思考、立刻去做,UI文案就達成了自 己的使命。
?
文章來源:點融設計中心DDC

轉載于:https://www.cnblogs.com/wi100sh/p/5779724.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286604.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286604.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286604.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【前端就業課 第一階段】HTML5 零基礎到實戰(一)基礎代碼結構詳解

注意:手機(APP)打開,內容顯示更佳,不會的私聊博主即可 想要拿代碼或加入學習計劃(** 博主會監督你并且教你寫文章 **)的拉到最下面(PC端Web打開)加博主即可,目…

【框架篇】mvc、mvp、mvvm使用關系總結

MVC MVC全名是Model View Controller,是模型(model)-視圖(view)-控制器(controller)的縮寫,一種軟件設計典范,用一種業務邏輯、數據、界面顯示分離的方法組織代碼,將業務邏輯聚集到一個部件里面&#xff0c…

Blazor University (26)路由 —— 通過代碼導航

原文鏈接:https://blazor-university.com/routing/navigating-our-app-via-code/通過代碼導航源代碼[1]從 Blazor 訪問瀏覽器導航是通過 NavigationManager 服務提供的。這可以使用 razor 文件中的 inject 或 CS 文件中的 [Inject] 屬性注入到 Blazor 組件中。Navig…

Android之使用自定義華為掃描SDK掃描二維碼和識別本地圖片

1、需求 更具UI的設計實現掃描二維碼和識別本地圖片二維碼功能。 zxing掃描二維碼還可以,但是識別本地圖片二維碼功能效果太差,非常不理想,看了看多github很多zxing擴展的開源項目,識別本地圖片二維碼功能效果不樂觀,有些甚至還有裁剪本地圖片,還是不能識別,果斷放棄zb…

Matlab R2016b簡體中文版安裝教程(附Matlab R2016b百度網盤下載地址)

下載的Matlab R2016b軟件安裝包(文末附有下載地址)目錄如下所示: 安裝過程: 1. 安裝主程序R2016b_win64_dvd1.iso和R2016b_win64_dvd2.iso 由于目前大多數及其都是Win8或10系統,所以選中R2016b_win64_dvd1.iso,右鍵→Windows資源管理器打開。Win7系統可以安裝好壓軟件之后…

深度學習String、StringBuffer、StringBuilder

相信String這個類是Java中使用得最頻繁的類之一,并且又是各大公司面試喜歡問到的地方,今天就來和大家一起學習一下String、StringBuilder和StringBuffer這幾個類,分析它們的異同點以及了解各個類適用的場景。下面是本文的目錄大綱&#xff1a…

Leetcode之打印鏈接的倒數第K個節點

1 問題 打印鏈表倒數第K個節點值。 2 代碼實現 #include<stdio.h>//定義一個Node結構體,里面包含了value值和保存了下一個Node的指針(地址) typedef struct Node {int value;Node *next; } Node;//打印鏈表所有的值,循環遍歷一次,因為鏈表節點的最后一個節點肯定是…

MySQL5.5多實例編譯安裝——mysqld_multi

一、MySQL多實例簡介 MySQL多實例&#xff0c;簡單地說&#xff0c;就是在一臺服務器上同時開啟多個不同的服務端口&#xff08;如&#xff1a;3306、3307&#xff09;&#xff0c;同時運行多個MySQL服務進程&#xff0c;這些服務進程通過不同的socket監聽來自不同的端口來提供…

【前端就業課 第一階段】HTML5 零基礎到實戰(二)超鏈接

注意&#xff1a;手機&#xff08;APP&#xff09;打開&#xff0c;內容顯示更佳&#xff0c;不會的私聊博主即可 想要拿代碼或加入學習計劃&#xff08;** 博主會監督你并且教你寫文章 **&#xff09;的拉到最下面&#xff08;PC端Web打開&#xff09;加博主即可&#xff0c;目…

架構,框架,模式,模塊、組件、插件的含義和區別

架構、框架、模式、模塊、組件、插件、控件、中間件的含義和區別。經常看到這些概念&#xff0c;但是有些含糊&#xff0c;花點兒功夫整理一下&#xff0c;結果還是有些地方理解的不透徹&#xff0c;先將整理的內容寫下來&#xff0c;以供交流。左側英文欄中有些單詞被分成了兩…

C語言,C#語言求100-999內的水仙花數源程序

水仙花數&#xff08;Narcissistic number&#xff09;也被稱為超完全數字不變數&#xff08;pluperfect digital invariant, PPDI&#xff09;、自戀數、自冪數、阿姆斯壯數或阿姆斯特朗數&#xff08;Armstrong number&#xff09;&#xff0c;水仙花數是指一個 3 位數&#…

一個精簡的C#表達式執行框架Dynamic Expresso

一、簡介Dynamic Expresso是一個用.NET Standard 2.0編寫的簡單c#語句的解釋器。Dynamic Expresso嵌入了自己的解析邏輯&#xff0c;通過將其轉換為.NET lambda表達式或委托來解釋c#語句。使用Dynamic Expresso開發人員可以創建可編寫腳本的應用程序&#xff0c;無需編譯即可執…

算法馬拉松13 A-E解題報告

A題意&#xff08;取余最長路&#xff09;: 佳佳有一個n*m的帶權矩陣&#xff0c;她想從(1,1)出發走到(n,m)且只能往右往下移動&#xff0c;她能得到的娛樂值為所經過的位置的權的總和。 有一天&#xff0c;她被下了惡毒的詛咒&#xff0c;這個詛咒的作用是將她的娛樂值變為對p…

Modis數據處理工具:MRT百度網盤下載和手把手圖文安裝教程

如下圖所示為 MODIS Reprojection Tool(MRT)的軟界面,看似簡單,卻是Modis遙感影像必不可少的處理工具,如投影變換等。本文以圖文并茂的形式,詳細講解MRT軟件在Windows10平臺上的安裝過程,并附MRT軟件百度網盤下載地址。 Modis Tool主界面: 一、安裝過程 1、安裝Jav…

Word中如何設置圖片與段落的間距為半行

第一種&#xff1a; 正文為5號&#xff0c;那么圖片或者Viso對象前后空一行&#xff0c;設置字號為7號或者更小&#xff0c;這樣設置的間距就是那個7號字的間距&#xff0c;比5號小&#xff0c;看著空白不是那么大。 第二種&#xff1a; Visio對象轉為jpg&#xff0c;然后選中圖…

在微信小程序中使用“隨機鍵盤”

最近研究微信小程序&#xff0c;發現在手機上使用系統鍵盤非常不方便&#xff0c;一是按鍵太小&#xff0c;對于小學生來說&#xff0c;操作非常不方便&#xff1b;二是系統鍵盤反復切換影響界面布局。于是自己決定自己寫一個隨機的小鍵盤。 原理非常簡單&#xff1a;拿“口算練…

Android之提示訂閱配置訂閱需要傳新的包 添加結算權限。

1 問題 apk上google應用市場&#xff0c;然后開通支付商品&#xff0c;錯誤提示如下 2 解決辦法 AndroidManifest.xml里面添加谷歌支付權限 <!-- google pay --><uses-permission android:name"com.android.vending.BILLING" />

【前端就業課 第一階段】HTML5 零基礎到實戰(三)一篇文CSS基礎入門

注意&#xff1a;手機&#xff08;APP&#xff09;打開&#xff0c;內容顯示更佳&#xff0c;不會的私聊博主即可 想要拿代碼或加入學習計劃&#xff08;** 博主會監督你并且教你寫文章 **&#xff09;的拉到最下面&#xff08;PC端Web打開&#xff09;加博主即可&#xff0c;目…

C#如何獲取實體類屬性名和值?

數據模型定義public class User{public User(){student new student();}public string name { get; set; }public string gender { get; set; }public int age { get; set; }public student student { get; set; }}public class student{public int ID { get; set; }public st…

將VNC 安裝在Centos 7步驟

&#xff08; Virtual Network Computing&#xff09;VNC允許Linux系統可以類似實現像Windows中的遠程桌面訪問那樣訪問Linux桌面。本文配置機器是興寧市網絡信息中心的一臺Centos 7 HP服務器環境下運行。 首先試試服務器裝了VNC沒 [rootwic ~]# rpm -q tigervnc tigervnc-serv…