品牌故事

一套入口跑了十年,我们为什么改得这么慢

JDB 在 2016 年上线时只有一页入口,今天电脑端有 8 个一级栏目,手机端把日常用得最多的三个入口固定在首屏。这么多年里每动一次版式,我们先问的都是同一句:老用户下次打开,还找得到原来的位置吗?

从一页入口,走到两套方案并行

下面这些节点按时间排开,每一站说清当时改了什么、为什么这么改,以及改完之后大家是顺手还是别扭。

早期单页入口的版式复刻示意,呈现当时只有一列内容的简洁结构
早期单页入口 · 版式复刻示意
共 6 个节点
  1. 2016
    [2016·01]

    只有一页入口的起点

    平台刚上线时就是一个单页入口,能走的路径非常基础。第一批用户要记住的只有一条地址,找入口这件事几乎不需要学习。

    展开这一条档案

    当时的页面按 1024 像素宽度设计,内容只有一列,所有说明都写在同一个页面里,也还没有账号体系的分层。

  2. 栏目拓展期
    [阶段·02]

    栏目一层层加上来

    电脑端的一级栏目从最初的一页,逐步扩到今天的 8 个,服务、动态、帮助、合作依次补齐。每加一个栏目,原有入口的叫法和图标都保持不动。

    展开这一条档案

    栏目增加的同时,说明文字也在同步写:注册、下载、入口查找、设备适配这四类问题的图文步骤,就是在这个阶段慢慢成型的。

  3. 2023
    [2023·03]

    第一轮配色与无障碍自查

    这一年做了一次无障碍与色彩对比度自查,按钮和链接的配色按结果做了调整。幅度不大,却为后面那次整体改版攒下了依据。

  4. 2024
    [2024·04]

    第二轮自查,文档同步补齐

    第二次自查把重点放在键盘操作和把字号放大之后的显示效果上。同期帮助文档补齐到 240 余条图文步骤,四类常见问题都能查到对应做法。

  5. 2024 年 6 月
    [2024·06]

    整体改版,两套方案并排上线

    电脑端保留完整栏目,手机端把日常使用频率最高的三个入口固定在首屏,两套方案共用同一套账号体系与同一份内容。改版说明与旧版对照长期保留在帮助中心。

    展开这一条档案

    老用户不用重新学一遍:三个固定入口在两端使用同一套图标、同一套措辞。新用户按三步走完就能正常使用——填写基本信息、完成验证、设置常用入口。

  6. 现在
    [现在·06]

    每周更新,按季归档

    动态内容保持每周 2 到 3 条更新,改版与版本类内容按季度归档。回访用户占比约 57%,他们的意见决定了下一轮先改哪里。

两套方案是怎么定下来的

改版前我们列过好几条路,最后留下来的和一开始想的不太一样。把当时的想法摊开对照,你能看清我们更在意什么。

当时舍弃的

  • 两端共用一套版式

    省事,但手机上要滑很久才能碰到常用入口,电脑上又白白空掉一大片。

  • 借改版重排入口顺序

    页面看起来更新了,代价是老用户攒了几年的手指记忆全部作废。

  • 新版上线后收起旧版对照

    界面是干净了,可老用户想回头查自己用过的那一版,就再没地方可查。

最终保留的

  • 电脑端与手机端各走一套

    电脑端铺开完整栏目,手机端把三个高频入口钉在首屏,两端共用同一份内容。

  • 名称、图标、顺序都不动

    改版只换外衣不换位置,老用户下次打开还是那几步,跨设备也认得出。

  • 改版说明与旧版对照长期可查

    2024 年 6 月的变更说明和旧版版式一直留着,想比对随时能翻到。

68%

使用手机端访问的比例约为 68%,三个固定入口等于帮大多数人省掉一次翻找;而剩下在电脑端查栏目、对版本的人,需要的是更全的目录。两条需求都真实存在,砍掉任何一条都会有人不方便,所以我们让两套方案并行。

两种入口方案并排对照的版式示意,两侧分别标有评审批注痕迹
改版评审稿 · 方案并列对照

谁在维护这些入口

入口背后有三个小组在盯,加起来 26 人:一个管界面在不同设备上的表现,一个管说明写得够不够细,一个管内容更新的节奏。

[组·01]

界面适配组

跟进主流浏览器与系统的近三个大版本。电脑端首屏加载控制在 1.5 秒以内;手机端安装包约 38MB,以 Android 8.0、iOS 13 为最低支持线。

哪台设备上显示不对,先由这一组确认问题出在版式还是环境。

[组·02]

帮助文档组

维护帮助中心 240 余条图文步骤,覆盖注册、下载、入口查找、设备适配。收到一类新问题,先补步骤,再判断要不要连界面一起改。

[组·03]

动态编辑组

保持每周 2 到 3 条更新,改版与版本类内容按季度归档,并把回访里听到的原话整理成下一轮的改动清单。

三个维护小组的更新节奏信息图,按每周与每季度分层展示各自负责的事项
更新节奏 · 按周与按季分层

改完之后,他们说了什么

每次大改动之后我们会挑一批人回访,问的都是很具体的事:还找得到吗,说明看得懂吗,跨设备用着顺不顺。

  • 用了五年以上的老用户

    “改版那天我打开,位置和以前一样,图标还是一眼认得出来,不用重新找一遍。”

  • 第一次来的新用户

    “跟着注册三步做完就去下载了,第二天再打开知道该点哪儿。”

  • 常在两种设备之间切换的人

    “白天在电脑上查栏目,晚上在手机上还是那三个入口,两边的叫法一样,不用在心里换算。”

  • 渠道与技术方向的合作方

    “对接清单列得细,准备材料不用来回问第二遍。”

三件我们一直没松手的事

  1. [01]

    入口延续

    任何一次改版都不改变既有入口的功能与位置顺序。新版本可以重新排布视觉,但入口名称、图标语义与相对位置全部沿用。

  2. [02]

    步骤写全

    注册、下载、入口查找、设备适配四类问题都配图文步骤。帮助内容平均停留时长约 3 分 20 秒,说明大家确实是照着做的,所以我们写得比说得多。

  3. [03]

    改版留痕

    每次改动的说明与旧版对照都归档保留,版本类内容按季度整理。你翻得到自己用过的那一版长什么样,也看得到这次为什么改。

未来一年准备做什么

排在前面的都是会直接影响你使用手感的事,做完了会在动态与故事里逐条说明。

  • [01]

    适配更多设备

    在 Android 8.0、iOS 13 这条基线之上继续往上覆盖新系统与新尺寸的屏幕,减少拉伸与错位。

  • [02]

    补无障碍细节

    继续打磨键盘操作、对比度与字号放大后的显示效果,让不同视力条件的用户都能顺利找到入口。

  • [03]

    把文档做成能查的体系

    给现有的 240 余条图文步骤加上统一索引与关联跳转,遇到问题时能沿着一条线走到底,而不是翻好几个页面。

想亲自试试两套方案怎么用

先看电脑端与手机端的入口差别,遇到具体问题再进帮助中心按步骤走一遍。