文字是UI設(shè)計(jì)中一個(gè)重要的組成元素，文字使用的好壞會(huì)極大影響產(chǎn)品的用戶體驗(yàn),。想象一下用戶打開你的app,，發(fā)現(xiàn)界面中的文字都是同一個(gè)字體，同樣大的字號(hào),，連顏色都是一樣的,。這樣的文字搭配用戶讀起來(lái)會(huì)很累，費(fèi)時(shí)費(fèi)力,。用不了多久他們就可能會(huì)卸載你的產(chǎn)品,，轉(zhuǎn)而使用另一個(gè)界面設(shè)計(jì)更加友好，文字搭配更加合理的產(chǎn)app,。文字對(duì)界面設(shè)計(jì)的重要性可見一斑,，但是文字經(jīng)常會(huì)被我們忽視，這篇文章中我對(duì)UI設(shè)計(jì)中文字的使用做了一個(gè)簡(jiǎn)單的分析和總結(jié),。

　　建立視覺層級(jí)

　　設(shè)計(jì)師的一個(gè)主要職責(zé)就是將頁(yè)面中的元素整合起來(lái),，以一種清晰可見的形式呈現(xiàn)給用戶。當(dāng)然我們都知道一個(gè)頁(yè)面中不同元素的重要性是不一樣的,，有優(yōu)先級(jí)之分,。文字也是一樣，有些文字比較重要,，我們更希望用戶看到,，有些文字比較雞肋我們不希望用戶看到。為了達(dá)到這個(gè)目的，我們給界面的文字建立視覺層級(jí),，將文字大致分為三類：主標(biāo)題,，次標(biāo)題和正文。

　　主標(biāo)題

　　主標(biāo)題是對(duì)于整個(gè)頁(yè)面內(nèi)容的一個(gè)總結(jié),，合格的主標(biāo)題用戶看了一眼就應(yīng)該知道這個(gè)頁(yè)面的大致內(nèi)容,。主標(biāo)題是用戶進(jìn)入一個(gè)頁(yè)面第一眼就應(yīng)該看到的文字。主標(biāo)題應(yīng)該用字號(hào)要足夠的大,，要加粗,，這樣才可以更好的吸引用戶的注意力。此外,，為了更好的節(jié)約用戶時(shí)間,，主標(biāo)題應(yīng)該簡(jiǎn)練。根據(jù)Jacob Nielsen的一項(xiàng)研究表明,，主標(biāo)題5-6個(gè)單詞（英文狀態(tài)下）最合適,，最長(zhǎng)不要達(dá)到一句話的長(zhǎng)度。

　　我們強(qiáng)調(diào)要突出主標(biāo)題來(lái)吸引用戶注意力,，但是不要過(guò)度突出,。因?yàn)橛脩魧?duì)于具象元素（插畫，icon,圖像或攝影圖等）的感知能力遠(yuǎn)比文字要強(qiáng)得多,。如果我們想宣傳一款產(chǎn)品,，那么最好的方案就是直接給用戶展示產(chǎn)品圖片。文字和圖片搭配使用的時(shí)候,，文字起到的只是輔助說(shuō)明的作用,。我們不能過(guò)度放大主標(biāo)題的尺寸造成對(duì)圖片的遮蓋，這樣是本末倒置的,。

　　次標(biāo)題

　　將所有的信息都塞進(jìn)主標(biāo)題是不太現(xiàn)實(shí)的,，這也是我們需要次標(biāo)題的原因。次標(biāo)題的要求和主標(biāo)題類似,，都要求文字簡(jiǎn)潔干練,，概括性強(qiáng)。和主標(biāo)題一樣,，次標(biāo)題也要進(jìn)行加粗處理，當(dāng)然為了和主標(biāo)題區(qū)分,，字號(hào)要稍微小點(diǎn),。

　　正文

　　正文是提供詳細(xì)說(shuō)明和解釋的文字，從頁(yè)面層級(jí)的角度來(lái)說(shuō)重要性要低于主標(biāo)題和次標(biāo)題,。正文文字長(zhǎng)度沒有定論,，有人認(rèn)為長(zhǎng)的文案可以給用戶提供更為詳細(xì)的信息，而且看起來(lái)更加正規(guī)嚴(yán)謹(jǐn)。但是也有人認(rèn)為用戶不喜歡閱讀過(guò)長(zhǎng)的文字,。兩種觀點(diǎn)都有自己的道理,，對(duì)于使用長(zhǎng)文案還是短文案我做了以下總結(jié)：

　　設(shè)備

　　短文案適用于移動(dòng)端。移動(dòng)端相對(duì)來(lái)說(shuō)空間有限,，文字太多會(huì)顯得比較擁擠,，影響頁(yè)面美觀程度的同時(shí)也會(huì)降低用戶的閱讀體驗(yàn)。

　　長(zhǎng)文字更適用于PC端,，PC有足夠的空間來(lái)展示特定內(nèi)容的詳細(xì)信息或者用戶不太熟悉的內(nèi)容（需要用戶仔細(xì)閱讀）,。

　　這是一個(gè)家禽百科全書網(wǎng)站，這里面雖然包含了大量的文字,，但是設(shè)計(jì)師將文字在邏輯上分為了許多簡(jiǎn)短而集中的文字塊,。這些文字塊配以突出的標(biāo)題和引人入勝的插圖就變得具有活力。這種設(shè)計(jì)模式打破了傳統(tǒng)教育類網(wǎng)站沉悶的頁(yè)面布局,，更能吸引用戶特別是青少年的注意力,。

　　產(chǎn)品定位

　　產(chǎn)品的定位對(duì)于正文文案的選用是具有決定性意義的。例如,，你要設(shè)計(jì)一個(gè)讀書,，旅行這類偏文藝小眾的界面，正文文案要足夠的短,，頁(yè)面中要有大量的留白,，這樣的頁(yè)面會(huì)給用戶一種透氣、從容,、開放,、平靜、自由的感覺,，而這些感覺都是與產(chǎn)品的風(fēng)格相契合的,。相反，如果這類頁(yè)面中元素都擠在一起,，就會(huì)導(dǎo)致視覺壓力,，引發(fā)用戶緊張。當(dāng)然并不是所有擁擠的頁(yè)面設(shè)計(jì)都會(huì)引發(fā)緊張情緒,，如果文字和頁(yè)面中其他元素之間的空間處理的合適,，行間距留的足夠大，那么也可以做到做保持內(nèi)容的可讀性的同時(shí)保留了頁(yè)面的“呼吸感”,。

　　PS：正文因?yàn)樽煮w尺寸比較小,，所以我建議使用無(wú)襯線字體。因?yàn)樵O(shè)備顯示器的像素不足以表現(xiàn)小字體上細(xì)小的襯線,，會(huì)出現(xiàn)鋸齒效果,，對(duì)易讀性影響很大,。所以我建議正文使用無(wú)襯線字體，如果非要使用襯線字體,，需要在不同的設(shè)備上測(cè)試字體的實(shí)現(xiàn)效果,。

　　行為召喚元素

　　想讓自己設(shè)計(jì)出來(lái)的界面不那么死板，具有可交互性,，我們就要學(xué)會(huì)使用行為召喚元素,。當(dāng)然一些行為召喚元素不需要文字也可以完成，比如我們的接電話按鈕或者短信提示,，都是使用圖標(biāo)來(lái)完成,。但是在一些特點(diǎn)情況下，內(nèi)容過(guò)于抽象無(wú)法用圖標(biāo)來(lái)詮釋的時(shí)候,，我們應(yīng)該使用文字,。

　　行為召喚元素對(duì)于文字長(zhǎng)度的要求極其嚴(yán)苛，最好是一個(gè)單詞或者2-4個(gè)單詞組成的短語(yǔ)（英文狀態(tài)下）,。

　　輕型文字的趨勢(shì)

　　從2016年開始,，源于對(duì)干凈精致界面的追求，輕型文字越來(lái)越受到設(shè)計(jì)師的歡迎,。歸根結(jié)底,，輕型文字是簡(jiǎn)約設(shè)計(jì)趨勢(shì)的產(chǎn)物，字體越來(lái)越細(xì)長(zhǎng),。但是我們要記住,，這種過(guò)于狹長(zhǎng)字體在節(jié)省頁(yè)面空間的同時(shí)，犧牲的是文字的易讀性,，這是我們?cè)跈?quán)衡是否使用輕型文字時(shí)需要考慮的問(wèn)題,。

　　不過(guò)iOS10的Apple Music界面中開始對(duì)字體加粗，所以未來(lái)字體是變得越來(lái)越粗還是越來(lái)越細(xì),，我們拭目以待,。

　　總結(jié)

　　總而言之，對(duì)于設(shè)計(jì)師來(lái)說(shuō),，文字是一個(gè)可以很好提升產(chǎn)品用戶體驗(yàn)的武器,，希望這篇文章能夠給各位設(shè)計(jì)師帶來(lái)收獲。

　　來(lái)源：UI中國(guó)