三章 · 九节 · 随查随用

使用教程:三章九节,从导航到逐项排障

按顺序读,一次就能走完导航切换、记录查询与兼容核对;赶时间也可以只挑对上的那一节。每一节都写明检查什么、看到什么才算通过、不通过时先做哪一步。

三层堆叠的直角色块抽象图,以冷调单色处理,示意教程的三章结构
3 章,按学会用的先后排列
9 节,每节都可单独当答案
7 项核对,逐项写明预期结果
6 类主流浏览器在支持范围内
01

认识导航与入口位置

先把栏目和入口的位置在哪看一遍,后面两章都建立在这里。这一章不涉及排障,只需要对着屏幕确认三处位置。

1.1

一级栏目怎么切换

一级栏目一共 7 项,其中 5 个是内容栏目,另外 2 个是核心页。切换只有两种走法:一是直接点导航条上的栏目名,页面跳转,地址栏路径同步改变;二是先回首页,从首屏的栏目导览里挑。

判断自己有没有切对,看地址栏最后一段就够了。栏目名与路径一一对应,认路径比认高亮色稳。

1.2

第二栏的入口在哪

记录查询入口固定在全站的第二个位置,打开哪一个页面都一样。桌面端看左侧竖栏从上往下数第二格;移动端看顶部横向条上的第二个标签。

如果第二格出现了别的东西,先刷新一次页面,让样式重新加载;刷新之后位置仍然不对,再对照第三章的核对清单逐项看。

由短线与方块连成的导航切换步骤示意,节点等距排列
从一级栏目到第二栏入口,中间只有一级跳转

1.3

桌面端与移动端的差别

两端的栏目数量与顺序完全一致,差别只在排布方向。1280px 及以上,导航铺成左侧竖栏,正文在右边;768–1279px,竖栏变窄,内容块之间的间距收一点;768px 以下,竖栏折成页面顶部的横向条,第二栏入口跟着横着排。

所以记位置就好,不用记具体坐标。位置记牢了,换一块屏幕也能一眼找到。

02

定位记录查询

欧博登录在 PC 端与移动端用的是同一套栏目顺序,记录查询也一样。这一章讲清楚条目怎么分类、按什么顺序翻,以及换设备之后从哪儿接上。

2.1

记录按什么分类

条目按类型分组,同一类放在一起,组与组之间用 1px 细线分隔。每组标题右侧标着这一组的条目数,数字用等宽字体,扫一眼就知道这一组有多少内容。

分类标签钉在行首的固定位置。手上有一条记录要核对时,先看标签判断它属于哪一类,再进对应的组,比从头往下翻快得多。

2.2

从新到旧的翻查顺序

默认按时间倒序排列,最近的排在最前。如果记得大概的时间段,先翻到那一段再往回找,比从第一条往下拉省事。

列表每屏显示固定条数,翻到底会出现继续加载。点一次加一段,不要连点——连点只会让后面的内容堆在一起,反而不好定位。

2.3

换设备后接着查

换设备之后重新进入同一入口,记录会按分类重新排列,上一次翻到的位置不会被记住。想接着查,先按类型定位到对应的组,再看组内条目的时间标记。

两端的分类顺序是相同的,所以桌面端记住的组别位置可以直接搬到移动端用,反过来也一样。

03

兼容与故障自查

前面两章假设页面一切正常。这一章反过来,先确认环境,再按顺序处理显示异常,最后收进一张可以逐项打钩的清单。

3.1

浏览器与屏幕区间先确认

站点支持 6 类主流浏览器,屏幕宽度分成三档:1280px 及以上、768–1279px、768px 以下。核对顺序是先看浏览器在不在支持的 6 类里、版本是不是最近两个大版本,再看窗口宽度落在哪一档。

两样都对上,显示问题一般不会出在兼容上,可以跳到下一节按处理顺序走一遍。

3.2

显示异常的处理顺序

遇到文字重叠、色块缺一角或者图片没出来,按四步走:先强制刷新一次,让样式表重新加载;再看浏览器缩放是不是停在 100%;然后把窗口拉到相邻的一档宽度再拉回来,观察排版有没有重新对齐;最后换一款支持列表里的浏览器打开同一个地址。

四步都走完还有问题,再去查本章后面的清单。检查顺序本身就是从外到内,跳步容易把原因弄混。

3.3

活动中心打不开时逐项核对

欧博PC端活动中心打不开时,先分清是打不开还是加载慢。如果页面一直停在加载状态,先确认网络环境;如果直接白屏或者提示错误,就从清单第一项开始往下对。

清单里的 7 项按从外到内的顺序排列:前三项检查运行环境,后四项检查页面本身。每一项都写明检查对象和预期结果,不通过时该做什么也一并写在后面。

如果核对过程中发现现象和你印象里的旧版本不一样,可以先翻更新日志,确认是不是某一次结构变更带来的差异。欧博V3站点兼容的具体条款记在那里。

雪山轮廓与星空渐隐的抽象画面,低饱和冷调处理
逐项核对

七项核对清单

以下 7 项按从外到内的顺序排列,全部通过说明环境和页面本身都没有明显问题。每一项都写明检查对象与预期结果,不通过时该先做什么也写在同一条里。

七行等距方框组成的信息图,右侧以强调色标记核对项
  1. 01 浏览器类型与版本 属于站点支持的 6 类主流浏览器,且版本为最近两个大版本之一。不通过时:换一款列表内的浏览器重新打开同一地址。
  2. 02 窗口宽度落在哪一档 落在 1280px 及以上、768–1279px、768px 以下三档中的任意一档,没有卡在两档之间。不通过时:把窗口拉到最近的档位区间,再看一次排版。
  3. 03 左侧导航条是否完整 桌面端从上到下贯满整个视口高度,栏目数量与顺序和其他页面一致。不通过时:刷新一次,确认样式表已完整加载。
  4. 04 第二栏入口位置 在竖向导航里位于第二个位置,标签写着记录查询。不通过时:从首页重新进入,确认结构版本没有变化。
  5. 05 记录查询的分组标签 每个分组有独立标题与条目数,组内条目按时间倒序排列。不通过时:切到其他分组再切回来,观察顺序是否恢复。
  6. 06 图片与色块显示 单页 1 至 4 张图正常显示,色块边缘为直角、没有阴影。不通过时:确认浏览器没有拦截图片,或换到网络稳定的环境下重试。
  7. 07 首屏加载状态 样式就绪之后才出现文字,没有长时间白屏。不通过时:清理本站缓存后重新打开同一地址。

七项都通过、问题仍然存在时,把浏览器名称、版本号和所在的屏幕档位记下来,一起发到客服邮箱 support@answer-abg.com.cn。受理时段与其他咨询渠道写在联系品牌页,可以先看一眼范围再决定用哪种方式。

查看咨询通道与受理时段