目录
内容溢出
2023年1月18日

记得09年的时候,我还在度厂实习,当时的工作角色是一名产品助理,日常主要工作是协助产品经理完成需求制定和一些简单的产品设计工作。那份工作和我毕业后即将从事的交互工作有一定的关联度。但由于我在学校中所学到的知识,更偏重于理论和实验,这与实际工作中所要用到的“实操知识”还有一定的偏差。所以在工作间隙,我就在知乎中搜索关于交互设计师的岗位描述,了解交互设计师工作日常,以此为接下来要从事的工作做一些准备。

记得当时知乎有一个关于交互设计的热门帖子,其中对交互岗位的职责描述让我印象深刻。他在描述交互职责时,提到了交互设计师需要做许多具体的工作,比如产品中但凡出现字节的地方,都需要对字节的个数进行相应的约定。但当时我只是一名准菜鸟级设计师,所以对这句话的体会不深,并且一度觉得这种描述非常离谱,交互的工作看起来一点都不“高级”,甚至可以说是相当无聊。

但当我正式步入交互岗位时,随着经手的产品越来越多,我逐渐意识到这些细节工作的重要性。

作为用户,我想大多数的人都有这样的产品使用体验,就是我们在移动端访问某些网站时,由于网站并没有对移动设备进行特别适配,所以我们在打开网址后,就会看到很多文字和图片内容出现显示异常,很多文字超出了背景限定的显示区域,发生文本溢出的现象。


这种内容溢出,不仅会让页面呈现不美观,同时也会给我们正常的浏览内容带来障碍。内容溢出的发生主要和设备环境相关,如果在网页产品的设计中,设计者并没有对页面适配进行足够的关注,那么当设备呈现内容的显示宽度发生剧烈变化时,就会伴随着内容溢出现象的发生。

即便是客户端产品,由于不同设备中,系统默认使用的字体不同,字体的宽度也会有明显的差异,在相同分辨率设备中,同一字号显示条件下,如果在A设备中一行空间内,最多能够放下10个字节,那么在B设备中可能最多只能放下9个字节,这样相同的字段长度,在B设备中更容易发生溢出现象。


在实际的产品设计中,但凡涉及到文字显示的环节,对字节长度的合理约束往往是不可缺少的步骤。比如我们对标题的字节长度进行定义时,我们需要依照产品的真实情景,进行显示范围的约定。我们需要与运营团队进行沟通,确定真实的产品应用环节,用户或者运维人员可能使用的字节数范围(最长和最短),在保证明确的语义传达基础上,最终完成标题字节数的定义。

在移动设备中,常规的标题长度,大都小于3行,但个别的标题长度可能会超出这一范围。通用的处理技巧就是省略一部分标题内容,以保障首屏内容的均衡呈现(能够兼顾到简介缩略或内容详情)。但这种省略处理和语义的明确传达存在着天然的矛盾,为此我们不得不在实际的设计中,通过一些特殊处理技巧来解决这一问题。


在网页产品设计中,当某个版面结构中,文本标题使用了省略号,那意味着有部分内容被省略隐藏。如果想要获取全部的标题内容,我们需要将鼠标hover到相应字段上,并稍作停留,一个完整显示的标题可以借助气泡形态向用户进行展示。


通过悬停方式揭示完整语义,在网页产品设计中非常常见。在很多网站的设计中,使用了大量的图形按钮来取代文字按钮,图形按钮的使用可以让页面显得整洁和美观,但图形的语义传达,未必完全契合用户的认知,这时就需要通过某种交互补全的处理方式,来帮助用户确定当前按钮的准确命令含义,通用的处理方式同样借助于鼠标的悬停,当鼠标hover到这些按钮上时,会通过气泡交互给出当前图形按钮的命令含义。


在移动产品中,为了保持feed流的简洁性,在单屏中向用户呈现更多的内容,通常设计人员会严格约定单条信息解构单元中,最多显示的字节个数,比如,将单条内容显示字节,设定为最多140个,那么超出部分会被省略隐藏,如果用户对某一条内容感兴趣,想要查看完整的内容详情,那么他可以通过点击这条信息,在二级页中查看全部内容。相关对照产品可参见微博的feed流设计。


还有一些产品会约定文本显示的行数,比如最多显示3行,当超出3行时,会将超出部分隐藏起来,并在页面中增加一个示意为展开更多的图标按钮。如果用户对当前内容感兴趣,就可以点击这个按钮,来查看全部内容。


最后一个案例来自于网页导航栏设计。当我们在进行网站设计时,一般会先定义页面的基准显示宽度,比如1080px,当浏览器的宽度大于这个基准宽度时,网页导航栏的内容会被完整的显示,当浏览器的视窗宽度小于1080px时,如果产品的设计方案中没有考虑到适配,那么导航栏上的内容大概率会发生溢出现象。为了应对内容溢出,产品设计者会对导航栏的内容显示进行相应定义,比如导航栏上的文本入口有6个,当屏幕宽度在变小时,从导航栏的最右侧起,逐步隐藏显示不下的文本入口,并将其添加到表意为更多的下拉列表内。


以上是我们列举的几种应对文本溢出的设计处理技巧,在常规的产品设计中,文本溢出经常会发生一些特殊场景或硬件设备上。即便是从业多年的设计者,依然会在产品上线的用户留言中,收到内容溢出的问题反馈。

作为设计者,我们很难保证自己的设计方案,在开发实现后,能够在任何设备条件获得完美还原,但在产品开发上线前,花足够多的时间走查,并测试设计方案的还原度,是非常必要步骤,一些内容溢出或是异常显示,可以在设计走查中被最大程度的发现并修正。