聊天未读定位先保住阅读位置:用户在底部跟进对话时,新消息可继续跟随;用户已经上翻历史时,新增内容只提示数量,不把画面拉回底部。进入会话时显示首次未读分界,跳转历史后提供返回最新入口。未读、这次新增和提及自己是不同集合,数量不能混用。
项目群里,产品经理正在看上午的需求说明,下午又陆续收到三条讨论。他此刻最需要的是读完眼前的消息,再决定是否看新内容。可以用Pixso把聊天阅读路径连成原型,分别演示进入未读、上翻历史和回到最新,而不是让每次新消息到来都触发同一个滚动动作。

先分清未读、刚收到和有人提及
未读数通常根据产品记录的阅读位置计算;“3条新消息”可以只表示用户上翻之后到达的3条;提及提醒则对应消息内容里的特定事件。三者可能重叠,也可能不一样。打开会话后已经读过最新消息,再上翻旧记录时收到3条,“本次新到3条”不一定等同于整个账号的所有未读。
本例进入群聊时,服务端返回最后记录的阅读位置,界面在其后放置“以下为未读消息”。这条分界在本次阅读中保持稳定,帮助用户知道从哪里接着看,不因为每滚动一条消息就不断向下逃走。真正的已读记录可以持续更新,但它和视觉分界不必采用同一种更新节奏。
未读计数也不是用户理解了内容的证明。设计只应说明系统依据什么行为记录阅读,例如会话处于前台且消息进入可见范围;后台标签页打开或请求已经取回数据,不自动等于人已经看过。具体规则应由产品确定,并保持各设备一致,不能用一个红点承担所有不同含义。
是否跟随到底部,看用户正在做什么
用户已经在最新消息附近,正连续阅读或发送消息时,可以跟随新增内容,避免每一句都要手动下拉。用户主动上翻后,应进入阅读历史的状态,新消息追加在下方,但当前可见消息保持位置,同时显示“3条新消息”入口。
这里不宜只用“距离底部还有多少像素”做唯一决定。一张图片加载完成可能突然增加高度,用户实际上仍在读最新一段;键盘弹出也会改变视口大小。设计需要记录行为意图:主动上翻、跳转历史、正在选中文字、查看图片等,都可能意味着暂时不应自动滚动。
本例在上翻后显示底部悬浮入口,文字明确为“3条新消息”,点击才进入最新区域。按钮不要覆盖最后可见气泡或输入框;用户选中文字复制时,按钮出现也不能取消选区。已经有新消息入口时,不再每条都弹出遮挡内容的提示。
在Pixso画布中并排放“阅读历史”和“最新对话”两个大画板。左侧保留上午需求说明,底部出现3条新消息提示;右侧显示点击后到达的三条下午消息,并保留原会话名称。连接的是用户主动点击,不给左侧画板设置定时自动跳转,用原型直接表达阅读位置由谁控制。

向上加载历史时,保持同一句话在眼前
聊天记录往往向上加载。用户看到“请把搜索条件保留在返回页”这条消息,再加载更早的20条,如果页面按原滚动数值停住,这句话可能被推到屏幕下方。正确的设计目标是以稳定消息身份及其相对位置恢复阅读,而不是简单记住一个滚动条数字。
加载中在顶部保留可理解的状态,失败后提供重试,不让整个会话清空。新加载消息与已有消息重叠时去重,时间顺序一致;不能因为接口分页边界重复一条,就让未读数量也增加。交付时应说明加载前后怎样保持消息连续,避免重复和位置跳动。
MDN对滚动锚定的说明介绍了浏览器减少内容变化导致位置跳动的机制及控制方式。它不是聊天定位的完整方案:历史分批加载、虚拟列表、跳转指定消息和未读记录,仍需要应用自己的对象身份与状态逻辑。
图片、视频预览和长链接卡片也会改变气泡高度。能预留尺寸时先保留空间;不能确定时,加载完成后尽量保持当前阅读锚点。不要为了防跳动把图片强行压成固定高度导致内容被裁掉,也不要让图片晚到把用户正在读的一段推到看不见的位置。
搜索结果与未读消息,是两种不同跳转
用户从搜索结果点进上午10:20的一条消息,应定位到这条消息并短暂突出显示,同时显示附近上下文。此时“返回最新”帮助离开历史位置,而“返回搜索结果”帮助继续查找,它们的目的地不同,不能共用一个没有说明的返回箭头。
若目标消息已被撤回、删除或不再可见,解释目标当前不可访问,并尽可能保留相邻时间上下文。不能跳到同一序号的另一条消息,假装找到了原内容。链接应指向稳定消息身份,不依赖它当前是列表中的第几项。
从通知或提及入口进入也一样:先定位对应消息,不能为了尽快清除未读红点就跳到全部消息的最底部。提及提醒已处理,不代表期间每条群聊消息都已阅读;产品若采用统一标记规则,必须在状态和计数中保持一致,避免两个端显示相互矛盾的结果。
重连和切换设备后,分界还要可信
断网期间收到的消息在重连后补回,仍按消息身份去重和排序。用户停在历史记录时继续保护原位置;正停在最新位置时,可以在补齐后跟随。网络恢复提示与“有新消息”分开,前者表示连接可用,后者表示内容增量,不能用一个“已更新”模糊带过。
另一台设备已读到更靠后的消息,本机可以同步减少全局未读数,但不应因此把正在阅读的历史画面强行拉走。本次会话中的视觉分界也可以保持,或在适当时机更新,关键是让用户理解它表示进入时的位置,而不是一个永远实时跳动的读数。
关闭会话再回来时,恢复位置要有明确策略:未读很多时先到首次未读,未读很少时显示最近上下文,用户主动离开历史时可保留历史锚点。选哪一种应结合聊天用途,不能同时承诺“总到最新”和“总恢复上次位置”。
群聊界面的安静,来自清楚的控制权:新内容可以提醒,但不打断眼前阅读;跳转可以快速,但能说清目的地。把未读线、新消息入口与返回最新分开处理,用户才能在连续对话里既不错过消息,也不反复寻找刚才读到的那一句。