品牌使命

从 2019 年起,把入口和状态这两件事做深

MANBET 品牌门户自 2019 年起持续运营。来的人通常只想知道两件事:现在该点哪个按钮,点完之后自己在哪一步。 整个站点的栏目、提示与说明,都围绕这两个问题排布。

01 / 定位

入口分得清,后面的事才顺

一个门户最容易出问题的地方,往往不是功能少,而是几个入口叠在一起。访客在首屏停了半分钟,还没确定哪个按钮对应哪条路,后面写得再细的说明也帮不上忙。

所以 MANBET 把「打开」与「登录」固定成两条并列的通道,位置在任何一页都不变。第一次来的人按顺序走,熟悉的人直接跳到要用的那一条,中间不用再分辨。

通道之外,站点只保留必要的东西:换了设备之后去哪里看当前状态,显示不正常先查哪一项,出了问题交给谁跟进。这些话都写在对应的位置上,不让访客自己去翻。

换了一台电脑之后,人真正想知道的往往不是功能介绍,而是一句话:我现在的登录状态还在不在。

02 / 准则

三条准则,写下来也照着做

这三条不是对外喊的口号,而是我们排页面、写提示时先过一遍的三根线。它们决定了你看到的每一屏长什么样。

  1. 准则 01

    通道各归其位

    打开与登录在任何一页都停在同一个位置,不随栏目变化。认得一次,整站通用,不用重新找。

  2. 准则 03

    说明放在动作前面

    兼容提示和更新公告出现在需要它的位置之前,不压到页面最底下。先看一眼,很多弯路可以直接绕开。

03 / 历程

从 2019 年走到今天

这几年里改动最多的是界面细节,改得最少的是那两条通道所在的位置。下面几段是变化比较明显的几个节点。

三个由暗到亮递进的几何光点沿水平线排列,示意品牌门户几个阶段的关键变化
关键节点 / 2019 → 本季度
  1. 2019

    门户开始持续运营

    两条通道从第一版起就并列在首屏,没有收进二级菜单。

  2. 2023

    深色视觉规范 2.0 上线

    字阶、色板与网格一起收敛,界面从此有了统一的骨架。

  3. 2024 · 06

    电脑端兼容说明系统更新

    遇到显示异常的访客有了固定去处,说明改为按季度滚动修订。

  4. 每季度

    兼容回归与说明修订

    六类浏览器内核、三种屏幕宽度,按周期完整走一遍。

  5. 本季度

    仍在继续

    双通道与状态查看的走法保持不变,说明文字按实际反馈微调。

按住左右拖动,查看完整时间线

04 / 团队

这些问题背后是谁在接

客服团队 26 人,分三班轮值,工作日 9:00 到 18:00 都有人在线。多数咨询在 12 分钟内会有第一次回应;牵涉显示异常的,一般一个工作日内能给出定位结论。

服务范围以北京为中心,覆盖全国 26 个省份的中文用户。我们与三家浏览器兼容性测试服务商、两家内容分发服务商保持长期协作,遇到跨内核的疑难情况可以一起排查。

如果你不确定自己属于哪一类问题,直接把现象说清楚就行,不用先分好类。分班表排在那里,就是为了让当天的问题当天有人接手。

深色背景上由细线构成的节点网格,部分节点以青色高亮,示意分班值守的客服与外部协作方
服务网络 / 三班值守
26 人 客服团队规模
12 分钟 平均首次响应
1 个工作日 兼容问题定位结论
26 个省份 中文用户服务覆盖

05 / 兼容

每季度过一遍主流内核

通道面板每季度做一次兼容性回归,覆盖六类主流浏览器内核与三种屏幕宽度区间。这项工作不是出了事才做,而是排进日程按轮次走。

大屏访问支持 1280 到 3840 像素的宽度自适应,1920 像素以上会展开成完整的横向状态条。屏幕越宽,看到的通道信息越完整。

  1. 01

    先看浏览器内核版本

    版本落后一两代,常会出现样式错位或按钮点不动。

  2. 02

    再看窗口宽度

    把窗口拉宽或缩窄一点,看看版面是否跟着正常收放。

  3. 03

    最后看页面缩放比例

    缩放回到 100% 再刷新一次,多数显示不全的问题会消失。

完整的修订记录放在更新与动态里,逐步的排查方法在帮助中心。两者都按同一轮回归结果同步更新。

06 / 规范

看上去统一,是因为一直按同一套做

2023 年上线的视觉规范 2.0,把字号收到六个档位,色板收成一组,分隔线统一成 1px。同一类信息在哪个页面都是同一个样子,访客不用重新适应。

规范带来的不只是整齐。按钮位置、编号写法、提示块的颜色一旦固定下来,人在别的页面也能凭直觉找到下一处该点的地方。

这套规范由设计与前端一同维护,新版块上线前都会先过一遍字阶与色板。改动会记录在更新公告里,不会悄悄发生。

左右并排的两版深色界面切片,右侧版本线条更细密,对比视觉规范升级前后的差别
规范 1.0 → 2.0 / 界面切片

接下来

这几个地方可以接着看