列宽先于气泡
侧栏变宽或变窄时,会话列跟着让。WhatsApp网页版的气泡宽度跟列走,不跟某一张设计稿上的固定像素走。缩放之后先看列,再看气泡,顺序反了就会误判。
浏览器把页面拉大、系统把字号抬高,气泡宽度还得把整句留在框里。时间戳、昵称和正文要各占各的行,读的人沿着折行走完,而不是在右缘猜被切掉的半个词。
页面缩放示意 点选档位,看气泡里的字如何跟着变大。
会话列减去侧栏之后,剩下的宽度就是气泡能用的横向空间。页面缩放把字面放大,气泡宽度若仍按旧像素锁死,最后一个字会顶到圆角边。WhatsApp网页版按列的比例给气泡留宽,折行发生在词与词之间,内边距始终包住笔画。读的人看到的是完整句子,而不是被边框切断的残片。
系统字号是第二层倍率。浏览器缩放改的是整页,系统字号改的是控件与部分文本的计算尺寸,两层叠在同一条气泡上。只响应其中一层,另一层就会把字推出框。对照时要把两层都拧到同一档,再看气泡右缘和最后一字的距离。距离还能数出来,这一档才算把宽度留给了字。
长句、短句、只有一个链接的句子,对宽度的压力不一样。短句在放大后仍应居在气泡内,而不是被拉成一条细带。长句应连续折行,行尾留白稳定。链接按段断开,避免半个域名挂在下一行开头。这三类句子都过得去,气泡宽度才经得起缩放。
侧栏变宽或变窄时,会话列跟着让。WhatsApp网页版的气泡宽度跟列走,不跟某一张设计稿上的固定像素走。缩放之后先看列,再看气泡,顺序反了就会误判。
中文按字、英文按词、数字尽量成组。页面缩放只改变字号,不改变这些断开规则。气泡宽度变小,断开点应前移,而不是从字中间切开。
自己发出的气泡和对方的气泡最大宽度可以不同,但放大后都要守同一条内边距。右侧气泡更容易和时间戳打架,验宽度时两列都要看。
字号变大,左右内边距也要留得开,圆角才不会切到笔画。WhatsApp网页版把内边距写成随字号浮动,比写成四个固定像素更经得起一百五十档。
系统字号一抬,侧栏里的头像、昵称、预览和时间会同时变高。会话列的每一行若仍按旧行高去排,昵称会压到下一行的头像上,预览只剩半截。WhatsApp网页版让行高跟着系统字号走,头像与文字中线对齐,时间戳单独停在行尾。找会话时,眼睛还能按行往下数,而不是在错位的块之间跳。
气泡所在的主列也有行的问题。一条消息的高度等于正文行数乘以行高,再加上气泡的上下内边距。系统字号变大,行高若不动,两行会粘成一块,读起来像被压扁的段落。行高跟着走,长气泡会变高,滚动会变长,这是可接受的交换。可读优先于在一屏里多塞几条。
侧栏预览往往比气泡正文更小一号。系统字号抬高后,预览可能被抬到接近正文的大小,侧栏行被撑开,主列的锚点会跟着漂。对照时要同时看侧栏第一行和主列第一条气泡的顶边。顶边还能对上,系统字号这一档才没有把两列拆开。
昵称单行优先,实在放不下再折一次。时间戳不进昵称的格子。预览只取一行,多出来的用省略,避免把下一会话顶走。WhatsApp网页版在系统字号变大后仍守这三条,侧栏才像一张表,而不是一堆叠块。
气泡与气泡之间的空隙随行高略增,避免放大后两条消息贴在一起。发送中的占位条、日期分隔条也按同一行高计算。主列滚动时,这些条子不能突然变矮,把后面的气泡拽上去。
百分之一百二十五是很多笔记本出厂就停着的档位,也是浏览器里最常被点到的第一档放大。边框若仍是一像素硬线,字号变大后这条线会显得像割进笔画的头发丝。WhatsApp网页版让边框和圆角跟着缩放走,气泡外沿与文字之间仍能看见一圈空白。边框是让开,不是加粗到抢戏。
这一档也最容易暴露固定宽度的旧写法。设计时按百分之一百量的气泡,到了一百二十五会短一截。短出来的那一截通常刚好够一个标点或一个英文词。对照滑杆停在一百二十五时,先看最右一个字是不是完整的,再看圆角有没有切到那个字的角。两处都干净,这一档才算过。
百分之一百二十五还常和系统字号百分之一百二十五叠在一起,实际接近一点五六的倍率。只验浏览器、不验系统,会把叠加后的拥挤漏掉。把两个滑杆都放到一百二十五,再读一条带时间戳的长气泡,是这一档最省事的验法。滑杆示意在页顶,数字档位和真实浏览器缩放是同一组概念。
时间戳习惯停在气泡右下角,字号比正文小。页面缩放和系统字号一起变大后,小字会被抬高,角上的格子却还是旧的。格子不够,时间就会叠到最后一行的词上。WhatsApp网页版给时间戳单独留一条矮行,或在正文最后一行提前收短,给数字让出位置。能读的标志是时间和句子之间仍有空隙。
已读勾、发送中的点,往往和时间戳挤在同一角。放大后这三个元素要排队,而不是叠成一坨。勾的大小可以跟着略增,但不要超过时间数字的高度。点的动画占位也按放大后的尺寸算,避免动画扫过正文。角上的东西各有格子,正文就不必给它们让路到换一种排法。
对方气泡的时间戳在左下或右下,和自己发出的气泡镜像处理。验的时候左右各看一条,尤其是最后一行很短的气泡,时间戳更容易显得压在字上。短最后一行时,宁可气泡再高一点,也不要把时间和字叠在同一基线上。
同一缩放档位,窗口拖窄和拖宽会得到两种气泡宽度。窄列先折行,宽列更接近一句一行。可读边界不是固定像素,而是「词还在框里、时间还在角上、行还对得上」这三件事同时成立。窄列成立、宽列也成立,这一档缩放才算稳。只在宽窗口里好看,拖窄就破,说明宽度没有跟列走。
| 对照项 | 窄列会话 | 宽列会话 |
|---|---|---|
| 气泡宽度 | 跟变窄后的列走,长句多折两行,词仍完整 | 最大宽度封顶,短句不必拉满整列 |
| 系统字号抬高 | 侧栏行先被撑高,主列顶边仍能对齐第一气泡 | 主列行高跟着涨,一屏里的条数变少但能读 |
| 页面缩放到一百五十 | 时间戳单独占角,最后一行提前收短 | 圆角与内边距一起放大,边框不切笔画 |
| 超长群公告 | 连续折行,滚动时行距稳定 | 仍按列宽折,不改成通栏海报 |
把浏览器缩放、系统字号和窗口宽度当成三条滑杆,逐档停下来看气泡。每一档只问三件事:最后一字在不在内边距里,时间戳有没有压字,侧栏行和主列顶边还对不对。问完再拨下一档。这样验的是可读,而不是把功能写成一张能不能的表。
会议室把笔记本投到大屏,操作的人常把页面拉到一百五十以上,好让后排看见气泡。低视力的人会把系统字号先抬一档,再决定要不要动浏览器。外接四千屏的人则可能把页面缩到八十,好同时看文档和会话。这三种场景倍率不同,判断句子还在框里的尺子相同:词完整、角上有空、两列对齐。
触控板误触停在一百一十,属于轻度放大。若短句已经贴边,说明宽度对缩放过于敏感,这一档就要记下来,作为回归时的底线。若只是行高略增,词仍完整,可以维持着继续开会。误触不是故障,它是最常见的「非设计档位」,反而能暴露只按一百和一百五十验收的漏洞。
浏览器若打开了最小字号限制,时间戳和辅助说明会被抬到接近正文。WhatsApp网页版要把这些被抬高的小字重新排进角上的格子,而不是让它们浮在最后一行上面。最小字号是系统策略,气泡只能让位。让位之后句子仍在框里,这一场景才算过关。
后排要的是字大而且整句还在。气泡变高可以接受,字被边框切掉不能接受。投屏前把滑杆停在实际使用的档,比在百分之一百上拍一张截图更有用。
先抬系统字号的人,浏览器可能仍停在一百。只验页面缩放会漏掉这一路。WhatsApp网页版把系统字号当成独立滑杆,和页面缩放分开记结果。
缩到八十是为了多看内容,气泡应变窄但仍能放下常用短句。窄到只剩两三个字,会话列就失去对照意义,等于把对话变成竖条目录。
一百二十五乘一百二十五接近一点五六,这一档最容易把时间戳推进正文。叠加要单独记一行,不能用「大约一百五十」代替。
百分之一百五十时字面会明显变大,长链接应按词或按段折行,而不是从气泡右缘被裁掉半截。WhatsApp网页版把气泡宽度交给会话列的剩余空间,链接应落在内边距以内。若最后一个字符贴着边框,这一档缩放就算没有把句子完整留下。
系统字号抬高后,侧栏昵称、预览和气泡正文会同时变高。WhatsApp网页版应让行高跟着字号走,而不是仍按二十像素去排。昵称换行、时间戳掉到下一列,都是行高没有让开的信号。气泡正文若与侧栏行抢高度,会话列会对不齐。
外接高分屏时,页面缩到百分之八十是为了多看几列,气泡宽度应按会话列的比例收缩,而不是按固定像素塌掉。WhatsApp网页版在这一档应仍能放下短句和常用词。若只剩两三个字,说明宽度没有跟列走,读起来会变成竖条。
自己发出的气泡通常靠右,时间戳贴在右下角。页面缩放和系统字号叠加上去后,时间戳应与最后一行文字留出空隙。WhatsApp网页版把时间戳压进正文,最后一个词就会缺一角。能读的标准是时间和句子各占各的位置,不用把字从数字下面抠出来。
只放大页面时,整列一起变,气泡宽度和字号按同一比例走,撑破得较晚。只动系统字号时,浏览器控件和网页正文的倍率可能不一致,气泡内容先变大、列宽仍按旧值算,更容易顶到边。WhatsApp网页版要同时吃进这两种倍率。先撑破的往往是只动系统字号的那一条路径。
投屏到百分之一百七十五后,群公告会变成很长的一块。WhatsApp网页版应让气泡在会话列内连续折行,滚动时仍能看见完整词。行与行之间要留得开,避免两行贴成一块。能顺着读完,指的是眼睛沿着折行走完全文,而不是在右缘反复回头找被切掉的字。
百分之一百一十是常见的误触停靠点,字号略大,气泡宽度也应略宽。WhatsApp网页版在这一档仍应把句子留在框里,时间戳不压字。若短句已经贴边,说明宽度对缩放过于敏感,值得把页面拉回百分之一百再对一次。若只是行高略增、词仍完整,可以维持这一档继续读。
打开最小字号后,时间戳、已读标记和辅助说明可能被抬到与正文接近的大小。WhatsApp网页版气泡要把这些小字重新安排位置,避免它们挤进最后一行。强行抬高本身不是问题,问题是抬高后有没有给小字留格。小字变大却仍钉在旧坐标上,就会盖住正文。