Introduction
为@Port 的整套网页端产品进行设计迭代
包括UI设计,用户流程,信息架构等
为@Port 的整套网页端产品进行设计迭代
包括UI设计,用户流程,信息架构等
产品
WEB
B/C
WEB
B/C
团队
PM*1
UIUX*1
市场*1
工程师*2
Product
Port 是一款基于浏览器的线上音视频咨询服务平台, 面向具有内容影响力的创作者（B 端）和其粉丝/关注者（C 端）提供一对一咨询服务。
创作者可以在平台上创建自己的主页展示服务内容, 并通过实时通话获得收入。许多 C 端用户往往是通过创作者的 SNS 账号进入 Port, 希望获得更具私人化与情感支持价值的咨询体验。
Port 是一款基于浏览器的线上音视频咨询服务平台, 面向具有内容影响力的创作者（B 端）和其粉丝/关注者（C 端）提供一对一咨询服务。
创作者可以在平台上创建自己的主页展示服务内容, 并通过实时通话获得收入。许多 C 端用户往往是通过创作者的 SNS 账号进入 Port, 希望获得更具私人化与情感支持价值的咨询体验。
Challenge
我们对 Port 的整体界面逻辑、信息结构、信任传递节点与关键转化路径进行了系统化的体验重设计，目标是提升咨询转化率、增强平台的可持续增长能力，并构建创作者与用户之间更自然的服务闭环。
我们对 Port 的整体界面逻辑、信息结构、信任传递节点与关键转化路径进行了系统化的体验重设计，目标是提升咨询转化率、增强平台的可持续增长能力，并构建创作者与用户之间更自然的服务闭环。
尽管创作者自带粉丝流量, 但我们观察到咨询意愿明确的用户大量流失于平台浏览和注册阶段。用户在进入创作者主页后, 并未顺利完成预约和注册, 导致咨询转化率明显低于预期。
尽管创作者自带粉丝流量, 但我们观察到咨询意愿明确的用户大量流失于平台浏览和注册阶段。用户在进入创作者主页后, 并未顺利完成预约和注册, 导致咨询转化率明显低于预期。
Solution / 01
重构创作者主页信息层级架构,用户获取信息效率大幅提高, 关键信息一目了然, 通话转化率提高8%.
重构创作者主页信息层级架构,用户获取信息效率大幅提高, 关键信息一目了然, 通话转化率提高8%.
改版前, 首页信息层级混乱, 成为用户在关键决策点放弃的主要原因.改版后, 用户对网站信任感明显提升(来源于创作者访谈).
改版前, 首页信息层级混乱, 成为用户在关键决策点放弃的主要原因.改版后, 用户对网站信任感明显提升(来源于创作者访谈).
改版前
信息归类失衡
平台介绍与用户功能混杂在一起，未登录也显示“积分/消息”，造成定位与权限感混乱。
CTA按钮缺乏安全感
底部通话按钮常亮且文案模糊，用户不确定点击后会发生什么，反而不敢行动。
关键信息被淹没
用户最关心的价格被埋在文本中，缺乏突出展示，导致价值认知不足。
Design Token
字体
Hiragino Kaku Gothic Pro
Aa
Netural
Primary
Others
Solution / 02
我们借助视点热力图等分析, 将注册页面的输入成本减少了70%, 并根据用户与创作者的不同需求设计引导路径,上线后注册完成率提升200%.
我们借助视点热力图等分析, 将注册页面的输入成本减少了70%, 并根据用户与创作者的不同需求设计引导路径,上线后注册完成率提升200%.
改版前，注册时需要在一个页面输入包括手机/邮箱/支付等在内的10+个信息，导致用户产生厌烦和不安的情绪。
改版前，注册时需要在一个页面输入包括手机/邮箱/支付等在内的10+个信息，导致用户产生厌烦和不安的情绪。
在第一版完成后，我们利用注意力热力图进行分析后发现，页面元素过多导致用户对于核心要素的注意力分散。因此我们简化了界面结构，移除了标题并弱化了补充说明，使用户的视线能更集中地停留在最重要的三个要素——输入标题、1000积分赠送提示和注册按钮上。
在第一版完成后，我们利用注意力热力图进行分析后发现，页面元素过多导致用户对于核心要素的注意力分散。因此我们简化了界面结构，移除了标题并弱化了补充说明，使用户的视线能更集中地停留在最重要的三个要素——输入标题、1000积分赠送提示和注册按钮上。
After / 注册页面
在初版的注册流程中，用户完成注册后会直接进入首页，但对于首次来到平台的用户而言，这样的跳转缺乏指引，容易造成“我接下来应该做什么？”的迷茫感。
尤其是平台包含两类角色——创作者与一般用户——两者在完成注册后的需求完全不同，因此统一的跳转路径无法满足他们的启动流程。
为了让用户更顺利地进入服务体验，我为注册完成环节新增了开始使用页引导页，并对不同角色提供差异化的下一步动作引导。
在初版的注册流程中，用户完成注册后会直接进入首页，但对于首次来到平台的用户而言，这样的跳转缺乏指引，容易造成“我接下来应该做什么？”的迷茫感。
尤其是平台包含两类角色——创作者与一般用户——两者在完成注册后的需求完全不同，因此统一的跳转路径无法满足他们的启动流程。
为了让用户更顺利地进入服务体验，我为注册完成环节新增了开始使用页引导页，并对不同角色提供差异化的下一步动作引导。
创作者
创作者在注册后的首要任务并不是立即接单，而是“完善个人信息, 准备服务内容”。
引导页提供了明确的行动步骤，让创作者知道必须完成哪些事项才能开始正式接单。
创作者在注册后的首要任务并不是立即接单，而是“完善个人信息, 准备服务内容”。
引导页提供了明确的行动步骤，让创作者知道必须完成哪些事项才能开始正式接单。
一般用户
用户端的引导页主要围绕 “马上体验” 展开，让用户能在没有负担的情况下尝试通话功能。
用户端的引导页主要围绕 “马上体验” 展开，让用户能在没有负担的情况下尝试通话功能。
Solution / 03
我们重新梳理了创作者设置页面的逻辑结构，并将关键设置前置，使创作者在进入页面时即可清晰理解需要完成的步骤。通过结构与层级的优化，关键设置完成率提升了11%，创作者能够更顺畅地完成服务准备并开始提供咨询服务。
我们重新梳理了创作者设置页面的逻辑结构，并将关键设置前置，使创作者在进入页面时即可清晰理解需要完成的步骤。通过结构与层级的优化，关键设置完成率提升了11%，创作者能够更顺畅地完成服务准备并开始提供咨询服务。
在原有的创作者设置流程中，用户需要通过多次页面跳转与滚动查找目标设置，整体结构较为分散。同时，开始提供服务所必须完成的设置项隐藏在次级菜单中，使首次使用的创作者难以判断优先操作。
优化后，设置页面采用分页式导航结构，并按照功能类别进行分组，使创作者能够更快定位需要调整的内容。同时，将“必须完成的设置项”提升至一级视图，在进入页面时即可被清晰识别，从而降低查找与确认成本，让首次使用的引导更加明确。
在原有的创作者设置流程中，用户需要通过多次页面跳转与滚动查找目标设置，整体结构较为分散。同时，开始提供服务所必须完成的设置项隐藏在次级菜单中，使首次使用的创作者难以判断优先操作。
优化后，设置页面采用分页式导航结构，并按照功能类别进行分组，使创作者能够更快定位需要调整的内容。同时，将“必须完成的设置项”提升至一级视图，在进入页面时即可被清晰识别，从而降低查找与确认成本，让首次使用的引导更加明确。
改版前
竖向跳转结构导致操作路径过长，影响移动端体验
设置入口以大量的一级菜单堆叠呈现，在移动端有限的屏幕中，这种纵向跳转结构使得用户需要频繁切换页面，流程碎片化，效率较低。
设置入口以大量的一级菜单堆叠呈现，在移动端有限的屏幕中，这种纵向跳转结构使得用户需要频繁切换页面，流程碎片化，效率较低。
设置入口以大量的一级菜单堆叠呈现，在移动端有限的屏幕中，这种纵向跳转结构使得用户需要频繁切换页面，流程碎片化，效率较低。
「必须」设置项隐藏在次级菜单中，无法迅速判断优先任务
用户需要逐一点击滑动屏幕才能发现哪些项目必须完成。对于首次使用的服务者而言，很难在第一时间理解“什么是必须完成的、什么是可以之后再做的”，从而影响上手速度。
用户需要逐一点击滑动屏幕才能发现哪些项目必须完成。对于首次使用的服务者而言，很难在第一时间理解“什么是必须完成的、什么是可以之后再做的”，从而影响上手速度。
改版后
优化后的分页式导航结构方便创作者无需反复上下滑动查找目标设置，可直接定位到所需页面，使整体操作节奏更加清晰。
同时将「必须」的设置项从次级页面前置到一级入口，使创作者在首次进入设置页时即可明确优先事项。这一调整显著改善了新用户的理解成本，首次进入后完成关键设置的创作者占比提升约11% ，减少了因“不知道先做什么”而产生的中断与流失。
优化后的分页式导航结构方便创作者无需反复上下滑动查找目标设置，可直接定位到所需页面，使整体操作节奏更加清晰。
同时将「必须」的设置项从次级页面前置到一级入口，使创作者在首次进入设置页时即可明确优先事项。这一调整显著改善了新用户的理解成本，首次进入后完成关键设置的创作者占比提升约11% ，减少了因“不知道先做什么”而产生的中断与流失。
