UI設(shè)計中的文字設(shè)計
發(fā)布時間：2019-01-23 18:29:10
已幫助：782人
來源：北京天成設(shè)計
文字是UI設(shè)計中一個重要的組成元素，文字使用的好壞會極大影響產(chǎn)品的用戶體驗(yàn)，但是文字經(jīng)常會被我們忽視，本文為大家進(jìn)行UI設(shè)計中的文字設(shè)計的方法介紹，一起來學(xué)習(xí)下吧。
建立視覺層級
設(shè)計師的一個主要職責(zé)就是將頁面中的元素整合起來，以一種清晰可見的形式呈現(xiàn)給用戶。當(dāng)然我們都知道一個頁面中不同元素的重要性是不一樣的，有優(yōu)先級之分。文字也是一樣，有些文字比較重要，我們更希望用戶看到，有些文字比較雞肋我們不希望用戶看到。為了達(dá)到這個目的，我們給界面的文字建立視覺層級，將文字大致分為三類：主標(biāo)題，次標(biāo)題和正文。
主標(biāo)題
主標(biāo)題是對于整個頁面內(nèi)容的一個總結(jié)，合格的主標(biāo)題用戶看了一眼就應(yīng)該知道這個頁面的大致內(nèi)容。主標(biāo)題是用戶進(jìn)入一個頁面眼就應(yīng)該看到的文字。主標(biāo)題應(yīng)該用字號要足夠的大，要加粗，這樣才可以更好的吸引用戶的注意力。此外，為了更好的節(jié)約用戶時間，主標(biāo)題應(yīng)該簡練。根據(jù)Jacob Nielsen的一項研究表明，主標(biāo)題5-6個單詞（英文狀態(tài)下）最合適，最長不要達(dá)到一句話的長度。
我們強(qiáng)調(diào)要突出主標(biāo)題來吸引用戶注意力，但是不要過度突出。因?yàn)橛脩魧τ诰呦笤兀ú瀹嫞琲con,圖像或攝影圖等）的感知能力遠(yuǎn)比文字要強(qiáng)得多。如果我們想宣傳一款產(chǎn)品，那么的方案就是直接給用戶展示產(chǎn)品圖片。文字和圖片搭配使用的時候，文字起到的只是輔助說明的作用。我們不能過度放大主標(biāo)題的尺寸造成對圖片的遮蓋，這樣是本末倒置的。
次標(biāo)題
將所有的信息都塞進(jìn)主標(biāo)題是不太現(xiàn)實(shí)的，這也是我們需要次標(biāo)題的原因。次標(biāo)題的要求和主標(biāo)題類似，都要求文字簡潔干練，概括性強(qiáng)。和主標(biāo)題一樣，次標(biāo)題也要進(jìn)行加粗處理，當(dāng)然為了和主標(biāo)題區(qū)分，字號要稍微小點(diǎn)。
正文
正文是提供詳細(xì)說明和解釋的文字，從頁面層級的角度來說重要性要低于主標(biāo)題和次標(biāo)題。正文文字長度沒有定論，有人認(rèn)為長的文案可以給用戶提供更為詳細(xì)的信息，而且看起來更加正規(guī)嚴(yán)謹(jǐn)。但是也有人認(rèn)為用戶不喜歡閱讀過長的文字。兩種觀點(diǎn)都有自己的道理，對于使用長文案還是短文案我做了以下總結(jié)：
設(shè)備
短文案適用于移動端。移動端相對來說空間有限，文字太多會顯得比較擁擠，影響頁面美觀程度的同時也會降低用戶的閱讀體驗(yàn)。
長文字更適用于PC端，PC有足夠的空間來展示特定內(nèi)容的詳細(xì)信息或者用戶不太熟悉的內(nèi)容（需要用戶仔細(xì)閱讀）。
這是一個家禽百科全書網(wǎng)站，這里面雖然含了大量的文字，但是設(shè)計師將文字在邏輯上分為了許多簡短而集中的文字塊。這些文字塊配以突出的標(biāo)題和引人入勝的插圖就變得具有活力。這種設(shè)計模式打破了傳統(tǒng)教育類網(wǎng)站沉悶的頁面布局，更能吸引用戶特別是青少年的注意力。
產(chǎn)品定位
產(chǎn)品的定位對于正文文案的選用是具有決定性意義的。例如，你要設(shè)計一個讀書，旅行這類偏文藝小眾的界面，正文文案要足夠的短，頁面中要有大量的留白，這樣的頁面會給用戶一種透氣、從容、開放、平靜、自由的感覺，而這些感覺都是與產(chǎn)品的風(fēng)格相契合的。相反，如果這類頁面中元素都擠在一起，就會導(dǎo)致視覺壓力，引發(fā)用戶緊張。當(dāng)然并不是所有擁擠的頁面設(shè)計都會引發(fā)緊張情緒，如果文字和頁面中其他元素之間的空間處理的合適，行間距留的足夠大，那么也可以做到做保持內(nèi)容的可讀性的同時保留了頁面的“呼吸感”。
PS：正文因?yàn)樽煮w尺寸比較小，所以我建議使用無襯線字體。因?yàn)樵O(shè)備顯示器的像素不足以表現(xiàn)小字體上細(xì)小的襯線，會出現(xiàn)鋸齒效果，對易讀性影響很大。所以我建議正文使用無襯線字體，如果非要使用襯線字體，需要在不同的設(shè)備上測試字體的實(shí)現(xiàn)效果。
行為召喚元素
想讓自己設(shè)計出來的界面不那么死板，具有可交互性，我們就要使用行為召喚元素。當(dāng)然一些行為召喚元素不需要文字也可以完成，比如我們的接電話按鈕或者短信提示，都是使用圖標(biāo)來完成。但是在一些特點(diǎn)情況下，內(nèi)容過于抽象無法用圖標(biāo)來詮釋的時候，我們應(yīng)該使用文字。
行為召喚元素對于文字長度的要求極其嚴(yán)苛，是一個單詞或者2-4個單詞組成的短語（英文狀態(tài)下）。
輕型文字的趨勢
從2016年開始，源于對干凈精致界面的追求，輕型文字越來越受到設(shè)計師的歡迎。歸根結(jié)底，輕型文字是簡約設(shè)計趨勢的產(chǎn)物，字體越來越細(xì)長。但是我們要記住，這種過于狹長字體在節(jié)省頁面空間的同時，犧牲的是文字的易讀性，這是我們在權(quán)衡是否使用輕型文字時需要考慮的問題。
不過iOS10的Apple Music界面中開始對字體加粗，所以未來字體是變得越來越粗還是越來越細(xì)，我們拭目以待。
以上就是小編為大家找來的UI設(shè)計中的文字設(shè)計的方法介紹，文字是一個可以很好提升產(chǎn)品用戶體驗(yàn)的武器，希望可以幫助到大家，北京天成設(shè)計為學(xué)員設(shè)置UI設(shè)計培訓(xùn)課程，歡迎學(xué)員咨詢了解。
北京GUI設(shè)計培訓(xùn)
北京手繪設(shè)計培訓(xùn)
北京產(chǎn)品設(shè)計培訓(xùn)
北京城市規(guī)劃設(shè)計培訓(xùn)
北京平面設(shè)計培訓(xùn)