转赞推荐：从Layui镜像站的移动端组件说明学“一屏一事”

做手机端页面时，我常回去翻 Layui 官方文档镜像站 的组件说明。它并不主打移动端，但那份“一屏只解决一件事”的克制，对小屏内容特别有启发。

它演示了什么

镜像站里的示例大多只放一个组件、一组操作、一段说明。页面不堆叠、不并列展示三个相似例子，也不在旁边塞一堆解释。读者打开就知道该看哪、该点哪。

换成手机端语境，对应的就是三条：

• 一屏一个判断点。这一屏只回答“时间”，下一屏只回答“条件”，别把两件事挤在一起；
• 主操作唯一。一屏里出现两个 equally 显眼的按钮，用户就会犹豫；
• 说明紧跟元素，不要放到页面底部再让用户来回跳。

第三条最容易被忽略。桌面端可以靠并排版面容纳说明，手机端一屏放不下，于是很多人把解释统一堆到最后，结果读者在最需要它的时候看不到。

为什么推荐

活动页、报名页、规则页这些场景，用户往往是在碎片时间、单手操作。信息密度越高，流失越快。镜像站那种“返璞归真”的表达，本质上是替读者做了一次取舍：先给最需要的一件事，其余折叠或后置。

想看具体的间距、折叠与状态呈现，可以配合 Bootstrap 组件实验室的可交互示例 一起看；要把这套取舍做成纯静态页面，HTML 入门教程站的做法 足够轻。

一点延伸

“一屏一事”还有个隐性好处：改起来容易。每屏职责单一，换文案、换顺序都不会牵动别处。这点在活动页这种频繁更新的场景里，比视觉精致更重要。

小结

一份前端框架文档，讲的其实是怎么替读者减负。下次做手机页面，别急着往里加信息，先问一句：这一屏到底要让人判断什么。