在手持式行動裝置中,被限制住的顯示螢幕空間,使得我們必須花費更多的時間與功夫來處理文字內容的安排,舒適的行距、間距以及字型大小,這些需要不斷調整的細節,會大大影響內容的閱讀性與程式的使用性。
在簡單介紹 iOS 中如何處理變動的內容的方法後,這篇文章也將簡單介紹 iOS 針對較長的文字內容,支援哪些可以快速調整的屬性,讓設計師在思考與規劃版面時,能夠事先考慮進去,減少實作時額外溝通的成本。在 iOS 6 之後,iOS 的文字顯示元件中提供了一個可以調整文字細節屬性的 NSAttributedString 類別,可以針對文字內容的全部與部份區域改變顯示的方式,可套用在元件 UILabel 與 UITextView,以下我們介紹其中常用的屬性:
- 段落排版
段落排版的屬性(NSParagraphStyleAttributeName)是 NSAttributedString 中最重要也是具有文章顯示需求的服務所一定會用到的功能,可調整的細節有:
1. 對齊
向左對齊、置中對齊、向右對齊是最基本的對齊方式,除此之外還支援兩端對齊(NSTextAlignmentJustified)以及根據顯示的文字特性對齊(NSTextAlignmentNatural)。
2. 段落開頭縮排
可以透過 firstLineHeadIndent 指定段落開始的縮排像素。
3. 縮排
透過 headIndent 可調整全部文字的縮排距離,可當作左邊 padding 使用。
而透過 tailIndent 可調整文字尾端的縮排距離。需要注意的是,這裡指定的值可以當作文字顯示的寬、而也可當作右邊 padding 使用,依據輸入的正負值而定:
4. 行距
想要調整行距,可以透過搭配使用 lineHeightMultiple 更改行距倍數:
或是 lineSpacing 來增加行距:
而針對不同的字型與字型大小,我們可以透過指定最大與最小行距(maximumLineHeight 與 minimumLineHeight)來避免過高或過窄的狀況發生。
5. 段落行距
而若是文章內容有分段落的話,也可以透過指定段落結尾距離(paragraphSpacing)以及段落開頭距離(paragraphSpacingBefore):

- 字元間距
想要拉開字元間的距離的話,則可以指定 NSKernAttributeName 屬性來調整:

- 字型
如果需要在部分文字中替換不同的字型與字型大小,則可以透過 NSFontAttributeName 屬性來更改部分區域的文字:

- 顏色與視覺風格
而個別修改陰影與文字外框也同樣有支援,可使用 NSStrokeColorAttributeName、NSStrokeWidthAttributeName 以及 NSShadowAttributeName 達成:

- 底線與刪除線
若需要底線與刪除線,可以指定 NSUnderlineStyleAttributeName 與 NSStrikethroughStyleAttributeName:
搭配這些屬性,我們就可以快速又簡單的實作一些精美的段落顯示,設計師在充分瞭解了在文字排版你擁有哪些可利用的武器後,在設計階段就可以更精準的規劃策略,減少設計與實作之間的差距。

- 延伸閱讀
( 圖片來源:Sigfrid Lundberg, CC Licensed)
Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。




