文字如何實現完美UI？文本排版設計告訴你

一部手機，電量充足，網絡通暢，就足以讓咱們打發一天的時光，盡情沉浸在手機時代的繽紛世界裏。這個信息資源無窮盡的手機網絡世界，是設計師和開發者們在不停的探索中一路一步精心打造。如何進一步美化這個世界，優化用戶體驗？如何在手機有限的屏幕上呈現清晰的UI和UX？這裏太多因素須要考慮，文本排版設計就是其中不可或缺的一部分。今天，我將從文本排版設計角度出發，談談如何實現完美的手機UI界面。

首先，有必要了解一下基礎知識。

國內一些設計師，或者開發人員，可能歷來都沒有接觸過文本排版設計的培訓或學習。

1，什麼是文本排版？

「文本排版，「又稱「文字設計」，是一種涉及對字體、字號、縮進、行間距、字符間距進行設計、安排等方法來進行排版的一種工藝。在數碼技術普及以前，文本排版是一項專業的工做，數碼時代的來臨使字體排印不像從前僅由排字印刷方面的技術工人完成，而更被圖形藝術家、藝術指導、文書人員甚至兒童普遍使用。」

---維基百科

2，爲何文本版排版在手機端設計中很重要？

手機端設計比網頁設計要求更精緻細膩，這個方寸之間的屏幕上，每一個元素的選擇都更加謹慎，不只美觀，更要實用。用戶對手機端文本排版設計的體驗要求也更高，於設計師而言，讓用戶能知足於手機的文本排版設計是極具挑戰性的。

想象一下，一個徹底沒有任何文字的手機網頁是怎樣的呢？不現實吧。一樣，在手機界面上隨意的放置文本元素，會有意義嗎？能實現有效的UI和UX嗎？雖然圖片和視頻極具動態也豐富多彩，但用戶仍然須要經過文本獲取信息。這不只僅是一種習慣，文字自己也能傳達其它元素沒法傳達的信息。優秀的手機排版設計，不會讓用戶產生視疲勞，而應該讓用戶能輕鬆獲取信息，實現人機有效互動。

 

那麼，文本排版設計的奧祕究竟有哪些呢？如何經過文本排版設計實現完美UI呢？

一般，文本排版設計包括但不限於如下元素。另外，需謹記：手機設計突飛猛進，手機文本排版設計固然也在與時俱進。咱們既要尊重現有規則，但也要保持創新和探索。

以iPhone的文本排版設計爲例。在最新的iOS 11中，作出瞭如下更新：

1）增長文本大小和權重：提升可讀性。

2）提供較大字號和標準動態尺寸字號，適用於具備輔助性功能需求的用戶。

接下來，我逐一講解如何設計優秀的手機端文本排版：

1. 字體

1)字體選擇

字體選擇經常被錯誤對待，要麼直接忽視，要麼簡單地從字體庫中任意挑選一款。實際上，不一樣類型的文本內容須要使用不一樣的字體，字體能夠表達心裏感受和心理需求。試想，使用濃密生硬的字體在女性色彩的讀物內容裏，是否是顯得格格不入？相反，你應該選擇比較細膩和柔和的字體。生硬濃重的字體每每更具剛硬氣質。

另外一方面，過分花哨好看的字體在手機屏幕上可能很難辨認。手機端的UI要求簡單而乾淨，使用同種風格的字體是保持界面清爽的關鍵。避免單調，您能夠選擇一種輔助字體與主要字體造成對比。這種狀況下，界面的字體數量要控制在2到3種，多則混亂。

 

2)字體大小

手機屏幕有限，字體大小相當重要。若是你只是在手機屏幕上使用微小字體來解決，那就真是一個笑話了。雖然用戶能夠縮放文原本改變字體大小，從而提高可讀性，但這毫不是設計師偷懶的藉口。這多出的操做，本就違背用戶體驗。字體太小看不清，還會損傷用戶的眼睛，花費更多的時間閱讀；而較大的字體又會迅速吃掉屏幕，並破壞閱讀連貫性。

那怎樣是適當的字體尺寸？

對於iOS，使用至少11sp的字體大小，而對於Android，請選擇14 sp爲主文本。請注意，這是主文本一般使用的標準，不是強行的惟一標準。此外，在設計手機端字體大小時，須要留意設計字體大小要比常規、使用在桌面端的略大一些。

 

2. 間距

1) 行間距

行間距是一排文字和另外一排文字之間的空間。手機屏幕較小，因此行間距一般比桌面版本小。設置行間距時，須要在手機端設置比桌面端小的值。過寬或過窄的行間距都會破壞手機UI界面，下降可讀性。許多人認爲，1.4em是標準的行間距，但在手機屏幕上，仍然有顯得幾分緊密，用戶可能會感到文字彷彿在收緊。在設計上，標準的行間距應該是字體大小的120％。另外， 若是文本的長度越短，那麼它對行間距寬度的要求也會下降。

 

2) 字間距

字間距是兩個文字之間的間距。這是手機排版中的一個很小的因素，但值得關注。你可能會認爲，在一個段落裏，字距調整可能不是一個必要問題。但若是您足夠細心，您可能會注意到，這一般出如今英文文本中，大寫字母與小寫字母之間的空間和兩個小寫字母之間的空間不盡相同。這會形成必定的視覺失調，破壞美感。

 

3) 全文本字間距

上面不是剛提了字距嗎？這裏是否重複了呢？固然不是，字距在兩個文字間和全文本的字間距並非徹底同樣的概念。這二者每每可能會使設計師產生迷惑，但它們相似卻不一樣。這裏的字間距是全部字符和文本的字間距。有效的字間距會使文本更易讀。一般，字體使用時能夠適當調整頁面字距，所以你不須要過多的關注。但若是你注意這一點，也許會對設計大有裨益。一般，大文本須要更少的字距，而稀疏的文本要求更寬的字距。

 

3. 行長

行長也是手機排版中的一個重要尺度要求。文本行的長度可能會影響整個排版。桌面屏幕的行長勢必會超出手機屏幕邊框。在手機排版中，每行上的字符數量，字體大小和行長度都緊密相連，互相影響和牽制。合理的佈局這些要素是可讀性的關鍵。一般，一行保留30-40個字符數時比較合理的選擇。

 

4. 留白

留白在設計中無處不在。留白能夠帶來自由和放鬆的感受。手機排版留白主要包含：行間距，邊距，段落空間。手機排版中的適當空間能夠幫助用戶更好閱讀文本，提高界面美感。設計師能夠考慮從頁面10％到20％的範圍開始留白。但不要留白區域太大，手機屏幕有限。

 

5. 層次結構

層次結構是強調整個文本的關鍵元素，並能產生對比度。但手機排版中的層次結構比一般web界面層次簡潔，一般Web界面擁有3個級別。而手機屏幕的空間有限，因此不少設計師只應用了2個層次：標題和文本主題。標題是抓住讀者眼球，而文本傳達可讀性。保留標題和主題這兩個結構層次，這也是手機設計的一個趨勢。這可使手機UI簡潔，並保持對比度和層次感。

 

6. 對比度

在手機屏幕上，文本數量遠遠小於Web界面，因而同等設置的對比值，在手機界面上會放大。手機文本排版設計的對比度問題，最大的原則就是削弱對比。若是你在小屏幕上使用環境光度和短字體，不但沒有幫到用戶，還會讓他們產生頭疼暈眩的感受。顏色選擇對對比度影響很大，更糟的例子，紅色文字與綠色背景。此外，字體大小也是對比度的一大考慮。當設置層次結構時，不要太過火，標題的字體大小不能太大於文本主體。最後，留白和文本部分也能夠造成一種微弱的對比。

 

7. 功能性

保持平衡美觀的UI是遠遠不夠的，功能也是同等重要的。手機文本設計還要產生實際的做用，好比知足咱們的一些操做，像購買產品，下訂單或預訂機票。文本須要清晰指示用戶能作什？接下來能夠作什麼？確保用戶能夠輕鬆地執行操做。功能性文本須要突出，可點擊的元素應該足夠大，以便用戶能夠點擊它們。

 

8. 對齊

一般，文本對齊方式有4種：左，右，中或兩端對齊。哪種在手機排版中更好？

關鍵是要保持溫馨清晰的邊距。左中右三種方式均可以保留邊距，而兩端對齊在左右兩側都沒有邊距。此外，兩端對齊文本會致使不一致的字間距，最壞的狀況還會致使一行中的幾個單詞牢牢湊在一塊兒。對於文本主體而言，兩端對齊是不明智的選擇。

左側對齊是其他3種對齊方式裏的最佳選擇。它可能產生右邊緣邊距，留下空間，左對齊可使用戶的目光從一行文字連貫到下一行文字，提供一個整齊的初始點。

 

然而，有些設計師認爲混合對齊方式能夠更好的實現和諧的UI。看下面的界面：

 

文本主體內容多，使用左側對齊；而標題或短行文本，居中對齊也是很好的選擇。

9. 字型和品牌

同一款app或系統，建議使用單個字型並演變幾種不一樣字體變體和不一樣尺寸。混合幾個不一樣的字型會使您的界面看起來分散和混亂。一般，品牌或應用程序擁有本身的預設字型。蘋果使用San Francisco, 諾基亞使用Nokia Pure，Google Android使用Roboto。

蘋果根據產品功能選擇字體。例如， iOS 7使用了（Pro）Light，iOS 9使用SF-UI，而在iOS 10中，San Francisco的字體版本是SF UI Text 和 SF UI Display。

 

10. 文本樣式

儘量使用內置文本樣式。內置的文字樣式可以讓您以視覺上獨特的方式表達內容，同時保持最佳的易讀性。這些風格基於系統字體，而且你能夠利用關鍵的排版功能，例如動態類型，可自動調整每種字體大小的字距和行距。

 

11. 響應式設計

手機設備有不一樣的尺寸。響應式設計也已經應用於手機設計。響應式排版成必將爲這一趨勢的重要因素。上述全部元素，任何錯誤使用可能會破壞總體手機UI設計。設計師須要考慮手機排版在不一樣設備上的外觀。

 

12. 原型設計

文版排版設計在不少設計範圍類都相當重要，原型設計中也是必不可少，優秀的文本排版，可以和其餘元素組件共同服務於乾淨的UI界面。但在原型設計中，文本不須要具有真正的意義。在 XCode 中調整代碼，在 Sketch 中修改設計都太慢太麻煩了，不妨試試國內最優秀的原型設計工具Mockplus，Mockplus 自帶了大量標準組件，你能夠直接經過 Drag & Drop 的方式來快速佈局你的頁面，文本組件有單行文本和多行文本的組件，並可對其進行例如顏色，尺寸，對其方式，字體選擇等各類屬性設置，而且能夠添加交互。新版本加入了文本數據填充功能，可對文本內容進行單個和批量填充，十分便捷。此外，你能夠直接手機上直接查看，是否具備較高的可讀性。

 

以上就是涉及手機文本排版的主要內容。手機文本排版是保證手機頁面可讀性的關鍵，若是用戶在你的手機界面由於差強人意的可讀性而使所有的設計付之一炬，實在是很是惋惜的。要想設計出完美的手機端文本排版，利用現有規則是不錯的選擇，但不要忘記新的關注新趨勢，文本排版設計在2018年確定會得到更多的關注。設計師斯蒂芬· 佩裏曾經聲稱2017年文本排版設計將風格將會是bold typography，的確如此。在2018年，Minimalistic或許會席捲而來。咱們拭目以待。