移动端 · 内容展示布局更新

开云官网首页 | kaiyun - 开云更新移动端内容展示布局

开云官网首页(kaiyun)本次更新集中处理移动端的内容展示方式。新闻列表由两列网格改为单列卡片流,配图按屏幕宽度等比裁切并统一高度,正文字号与行距同步上调,顶部导航收进折叠菜单并在展开时保留当前栏目高亮。调整后手机端的阅读连贯性更好,长段落不再出现挤在一起的情况。

布局列数
1 列
正文字号
16px
正文行距
1.75
访问层级
≤3 级
开云官网首页移动端内容展示布局更新后的页面效果图

本次移动端布局更新的四个方向

调整只涉及移动端的排布方式与阅读参数,内容条目、链接地址与栏目层级均保持不变。桌面端继续使用多列网格结构,两端共用同一套内容数据。

单列卡片流

新闻列表在小屏上由两列收为单列,每张卡片占满可用宽度,标题不再被压缩换行,摘要可以完整展示三到四行。

配图等比裁切

卡片配图按容器宽度等比缩放,超出部分居中裁切,所有缩略图高度一致,滚动列表时画面不会出现跳动。

字号与行距上调

正文基准字号提升到 16 像素,行距固定在 1.75 左右,段间距同步加大,长时间在手机上阅读的疲劳感明显降低。

导航折叠与高亮

主导航在移动端收进折叠面板,展开后保留当前所在栏目的橙色高亮,访客能随时判断自己处于站内哪个位置。

移动端调整前后的对照

对照的重点不在视觉花样的多少,而在手机这一块小屏幕上,信息能不能被顺畅地读完。调整前的问题集中在三点:两列网格在窄屏上把标题压成两三个字一行;配图高度不统一,滚动时列表会上下跳动;正文行距偏紧,长段落读起来费劲。

调整后,列表回归单列,标题与摘要各自获得完整的横向空间;配图统一裁切比例,卡片高度固定;正文的字号与行距一并上调,段落之间的呼吸感更强。三处改动叠加起来,同一条新闻在手机上的阅读时间明显缩短。

开云官网首页移动端布局调整前后对照表
项目 调整前 调整后
列表列数 2 列 1 列
配图高度 随图变化 统一固定
正文字号 14px 16px
正文行距 1.5 1.75
导航形态 横向挤压 折叠面板
开云官网首页移动端单列卡片流布局展示效果

移动端阅读的三条通用经验

  • 正文行距低于 1.5 时,长段落的阅读完成率会明显下滑,把行距固定在 1.7 到 1.8 之间是比较稳妥的取值。
  • 列表卡片的高度一旦不统一,滚动过程中页面会持续重排,视觉上表现为"跳动",固定图片比例可以避免这一点。
  • 导航在窄屏上横向挤压到无法完整显示时,折叠面板比缩小字号更合适,点击热区也能保持在易操作的尺寸。

开云移动端内容展示的落地规范

为了让首页与各栏目在移动端保持一致的观感,本次更新同时固定了几条排版参数。后续新增内容沿用同一套参数,不需要逐页单独调整。

卡片内边距

移动端卡片内边距统一为 24 像素,标题与摘要之间保留 12 像素间距,摘要与操作链接之间保留 16 像素间距。

配图比例

列表缩略图按 16:10 的比例裁切,详情页头图按 3:2 的比例展示,两端均居中裁切,避免主体被切到边缘。

标题层级

页面内保持单一一级标题,各内容区块使用二级标题,卡片与条目使用三级标题,层级关系在移动端同样清晰。

图片加载策略

首屏图片优先加载,其余图片延迟加载,并预留固定占位高度,防止图片到位后页面发生位置偏移。

点击热区

移动端所有可点击元素的触控高度不低于 44 像素,相邻链接之间保留足够间距,降低误触概率。

路径层级

从首页到任意内容页的点击次数控制在两次以内,路径层级不超过三级,移动端不设置仅在大屏可见的入口。

相关更新内容

与本次移动端布局调整同期发布的内容条目,涵盖品牌新闻、功能升级与体验优化三个方向。

查看全部新闻动态 →

移动端布局更新常见问题

围绕本次开云官网首页移动端内容展示布局的调整,整理五个访客问得比较多的问题。

开云移动端内容展示布局这次改了哪些部分?

本次更新主要调整了四处:新闻列表由两列改为单列卡片流、配图按屏幕宽度等比裁切、正文字号与行距上调、顶部导航收进折叠菜单并在展开时保留当前页高亮。

移动端改成单列之后,内容会不会变少?

不会。移动端与桌面端共用同一套内容数据,只是排布方式由多列网格改为单列卡片流,文字内容与链接地址两端完全一致,不存在只在某一端可见的条目。

图片在手机上是如何裁切的?

移动端配图统一按容器宽度等比缩放,超过高度的部分居中裁切,卡片高度保持一致,滚动列表时不会出现画面跳动。

桌面端布局是否也一起调整了?

桌面端保留原有的多列网格结构,仅同步了字号体系与卡片间距,使两端在视觉上保持一致,不做结构性改动。

在开云官网上如何反馈移动端显示问题?

可以通过顶部导航栏的「联系我们」入口,或点击右下角的悬浮按钮直达联系页面,页面会展示当前可用的官方沟通渠道,无需填写提交表单。