跳至主要内容
BBIN主页 把入口折成一条顺手路径

品牌历程 · BRAND TIMELINE

六个版本,
把入口折成一条顺手的路

从一张按使用频率排序的入口清单,到今天这条可以横向滑动的路径带,BBIN主页 走过了六个公开版本。每次改动都围绕同一件事:让你在手机上更快到达想去的栏目,碰上问题也能当场把话递到我们这边。

  • 6 个公开版本,当前为 V6
  • 4 个主题簇,12 个二级分组
  • 120 条常见说明,按周补充

先有一张清单,才有后面的路径

最早的一版只做了一件事:把散在各处的栏目收进一页,按真实使用频率排序,最常去的放在最前面。访客当时反馈最多的一句话是“找不到”,而不是“内容太少”,这张清单就是冲着这句话做的。

清单越接越长,一屏放不下,我们才把它拆成分组索引,每组配一句摘要,让你先看清这一组大概有什么,再决定点进去哪一个。这个习惯一直留到今天。

  • 01

    集中入口

    把分散的页面收到一处,不用记网址,也不用翻历史记录。

  • 02

    栏目索引

    长清单拆成分组,每组给一句摘要,点之前心里有数。

  • 03

    少绕路

    常用栏目尽早在首屏出现,少点两次也能到。

六个版本,每次只改一件要紧的事

左侧是版本轴,点任意一个版本号可以直接跳到那张展签;每张展签可以展开,看看那一版到底动了什么、你会在哪里感觉到。

深海蓝背景上由折线逐渐变为平滑路径的抽象路线图
从折线到曲线:入口数量没变,走法变短了。
V1 把散落的入口收进一页 内容

第一版只有一页清单,顺序按后台看到的使用频次排。它解决的问题很朴素:你不必再问别人“那个页面在哪儿”。

V2 长清单拆成二级主题 内容

入口涨到一屏放不下之后,我们开始分组,每组给一句摘要。你在列表上扫一眼,就知道该往下翻还是直接点。

V3 按小屏重排一遍 路径

这一版专门针对 360–430 像素宽度的手机调布局,按钮触控区放大到 44 像素以上,单手点也不容易点错。

V4 摘要先扫,展开再看 内容

说明书目从“一路铺开”改成分成两级:先是一张摘要卡,需要细节的时候再展开。屏幕不用一次堆满文字,你也不会漏掉后面的条目。

V5 反馈入口挪到手边 反馈

以前反馈入口藏在页脚,很多人翻到底才想起来要说什么。这一版把它做成右下角常驻的悬浮键,看到问题当场就能提。

V6 常用入口压成一条路径带 路径

当前版本把最常用的几个入口压缩成一条可横向滑动的路径带,最多三步就能到目标栏目;反馈入口也从角落浮起,直接落在你的拇指附近。这一版的重点不是加东西,是把已有的东西挪到更顺手的位置。

三次动了路线本身的调整

版本号写的是时间,真正改变体验的是下面这三件事。它们不是同时发生的,但都指向同一个结果:同样的内容,走的路更短。

01

栏目合并:重复的入口收成一个

早期有几个栏目内容互相重叠,你可能点了两次才发现是同一件事。我们把重叠部分合并,只留一个入口,并在原位置补一句指向说明,旧习惯不会直接撞墙。

02

横向路径带:一滑就到

竖向列表在小屏上要一直往下翻。路径带改成横向滑动后,一屏能放下的常用入口多了,滑动的方向也和拇指动作一致,选中项用青色描边标出来,位置一眼能认。

03

反馈就近:问题在哪,入口就在哪

反馈入口跟着画面走,不再固定在页脚。你无论在栏目页还是说明页,遇到显示异常或者登不上,都可以就地展开提交,不用先退回到某一页再找按钮。

两层手机界面局部叠放,显示折叠卡片展开前后的状态对比,画面上没有真实个人信息
折叠卡片:外层只给摘要和编号,展开才给步骤。

三条线一起维持这条路径

页面能不能一直好用,取决于后面有没有人持续收、持续改。我们的分工很实在:内容线整理说明条目,前端体验线管路径和折叠结构,用户支持线接住反馈邮件。三条线每周碰一次,谁的问题谁改。

  • 内容线

    按“问题—步骤—结果”整理说明,平均每条给出 2–4 个可执行步骤,写完自己先照着走一遍。

  • 前端体验线

    负责路径带、折叠卡片和小屏布局,每周把入口索引重新排一次,过时的位置及时撤下。

  • 用户支持线

    工作日 9:00–18:00 跟进客服邮箱里的来信,每月把高频问题汇总一次,交回内容线补进说明。

RHYTHM

  • 每周更新说明条目与入口索引
  • 每月整理高频反馈,归入帮助中心
  • 每季度复核说明条目,替换过时步骤

说明条目从几条长到一百多条

最初只有几页零散的常见问题,问题一多就堆在同一页里,翻起来费劲。我们把它们按主题拆开,逐渐长成四个主题簇、十二个二级分组,加起来约 120 条说明。

每条说明都带编号,规则是主题字母加两位序号,你在反馈邮件里直接写编号,我们就能对上你看到的那一条。条目按“问题—步骤—结果”三段写,先告诉你会得到什么,再讲怎么点。

  • 入门路径
  • 导航与索引
  • 设备与登录
  • 反馈与支持

去帮助中心找条目

多张带编号的说明卡片以错位方式堆叠,电光青描边,抽象信息图风格
带编号的说明卡,错位堆叠,每张对应一个可执行步骤。

接下来继续做减法

下一阶段不会加更多板块,而是把已有的再压短一点:小屏上的路径带继续收窄、折叠阅读再少一层、反馈提交后的状态提示说得更明白。

  1. 01

    让小屏路径带在同样宽度里放下更多常用入口,滑动次数再少一些。

  2. 02

    把说明条目的展开层级再简化,多数问题一次展开就能看到结论。

  3. 03

    反馈提交后的状态提示写得更具体,让你知道下一步等什么、多久有回音。

接着走

想看清整张地图,还是先解决眼前这件事

反馈问题