一部手機(jī)，電量充足，網(wǎng)絡(luò)通暢，就足以讓我們打發(fā)一天的時(shí)光，盡情沉浸在手機(jī)時(shí)代的繽紛世界里。這個(gè)信息資源無(wú)窮盡的手機(jī)網(wǎng)絡(luò)世界，是設(shè)計(jì)師和開(kāi)發(fā)者們?cè)诓唤叩奶剿髦幸宦芬徊骄拇蛟臁Ｈ绾芜M(jìn)一步美化這個(gè)世界，優(yōu)化用戶(hù)體驗(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，什么是文本排版?

“文本排版，“又稱(chēng)“文字設(shè)計(jì)”，是一種涉及對(duì)字體、字號(hào)、縮進(jìn)、行間距、字符間距進(jìn)行設(shè)計(jì)、擺設(shè)等方法來(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í)用。用戶(hù)對(duì)手機(jī)端文本排版設(shè)計(jì)的體驗(yàn)要求也更高，于設(shè)計(jì)師而言，讓用戶(hù)能滿(mǎn)足于手機(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)也豐富多彩，但用戶(hù)仍然需要通過(guò)文本獲取信息。這不但僅是一種習(xí)慣，文字自己也能傳達(dá)其它元素?zé)o法傳達(dá)的信息。優(yōu)秀的手機(jī)排版設(shè)計(jì)，不會(huì)讓用戶(hù)產(chǎn)生視疲勞，而應(yīng)該讓用戶(hù)能輕松獲取信息，實(shí)現(xiàn)人機(jī)有效互動(dòng)。

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

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

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

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

2)提供較大字號(hào)和尺度動(dòng)態(tài)尺寸字號(hào)，適用于具有輔助性功能需求的用戶(hù)。

接下來(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)格的字體是連結(jié)界面清爽的關(guān)鍵。制止單調(diào)，您可以選擇一種輔助字體與主要字體形成對(duì)比。這種情況下，界面的字體數(shù)量要控制在 2 到 3 種，多則混亂。

2)字體大小

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

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

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

2. 間距

1) 行間距

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

2) 字間距

標(biāo)簽：九江 林芝 鹽城 烏魯木齊 東營(yíng)