Skip to content

← 返回首页

Laytly

团队的视觉素材散落在四个互不连通的工具里。我设计了把它们连起来的系统。

客户: Lately Pte. Ltd
角色: 产品与 UI/UX 设计，自由职业
范围: 设计系统、登录注册、引导流程、聊天、媒体库与相册、账户、商城——网页与移动端
成果: 独立设计师，一个产品，横跨网页与移动端。

Laytly 页面：群组媒体库、相册与全屏图片查看

背景

Laytly 围绕对话里真正会越积越多的东西来设计——媒体。聊天中分享的任何内容都会落进一个按月自动归组的媒体库，以及群组自己命名的相册里；十一月发出的一张照片，到三月依然找得到。在它之前，这些事散落在三四个互不连通的工具中。我以唯一的设计师身份加入 Lately Pte. Ltd，与跨职能团队协作，把产品横跨网页与移动端一路做下来。

关键决策 · 01

做的是一套系统，不是一堆页面

选择

当同一个模式必须在不止一处成立时，就去建组件库和共用规则。

放弃

每个页面各按各的需求单独设计——前十个页面确实更快。

原因

产品在跨平台生长。当一个组件必须在四种语境下都活下来，一致性就不再是偏好，而变成了工作本身。

依据

组件表里有书签、浏览按钮、复选框、开关、标签栏和滑块——各画一次，之后是复用，而不是每个页面重画一遍。

Laytly 设计系统：Poppins 四个字重与五色配色 — Poppins 四个字重，五种颜色：#3E9AB1 独自扛起整个品牌，其余交给灰、黑与两种近白。小到可以不做任何判断就拼出一个组件——这正是拥有系统的意义。

关键决策 · 02

用证据争论，而不是用品味

选择

把调研和使用场景带进设计评审，让每个决定都能就事论事地被辩护。

放弃

拿出做完的视觉稿，然后请对方批准。

原因

和工程师协作意味着每个决定都得经得起一场对话。解释不了的选择，就不算做完。

依据

Velda 的三个痛点——追踪发出与收到的文件、版本管理、一个始终最新的目录——正是产品那三个功能换成她自己的说法。

用户画像：Velda Bunthara，31 岁，亚特兰大自由平面设计师 — Velda，31 岁，同时接着好几个客户项目。她的痛点其实就是换了说法的产品需求：追踪自己发出与收到的东西、版本管理，以及一个始终最新的目录。评审里的每一次争论，都能指回这里。

关键决策 · 03

让对话本身完成归档

选择

每个对话里都有三个标签页——聊天、媒体库、相册——分享出去的东西，在你回头找之前就已经归好档了。

放弃

像网盘那样，另开一个上传区。

原因

没有人会把同一件事归档两次。媒体库如果不在分享发生的地方，一周之内就会过期，团队随即退回四个工具。让它们是同一个地方，归档就成了聊天的副产品。

依据

媒体库按月自动分组——2024 年 11 月、2024 年 10 月——所以不用谁去命名，照片也依然找得到。

Laytly 单聊及其媒体库与全屏查看 — 单聊与它的媒体库并列。消息里的照片就是媒体库里的照片，按月分组，各自带着点赞、评论和收藏——于是一张图可以按“什么时候发生的”找回来，而不必先想起是谁发的。

Laytly 群组：Creative Mind 及其媒体库与自命名相册 — 同一套结构放到群组规模。Creative Mind 有 4,713 位成员，相册是群组自己命名的——Recents、Dessert、Holiday in Singapore、Badminton——而不是管理员得先建好的文件夹。

关键决策 · 04

把没人演示的状态也画出来

选择

每个表单的空、已填、报错与禁用状态都画齐——包括在密码被写错之前就先写明的规则。

放弃

只交顺利路径，其余留给开发去发明。

原因

报错状态是产品要么解释自己、要么责怪用户的地方。不画，就等于让别人在赶工时替你决定，而那时被选中的总是最快的做法，不是最体贴的。

依据

注册页在勾选条款之前一直禁用按钮——表单先拒绝，而不是等它失败。

登录与注册的空、已填与报错状态 — 登录与注册的每一种状态：空、已填，以及每条校验失败都写在引发它的输入框正下方，而不是页面顶部的一条横幅里。

Laytly 账户页：重设密码、通知偏好与注销账户 — 账户相关的部分，包括演示会跳过的那些——完整的重设密码流程、细到单个开关的通知偏好，以及在页面上与“保存修改”同等分量的“注销账户”。

关键决策 · 05

用扫码加好友，而不是敲号码

选择

个人二维码作为加好友的第一路径，按姓名或号码搜索保留为备选。

放弃

把手机号查找当作主要入口。

原因

加好友通常发生在两个人都在场的时候。举起一个码，就省掉了两人互报数字、其中一个听错的那一步。

依据

备选路径不是摆设：256 个名字，带 A–Z 索引，可按姓名或号码搜索。

Connect 标签页：个人二维码、扫码与好友列表 — “我的二维码”与“扫描二维码”合成一个切换，复制、分享、保存就放在码本身上。256 人的好友列表仍然只隔一次点击，留给所有用老办法加进来的人。

成果

Laytly 引导页：安全、二维码连接与云端图库 — 引导页按重要性顺序给出三个承诺：对话是私密的、连接只要两秒、图库在云端而不是手机里。

Laytly 聊天列表、联系人资料与建群 — 聊天列表按未读、群组、收藏、归档筛选，并为这么长的列表准备了多选——已读、归档、删除——联系人资料则直接打开你们之间交换过的媒体。

购物作为对话里的第三个标签页，含购物车与结算 — 购物是对话里的第三个标签页，于是推荐和结算发生在同一条会话里，而不是跳出去一个链接、再截图回来。

如果重做

设计系统我建得比应该的时间晚。等它存在时，需要处理的已经是既成的不一致，而不是提前避免。下一个产品，我会在第二个页面就把 token 定下来，而不是第二十个。