聊天应用设计:聊天列表改版前后对比

聊天列表只有一件事要做:告诉你谁来了消息、说了什么、需不需要回复。下面这版初稿塞进了即时通讯应用可能想要的所有功能,而且一股脑全摆出来:标题栏四个图标、一个自我解释的搜索框、六个溢出屏幕边缘的筛选项,还有每一行都带的完整日期。修复版保留同样的人和同样的消息,但让屏幕的每个部分只干一件事。

整个界面,改版前后

新手初稿

修复后

左边,眼睛先撞上四个图标、一个 47 个字符的搜索提示、五个一模一样的彩虹光环、一排没有尽头的筛选项,以及七行单行消息,每行都挂着日期和徽标。右边,眼睛看到的是一个大标题、一个按钮、一个搜索框、五张脸、四个筛选项和五行读起来像句子的内容。

修复 1:标题只放一个操作,搜索框只说“搜索”

之前

之后

四个图标加一个列出搜索范围的搜索框,对比一个按钮加一个“搜索”。

初稿的标题栏里有相机、铅笔、放大镜和菜单。放大镜下面的搜索框自带一个放大镜,于是屏幕把同一个搜索提供了两次。

修复版保留人们来这里的唯一目的,写新消息,并给它一个品牌蓝的柔和圆形按钮。标题变成大标题,和 iOS 的做法一致,让屏幕在其他一切之前先告诉你身在何处。搜索框只写“搜索”。初稿那 47 个字符的“消息、联系人、群组等”,是在解释一个人人都会用的输入框。

可复用的规则:标题栏只放一个操作,叫“搜索”的输入框不需要一句话。

修复 2:表示“新”的光环

之前

之后

五个一模一样的彩虹光环和被截断的名字,对比蓝色表示新、灰色表示已看、名字完整。

当每个光环看起来都一样,光环就没有任何信息。初稿给五个 Stories 用了同一个渐变,所以你看过的和没看过的一模一样,名字还被截成“Jessica M...”和“Daniel Ro...”。

修复版让光环有了含义。2.5 px 的蓝色光环表示新,1.5 px 的灰色光环表示已看。

你自己的故事排在第一位,带一个小加号,每个名字都是完整的名字:Jessica、Daniel、Amara、Leo。短名字放得下,而且人们本来就是这样称呼彼此的。

可复用的规则:用颜色区分两种状态,并且只给需要关注的那个状态上色。

修复 3:四个筛选项,一种样式,数字放在它自己的项上

之前

之后

六个描边筛选项排成一行,比屏幕还宽,对比四个刚好放下的筛选项,数字作为徽标显示。

初稿有六个筛选项,排成 434 px 的一行,却放在 364 px 宽的栏里。第六个被切掉一半,屏幕告诉用户还有更多,却不说是什么。数字以括号写在标签里,“未读 (12)”和“群组 (3)”,让每个标签长度都不一样。

修复版保留四个:全部、未读、收藏和群组。选中的是蓝色实心,其他是浅灰。未读数移到它自己的筛选项上,作为一个蓝色小徽标,因为这是人们唯一想看的数字,而且和下面各行上看到的是同一种徽标。群组去掉了数字。

频道和已归档离开了这一行。它们是真实的功能,而这次改版没有画出它们的去处,所以完整的应用仍然需要为它们找个位置。

可复用的规则:一排筛选项应该在屏幕内结束,选中的那个应该是唯一的实心项。

修复 4:每行只有人、两行消息和一个简短时间

之前

之后

一行被截断的消息、完整时间戳和带图标的红色徽标,对比两行消息、简短时间和一个安静的徽标。

一行就是一条缩小的消息,而初稿在大约五个词之后就把消息截断了:“Haha yes!! Send me the photos fro...”。空间都给了日期“10/24/26 9:41 AM”,以及红色徽标旁边的小置顶或喇叭图标。对一条今天早上收到的消息来说,带年份和秒数的日期是一行里最没用的东西。

修复版让预览显示两行,所以“Haha yes! Send me the photos from last night when you get a chance”不用点开聊天就能读完。时间很短:今天显示“9:41”,然后是“昨天”,再往后是“周四”。

未读聊天的时间是蓝色的,带一个 17 px 的蓝色徽标。静音的群组 Design Team 得到一个灰色徽标,它会被计数,但不会吵人。头像增大到 52 px,语音消息在时长前面加一个小麦克风。

可复用的规则:把一行的空间花在消息上,时间要写成人们说话的方式。

更小的修复

• 一条左边线。 初稿左边用 14 px,右边用 12 px。修复版两侧都用 20 px,分隔线从头像之后开始。
• 一种引起注意的颜色。 初稿的徽标是红色,光环是橙到紫,未读筛选项只有描边。修复版用品牌蓝 #2E7CF6 表示新、选中和未读,其他一切安静的东西用灰色。
• 真正的字号体系。 文字从 9 到 20 px 改为 iOS 的 11 到 28 pt 文字大小,顶部是大标题。
• 四个标签页,不是五个。 初稿的聊天、通话、相机、状态和设置变成聊天、通话、动态和设置。相机离开了标签栏。
• 更大的脸。 列表中的头像增大到 52 px,所以一行首先呈现的是人。

审查你自己的聊天列表

获取 Figma 文件

免费文件包含两个界面的组件、每个修复的前后对比、颜色变量和 iOS 文字样式。

免费 Figma 文件

聊天列表,改版前后

两个界面和每个修复部分的 Figma 组件。免费,仅可查看,复制到你的草稿即可使用。

在 Figma 中打开

FAQ

聊天列表界面的每一行应该显示什么?

人、最新消息的两行、一个简短时间和一个表示未读的小徽标。去掉完整日期、多余的图标和第二个徽标。

即时通讯应用应该显示多少个筛选项?

主列表上四个筛选项就够了:全部、未读、收藏和群组。其余的,比如已归档,放进菜单或另一个界面,并确保这一行永远不会溢出边缘。

如何在聊天应用中设计 Stories 光环?

新的用一种颜色,已看的用一种安静的颜色,这样光环才带有信息。我们的修复版用蓝色光环表示新,细灰色光环表示已看,头像下面显示完整的名字。

聊天应用应该如何显示消息时间?

像人说话那样简短:今天显示具体时间,然后是“昨天”,再然后是星期几。完整日期留给聊天内部。

聊天应用应该用多大的字号?

使用平台的文字比例。修复后的界面使用 11 到 28 pt 的 iOS 字号,界面名称用大标题。

来源

• 两个界面都是我们自己在 Figma 中设计和测量的。名字和消息都是为练习编造的。
• 照片来自 Pexels,摄影师:Татьяна Танатова、Iphanyi Ezemenari、pessoas uem、Son Hoa Nguyen、Ajan Yogi、Tamra Creatives Agency、Kenneth Surillo 和 kaleef lawal。
• Apple Human Interface Guidelines: Typography,提供修复后界面所用的 iOS 字号和大标题。
• Apple Human Interface Guidelines: Accessibility,提供 44 pt 的触控目标尺寸。
• 最初以轮播形式发布于 App Brainy。