单列卡片流
新闻列表在小屏上由两列收为单列,每张卡片占满可用宽度,标题不再被压缩换行,摘要可以完整展示三到四行。
调整只涉及移动端的排布方式与阅读参数,内容条目、链接地址与栏目层级均保持不变。桌面端继续使用多列网格结构,两端共用同一套内容数据。
新闻列表在小屏上由两列收为单列,每张卡片占满可用宽度,标题不再被压缩换行,摘要可以完整展示三到四行。
卡片配图按容器宽度等比缩放,超出部分居中裁切,所有缩略图高度一致,滚动列表时画面不会出现跳动。
正文基准字号提升到 16 像素,行距固定在 1.75 左右,段间距同步加大,长时间在手机上阅读的疲劳感明显降低。
主导航在移动端收进折叠面板,展开后保留当前所在栏目的橙色高亮,访客能随时判断自己处于站内哪个位置。
对照的重点不在视觉花样的多少,而在手机这一块小屏幕上,信息能不能被顺畅地读完。调整前的问题集中在三点:两列网格在窄屏上把标题压成两三个字一行;配图高度不统一,滚动时列表会上下跳动;正文行距偏紧,长段落读起来费劲。
调整后,列表回归单列,标题与摘要各自获得完整的横向空间;配图统一裁切比例,卡片高度固定;正文的字号与行距一并上调,段落之间的呼吸感更强。三处改动叠加起来,同一条新闻在手机上的阅读时间明显缩短。
| 项目 | 调整前 | 调整后 |
|---|---|---|
| 列表列数 | 2 列 | 1 列 |
| 配图高度 | 随图变化 | 统一固定 |
| 正文字号 | 14px | 16px |
| 正文行距 | 1.5 | 1.75 |
| 导航形态 | 横向挤压 | 折叠面板 |
为了让首页与各栏目在移动端保持一致的观感,本次更新同时固定了几条排版参数。后续新增内容沿用同一套参数,不需要逐页单独调整。
移动端卡片内边距统一为 24 像素,标题与摘要之间保留 12 像素间距,摘要与操作链接之间保留 16 像素间距。
列表缩略图按 16:10 的比例裁切,详情页头图按 3:2 的比例展示,两端均居中裁切,避免主体被切到边缘。
页面内保持单一一级标题,各内容区块使用二级标题,卡片与条目使用三级标题,层级关系在移动端同样清晰。
首屏图片优先加载,其余图片延迟加载,并预留固定占位高度,防止图片到位后页面发生位置偏移。
移动端所有可点击元素的触控高度不低于 44 像素,相邻链接之间保留足够间距,降低误触概率。
从首页到任意内容页的点击次数控制在两次以内,路径层级不超过三级,移动端不设置仅在大屏可见的入口。
与本次移动端布局调整同期发布的内容条目,涵盖品牌新闻、功能升级与体验优化三个方向。
导航栏重新梳理了一级栏目与二级入口的层级关系,把访问频率较高的新闻动态和开云集团前置,移动端折叠菜单展开后保留当前页面高亮。
阅读详情 →
这次升级调整了首页的栏目排布顺序,把新闻动态和服务入口整体上移,从首页到达各业务板块的点击次数由原来的三到四次缩短为两次以内。
阅读详情 →
围绕信息层级、加载速度和文字可读性做了持续调整:非首屏图片统一压缩并延迟加载,标题与正文的对比度按无障碍标准校核。
阅读详情 →围绕本次开云官网首页移动端内容展示布局的调整,整理五个访客问得比较多的问题。
本次更新主要调整了四处:新闻列表由两列改为单列卡片流、配图按屏幕宽度等比裁切、正文字号与行距上调、顶部导航收进折叠菜单并在展开时保留当前页高亮。
不会。移动端与桌面端共用同一套内容数据,只是排布方式由多列网格改为单列卡片流,文字内容与链接地址两端完全一致,不存在只在某一端可见的条目。
移动端配图统一按容器宽度等比缩放,超过高度的部分居中裁切,卡片高度保持一致,滚动列表时不会出现画面跳动。
桌面端保留原有的多列网格结构,仅同步了字号体系与卡片间距,使两端在视觉上保持一致,不做结构性改动。
可以通过顶部导航栏的「联系我们」入口,或点击右下角的悬浮按钮直达联系页面,页面会展示当前可用的官方沟通渠道,无需填写提交表单。