SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

為變動的文字內容做準備

Magic Hungdev-notes
name

顯示資訊的介面設計與平面的視覺與排版設計最大的不同,就在於文字資訊是變動的(Dynamic),它也是最麻煩棘手的部分,尤其是對於可供使用者輸入的內容。即使在有限制文字長度的的條件下,文字的長短仍然會對視覺與版面有絕對的影響力,我們無法預期使用者會想要輸入僅僅一個字還是漏漏長的整句話,即使是固定的操作資訊如按鈕上的文字,也會受到多國語系的支援而改變長短,因此,不論介面還是視覺設計師,在設計這類的資訊顯示介面時,就必須要清楚了解顯示文字控制元件的特性。

因為文字橫式的特性,最安全且沒有問題的就是重直堆疊(stack)的顯示方法,這也是最常見的方法,因為文字元件間只存在著垂直的相對關係,即使搭配一張顯示圖示,也很好排版與實作;針對較長的文字資訊,無論是要完全顯示所有資訊、縮小字型、或是截短(Truncate),都不會對視覺有太大程度的影響。

但可惜的是這樣的方式在很多地方是不實用的,會佔用與浪費掉很多橫向的空間,為了視覺觀感與讓畫面能夠快速傳達資訊,我們會將文字元件排版在水平的位置中,但此時就很容易遭遇困境,通常是發生在當顯示區域受到限制的情況下。

以下圖 Instagram 的個人資訊欄位為例,不同的語言長度變化差異很大,固定顯示區域的很容易就遇到如右上角俄文截短的狀況出現,無法將正確的資訊完整提供給使用者,這類的問題很常發生在如日期與時間的顯示上,因為不同語言間的所需長度是不同的,但我們在設計與排版幾乎都忽略了這個問題,而導致後期增加了額外的修改成本與難度。

俄文與德文是相對比較容易出現這樣狀況的語言,他們的單字相對來說比較長,在開發時可以把這兩種語言當做一個指標來做文字顯示的測試與調整,而中文的月份與完整的英文月份長度也是個很容易忽略的地方。

另外一個很容易發生排版問題的狀況,就是當文字元件與其他視覺顯示元件,在水平空間關係上有比較緊密的連結,例如搭配圖示 icon 如下圖的地點資訊,若資訊是可作截短動作的話還比較容易解決,但若是遇到有必要完整顯示的資訊,視覺的排版上就需要花上比較多的步驟去處理他,例如要縮小字型、或是進行換行、還是對齊等,如果想要漂亮的呈現這樣的資訊,實作上也需要比較花功夫去根據狀況調整。

地點資訊是個很容易出現長度問題的項目,除了地點名稱本來就有長有短,加上語言長度的不同,另外因為地點資訊大部分是由使用者建立,會出現欄位輸入錯誤,例如以台北市來說,從 Foursquare 上撈回來的資訊,城市(City)的欄位常常出現的是大同區或信義區等資訊,或是空值,如果要搭配上地名的顯示,例如「Taipei City | Taiwan」等格式,勢必會面臨長度大不同的挑戰,截短在這時候也就比較無法獨挑大樑,一定需要搭配字型縮小與換行的方法。

在手機中小小的瀏覽空間中,這些問題是很容易發生的,所以設計師在設計文字的區塊時,就應該充分了解顯示資訊的特性與可操作的方法,一併規劃出針對不同文字長度時的視覺與排版策略,因此本篇文章將針對 iOS 介面中文字顯示的基本控制元對於處理文字訊息的方法作簡單的介紹。

小而實用的文字標籤(UILabel)

在 iOS 介面中,文字標籤(UILabel)控制元件是一個最基本也最常使用到的文字顯示元件,適合用來顯示操作介面中的訊息與提示,以及非段落式的訊息如回覆留言、名字、地名、標題等,而 UILabel 自動處理文字長度有三種最基本的方法:截短(Truncate)、字型縮小、以及換行:

截短文字是其中最輕鬆也最漂亮的方法,可以有效地確保文字標籤的區域尺寸,其中有三種截短方式,分別是截短開頭、截短中間、或是截短結尾:

截短可以說是個很負責的顯示方式也是個很不負責的方法,它可以搭配進一步的「閱讀更多」的功能,清楚的給予使用者訊息的部分摘要,讓有興趣深讀的使用者再進一步點入其他的頁面,但是如果只是當做標籤使用,例如顯示名字、標題等,就要考慮訊息的重要性是否能夠被截短,若而出現在操作介面的非變動的標籤、或是按鈕上文字,就一定盡量不要使用到截短,尤其針對不同國家的語言,截短開頭中間結尾都有可能造成無法正確傳達訊息的可能性。

當截短可能造成顯示的問題時,就要動用文字標籤的一個特點「縮小字型」,文字標籤可以自動的偵測文字的長度,縮小到能夠在限制的區域內顯示完整的文字,不過這樣需要注意的兩個點是,設計師需要決定最小限制的字型縮小比例以及縮小的對齊方式,縮小的字型可能可以讓使用者完整的看到文字,但若縮小的差距過大,在視覺上也很容易造成破壞,這就必須要考量到視覺上的設計來事先規劃與調整。

下圖為文字訊息經由不同限制的自動縮小與對齊方式的結果,淡藍色部分為 UILabel 初始的設定區域,經過不同的縮小方式,會發現產生出不同的多餘空間,因此貼心的視覺設計師,就可以依此規劃可能遇到的狀況,以及其他相關的顯示元件該怎麼與之調整,讓版面更完美且好閱讀。

需要特別注意的是,從圖中三種對齊方式(向下基底對齊、重直置中、向上對齊)我們可以發現,向下對齊與重直置中是比較利於排版的,因為字型會確保維持在同一高度值,但是向上對齊會造成上方留白處的距離不一,因為字型並非完全頂置,在不同字型大小下上方留白高度依照比例變化,搭配時需要注意視覺上的平衡。

若縮小字型仍會造成閱讀困難或是視覺上的不平衡的話,也可以考慮搭配換行的作法,UILabel 目前沒有支援同時自動縮小與換行的功能,需要搭配 iOS 提供的函式,先找到適合的縮小字型尺寸後,在進行換行的動作,下圖為最多使用兩行以及搭配不同的縮小比例的顯示結果:

在搭配自動縮小與換行的模式下,一樣會有上方空白間距無法精確掌握的狀況,即使手動調整也無法頂置,也不支援向基底對齊,唯一可確保的是能夠維持垂直置中;其中行距也是個令人頭痛的地方,並且在 iOS 6 與 iOS 7 (圖為 iOS 7 Beta 5 輸出)中會有些微間距的不同,這些變因可能都需要一併納入考量。

了解了文字標籤的基本特性與處理文字的方法,我們在設計 iOS 的介面時就應該針對不同的文字資訊長度去作規劃排版對策,事先為變動的文字內容做好準備。


(圖片來源:mhx, CC Licensed)

Magic Hung
Magic Hung
Technical Director
Technical Director @ Fourdesire. Create fun and crafts via programming.
divider
Related Posts
name

在 Unity 打造簡易的動作系統

在產品的介面中,適當的提供有意義並精細的動畫,實用性上能直覺的讓使用者理解目前系統的狀態、取得回饋、幫助探索產品,更能在情感上提供愉悅的體驗。此篇將介紹如何在 Unity 環境中建構一個簡易的動作系統,來幫助快速開發介面的動態效果。動...Read more
name

用 Particle System 實作模糊效果的圓形進度條

實現圓形進度條的方式有很多種,最簡易的方式就是調整 Image 的參數: Image Type - Filled 、Fill Method - Radial 360、Fill Origin - Top,這篇文章 裡有更詳細的介紹。但這個方式無法符合所有設計稿的需求,例如模糊效果、圓角、流動效果...Read more
name

在 Unity 裡做 TDD -- FDMonoBehav Framework 的誕生

這篇文章主要是在說明我們如何在 Unity 專案中導入 TDD 開發方法。開發環境主要使用 C# 語言在 Unity 2017.4.4f1 + Visual Studio for Mac Community 7.5.1,並使用 NUnit 和 NSubstitute 來作為開發單元測試專案...Read more