南順網絡

如(rú)何實現完美的(de)手機UI界面，從文本排版設計說起

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

首先，有必要了解一(yī)下基礎知識。

國內(nèi)一(yī)些設計師，或者開發人員，可(kě)能從來都沒有接觸過文本排版設計的(de)培訓或學(xué)習。

1、什麽是文本排版？

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

---維基百科

2、為(wèi)什麽文本版排版在手機端設計中很重要？

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

想象一(yī)下，一(yī)個完全沒有任何文字的(de)手機網頁是怎樣的(de)呢(ne)？不現實吧(ba)。同樣，在手機界面上随意的(de)放置文本元素，會有意義嗎？能實現有效的(de)UI和(hé)UX嗎？雖然圖片和(hé)視(shì)頻極具動态也豐富多彩，但用戶仍然需要通過文本獲取信息。這不僅僅是一(yī)種習慣，文字本身也能傳達其它元素無法傳達的(de)信息。優秀的(de)手機排版設計，不會讓用戶産生視(shì)疲勞，而應該讓用戶能輕松獲取信息，實現人機有效互動。

那麽，文本排版設計的(de)奧秘究竟有哪些呢(ne)？如(rú)何通過文本排版設計實現完美UI呢(ne)？

通常，文本排版設計包括但不限于以下元素。另外，需謹記：手機設計日新月異，手機文本排版設計當然也在與時俱進。我們既要尊重現有規則，但也要保持創新和(hé)探索。

以iPhone的(de)文本排版設計為(wèi)例。在最新的(de)iOS11 中，做(zuò)出了以下更新：

1）增加文本大小和(hé)權重：提高(gāo)可(kě)讀性。

2）提供較大字号和(hé)标準動态尺寸字号，适用于具有輔助性功能需求的(de)用戶。

接下來，我逐一(yī)講解如(rú)何設計優秀的(de)手機端文本排版：

1. 字體

1)字體選擇

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

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

2)字體大小

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

那怎樣是适當的(de)字體尺寸？

對于iOS，使用至少11sp的(de)字體大小，而對于Android，請選擇14 sp為(wèi)主文本。請注意，這是主文本通常使用的(de)标準，不是強行的(de)唯一(yī)标準。此外，在設計手機端字體大小時，需要留意設計字體大小要比常規、使用在桌面端的(de)略大一(yī)些。

2. 間距

1) 行間距

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

2) 字間距

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

3) 全文本字間距

上面不是剛提了字距嗎？這裏是否重複了呢(ne)？當然不是，字距在兩個文字間和(hé)全文本的(de)字間距并不是完全一(yī)樣的(de)概念。這兩者往往可(kě)能會使設計師産生迷惑，但它們類似卻不同。這裏的(de)字間距是所有字符和(hé)文本的(de)字間距。有效的(de)字間距會使文本更易讀。通常，字體使用時可(kě)以适當調整頁面字距，因此你不需要過多的(de)關注。但如(rú)果你注意這一(yī)點，也許會對設計大有裨益。通常，大文本需要更少的(de)字距，而稀疏的(de)文本要求更寬的(de)字距。

編輯:--ns868