更新日志 · 当前版本 V4

亚文网更新日志

这里是亚文网官网的更新日志:页面结构、加载速度、移动端显示,改一次记一条。想知道自己常用的那一屏最近动过哪里,从这里往下翻,或者按类别筛出来。

条目索引

近阶段的改动按版本、性能、文档、移动端四类归在这里,点开任一条看完整说明。

上一版把导航压在滚动区第二屏,移动端用户常常先看到正文,才知道下面还有其它栏目。V4 把六项提到落屏范围内,换设备重新登录的人从打开页面到进入帮助文档,少了一次下滑与一次折返。右侧的检索提示条也一并上移,想找某类改动可以直接跳到本页索引。

优化集中在三处:首屏不再等待全部样式与脚本就绪;图标与装饰性图形改为按需加载;重复的样式声明合并成一份。三轮优化做完,首屏可交互时间平均缩短 1.1 秒,弱网环境下最先能点的区域也从正文下方提到了正文上方。

条目顺序调整后一直保持稳定,不再随版本改动前后挪动。用户按编号找内容,第三项永远是版本更新公告,第九项留给移动端页面打不开时的排查步骤。同一份公告在更新日志与帮助文档里说的是同一件事,先看到哪一处都能接着往下走。

在 iOS 自带浏览器与常见内嵌浏览器里重新走了一遍显示效果,长页面滚动时页头收窄成一条细带,把可视高度让给正文。列表项之间的间距同步加大,手指滑到一半停住时也不容易误触相邻条目。

移动端访问约占全站访问的 78%,资源体积的收益主要落在这一部分用户身上。同一批改动也让页面在缓存未命中时的首次渲染更早开始,第二次访问的差别进一步缩小。

提交时不需要先判断问题属于哪一类,选设备、选现象两步就能走到对应入口,后续处理进展会回到同一个渠道。iOS 用户在移动端里占比约 41%,这一栏的调整优先级排得比较靠前。

版本说明类资料每季度整理一次,把这一阶段的页面结构、加载速度与移动端适配变化汇成一份,适合需要留存比对的人。品牌站资料的下载版本改版说明也在这一批里更新,拿到旧文件的人可以按文件上的版本号决定要不要换。

分组之后,同一类改动集中呈现,阅读顺序从「按时间往下扫」变成「挑自己关心的事看」。老用户回看某一次调整时,先选类别再定位条目,比在长列表里逐条找省事得多。

版本公告

V4 换掉的那几处

这一版没有增加新栏目,动的是进门以后先看到什么、先点到什么。

V4 页面结构改版前后两个页面线框并列对比的抽象示意图
改版前后对照:左侧为上一版落屏结构,右侧为 V4 把导航与检索入口提到落屏范围内。
  1. 导航位置

    六个栏目与使用指南入口一起进入落屏范围,换设备后重新登录的人不用先下滑再找路。

  2. 帮助文档条目顺序

    第三项固定为版本更新公告,第九项留给移动端页面打不开的排查步骤,编号顺序此后不再变动。

  3. 卡片分组

    更新内容与资料条目按类别成组排列,同一类改动挨在一起,跨类别来回跳的次数减少。

  4. 页面结构

    整体排版较上一版精简约 35%,段落宽度收紧到更适合连续阅读的范围,滚动距离同步缩短。

性能优化专题

少了等待,才有得用

近一年做的三轮优化围绕同一件事:让页面更早变得可以点击,而不是更早开始加载。

1.1秒

首屏可交互时间平均缩短

22%

页面资源体积平均下降

3轮

近一年完成的优化轮次

2秒内

常见移动网络下首屏可交互

三条向下倾斜的折线与时间刻度组成的加载耗时下降趋势抽象图
三轮优化后的加载耗时走向:曲线越往右越低,代表同一网络条件下等待时间逐轮缩短。

先让样式和脚本就位

首屏不再等全部资源到齐才渲染。关键的版式规则先到,其余部分随后补齐,用户在页面还没完全静止时就已经能点第一处入口。

再让图形按需出现

图标与装饰性图形改为滚动到附近才加载,首屏要下载的东西少了一截。资源体积平均下降约 22%,在信号弱的场景里差别更明显。

最后砍掉重复

样式声明合并、重复规则去掉,页面在缓存未命中时的首次渲染也更早开始。第二轮访问时,体感基本与本地打开一致。

移动端适配专题

手上有台手机,就该顺手

七成以上的访问来自移动端,适配改动都从这一步的落屏体验往外推。

移动端访问约占全站访问的 78%,其中 iOS 设备约占移动端的 41%。这两组比例决定了适配顺序:先保证 iOS 上的显示与点击,再覆盖 Android 与桌面端。

页头在长页面滚动时收窄为一条细带,把可视高度让给正文;按钮点击区域放宽到 44 像素,列表项间距加大,手指滑到一半停住时不容易误触相邻条目。页面底部不再贴边,留出一段可以停手的位置。

反馈入口按设备类型分栏后,iOS 打开页面反馈与内地用户注册问题反馈各占一栏,选设备、选现象两步就能走到对应入口,处理进展回到同一个渠道。

帮助文档条目编号列表与第三项固定标记的索引示意图
帮助文档九个条目按编号排列,第三项固定为版本更新公告。

帮助文档

文档跟着页面一起动

页面改到哪一步,帮助文档就跟到哪一步。站点每月更新帮助文档约 4 次,把新出现的操作路径补进对应条目,把已经不适用的步骤删掉。使用指南覆盖 12 个移动端高频场景,换设备后重新登录、多端切换与资料回取的完整步骤都在里面。

需要照着做的步骤都放在条目正文里,摘要只留一句判断用的话。想找某一类问题的处理办法,先进帮助文档按编号翻,比在更新日志里回溯改动更快。

进入帮助文档

阶段归档

改动是分阶段推进的

同一件事往往跨几轮才收尾,按阶段看更容易明白某一处为什么这样改。

抽象信息流线条与归档标签组合成的专题封面图形
近几个阶段的改动汇总成专题,每个阶段下挂当期的主要条目。
  1. 阶段一 · 结构重排

    导航位置与卡片分组一并调整,为后面的优化腾出版面。

    看这一阶段的条目
  2. 阶段二 · 加载提速

    三轮优化连续推进,首屏可交互时间与资源体积同步下降。

    看这一阶段的条目
  3. 阶段三 · 文档同步

    帮助文档条目顺序稳定下来,下载资料的版本标注一并补齐。

    看这一阶段的条目
  4. 阶段四 · 移动端细化

    iOS 显示、点击区域与反馈入口按设备分开处理。

    看这一阶段的条目
  5. 阶段五 · 正在推进

    下一轮的方向与优先级写在后面的计划里,完成后会补进索引。

    看下一步安排

接下来

后面想先做的事

按用户回访的频次排了顺序,做完一项就在上面的索引里补一条。

01

把索引区做得更好找

让每类改动的入口在移动端一屏内全部露出,减少一次折返。

02

补齐文档里的图例

登录与页面打不开两类步骤配上过程示意,照着做时不用来回比对文字。

03

把反馈处理进度说清

提交之后能知道走到哪一步,工作日内平均 4 小时首次回复,复杂问题两个工作日内给出进展。

隔一阵回来看看就行,新条目会连续排在索引最前面。想先处理手上的具体问题,这几处更快: