观察报告 · 持续更新栏目

小屏端案例合集:近一年 46 次界面调整都留了档

屏幕越小,一处按钮错位就越显眼。过去十二个月里,亚娱真人中心把每一次改动都记了下来:动了哪一块、牵动哪些机型、上线之后有没有变好,翻一翻就能对上,不用靠印象判断。

  • 46 次界面调整记录
  • 6-8 条 / 月 更新量
  • 5.8" 及以下屏幕为重点观察对象
暗色数据流与环境光交织的抽象纹理,作为观察报告栏目头图

本期索引

最近发布的条目

下方标签可直接跳到对应记录或专题。

  • 本季度 界面调整 检索路径

    搜索入口从页面顶部挪到首屏中部,窄屏用户找到分类栏目少滑一屏。

  • 上个月 版本说明 稳定版迭代

    一个小版本打包 5 条改动,其中 3 条与 5.8 英寸机型的排布相关。

  • 上个月 分类观察

    原「播放体验」标签拆成起播速度与画面稳定两条,各自聚集同类内容。

  • 第二阶段 界面调整 夜间视觉

    深色界面的分隔线提亮一档,低亮度环境下不再整片糊成一块。

  • 第二阶段 界面调整 小屏端排布

    内容列表卡片高度统一为 96px,一屏多看两条,纵向滑动次数下降。

  • 第一阶段 分类观察

    标签名称统一压到四字以内,避免窄屏换行把右侧图标挤出可视区。

界面调整时间轴

近 12 个月 46 次调整,按阶段排开

点记录右下角可展开完整摘要。

每一条都写清楚三件事:改的是哪一块、影响哪些设备、解决的是哪个具体问题。手机端上觉得别扭的地方,多半能在这里找到对应的那次调整。

本季度

13 次调整

其中 9 次与 5.8 英寸及以下的排布有关

  1. 小屏端底部导航由五栏压缩为四栏的局部对比缩略图
    01 界面调整 小屏端排布

    底部导航由五栏压缩为四栏

    调整范围
    首页与列表页底部导航
    影响设备
    屏幕 5.8 英寸及以下的机型
    改动要点
    「我的」收进右上角头像入口,单个标签宽度回升到 68px
    展开完整摘要

    改之前,窄屏上五个标签平均只有 52px 宽,手指按下去常常落到隔壁。压缩到四栏后点击区域变大,去个人中心多了一次点击,但误触情况明显减少,换来的是更稳的日常操作。

  2. 首页顶部数据条由横排改为两行两列的小屏适配缩略图
    02 界面调整 小屏端排布

    首页数据条改为两行两列

    调整范围
    首页顶部数据条
    影响设备
    屏幕 5.8 英寸及以下的机型
    改动要点
    四个数据标签拆成两行,字号保持 13px 不缩水
    展开完整摘要

    横排挤压时数字会被迫换行,读起来断成两截。改成两行两列之后每个数字都有完整的展示位,滚动到首屏时一眼能看完四个值,不必再横向比划。

  3. 03 界面调整 列表排布

    内容列表卡片统一高度

    调整范围
    分类与标签列表页
    影响设备
    全部移动端
    改动要点
    卡片固定 96px,标题最多两行,超出部分省略
    展开完整摘要

    高度参差时,卡片右侧的标签位置每屏都在跳。固定高度之后视线可以用同样的节奏往下扫,一屏多看两条,翻找成本降下来。

上季度

11 次调整

集中在夜间可读性与入口位置两件事上

  1. 深色界面分隔线提亮前后的局部对比缩略图
    04 界面调整 夜间视觉

    深色界面分隔线提亮一档

    调整范围
    全站深色界面与表格线
    影响设备
    全部移动端
    改动要点
    分隔线亮度上调,区块之间的边界在低亮度下仍能分辨
    展开完整摘要

    夜里把屏幕调暗之后,原本的分隔线会和底色融在一起,整页看起来像一块没有边的黑板。提亮一档后边界重新出现,同时又没有刺眼到影响夜间阅读的舒适度。

  2. 搜索入口从页面顶部下移到首屏中部的界面缩略图
    05 界面调整 检索路径

    搜索入口下移到首屏中部

    调整范围
    首页与分类页的检索入口
    影响设备
    屏幕 5.8 英寸及以下的机型
    改动要点
    搜索框落在拇指自然够到的位置,并修正键盘弹起时的位移
    展开完整摘要

    原来搜索框贴在页面最上方,单手拿小屏机时需要换握姿才能点到。下移之后单手就能触发,同时把键盘弹起时的页面位移处理掉,输入过程中不会再把已输入的内容顶出视口。

往前两个季度

22 次调整

手势避让、图标细节与整体节奏的集中整理

  1. 弹层关闭按钮下移避开全面屏手势区的界面缩略图
    06 界面调整 手势避让

    弹层关闭按钮下移出手势区

    调整范围
    各类弹层与浮层
    影响设备
    全面屏机型
    改动要点
    关闭按钮落在安全区内,不再与系统返回手势抢位置
    展开完整摘要

    右上角的关闭按钮贴边时和手势返回区域重叠,想关掉弹层却退出了上一级页面。调整后按钮位置下移,点击意图能被正确识别,误退出的反馈随之消失。

  2. 全站图标描边由 2px 收细至 1.5px 的对比缩略图
    07 界面调整 视觉细节

    图标描边收细到 1.5px

    调整范围
    全站线性图标
    影响设备
    全部移动端
    改动要点
    统一描边宽度与端点圆角,小尺寸下线条不再粘连
    展开完整摘要

    小屏上 2px 的描边在 20px 尺寸里会让笔画挤成一团,尤其是带内折角的图标。收细之后线条之间留出空隙,同一套图标的识别速度也随之提升。

连载专题

三个专题,各盯一件事

零散的单条记录看不出趋势,所以把反复出现的问题归成三个专题长期跟。每个专题有自己的观察角度和更新节奏,翻几期就能看出变化的方向。

小屏端元素密度排布的抽象示意图
每两周一条

小屏端排布观察

盯的是 5.8 英寸及以下屏幕的信息密度:一屏放多少条、哪些元素必须让位、哪些能折叠收起。每期挑一处实际调整,把前后的取舍讲清楚。

观察角度:元素密度、点击区域、单手可达范围

深色环境下对比度与亮度层级的抽象示意图
每月一条

夜间视觉观察

深色环境里屏幕亮度的分寸最难拿捏:太暗看不清分栏,太亮又晃眼。这个专题记录对比度调整、发光效果克制与文字灰度的实际取值。

观察角度:对比度、眩光控制、正文灰度

版本迭代观察

双周一个小版本,观察落在四件事上

稳定版每 14 天发布一个小版本,每季度再发布一次大版本。每个小版本我们都固定看四件事:动了哪些分类、改了多少条、主要影响哪类设备、下一版准备接哪一条。版本号由两位季度号加两位序号组成,第四季度的第二个小版本记作 0402。

近期稳定版小版本的观察字段对照
版本号 所处阶段 涉及分类 记录条数 主要影响设备
0402 本季度 播放路径、检索 5 5.8 英寸及以下
0401 本季度 首页排布 4 全面屏机型
0303 上季度 夜间视觉 3 全部移动端
0302 上季度 分类与标签 2 全部移动端
版本号与时间刻度构成的仪表盘式示意图
版本号与时间刻度的对应关系

分类观察笔记

分类和标签怎么调,每次都记一条

分类不是摆好就不动的。内容变多、用户提问变了,标签也得跟着让路。下面几条记的是每次调整背后的那点原因,也写清楚它想让用户少走哪一步。

  1. 本季度

    把「播放体验」拆成两条

    原来一个标签下面同时挂着起播慢、画面卡、清晰度不对三类问题,点进去常常看到的不是自己遇到的那一种。拆成「起播速度」和「画面稳定」之后,两边的内容各自聚焦,找起来不再来回试。

  2. 上季度

    标签名称压到四字以内

    窄屏上超过四个字的标签会折行,把右侧的状态图标挤出可视区。统一压短之后不再折行,一列标签的右边缘重新对齐,扫读时的节奏也稳了。

  3. 上季度

    「换机」挪到设备适配下

    换设备后的提问原本挂在账号分类里,实际上八成内容和系统版本、屏幕尺寸相关。移到设备适配下面之后,同类问题聚到了一处,二级标签的总数没有变化。

  4. 往前两个季度

    清理长期没有内容的标签

    有三个标签连续几个阶段没有新的内容沉淀,点进去只有零星几条。把它们并入相邻分类之后,二级标签保持在 21 个,空转的入口少了一批。整体框架可以在品牌中心看到。

把您的观察发给我们

你在自己手机上碰到的问题,可能就是下一期的开头

真机上遇到的问题比任何内部测试都直接。小屏机型上的排布别扭、夜里看久了眼睛发涩、某个分类怎么都找不到——写清楚机型和具体位置,我们会放进下一次版本迭代里跟进。

  • 写明设备型号与系统版本,便于判断属于哪一类适配情况
  • 说明问题出现在哪个页面、哪一步操作之后
  • 附上截图或录屏,定位会快很多
  • 工作时段内收到的反馈会在当天进入处理队列