UI文案設計技巧,視覺與內容兼具不再是夢

愛原型愛設計發表於2019-02-28

現今,一款Web或移動端應用軟體的使用者體驗愉悅度,不再僅僅依賴軟體本身功能,介面佈局,載入速度,甚至是介面文案設計,都對應用的使用者體驗發揮至關重要的作用。這也是為什麼現今一些公司設立UX寫手(UX writer),專職從事介面文案設計和研究的重要原因。

但是,軟體介面文案(尤其是微文案)的設計,究竟有哪些技巧和禁忌?設計師究竟該如何才能設計出簡單易懂,又兼具視覺誘惑力的UI文案設計,增強其易用性,提升轉化率和使用者體驗愉悅度呢?

以下就跟著小編的腳步,一步一步學習和了解軟體UI文案設計中需要掌握的技巧和禁忌,希望對大家有所幫助:

首先,究竟什麼是介面文案或微文案設計?

在開始瞭解具體文案設計技巧和注意事項之前,我們需要首先了解究竟什麼是UI文案或微文案設計。介面文案或微文案(Microcopy)設計, 一般是指大到安全隱私/使用說明以及服務條款之類,小到每個按鈕或選項微文字之類,所有介面文字內容以及外觀的設計。它是使用者瞭解和掌握一款軟體不可或缺的重要導航和橋樑。好的文案或微文案設計,不僅能夠為使用者解惑,對於增加產品銷量,提升使用者體驗,加深使用者對產品,公司以及品牌的印象,作用也是極佳。

UI文案設計技巧,視覺與內容兼具不再是夢

UI文案或微文案為何如此重要?

軟體介面文案,尤其是部分按鈕或報錯資訊的微文案,作為軟體與使用者之間溝通的重要橋樑,對於提升軟體實用性和使用者體驗愉悅度扮演著非常重要而多樣的角色:

1.解惑者

軟體中的使用說明,安全隱私說明以及服務條款等文案設計,對於解決使用者產品相關問題和疑惑,作用巨大。所以,對於使用者而言,它們是其掌握和使用軟體的重要“解惑者”。

2.引導者

軟體流程,步驟以及其他引導性文案設計,對於解決使用者如何完成某項操作或任務,扮演著極其重要的“引導者”角色。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,引導使用者完成某項操作。

3.開導者

報錯,提示或警示類資訊,在現今的大部分軟體中必不可少。而這類資訊的文案設計,對於消除使用者疑慮,緩解其消極或負面情緒,提升使用者體驗,發揮著重要作用。由此而言,要論軟體設計中的“開導者”,也非其莫屬。

4.推銷者

而一些能夠引導,解釋甚至誘惑使用者點選購買的CTA按鈕文案設計,對於加深使用者對產品的瞭解,增加產品銷量,作用也是顯而易見。因此,從這一方面來將,文案設計也扮演著產品“推銷者”的角色。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,好的文案的設計,也能激發使用者興趣,促成購買。

總之,無論介面文案或微文案設計在Web或移動端軟體設計中扮演者什麼樣的角色或發揮著怎樣的作用,好的文案設計,總是能極大地便捷和簡化使用者的各項操作,增加軟體點選率以及轉化率,提升產品曝光度和銷售量。當然,使用者體驗也不會差。所以,一款功能強大的軟體應用,如若能夠相應搭配一系列簡單易用的優質介面文案設計,結果無疑是錦上添花,如虎添翼。

如何設計視覺與內容兼具的介面文案,提升使用者體驗?

既然UI文案或微文案對於提升一款軟體的使用者體驗度和市場競爭力如此重要,作為使用者體驗設計師或UX寫手,究竟如何才能成功的設計出使用者體驗極佳的UI文案或微文案呢?

以下小編就結合收集的最新創意文案設計案例,以及小編使用更快,更簡單的Mockplus製作的原型案例,為大家解析軟體UI文案設計中需要掌握的技巧和禁忌,希望對大家有所幫助:

UI文案設計技巧,視覺與內容兼具不再是夢

技巧一:文案設計儘量精簡易懂

軟體介面的文字是實現人機交流的重要渠道。但這並不意味著新增的文字越多,內容越豐富,對使用者的作用就越大。事實上,大部分使用者並不會乖乖的閱讀所有文字。因此,儘量設計和精簡介面文案,增加使用者閱讀的機率,它所能發揮的作用才會更大。比如可以嘗試以下方式精簡介面文字:

*微文案本身儘量簡潔易讀

為了使微文案本身簡潔易讀,最實用的一個方法就是:首先將所有需要包含的內容寫下來。然後根據需要和具體使用場景,適當的進行融合,刪減以及替代。最終達到簡潔易讀,清晰明瞭的最佳狀態。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,簡潔直觀的表情達意,無需過多言辭。

*使用列表或標題,讓文字更加直觀易懂

當文字內容已無法繼續刪減時,可以嘗試新增列表或概括性簡短標題,讓文案設計更加直觀易懂。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,相較於左邊圖1的整段式設計,中間和右上角圖2與圖3採用的列表和小標題式設計更加直觀易懂。

*新增連結,簡化文字內容

介面文案設計並不需要在介面內展示出所有內容。事實上,在實際的案例中,可以通過在文字上新增連結的方式(即採用漸進式設計技巧),簡化文字內容。使用者點選相關文字連結,即可跳轉到其他頁面瞭解詳情。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,介面文字設計中可在部分文字上新增可點選連結,實現文字瘦身的效果。

注意:精簡易讀,並不等於盲目的減少文案字數

精簡易讀,並不意味著毫無標準的盲目減少文案字數,而是用最少的文字,表達出最豐富,最完整的內容。所以,文案設計中精簡的同時,也要注意文案的達意情況,避免模稜兩可甚至不知所云的情況出現。

技巧二:文案設計應結合軟體或產品特色

與介面其他部件的設計一樣,軟體文案或微文案的設計,也需要結合軟體或產品特色,增強其獨特性的同時,提升產品或品牌知名度。

文案設計中提及軟體或產品相關服務,使用軟體或產品特色術語,以及結合產品或品牌特色新增趣味的文字風格,配色以及互動等等,提升產品,公司以及品牌曝光度和知名度。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,文案設計儘量結合產品特色。

技巧三:文案設計應結合具體使用場景,有所側重

雖然,介面微文案對於提升整款Web或移動端應用的使用者體驗,非常重要,但這並不意味著,介面內所有的文案設計的標準都應該是平行不變的。相反,設計師應該根據不同的場景和使用者需求,有所側重的進行設計。

例如,對於CTA按鈕的文案設計,除了做到簡單易懂,同時還要增加一些互動設計,增強其誘惑力,增加點選率。(點選瞭解更多CTA按鈕設計祕訣

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,為按鈕新增適當互動,讓使用者忍不住點選。

而對於一些報錯類介面文案設計,簡潔委婉的同時,加入感情因素,使用人性化的表達,緩解使用者的負面情緒,提升使用者體驗。(點選瞭解更多不容錯過的404報錯設計

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,站在使用者的角度,新增一些情感因素,實現與使用者情感上的共鳴。

而對於需要使用者填寫相關資料,例如註冊,登入頁面或使用者個人頁面(User Profile page), 則需要設計師從使用者的角度出發,新增一些更能消除使用者疑慮或擔心的文字,以鼓勵使用者放心的填寫相關資訊。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,新增一些解釋說明的文案,消除使用者的疑慮和擔心,更加放心的填寫註冊資訊。

總之,設計師在具體的設計案例中,需要根據實際情況,多做分析,多做總結,有所側重。

技巧四:文案設計應獨具匠心,與眾不同

同一型別的UI文案設計,不應該千篇一律,毫無變化。事實上,軟體文案或微文案設計也是彰顯設計師個性的重要平臺。因此,在具體的設計中,設計師們可以嘗試從以下幾個方面讓你的文案設計獨具匠心,與眾不同:

*利用想象,讓文案設計更具魅力

文案內容設計也可結合設計師想象,講述一個故事,展示一種企業或產品文化,以及呈現地方或名族特色等等,讓文案更具吸引力。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,發揮想象,講述一個故事,也能讓介面更具趣味性。

*利用幽默,讓文案設計兼具感染力

幽默風趣的言語和表達,吸引使用者注意的同時,能夠讓使用者在更加自然和愉悅的氛圍中學習,瞭解以及接受軟體或產品相關資訊,極具感染力。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,使用幽默詼諧的風格,讓介面更加有趣。

注意:幽默也要注意場合和場景

幽默並不適合在所有介面場景之中應用。例如,風趣幽默的文案設計,能夠讓突然的報錯場景變得輕鬆愉快。但同時也能讓軟體安全或隱私說明,變得毫無說服力。所以,要結合不同場景,謹慎開玩笑。

*結合圖片,讓文案和圖片相互說明,呼應

俗話說:“好的圖片勝過千言萬語”。文案設計搭配美觀恰當的圖片,讓圖片和文案相互解釋呼應,更易於使用者理解。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,實現文字與圖片的相互印證和呼應。

而介面設計中文案與圖片的結合和呼應,可以嘗試使用Mockplus的“文字”和“圖片”元件相結合的方式,進行測試和迭代。動態圖片,批量圖片以及Sketch圖片的匯入,利用格子實現批量新增文字以及圖片組合等等,都不是問題。

UI文案設計技巧,視覺與內容兼具不再是夢

*體現設計師風格,讓文案設計更具獨特性

每位設計師在其設計過程中,都有其個人的設計風格和魅力。在文案設計中,也可適當的展現這類風格,讓軟體更具特色,留給使用者深刻的印象。如下圖:

UI文案設計技巧,視覺與內容兼具不再是夢

總之,加入設計師創意和用心的文案設計,註定會與眾不同,魅力無限。

技巧五:文案設計應兼具視覺誘惑力

文案設計不僅文字本身需要簡單易懂,同時也需要注重其視覺誘惑力的提升。例如設計師們可以通過以下的方式提升介面文案的視覺效應:

*設定文字屬性,簡單直觀打造視覺層次,劃分文案主次

對於文字字型,字號,顏色,大小寫,間距,對齊方式以介面位置等文案屬性的設定,調整以及對比,能夠輕鬆劃分出軟體介面不同文字的層級關係,打造視覺層次的同時,更加簡單直觀的凸顯其主次,易於使用者在最短的時間裡,瞭解軟體資訊。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖通過簡單文字字型,字號,位置,顏色以及排列對齊方式的不同,實現介面內容層次和重要性的劃分。

而使用Mockplus的“單行文字”和“多行文字”元件,就可輕鬆的實現以上文字屬性的新增,設定和調整,十分實用。

*新增適當互動

微文案新增適當的互動,對於增強文案的吸引力和趣味性,提升使用者體驗,效果也非常好。

以Mocplus的互動功能為例,設計師可以簡單快捷為其部分文案新增滑鼠點選時,懸浮時,長按時,以及載入時之類互動效應。如圖:

UI文案設計技巧,視覺與內容兼具不再是夢

當然,也可新增更多豐富的互動動畫:新增色彩變化,移動,縮放,旋轉,文字內容變化,顯示或隱藏等互動效應等等。

總之,互動的新增,對於提升文案設計的視覺效果,作用也是極大。

技巧六:文案設計應保持一致性

整款軟體應用的介面文案或微文案設計,也應保持前後一致,幫助使用者理解和使用。而文案設計的一致性,只要體現在以下幾個方面:

*文案設計稱謂的一致性

為加深軟體與使用者之間的自然無障礙的溝通,拉近與使用者的距離,文案設計之中採用“你”或“你們”要遠遠優於將使用者看作第三方的“他們”或“她們”之類的稱謂。總之,無論使用哪種稱謂,儘量在整款軟體設計中,保持一致,避免稱謂混亂,引起誤解。

*文案設計時態的一致性

在具體的文案設計中,將使用者視作動作施行者的主動語態,更易於激起使用者共鳴。所以,在你的軟體文案設計中,也需要儘量做到主動時態的前後一致。

*文案設計用詞的一致性

相較於使用全新或模稜兩可的表達,複用介面常用,慣用或已經使用過的用詞,更易於使用者理解,對於保證軟體前後用語的一致性,作用也是極大的。

*文案設計主題以及配色的一致性

介面文案主題以及配色的選擇,也應結合整款軟體的主題和主配色進行考慮,保證軟體的一致性。

*文案風格的一致性

幽默風趣也好,嚴謹謹慎也好,亦或是簡潔通俗,無論哪種文風,一旦選擇,就需要從始至終的一直延續下去,保證整款設計風格的一致性。

UI文案設計技巧,視覺與內容兼具不再是夢

如圖,保持介面設計配色,主題以及風格的一致性。

總之,無論是哪一方面的一致性,設計師們都可以試試使用Mockplus的強大元件庫和樣式庫,簡單實現軟體原型中文字相關元件以及樣式(例如文字顏色,字型,字號,對齊方式等樣式)的收藏,複用和分享,輕鬆實現軟體文案設計的前後一致性。

UI文案設計技巧,視覺與內容兼具不再是夢

技巧七:文案設計應在原型介面中反覆測試和改進

同其它介面部件設計一樣,文案設計也需要在具體的原型介面中反覆測試和改進,才能真正的達到我們所希望的效果。

例如,在具體的軟體原型介面中調整文案長度,排列方式,顏色,尺寸,樣式以及互動等等,檢測其實用性和有效性。

而這一方面,小編就忍不住想要給大家推薦一下Mockplus的8種演示和分享方式,不僅能夠及時的測試文案設計在具體的介面中的視覺效果,還能及時的分享給其他設計師和使用者,收集反饋的同時,提升和優化文案設計。

總之,優質且極賦創意的介面文案或微文案設計,對於增強軟體使用者體驗愉悅度,提升軟體產品競爭力,作用不容小覷。

結語

儘管Web或移動端軟體介面文案設計對於提升使用者體驗十分重要,但這並不意味著文案能獨立於軟體本身而存在。事實上,無論文案設計多麼簡潔吸睛,都要以軟體為依託。好的軟體需要優質的創意文案設計,才能夠得到更深層次的優化和提升。 反之,軟體功能欠缺,再好的文案設計也會變得毫無用武之地。所以,文案設計和軟體功能設計都需得到必要的重視,才能設計出真正實用,好用的軟體。

總之,希望這裡分析的文案設計技巧能對你的文案以及軟體設計有所啟發。

相關文章