显示资讯的介面设计与平面的视觉与排版设计最大的不同,就在于文字资讯是变动的(Dynamic),它也是最麻烦棘手的部分,尤其是对于可供使用者输入的内容,即使在有限制文字长度的的条件下,文字的长短仍然会对视觉与版面有绝对的影响力,我们无法预期使用者会想要输入仅仅一个字还是漏漏长的整句话,即使是固定的操作资讯如按钮上的文字,也会受到多国语系的支援而改变长短,因此,不论介面还是视觉设计师,在设计这类的资讯显示介面时,就必须要清楚了解显示文字控制元件的特性。

因为文字横式的特性,最安全且没有问题的就是重直堆叠(stack)的显示方法,这也是最常见的方法,因为文字元件间只存在着垂直的相对关系,即使搭配一张显示图示,也很好排版与实作,针对较长的文字资讯,无论是要完全显示所有资讯、缩小字型、或是截短(Truncate),都不会对视觉有太大程度的影响。
Screen_Shot_2013-08-08_at_10.32.57_PM

但可惜的是这样的方式在很多地方是不实用的,会占用与浪费掉很多横向的空间,为了视觉观感与让画面能够快速传达资讯,我们会将文字元件排版在水平的位置中,但此时就很容易遭遇困境,通常是发生在当显示区域受到限制的情况下。

以下图 Instagram 的个人资讯栏位为例,不同的语言长度变化差异很大,固定显示区域的很容易就遇到如右上角俄文截短的状况出现,无法将正确的资讯完整提供给使用者,这类的问题很常发生在如日期与时间的显示上,因为不同语言间的所需长度是不同的,但我们在设计与排版几乎都忽略了这个问题,而导致后期增加了额外的修改成本与难度。

Screen_Shot_2013-08-09_at_11.12.55_PM

俄文德文是相对比较容易出现这样状况的语言,他们的单字相对来说比较长,在开发时可以把这两种语言当做一个指标来做文字显示的测试与调整,而中文的月份与完整的英文月份长度也是个很容易忽略的地方。

另外一个很容易发生排版问题的状况,就是当文字元件与其他视觉显示元件,在水平空间关系上有比较紧密的连结,例如搭配图示 icon 如下图的地点资讯,若资讯是可作截短动作的话还比较容易解决,但若是遇到有必要完整显示的资讯,视觉的排版上就需要花上比较多的步骤去处理他,如需要缩小字型、或是进行换行、还是对齐等,如果想要漂亮的呈现这样的资讯,实作上也需要比较花功夫去根据状况调整。
Screen_Shot_2013-08-08_at_11.39.46_PM

地点资讯是个很容易出现长度问题的项目,除了地点名称本来就有长有短,加上语言长度的不同,另外因为地点资讯大部分是由使用者建立,会出现栏位输入错误,例如以台北市来说,从 Foursquare 上捞回来的资讯,城市(City)的栏位常常出现的是大同区或信义区等资讯,或是空值,如果要搭配上地名的显示,例如「Taipei City | Taiwan」等格式,势必会面临长度大不同的挑战,截短在这时候也就比较无法独挑大梁,一定需要搭配字型缩小与换行的方法。

在手机中小小的浏览空间中,这些问题是很容易发生的,所以设计师在设计文字的区块时,就应该充分了解显示资讯的特性与可操作的方法,一并规划出针对不同文字长度时的视觉与排版策略,因此本篇文章将针对 iOS 介面中文字显示的基本控制元对于处理文字讯息的方法作简单的介绍。

小而实用的文字标签(UILabel)

在 iOS 介面中,文字标签(UILabel)控制元件是一个最基本也最常使用到的文字显示元件,适合用来显示操作介面中的讯息与提示,以及非段落式的讯息如回复留言、名字、地名、标题等,而 UILabel 自动处理文字长度有三种最基本的方法:截短(Truncate)字型缩小、以及换行

截短文字是其中最轻松也最漂亮的方法,可以有效地确保文字标签的区域尺寸,其中有三种截短方式,分别是截短开头、截短中间、或是截短结尾:

Screen_Shot_2013-08-12_at_11.29.32_AM

截短可以说是个很负责的显示方式也是个很不负责的方法,它可以搭配进一步的「阅读更多」的功能,清楚的给予使用者讯息的部分摘要,让有兴趣深读的使用者再进一步点入其他的页面,但是如果只是当做标签使用,例如显示名字、标题等,就要考虑讯息的重要性是否能够被截短,若而出现在操作介面的非变动的标签、或是按钮上文字,就一定尽量不要使用到截短,尤其针对不同国家的语言,截短开头中间结尾都有可能造成无法正确传达讯息的可能性。

当截短可能造成显示的问题时,就要动用文字标签的一个特点「缩小字型」,文字标签可以自动的侦测文字的长度,缩小到能够在限制的区域内显示完整的文字,不过这样需要注意的两个点是,设计师需要决定最小限制的字型缩小比例以及缩小的对齐方式,缩小的字型可能可以让使用者完整的看到文字,但若缩小的差距过大,在视觉上也很容易造成破坏,这就必须要考量到视觉上的设计来事先规划与调整。

下图为文字讯息经由不同限制的自动缩小与对齐方式的结果,淡蓝色部分为 UILabel 初始的设定区域,经过不同的缩小方式,会发现产生出不同的多余空间,因此贴心的视觉设计师,就可以依此规划可能遇到的状况,以及其他相关的显示元件该怎么与之调整,让版面更完美且好阅读。

Screen_Shot_2013-08-10_at_12.10.37_AM

需要特别注意的是,从图中三种对齐方式(向下基底对齐、重直置中、向上对齐)我们可以发现,向下对齐与重直置中是比较利于排版的,因为字型会确保维持在同一高度值,但是向上对齐会造成上方留白处的距离不一,因为字型并非完全顶置,在不同字型大小下上方留白高度依照比例变化,搭配时需要注意视觉上的平衡。

若缩小字型仍会造成阅读困难或是视觉上的不平衡的话,也可以考虑搭配换行的作法,UILabel 目前没有支援同时自动缩小与换行的功能,需要搭配 iOS 提供的函式,先找到适合的缩小字型尺寸后,在进行换行的动作,下图为最多使用两行以及搭配不同的缩小比例的显示结果:

Screen_Shot_2013-08-10_at_12.44.36_AM

在搭配自动缩小与换行的模式下,一样会有上方空白间距无法精确掌握的状况,即使手动调整也无法顶置,也不支援向基底对齐,唯一可确保的是能够维持垂直置中;其中行距也是个令人头痛的地方,并且在 iOS 6 与 iOS 7 (图为 iOS 7 Beta 5 输出)中会有些微间距的不同,这些变因可能都需要一并纳入考量。

了解了文字标签的基本特性与处理文字的方法,我们在设计 iOS 的介面时就应该针对不同的文字资讯长度去作规划排版对策,事先为变动的文字内容做好准备。

属性标签: , ,

1 条评论

欢迎留言