首页信息框架
这份报告整合了市场竞品和自研三版 demo 的发现,给出首页应该保留的信息、这些信息的组织方式,以及下一步设计要遵循的交互骨架,为接下来的首页设计打基础。
内容结构
| 市场发现 | 市场上的竞品首页放了什么、不放什么? | 三种结构流派 + 功能盘点 + 目标场景 |
|---|---|---|
| 自研发现 | 我们自己的三版 demo 探索过什么? | 三版结构骨架 + 功能盘点 + 目标场景 |
| 决策方向 | 结合两边证据和既定方向,每一项信息放不放? | 逐条判断,冲突项明确标出 |
市场发现
基于 8 家竞品截图走查,8 家首页可以归成三种结构流派——地图仪表盘结构(NordVPN、ProtonVPN、ExpressVPN)、列表合并结构(Windscribe、Surfshark)、极简按钮结构(VPN Master、VPN Super、Hotspot Shield)。三类结构的复杂度呈明显梯度:地图仪表盘结构 > 列表合并结构 > 极简按钮结构,这更像是"首页要不要多做数据/信任类信息"的产品哲学分歧,不是技术选型差异。
方向1-地图仪表盘结构
NordVPN、ProtonVPN、ExpressVPN。首页视觉主体都是地图,深度不同——NordVPN 需展开全屏才能点选切换服务器;ProtonVPN 的地图纯装饰、不可点;ExpressVPN 是真实地理地图,能点开 IP 详情弹层,但没有证据显示能直接点地图切服务器。三家都把统计或隐私增值信息放进首页下滑区域,普遍首页信息量更大、更"仪表盘化"。
功能盘点
三家都有明确文字状态——NordVPN"Secured"、ProtonVPN"您没有受到保护"/"保护中"、ExpressVPN"Not Protected"/"Protected丨00:00:05"+额外"Connected!"横幅。
三家都是独立大按钮,形态各异:NordVPN 长条"Pause connection"、ProtonVPN 大圆角按钮、ExpressVPN 圆形电源+"Tap to connect"引导气泡。
三家都同时支持"智能选路"(Fastest/最快的国家/Fastest Location)和"具体城市"(Seattle/澳门/Hong Kong-2)。
形式不同:NordVPN 要先展开全屏地图才能点选;ProtonVPN 主要靠底部"国家"tab;ExpressVPN 是"Change"按钮+定位图钉。
分裂:NordVPN 完全不展示;ProtonVPN 仅未连接态明文,连接后隐藏;ExpressVPN 未连接/已连接都明文,且可刷新换 IP。
分布不均:ExpressVPN 首页内联展示;NordVPN 只有周维度日均,不是本次连接时长;ProtonVPN 首页无,详情弹层才有。
三家都做,但类型不同:NordVPN 是"Statistics"日均+周柱状图、ProtonVPN 是广告/跟踪器拦截+流量节省、ExpressVPN 是 Time Protected 周柱状图+Protocol 卡。
三家都有:NordVPN"Get your dedicated IP"、ProtonVPN"探索 VPN Plus"、ExpressVPN"邀请好友"推广卡。
目标场景
地图仪表盘结构整体面向"愿意在首页多看一层数据、把首页当仪表盘"的用户。
三家统一把统计/隐私增值信息放进首页下滑区域,佐证"这个 VPN 值不值",但说服策略不同——NordVPN 假设用户是重度习惯用户,把"断开"包装成"暂停"、放搜索框+可点地图鼓励频繁换节点;ProtonVPN 面向高隐私意识用户,先用明文 IP 制造暴露感,再用"广告/跟踪器已拦截"给出成果感,是"先施压、再论功"两段式;ExpressVPN 面向愿意为体验精致感付费的用户,首页可自定义主题色,统计和协议信息做成对称卡片,兼顾个性化和数据可信度。
方向2-列表合并结构
Windscribe、Surfshark。首页没有独立大按钮,把"当前节点"和"完整服务器列表"直接合并成同一个可滚动页面。这两家的商业化提示也最强硬——Windscribe 的额度徽标常驱不可忽视,Surfshark 未连接时的订阅提示甚至不可关闭。Surfshark 还多了一层"折叠深度":悬浮状态卡能在收起小条和展开全屏详情之间拖拽切换。
功能盘点
两家都有,但形式更轻:Windscribe 是小药丸"关闭"/"开启",没有完整语句;Surfshark 是悬浮卡里的小字,不是通栏大字。
Windscribe 是纯图标圆形电源按钮;Surfshark 没有独立按钮,靠悬浮卡里的"快速连接"文字按钮完成——是三个流派里唯一没有独立连接按钮的产品。
两家都支持"智能选路"("最佳位置"/"速度最快的位置")和"具体城市"(Victoria/香港、纽约等)。
两家都没有独立的"切换"入口——服务器列表本身就铺在首页下方,滚动或搜索即可切换。
两家都明文展示:Windscribe 两态都明文;Surfshark 收起态没有,展开详情态才有。
Surfshark 收起态没有,展开详情态才有;Windscribe 截图未覆盖。
两家都不做——首页信息量集中在"节点本身",没有统计层。
两家是三个流派里最强硬的:Windscribe 的额度徽标常驱不可忽视;Surfshark 未连接时的订阅提示甚至不可关闭。
目标场景
两家共同指向"首页和选服务器合二为一"的假设——用户打开就是要挑服务器,不需要额外的"仪表盘"环节。
商业化姿态上两家都比地图仪表盘结构更激进,可能因为都有较强的免费/轻订阅用户基础,首页要承担更直接的转化任务。Windscribe 首页核心念头是"该省着用还是该升级",是唯一把"配额焦虑"当首页主打信息的产品;Surfshark 是唯一把"反诈骗"做成底部一级导航、和"VPN"平级的产品,定位已经超出网络层工具,想覆盖更广的日常数字安全场景。
方向3-极简按钮结构
VPN Master、VPN Super、Hotspot Shield。没有地图,也没合并列表,就是"大按钮 + 一到两行节点信息 + 一张推广卡"的最简形态。三家的推广卡都更直接指向具体转化场景(流媒体、无广告、加速),不是"信任建立"类的隐私故事。
功能盘点
三家都有,但语气差异大:VPN Master"暴露了!您的设备不受保护"是三个流派里最情绪化的文案;VPN Super 是唯一完全不用大字提示的产品,只用红/绿小圆点;Hotspot Shield 是顶部横幅"UNPROTECTED"/"PROTECTED"。
三家都是独立大按钮,VPN Master 两态用完全不同图形(地球→头盔面罩),是三个流派里唯一这么做的产品。
三家都支持"智能选路"(Auto/最快位置);"具体城市"这一档最弱——VPN Master 只到国家级(德国),VPN Super/Hotspot Shield 证据不足或只呈现国旗图标。
VPN Super 整行可点进选服务器页;VPN Master/Hotspot Shield 截图未覆盖到明确的"更换"按钮。
三家都不展示——是唯一一组全部不展示 IP 的流派。
三家首页都未见。
三家都没有,是信息量最少的一组;VPN Super 把协议选择(Auto/IKEv2/OpenVPN)做成首页横向 tab 是个例外,把本该藏进设置的技术选项直接摆上台面。
三家的推广卡都更直接指向具体转化场景:VPN Master"探索 Netflix/YouTube 专线"(流媒体导向)、VPN Super"续约提醒:无广告/超快速度/连10台设备"、Hotspot Shield 位置最突出(已连接后横幅压在保护提示上方)。
目标场景
三家共同指向"用户想要的是马上连上、别打扰我"的假设,首页信息量刻意做到最少。
转化策略各有侧重——VPN Master 假设用户容易"手滑"断开保护,用更情绪化的警示文案和断开前的二次确认弹窗去阻止;VPN Super 假设目标用户里有相当一部分懂技术、会主动切协议,唯一把协议选择直接摆在首页当一级操作;Hotspot Shield 把"连接成功那一刻"当成最佳转化/评价索取时机,推广横幅和求好评弹层都卡在这个情绪高点。
自研发现
地球版
第一屏(暗色 hero 区)把"保护状态+位置/IP+地球背景+连接按钮"打包成一个不可拆的沉浸式单元;下方白色卡片区并列放了"节点卡"和"统计卡组(保护时长、协议)"——首页同时交代"连不连"和"连的效果如何",是三版里唯一的三层结构(状态层/操作层/结果层)。
雷达版
hero 区是"保护状态(含警示语 IP MAY LEAK)+雷达图(纯反馈式动效,不承载地理信息)+连接按钮";地理信息被下放进节点卡内部,变成"选节点"的辅助信息;首页没有统计/协议信息。
水波纹版
结构与雷达版几乎一致(状态+抽象动效在上,节点卡+地图+IP 在下,无统计层),区别只在 hero 区的隐喻内容(水波纹 vs 雷达图),且没有雷达版那句主动警示语。
雷达版与水波纹版的骨架高度重合,地球版是唯一一个多加了"结果层"的版本。
功能盘点
保护状态提示、连接开关、节点选择入口(两种类型)、连接时长/计时、底部导航(Home/Data/Help/Me)——三版全部具备,是三版内部的共识底线。差异集中在:嵌入式地图(地球版用大地球背景不可点,雷达版/水波纹版用卡片内小地图);流量/协议统计(仅地球版有);连接中过渡文案(地球版 CONNECTING…、水波纹版 Securing connection… +动效,雷达版未见真实过渡帧,只给了静态对比图)。
目标场景推断
基于功能取舍的推测,不是事实,标注了依据的具体功能点。
面向"需要被说服信任"的用户——把统计卡(已保护时长、协议)放进首页,且连接后把 IP 用星号打码,假设用户相对在意技术细节、需要首页就给出"证据"。
面向"任务导向、图省事"的用户——统计信息移出首页,地理信息降级为卡片内辅助信息,首页只留"开关+选节点",指向不想被数据分心、连上就走的目标场景。
IP MAY LEAK 是三版中唯一在未连接态主动制造焦虑感促使点击连接的文案,可能假设"用户对要不要连是犹豫的,需要被提醒风险才会行动"。
三版默认展示状态不完全对齐(地球版只看到"智能选路"态),更可能是截取的原型状态不同造成的,不下场景结论。
决策方向
结合市场发现、自研发现和既定方向,逐项做取舍判断。市场和自研分开摆,不糅合;市场基线和既定方向冲突时,直接标"冲突,需要拍板",不代替决定。
逐项判断
| 信息/功能 | 市场基线 | 自研共识 | 跟既定方向的关系 | 这次判断 |
|---|---|---|---|---|
| 保护状态提示 | 7/8 有明确文字状态 | 3/3 都有 | 一致,对应"当前保护状态",且方向鼓励强化 | 采纳,直接保留,可借机做得更有表现力 |
| 连接开关(独立大按钮) | 7/8 有独立大按钮 | 3/3 都有 | 一致,对应"可执行操作" | 采纳为核心操作。Surfshark 的"合并列表"打法仅 1/8 家验证过,记为备选 |
| 节点卡·智能选路 | 8/8 全部支持 | 3/3 都有 | 一致 | 采纳,两边都是满分基线 |
| 节点卡·具体城市/国家 | 至少 6/8 支持 | 3/3 都验证过 | 一致 | 采纳,两种节点类型都要留 |
| 切换节点入口 | 7/8 有(形式各异) | 3/3 都有 | 一致 | 采纳"入口必须存在",具体形式留给下一步发散 |
| 位置/IP 展示 | 分裂,5/8 明文、3/8 完全不展示,接近五五开 | 3/3 都有;地球版独有"连接后打码" | 不直接涉及,间接呼应"理解获得何种保护" | 不下强制结论,列为待你确认的判断题 |
| 连接时长/计时 | 分布不均 | 3/3 都有 | 一致,且既定方向明确要强化 | 采纳并重点投入 |
| 连接中过渡反馈 | 多家有独立文案/进度环 | 3/3 基本都有 | 一致,是既定方向最直接对应的一条 | 采纳并重点投入,下一步最值得花力气的点 |
| 嵌入式地图 | 只地图仪表盘结构 3/8 家有,深度不同 | 地球版/雷达版/水波纹版均为装饰性 | 间接呼应"图形/光效",非强制 | 不构成基线,可选视觉手法 |
| 首页统计信息 | 只地图仪表盘结构 3/8 家做 | 只地球版做 | 可归入"能力说明",但方向要求"收束" | 降级为可选项,取决于走"仪表盘型"还是"极简型"骨架 |
目标场景与首页信息架构方向
市场发现里"地图仪表盘结构"(NordVPN、ProtonVPN、ExpressVPN)的核心特征是:首页愿意多放一层数据,把首页当"证据展示台"。自研三版 demo(地球版/雷达版/水波纹版)本质上也是这个大类——都是"地图/抽象视觉 + 状态 + 操作 + 选节点"的骨架,不是列表合并、也不是极简按钮那两种。
但三版 demo 内部已经自己分了岔:地球版保留了完整的统计/协议层("结果层"),雷达版/水波纹版把这层去掉了,只剩状态+操作。这个分岔不是随意的,背后对应的是两种不同的"用户到底需要首页证明什么"的假设。所以接下来不是在三种市场流派间选,而是在"地图仪表盘结构"这一个大类里,把目标场景想清楚,再倒推信息架构。基于此提出三个方向,列为待确认的假设,不代替最终选择。
证据型仪表盘
- 目标场景
- 用户对"这个 VPN 值不值"有疑虑,需要首页当场给出数据证据才安心——贴近 ExpressVPN、NordVPN 的假设,也是地球版已经验证过的路线。
- 信息架构
- 保留统计/协议层作为常驻的"结果层",连接后 IP 可打码,兼顾证据感和隐私顾虑。首页始终是状态/操作/结果三层。
- 代价
- 信息密度最高,对"图省事"的用户不友好。
任务型仪表盘(精简仪表盘)
- 目标场景
- 用户已经默认信任产品,或对底层技术数据不敏感,打开 App 就是要连上、换节点,不需要额外的"仪表盘"环节——贴近雷达版/水波纹版已经验证过的路线。
- 信息架构
- 首页只做状态 + 操作 + 选节点三件事,不做统计层。警示语(IP MAY LEAK 这类)作为一个独立变量,可选保留用来提升未连接态的转化,不算作核心信息架构的一部分。
- 代价
- 放弃了"数据说服"这条路,依赖品牌信任或情绪文案去驱动连接。
状态相关的动态仪表盘
- 目标场景
- 同一个用户在"未连接"和"已连接"两种状态下,需要的信息深度其实不一样——没连的时候只想知道"能不能连、连哪",连上之后才关心"连的效果如何"。这是把地球版的三层结构和雷达/水波纹版的精简思路做了个折中,不是选边,是按状态分时展示。
- 信息架构
- 未连接态做精简(状态+操作+选节点,同"任务型仪表盘");已连接态才展开统计/协议层(同"证据型仪表盘"的"结果层"),作为连接后的即时反馈/奖励感。
- 代价
- 实现复杂度更高,需要两套布局节奏,但更贴合"信息该什么时候出现"这个更细的场景假设。