一部手機(jī)，電量充足，網(wǎng)絡(luò)通暢，就足以讓我們打發(fā)一天的時(shí)光，盡情沉浸在手機(jī)時(shí)代的繽紛世界里。這個(gè)信息資源無(wú)窮盡的手機(jī)網(wǎng)絡(luò)世界，是設(shè)計(jì)師和開(kāi)發(fā)者們?cè)诓煌５奶剿髦幸宦芬徊骄拇蛟?。如何進(jìn)一步美化這個(gè)世界，優(yōu)化用戶體驗(yàn)？如何在手機(jī)有限的屏幕上呈現(xiàn)清晰的UI和UX？這里太多因素需要考慮，文本排版設(shè)計(jì)就是其中不可或缺的一部分。今天，我將從文本排版設(shè)計(jì)角度出發(fā)，談?wù)勗趺磳?shí)現(xiàn)完美的手機(jī)UI界面。

首先，有必要了解一下基礎(chǔ)知識(shí)。

國(guó)內(nèi)一些設(shè)計(jì)師，或者開(kāi)發(fā)人員，可能從來(lái)都沒(méi)有接觸過(guò)文本排版設(shè)計(jì)的培訓(xùn)或?qū)W習(xí)。

1、什么是文本排版？

“文本排版，“又稱“文字設(shè)計(jì)”，是一種涉及對(duì)字體、字號(hào)、縮進(jìn)、行間距、字符間距進(jìn)行設(shè)計(jì)、安排等方法來(lái)進(jìn)行排版的一種工藝。在數(shù)碼技術(shù)普及之前，文本排版是一項(xiàng)專(zhuān)業(yè)的工作，數(shù)碼時(shí)代的來(lái)臨使字體排印不像從前僅由排字印刷方面的技術(shù)工人完成，而更被圖形藝術(shù)家、藝術(shù)指導(dǎo)、文書(shū)人員甚至兒童廣泛使用。”

---維基百科

2、為什么文本版排版在手機(jī)端設(shè)計(jì)中很重要？

手機(jī)端設(shè)計(jì)比網(wǎng)頁(yè)設(shè)計(jì)要求更精致細(xì)膩，這個(gè)方寸之間的屏幕上，每個(gè)元素的選擇都更加謹(jǐn)慎，不僅美觀，更要實(shí)用。用戶對(duì)手機(jī)端文本排版設(shè)計(jì)的體驗(yàn)要求也更高，于設(shè)計(jì)師而言，讓用戶能滿足于手機(jī)的文本排版設(shè)計(jì)是極具挑戰(zhàn)性的。

想象一下，一個(gè)完全沒(méi)有任何文字的手機(jī)網(wǎng)頁(yè)是怎樣的呢？不現(xiàn)實(shí)吧。同樣，在手機(jī)界面上隨意的放置文本元素，會(huì)有意義嗎？能實(shí)現(xiàn)有效的UI和UX嗎？雖然圖片和視頻極具動(dòng)態(tài)也豐富多彩，但用戶仍然需要通過(guò)文本獲取信息。這不僅僅是一種習(xí)慣，文字本身也能傳達(dá)其它元素?zé)o法傳達(dá)的信息。優(yōu)秀的手機(jī)排版設(shè)計(jì)，不會(huì)讓用戶產(chǎn)生視疲勞，而應(yīng)該讓用戶能輕松獲取信息，實(shí)現(xiàn)人機(jī)有效互動(dòng)。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

那么，文本排版設(shè)計(jì)的奧秘究竟有哪些呢？如何通過(guò)文本排版設(shè)計(jì)實(shí)現(xiàn)完美UI呢？

展開(kāi)全文

通常，文本排版設(shè)計(jì)包括但不限于以下元素。另外，需謹(jǐn)記：手機(jī)設(shè)計(jì)日新月異，手機(jī)文本排版設(shè)計(jì)當(dāng)然也在與時(shí)俱進(jìn)。我們既要尊重現(xiàn)有規(guī)則，但也要保持創(chuàng)新和探索。

以iPhone的文本排版設(shè)計(jì)為例。在最新的iOS11 中，做出了以下更新：

1）增加文本大小和權(quán)重：提高可讀性。

2）提供較大字號(hào)和標(biāo)準(zhǔn)動(dòng)態(tài)尺寸字號(hào)，適用于具有輔助性功能需求的用戶。

接下來(lái)，我逐一講解如何設(shè)計(jì)優(yōu)秀的手機(jī)端文本排版：

1. 字體

1)字體選擇

字體選擇常常被錯(cuò)誤對(duì)待，要么直接忽視，要么簡(jiǎn)單地從字體庫(kù)中任意挑選一款。實(shí)際上，不同類(lèi)型的文本內(nèi)容需要使用不同的字體，字體可以表達(dá)內(nèi)心感覺(jué)和心理需求。試想，使用濃密生硬的字體在女性色彩的讀物內(nèi)容里，是不是顯得格格不入？相反，你應(yīng)該選擇比較細(xì)膩和柔和的字體。生硬濃重的字體往往更具剛硬氣質(zhì)。

另一方面，過(guò)度花哨好看的字體在手機(jī)屏幕上可能很難辨認(rèn)。手機(jī)端的UI要求簡(jiǎn)單而干凈，使用同種風(fēng)格的字體是保持界面清爽的關(guān)鍵。避免單調(diào)，您可以選擇一種輔助字體與主要字體形成對(duì)比。這種情況下，界面的字體數(shù)量要控制在 2 到 3 種，多則混亂。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

2)字體大小

手機(jī)屏幕有限，字體大小至關(guān)重要。如果你只是在手機(jī)屏幕上使用微小字體來(lái)解決，那就真是一個(gè)笑話了。雖然用戶可以縮放文本來(lái)改變字體大小，從而提升可讀性，但這絕不是設(shè)計(jì)師偷懶的借口。這多出的操作，本就違背用戶體驗(yàn)。字體過(guò)小看不清，還會(huì)損傷用戶的眼睛，花費(fèi)更多的時(shí)間閱讀；而較大的字體又會(huì)迅速吃掉屏幕，并破壞閱讀連貫性。

那怎樣是適當(dāng)?shù)淖煮w尺寸？

對(duì)于iOS，使用至少11sp的字體大小，而對(duì)于Android，請(qǐng)選擇14 sp為主文本。請(qǐng)注意，這是主文本通常使用的標(biāo)準(zhǔn)，不是強(qiáng)行的唯一標(biāo)準(zhǔn)。此外，在設(shè)計(jì)手機(jī)端字體大小時(shí)，需要留意設(shè)計(jì)字體大小要比常規(guī)、使用在桌面端的略大一些。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

2. 間距

1) 行間距

行間距是一排文字和另一排文字之間的空間。手機(jī)屏幕較小，所以行間距通常比桌面版本小。設(shè)置行間距時(shí)，需要在手機(jī)端設(shè)置比桌面端小的值。過(guò)寬或過(guò)窄的行間距都會(huì)破壞手機(jī)UI界面，降低可讀性。許多人認(rèn)為，1.4em是標(biāo)準(zhǔn)的行間距，但在手機(jī)屏幕上，仍然有顯得幾分緊密，用戶可能會(huì)感到文字仿佛在收緊。在設(shè)計(jì)上，標(biāo)準(zhǔn)的行間距應(yīng)該是字體大小的120％。另外， 如果文本的長(zhǎng)度越短，那么它對(duì)行間距寬度的要求也會(huì)降低。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

2) 字間距

字間距是兩個(gè)文字之間的間距。這是手機(jī)排版中的一個(gè)很小的因素，但值得關(guān)注。你可能會(huì)認(rèn)為，在一個(gè)段落里，字距調(diào)整可能不是一個(gè)必要問(wèn)題。但如果您足夠細(xì)心，您可能會(huì)注意到，這通常出現(xiàn)在英文文本中，大寫(xiě)字母與小寫(xiě)字母之間的空間和兩個(gè)小寫(xiě)字母之間的空間不盡相同。這會(huì)造成一定的視覺(jué)失調(diào)，破壞美感。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

3) 全文本字間距

上面不是剛提了字距嗎？這里是否重復(fù)了呢？當(dāng)然不是，字距在兩個(gè)文字間和全文本的字間距并不是完全一樣的概念。這兩者往往可能會(huì)使設(shè)計(jì)師產(chǎn)生迷惑，但它們類(lèi)似卻不同。這里的字間距是所有字符和文本的字間距。有效的字間距會(huì)使文本更易讀。通常，字體使用時(shí)可以適當(dāng)調(diào)整頁(yè)面字距，因此你不需要過(guò)多的關(guān)注。但如果你注意這一點(diǎn)，也許會(huì)對(duì)設(shè)計(jì)大有裨益。通常，大文本需要更少的字距，而稀疏的文本要求更寬的字距。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

3. 行長(zhǎng)

行長(zhǎng)也是手機(jī)排版中的一個(gè)重要尺度要求。文本行的長(zhǎng)度可能會(huì)影響整個(gè)排版。桌面屏幕的行長(zhǎng)勢(shì)必會(huì)超出手機(jī)屏幕邊框。在手機(jī)排版中，每行上的字符數(shù)量，字體大小和行長(zhǎng)度都緊密相連，互相影響和牽制。合理的布局這些要素是可讀性的關(guān)鍵。通常，一行保留30- 40 個(gè)字符數(shù)時(shí)比較合理的選擇。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

4. 留白

留白在設(shè)計(jì)中無(wú)處不在。留白可以帶來(lái)自由和放松的感覺(jué)。手機(jī)排版留白主要包含：行間距，邊距，段落空間。手機(jī)排版中的適當(dāng)空間可以幫助用戶更好閱讀文本，提升界面美感。設(shè)計(jì)師可以考慮從頁(yè)面10％到20％的范圍開(kāi)始留白。但不要留白區(qū)域太大，手機(jī)屏幕有限。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

5. 層次結(jié)構(gòu)

層次結(jié)構(gòu)是強(qiáng)調(diào)整個(gè)文本的關(guān)鍵元素，并能產(chǎn)生對(duì)比度。但手機(jī)排版中的層次結(jié)構(gòu)比通常web界面層次簡(jiǎn)潔，通常Web界面擁有 3 個(gè)級(jí)別。而手機(jī)屏幕的空間有限，所以很多設(shè)計(jì)師只應(yīng)用了 2 個(gè)層次：標(biāo)題和文本主題。標(biāo)題是抓住讀者眼球，而文本傳達(dá)可讀性。保留標(biāo)題和主題這兩個(gè)結(jié)構(gòu)層次，這也是手機(jī)設(shè)計(jì)的一個(gè)趨勢(shì)。這可以使手機(jī)UI簡(jiǎn)潔，并保持對(duì)比度和層次感。

6. 對(duì)比度

在手機(jī)屏幕上，文本數(shù)量遠(yuǎn)遠(yuǎn)小于Web界面，于是同等設(shè)置的對(duì)比值，在手機(jī)界面上會(huì)放大。手機(jī)文本排版設(shè)計(jì)的對(duì)比度問(wèn)題，最大的原則就是削弱對(duì)比。如果你在小屏幕上使用環(huán)境光度和短字體，不但沒(méi)有幫到用戶，還會(huì)讓他們產(chǎn)生頭疼暈眩的感覺(jué)。顏色選擇對(duì)對(duì)比度影響很大，更糟的例子，紅色文字與綠色背景。此外，字體大小也是對(duì)比度的一大考慮。當(dāng)設(shè)置層次結(jié)構(gòu)時(shí)，不要太過(guò)火，標(biāo)題的字體大小不能太大于文本主體。最后，留白和文本部分也可以形成一種微弱的對(duì)比。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

7. 功能性

保持平衡美觀的UI是遠(yuǎn)遠(yuǎn)不夠的，功能也是同等重要的。手機(jī)文本設(shè)計(jì)還要產(chǎn)生實(shí)際的作用，比如滿足我們的一些操作，像購(gòu)買(mǎi)產(chǎn)品，下訂單或預(yù)訂機(jī)票。文本需要清晰指示用戶能做什？接下來(lái)可以做什么？確保用戶可以輕松地執(zhí)行操作。功能性文本需要突出，可點(diǎn)擊的元素應(yīng)該足夠大，以便用戶可以點(diǎn)擊它們。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

8. 對(duì)齊

通常，文本對(duì)齊方式有 4 種：左，右，中或兩端對(duì)齊。哪一種在手機(jī)排版中更好？

關(guān)鍵是要保持舒適清晰的邊距。左中右三種方式都可以保留邊距，而兩端對(duì)齊在左右兩側(cè)都沒(méi)有邊距。此外，兩端對(duì)齊文本會(huì)導(dǎo)致不一致的字間距，最壞的情況還會(huì)導(dǎo)致一行中的幾個(gè)單詞緊緊湊在一起。對(duì)于文本主體而言，兩端對(duì)齊是不明智的選擇。

左側(cè)對(duì)齊是其余 3 種對(duì)齊方式里的最佳選擇。它可能產(chǎn)生右邊緣邊距，留下空間，左對(duì)齊可以使用戶的目光從一行文字連貫到下一行文字，提供一個(gè)整齊的初始點(diǎn)。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

然而，有些設(shè)計(jì)師認(rèn)為混合對(duì)齊方式可以更好的實(shí)現(xiàn)和諧的UI。

文本主體內(nèi)容多，使用左側(cè)對(duì)齊；而標(biāo)題或短行文本，居中對(duì)齊也是很好的選擇。

9. 字型和品牌

同一款app或系統(tǒng)，建議使用單個(gè)字型并演變幾種不同字體變體和不同尺寸?；旌蠋讉€(gè)不同的字型會(huì)使您的界面看起來(lái)分散和混亂。通常，品牌或應(yīng)用程序擁有自己的預(yù)設(shè)字型。蘋(píng)果使用San Francisco, 諾基亞使用Nokia Pure，Google Android使用Roboto。

蘋(píng)果根據(jù)產(chǎn)品功能選擇字體。例如， iOS7 使用了（Pro）Light，iOS9 使用SF-UI，而在iOS10 中，San Francisco的字體版本是SF UI Text 和 SF UI Display。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

10. 文本樣式

盡可能使用內(nèi)置文本樣式。內(nèi)置的文字樣式可讓您以視覺(jué)上獨(dú)特的方式表達(dá)內(nèi)容，同時(shí)保持最佳的易讀性。這些風(fēng)格基于系統(tǒng)字體，并且你可以利用關(guān)鍵的排版功能，例如動(dòng)態(tài)類(lèi)型，可自動(dòng)調(diào)整每種字體大小的字距和行距。

11. 響應(yīng)式設(shè)計(jì)

手機(jī)設(shè)備有不同的尺寸。響應(yīng)式設(shè)計(jì)也已經(jīng)應(yīng)用于手機(jī)設(shè)計(jì)。響應(yīng)式排版成必將為這一趨勢(shì)的重要因素。上述所有元素，任何錯(cuò)誤使用可能會(huì)破壞整體手機(jī)UI設(shè)計(jì)。設(shè)計(jì)師需要考慮手機(jī)排版在不同設(shè)備上的外觀。

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)

12. 原型設(shè)計(jì)

文版排版設(shè)計(jì)在很多設(shè)計(jì)范圍類(lèi)都至關(guān)重要，原型設(shè)計(jì)中也是必不可少，優(yōu)秀的文本排版，能夠和其他元素組件共同服務(wù)于干凈的UI界面。但在原型設(shè)計(jì)中，文本不需要具備真正的意義。在 XCode 中調(diào)整代碼，在 Sketch 中修改設(shè)計(jì)都太慢太麻煩了，不妨試試國(guó)內(nèi)最優(yōu)秀的原型設(shè)計(jì)工具M(jìn)ockplus，Mockplus 自帶了大量標(biāo)準(zhǔn)組件，你可以直接通過(guò) Drag Drop 的方式來(lái)快速布局你的頁(yè)面，文本組件有單行文本和多行文本的組件，并可對(duì)其進(jìn)行例如顏色，尺寸，對(duì)其方式，字體選擇等各種屬性設(shè)置，并且可以添加交互。新版本加入了文本數(shù)據(jù)填充功能，可對(duì)文本內(nèi)容進(jìn)行單個(gè)和批量填充，十分便捷。此外，你可以直接手機(jī)上直接查看，是否具有較高的可讀性。

以上就是涉及手機(jī)文本排版的主要內(nèi)容。手機(jī)文本排版是保證手機(jī)頁(yè)面可讀性的關(guān)鍵，如果用戶在你的手機(jī)界面因?yàn)椴顝?qiáng)人意的可讀性而使全部的設(shè)計(jì)付之一炬，實(shí)在是非?？上У?。要想設(shè)計(jì)出完美的手機(jī)端文本排版，利用現(xiàn)有規(guī)則是不錯(cuò)的選擇，但不要忘記新的關(guān)注新趨勢(shì)，文本排版設(shè)計(jì)在 2018 年肯定會(huì)獲得更多的關(guān)注。設(shè)計(jì)師斯蒂芬· 佩里曾經(jīng)聲稱 2017 年文本排版設(shè)計(jì)將風(fēng)格將會(huì)是bold typography，的確如此。在 2018 年，Minimalistic或許會(huì)席卷而來(lái)。我們拭目以待。