UI設(shè)計(jì)中文字的使用技巧

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

　　建立視覺(jué)層級(jí)

　　設(shè)計(jì)師的一個(gè)主要職責(zé)就是將頁(yè)面中的元素整合起來(lái)，以一種清晰可見(jiàn)的形式呈現(xiàn)給用戶。當(dāng)然我們都知道一個(gè)頁(yè)面中不同元素的重要性是不一樣的，有級(jí)之分。文字也是一樣，有些文字比較重要，我們更希望用戶看到，有些文字比較雞肋我們不希望用戶看到。為了達(dá)到這個(gè)目的，我們給界面的文字建立視覺(jué)層級(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)題字號(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ì)于具象元素（插畫(huà)，icon,圖像或攝影圖等）的感知能力遠(yuǎn)比文字要強(qiáng)得多。如果我們想宣傳一款產(chǎn)品，那么較好的方案就是直接給用戶展示產(chǎn)品圖片。文字和圖片搭配使用的時(shí)候，文字起到的只是輔助說(shuō)明的作用。我們不能過(guò)度放大主標(biāo)題的尺寸造成對(duì)圖片內(nèi)容的遮蓋，這樣是本末倒置的。

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

　　產(chǎn)品定位

　　產(chǎn)品的定位對(duì)于正文文案的選用是具有決定性意義的。例如，你要設(shè)計(jì)一個(gè)讀書(shū)，旅行這類偏文藝小眾的界面，正文文案要足夠的短，頁(yè)面中要有大量的留白，這樣的頁(yè)面會(huì)給用戶一種透氣、從容、開(kāi)放、平靜、自由的感覺(jué)，而這些感覺(jué)都是與產(chǎn)品的風(fēng)格相契合的。相反，如果這類頁(yè)面中元素都擠在一起，就會(huì)導(dǎo)致視覺(jué)壓力，引發(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è)備上字體的實(shí)現(xiàn)。

　　行為召喚元素

　　想讓自己設(shè)計(jì)出來(lái)的界面不那么死板，具有可交互性，我們就要學(xué)會(huì)使用行為召喚元素。當(dāng)然一些行為召喚元素不需要文字也可以完成，比如我們的接電話按鈕或者短信提示，都是使用圖標(biāo)來(lái)完成。但是在一些特定情況下，內(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年開(kāi)始，源于對(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界面中開(kāi)始對(duì)字體加粗，所以未來(lái)字體是變得越來(lái)越粗還是越來(lái)越細(xì)，我們拭目以待。