美国成年人
16%Good things start with shared interests.
Side by Side找到同频的人，让连接自然发生。
从喜欢同一杯咖啡，到分享下一段旅程。
围绕共同兴趣展开的移动端社交体验。
Real conversations.
THE CONCEPT / 设计概念
有共同话题，
才更容易靠近。
Side by Side 围绕摄影、咖啡、艺术与户外等日常兴趣，连接内容浏览、圈子参与和好友交流。通过共同爱好建立认识彼此的理由，再用动态和对话延续关系。
这组设计包含 11 个核心页面。案例按照用户从表达偏好、发现同好、参与社区到维持联系的路径，呈现每个页面的功能与设计逻辑。
BEFORE THE PIXELS / 设计之前
先理解连接，
再设计相遇。
从公开研究出发，把“想认识朋友”拆成具体的需求、情境与行动。以下内容整理自 Figma 原稿，区分研究事实、设计推论与待验证假设。
01 / DESK RESEARCH
连接的需求，藏在日常生活里。
公开研究 · 非本项目用户样本年龄差异 / 相同问题口径
22%vs9%
来源：Pew Research Center · 2025-01-16 ↗；6,204 名美国成年人，调查期 2024-09-03 至 09-15。
02 / COMPETITIVE LANDSCAPE
让内容发现，与认识朋友相连。
对照官方公开机制寻找设计机会，不对未经实测的体验打分。
Meetup
围绕共同兴趣组织群组与线下活动，为认识彼此提供具体情境。
本案回应
以圈子和日常内容承接兴趣，让了解先于联系。
Bumble BFF
在个人资料中添加兴趣标签，用结构化信息表达偏好。
本案回应
让共同点贯穿推荐卡、个人主页与聊天开场。
内容发现 × 兴趣表达 × 渐进交流
这是设计方向，并非已验证的竞争优势。公开来源见本节末尾。
03 / PEOPLE & NEEDS
不同的人，需要不同的连接节奏。
假设型画像 · 虚构人物，非真实受访者林悦 26 岁 · 新城市探索者
刚搬到新城市，周末想逛咖啡店、拍照片，却缺少同行伙伴。
- 目标
- 找到可以一起参与日常活动的朋友。
- 顾虑
- 陌生人资料太少，直接私信显得突兀。
- 设计关注
- 共同兴趣、完整介绍、清晰的交流边界。
陈舟 30 岁 · 兴趣参与者
工作节奏固定，业余喜欢摄影。愿意分享作品，但不急于主动交友。
- 目标
- 从交流内容开始，逐步熟悉同好。
- 顾虑
- 强匹配流程带来压力，内容质量难判断。
- 设计关注
- 圈子内容、评论互动、个人动态。
不知道从哪里开始
兴趣选择、分类与圈子推荐
待验证：兴趣分类是否过于宽泛？仅凭照片，难以判断是否同频
共同标签、动态与个人介绍
待验证：哪些信息会影响主动交流？建立连接，却不知道说什么
共同兴趣提示与内容分享
待验证：话题提示能否帮助组织第一句话？需求与痛点来自场景推演和公开资料，尚未开展真实用户访谈。
04 / EXPERIENCE JOURNEY
每一步，都为下一步提供线索。
假设体验路径 · 待实际使用验证- 01
选择兴趣
表达偏好图像化选项与选中反馈
- 02
浏览圈子
找到相关内容分类与推荐分层
- 03
了解对方
判断共同点动态、介绍与兴趣标签
- 04
建立连接
明确交流边界清晰的操作与关系状态
- 05
持续对话
降低开场压力共同兴趣与内容分享
从内容认识人
圈子 → 动态 → 个人主页 → 联系
直接发现同好
推荐 → 喜欢 → 建立连接 → 聊天
05 / WHAT COMES NEXT
好的设计，需要留下被验证的空间。
当前交付是概念界面与组件体系，不是已验证的增长结果。
5–8 人任务测试
计划招募目标场景用户，完成兴趣选择、找圈子、判断共同点和开始交流；记录完成率、误触、犹豫位置与任务后理解。
计划样本，尚未开展。从观察中寻找答案
兴趣选择是否阻碍进入？首页与探索的职责是否清晰？共同兴趣提示能否帮助组织第一句话？
先建立基线，不预设增长比例。边界与异常状态
统一相互喜欢与发送请求的联系规则；补充举报、屏蔽、隐私治理，以及空白、错误、加载与无结果状态。
不以消息数量单独代表连接质量。VISUAL LANGUAGE
轻盈的界面，
鲜活的生活。
蓝紫色用于主要操作和选中状态，浅色背景让照片与人物成为视觉中心。圆角容器与细线图标贯穿各页面，保持亲近而清晰的界面节奏。
Connection#5754FF
Softness#EFEDFF
Clarity#0C1434
DISCOVER YOUR PEOPLE
从一个共同爱好，开始认识彼此。
兴趣成为探索的起点，也成为推荐的解释。通过个人偏好、内容圈子和好友卡片，让用户逐步找到愿意靠近的人。
01.1ONBOARDING
兴趣选择
用摄影、咖啡、艺术等图像化选项降低理解成本。步骤提示、已选数量和继续按钮共同交代进度；“以后可以修改”让偏好选择保持轻松。
01.2EXPLORE
✦ 悬停按钮查看设计思路 · 点击可固定展开
COMPONENT INSIGHT / 组件解读
发现好友，保留另一种探索方式
功能介绍浏览内容时，也可以主动寻找有共同兴趣的人。
为什么这样设计独立入口区分“找内容”和“找朋友”两种意图。两条路径并存，不要求所有人都用同一种节奏建立关系。
设计意图，实际效果仍需用户测试验证。探索
搜索覆盖兴趣、圈子和用户，兴趣标签提供快速筛选。发现好友入口与圈子推荐分区呈现，让找人和找内容两种意图都有明确去向。
01.3FIND FRIENDS
✦ 悬停按钮查看设计思路 · 点击可固定展开
COMPONENT INSIGHT / 组件解读
喜欢，让连接意愿更明确
功能介绍在了解照片、介绍与共同兴趣之后，表达进一步认识对方的意愿。
为什么这样设计用居中的蓝紫色圆形按钮建立操作主次，与两侧跳过、撤销区分；把连接规则放在附近，让行动之前的预期更清晰。
设计意图，实际效果仍需用户测试验证。发现好友
人物卡片先呈现共同兴趣，再展示介绍和标签，为喜欢提供具体理由。跳过、喜欢与撤销形成清晰的决策区；双方喜欢后才可聊天的提示说明连接规则。
A PLACE TO BELONG
把日常的小发现，放进共同的圈子。
首页连接内容与兴趣，圈子承接持续参与。照片、话题和评论让人与人的联系拥有具体的情境。
02.1HOME FEED
首页
“为你推荐”和“关注”区分两种浏览方式，兴趣圈子与动态内容相互衔接。作者、圈子、发布时间和互动信息形成稳定的阅读层级，让用户从一张照片走向一个人或一个圈子。
02.2CIRCLE
✦ 悬停按钮查看设计思路 · 点击可固定展开
COMPONENT INSIGHT / 组件解读
加入圈子，从围观到参与
功能介绍将对摄影等主题的兴趣，转化为持续参与圈子的入口。
为什么这样设计宽按钮提供明确的视觉落点，放在圈子介绍之后，让用户先了解主题再决定加入，减少在内容与操作之间寻找入口的成本。
设计意图，实际效果仍需用户测试验证。圈子详情
封面与圈名建立主题印象，成员信息与简介帮助判断是否合适。加入按钮集中表达主要动作，社区规则位于显眼位置，动态与关于分栏支持进一步了解。
02.3POST & COMMENTS
动态详情
保留作者和圈子来源，将图片、正文与评论组成完整的内容上下文。关注入口承接对作者的兴趣，评论中的回复关系与底部输入框支持从观看转向参与。
SHOW A LITTLE OF YOU
分享你的日常，也留下你的个性。
表达不只发生在发布的一刻。内容、兴趣与个人主页共同构成可被认识的自我介绍。
03.1CREATE POST
✦ 悬停按钮查看设计思路 · 点击可固定展开
COMPONENT INSIGHT / 组件解读
发布，让表达有清晰的终点
功能介绍完成内容编辑后，用明确的主要操作提交动态。
为什么这样设计将发布固定在页面右上角，与正文编辑区区分；用高对比颜色突出完成动作，同时由页面中的圈子与可见范围说明内容去向。
设计意图，实际效果仍需用户测试验证。发布动态
正文和照片预览占据主要空间，缩略图与数量提示帮助管理素材。发布圈子和可见范围独立列出，在发布前明确“发到哪里”和“谁能看见”。
03.2PUBLIC PROFILE
他人主页
头像、介绍、城市与作品让用户逐步了解对方，共同兴趣则补充建立联系的理由。关注和发送请求区分持续看内容与进一步认识两种关系意图。
03.3MY PROFILE
我的主页
封面、头像与个人介绍建立身份区域，编辑资料和兴趣入口方便维护自我表达。动态、收藏与圈子分层整理内容；收藏旁的锁形标识提示其私密属性。
KEEP THE CONVERSATION GOING
从“我们都喜欢”，到“下次一起去”。
连接成功只是开始。消息页帮助找到需要回应的人，聊天页让共同兴趣自然延续为具体的话题。
04.1INBOX
消息
新连接以头像横排提醒，消息列表用最后一条内容、时间和未读数量帮助判断优先级。消息请求独立收纳，让已有对话与新的联系保持清晰边界。
04.2CONVERSATION
✦ 悬停按钮查看设计思路 · 点击可固定展开
COMPONENT INSIGHT / 组件解读
发送，把共同兴趣延续为交流
功能介绍将输入的想法带入对话，让连接变成持续的交流。
为什么这样设计发送按钮紧邻输入区域，缩短编辑与提交之间的操作距离。共同兴趣提示负责提供话题，发送按钮只承载清晰、单一的行动。
设计意图，实际效果仍需用户测试验证。聊天
共同兴趣提示和连接成功卡片为第一句话提供背景。双方气泡用颜色与位置区分，照片可以直接进入对话，让交流从抽象问候落到共同的生活体验。
SIDE BY SIDE
每一段连接，
都从一点共鸣开始。
共同兴趣是认识的起点，真实的日常内容让彼此更具体。
用清晰的路径，把探索、表达与交流连接成连续的体验。