tft每日頭條

 > 生活

 > ui文案設計技巧

ui文案設計技巧

生活 更新时间:2024-05-15 11:22:37

你有沒有注意過産品中的一些細節文案呢?你注意同一句話在不同産品的不同表達方式嗎?筆者認為,細節文案的設計能夠給用戶帶來更多的好感與認同。

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)1

一般來講産品的UI設計有三大設計元素組成:色彩、圖形、文字。其中提示文案設計最容易被忽視随意編寫,或帶有設計者個人人格屬性,與産品調性不相匹。

合理的提示文案可以提高用戶微感受,所謂微感受就是用戶對産品細節的感知,産品的細節做得越好,也就能給用戶帶來更多的好感,所以提示文案的設計不可忽視。

案例解析如下:

一、用文案渲染産品調性

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)2

同樣兩個音樂APP産品,體會一下兩個提示文案給你帶來的感受。

很明顯不同的表訴會有不一樣的感受——“這裡好像什麼都沒有呢…”“暫無播放記錄”更貼合音樂類産品調性。

分析一下,用戶通常打開音樂APP聽音樂在尋找一種什麼内心感受,可能更多的是一種輕松愉悅的内心感受吧,所以咪咕音樂的提示文案“這裡好像什麼都沒有呢…”再配上小插畫,更能營造産品輕松愉悅的氛圍。

當然這裡講的隻是定位普通大衆的音樂類産品,有些小衆音樂産品不能一概而論,比如:MOO音樂APP

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)3

下載的空頁面狀态提示“Oh moooo Nothing yet”(哦,沒有什麼),有沒有一種個性不屑的感覺?

因為這款産品定位人群是喜歡追求新事物的年輕人或專業的音樂人,“Oh moooo Nothing yet”這樣的提示文案更能迎合目标用戶的特征,給用戶一種找到自我的感受。

回到開始的案例——多米音樂Pro“暫無播放記錄”。

這種冷靜、幹脆、不營造情緒氛圍的提示文案,也有非常多适合的産品,例如工具類的小程序——騰訊文檔。

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)4

工具産品就要體現出他的便捷高效與專業性,騰訊文檔配上這樣的産品文案會給用戶一種幹脆利落、不推泥帶水的感覺。

工具産品一般不太需要營造情緒氛圍的文案、能給使用者能夠帶來專業,嚴謹,安全感受才是最重要的。

總結:文案設計從産品調性、用戶特征出發。

二、用戶思維,給用戶價值感受

産品原型圖截圖

上圖産品,是問卷收集企業負責人在事業單位辦理業務時的各個環節感受(例如企業辦理營業執照)。

從用戶思維思考,“請幫助我們..……”這樣的表述給用戶的感受是——用戶需要付出什麼。這樣導緻的結果是用戶可能會産生一種抗拒心理,從而影響問卷調查的可靠性。

其實我們從業務的角度去思考,收集問卷就是為了能給企業提供更好的服務,所以從這個點出發,可以賦予用戶價值感受。

文案修改後截圖

修改後“為了給您的企業帶來更優質高效的服務體驗…”這樣的表述就能給用戶價值感受,因為表述了這件事是為用戶自己着想,而不是在幫助平台收集數據。

為什麼要有“高效”這個詞呢?這就要從用戶痛點思考了,大家可能都知道一般去事業單位辦事,最大的痛點就是繁瑣低效的流程,所以文案表述的是要解決這個問題,這樣用戶當然就更有可能會積極配合。

總結:拿用戶思維考慮文案,給到用戶價值感受。

三、用詞恰當,可以使用戶間更有親近感

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)5

既然我們講的是“微感受”,那麼就來感受一下“相互關注”“互相關注”有什麼不同感受,如果沒什麼不一樣的感受,那麼來做下面的填空題。

把“相互”和“互相”兩個詞放到下面語句中感受哪個詞更能表達親近感?

在遠處的海邊有一對情侶坐在夕陽下_______依偎着。

相互和互相都有副詞用法,都可以表示彼此對待的關系,區别在于:

“相互”更多的表示一種形容關系,“互相”表示彼此對待的一個動作,“互相”表達積極的情感上更有表現力,所以“一對情侶互相依偎着”更能體現這種關系。

總結:用戶與用戶互相關注是彼此拉近了距離,從産品的角度是要助力渲染這種關系,“互相”比“相互”更能帶來親近感,所以互相關注更為恰當。

四、給用戶一個确定的人稱

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)6

百度貼吧同一個頁面中出現對用戶不同的人稱:

  • 的興趣懂的”
  • 對遊戲有多沉迷”
  • “如果是超級英雄”

把用戶稱為“你”的同時又把用戶稱為“我”,這樣就給用戶一種割裂感,到底你是我還是我是我。

測試問卷标題不可避免的出現不同的人稱,那麼頁面中就要減少人稱的幹擾。

再來看個案例:

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)7

寫提示文案的時候,一定要理清楚,是産品在對話用戶,還是把用戶帶入産品中。

上圖标題為“我的廣場”這就是把用戶帶入了産品,那麼這個頁面的提示文案應該從用戶的角度去提示,“此刻,我想說點什麼…”人稱與标題相對應非常之恰當,“此刻,你想說點什麼…”人稱更改對應标題就會有割裂感。

總結:提示文案要盡可能的統一人稱,理清産品在對話用戶,還是把用戶帶入産品。

“你”和“您”

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)8

我們日常用的産品中,有些産品提示文案用“你”例如微信,有些産品用“您”例如京東,為什麼人稱會不一樣是因為産品與用戶的關系不一樣。

有些産品與用戶是一種平等關系,就像朋友、戀人、同事之間,是一種平等關系;有的産品對用戶是一種尊重的态度,因為用戶即客戶,對客戶當然要抱以尊重的态度。

所以我們大概能得出一個結論,社交類、工具類、用“你”更為恰當,電商、B端産品用“您”更為恰當,當然有的産品會有很多形态,比如小紅書屬于社交電商産品,那麼就要從新思考産品與用戶的關系了。

下面舉幾個“你”和“您”用的不好的例子:

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)9

功能闆塊單一的産品,有的地方用“您”,有的地方用“你”非常之奇怪,當然有些産品是可以用不同人稱的,例如産品中普通用戶用“你”,成為了VIP可以稱呼用戶“您”這樣用戶會有一種被尊重、優待的優越感。

QQ對話列表頁面中系統推送不同的人稱:

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)10

我們都知道QQ是一個量級非常大的産品,所以肯定不會一個人負責所有的設計,一般會一個團隊或一個人負責不同闆塊,協作工作就難免會出現上圖的問題,其原因還是制定的設計規範沒有落實到更細的細節上。

絕對優秀的産品,細節上定會是無懈可擊的,我翻遍了微信所有的頁面,沒有找到一個“您”字。

總結:根據産品的定位找到與用戶的關系,運用恰當的人稱。

六、提示文案需要精簡高效、有效傳達

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)11

天貓讀書的提示文案提示過于啰嗦,沒能達到高效傳達信息,簡書的提示文案,精簡高效,用戶甚至不需要去讀,隻需要掃一眼即懂,而且簡書交互上還提供了很直接的操作入口。

七、解密提示文案高效傳達的方法

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)12

第一句需要讀完整段話,才明白表達的信息。

第二句則是先告訴用戶目的,然後再說需要怎麼做,能夠實現高效傳達效果,而且讀這句話時候過程用戶是清晰的。

總結:提示文案可以讓目的先行,這樣能實現更高效的信息傳達。

八、标題文案的一緻性

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)13

在産品中當點擊一個闆塊,進入頁面中頂部标題應該跟闆塊名稱保持一緻,保證用戶不會迷失。

上圖點擊“K币賬戶”出現的是“我的賬戶”不可排除用戶會疑惑自己是不是點錯了,生活中你點個土豆燒牛肉,上的是土豆燒驢肉,很多人可能吃不出來,但是總有人會吃出來。沒錯!筆者就是吃出來的人。

總結:一緻性的标題文案,可以讓用戶不迷失

九、提示文案需要積極、友好的表達

原型圖截圖

“隻能上傳shp文件,且不要超過500kb” 給用戶的感覺不夠友好積極。

關鍵詞“隻能”給用戶一種産品不夠強大的感覺,因為明确強調了隻支持shp文件;“且不”則有一種被命令的感覺,不免讓人有一種不被尊重的感覺。

修改後:

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)14

修改後截圖

修改後“請上傳SHP格式文件,大小須在500kb以内”語氣瞬間變得溫和友好,同時也并不存在強調支持格式單一的感覺。

總結:友好、積極的文案更能給用戶好的感覺

十、使用用戶語言提示

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)15

有些産品因為行業的特殊性,會有一些行業術語,如果面向大衆用戶是很難理解的,所以一般需要轉換為大衆用戶熟知的語言。

但如果不可避免地要使用一些行業術語,就需要給用戶解釋,中國聯通APP登錄頁面“請輸入6位數服務密碼”What?服務密碼是什麼?做為用戶的我沒能理解。

中國電信頁面上到是有“什麼是服務密碼”的解釋,但是輸入框裡寫的是“請輸入密碼” What?這兩個密碼有關系嗎?

總結:使用用戶語言,解釋行業詞彙。

十一、文案的排版

提示文案最好不超過兩行

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)16

文案超過兩行就需要用戶更集中精力閱讀,從而難免産生排斥心理,如果文字信息真的很多,可以把一段話内容整理分類依此豎向排列,同樣是可以起到清晰、高效閱讀。

數字與文字間加個空格更易閱讀

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)17

數字與文字有間隔可以增加數字的易讀性,當然也不是所有的數字跟文字都應該有間隔。

表述一件事:我家的狗狗今年1歲了(不需要)

體現一個數據:已經記錄了 28 條信息(可以有間隔)

十二、段落是否空兩格

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)18

我們的傳統文學,為了能夠方便閱讀形成了段落空兩格的傳統。

在開放的互聯網環境中,沒有語文老師監督你,有時候完全可以不用空兩格。比如單段簡短的話,空兩格就不夠美觀,其實一般的産品隻要能把語意清晰傳達給用戶即可。

互聯網中文文字排版很多不空兩格,可能也是借鑒英文的排版樣式,英文排版是不空兩格的。

關于标點的建議

ui文案設計技巧(UI交互PM應該懂的産品提示文案設計)19

一般情況下提示文案末尾不出現标點,除非強調語氣,或者問号。

  • 還沒有任何收藏。(不可)
  • 您還沒有收到禮物喔~(強調語氣,可以)
  • 暫無文件!(不可)
  • 恭喜你注冊成功!(熱情表達,可以)
  • 請輸入。(不可)
  • 請輸入(可以)
  • 請輸入…(可以)
  • 什麼是服務密碼。(不可)
  • 什麼是服務密碼(可以)
  • 什麼是服務密碼?(可以)

最後

為了準備這篇文章,我至少看了50 個APP找分享案例,給我的結論就是——優秀的産品,細節上做得也是相當出色,完全找不到一點瑕疵。而有的産品則不然,細節上一堆問題。以上分享的都是産品裡無傷大雅的細節問題,但是我們可以把産品做到更好,為什麼不呢?

最後要講一個重要的事情:

很多時候設計産品的人,會把自己人格帶給産品。

例如:一個性格活潑呆萌的産品經理負責的産品,就會有很多活波呆萌的元素;一個端莊嚴謹的産品經理又從來寫不出來能夠渲染氣氛的嬌氣文案。

優秀的産品設計者,設計産品早已把自己的人格抛掉了,而是給不同的産品賦予不一樣的産品人格。

作者:吳星辰,互聯網設計幫

本文由 @吳星辰 原創發布于人人都是産品經理。未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved