本原创文章帖发布在华为开发者联盟社区，欢迎开发者前往访问评论交流，更多与该内容相关讨论，请点击原帖查看：让不同屏幕各得其所：小红书的 HarmonyOS 多设备适配实践

 本文由小红书体验设计团队撰写，分享小红书在 HarmonyOS 多设备适配中的设计思路与开发实践。

小红书是一个以内容发现、浏览和互动为核心的社区产品。

随着设备形态不断丰富，屏幕正在从相对固定的尺寸和比例，走向更丰富的空间形态。以 HUAWEI Pura X Max 为例，展开后采用 7.7 英寸阔型内屏，横向可用空间明显增加。

但对内容社区来说，屏幕变大，并不意味着简单放大原有页面。

当窗口从窄变宽，可用空间发生变化后，一个新的问题随之出现：新增的空间，究竟应该用来做什么？

对于信息流、内容详情、消息等不同场景，答案并不相同。在 HarmonyOS 多设备适配实践中，我们从这些具体场景出发，探索如何根据空间变化调整内容组织、信息关系和操作方式，让新增空间真正服务于用户任务。

信息流：屏幕变宽后，是把内容放大，还是让用户看到更多？

信息流是用户发现内容最主要的入口之一。

在传统手机上，瀑布流需要在内容尺寸和浏览效率之间取得平衡。但当屏幕展开、横向空间增加后，一个新的选择随之出现：

是让每张卡片变大，让单条内容更加突出；还是增加列数，让用户一屏看到更多内容？

如果保持原有列数，新增空间可以让图片和文字拥有更大的展示面积；若增加列数，则能够提高一屏内容的数量，让用户更快完成探索与浏览。

两种方式对应的是不同的浏览需求。

而对于内容社区来说，用户的浏览需求并不总是相同的：有时，用户需要快速发现更多内容，有时，则希望仔细查看某一条笔记。

因此，大屏下的信息密度不一定只有一个固定答案。

在 Pura X Max 中，我们根据内外屏不同的空间条件，分别提供了灵活的瀑布流布局：外屏支持在两列与三列之间切换，内屏支持在三列、四列与五列之间切换。 用户可以通过双指捏合调整内容密度，根据当前屏幕空间和浏览需求，选择更适合自己的浏览方式。

这一设计带来的变化，很快就得到了用户的反馈：

“双指一捏，两列秒变三列，一屏能多看 50% 的内容。”

当更多内容能够同时进入视野后，用户可以减少频繁滑动，通过快速浏览封面筛选感兴趣的笔记，再决定是否深入阅读。新增的横向空间，也因此转化为更高效的内容发现体验。

这里的关键，并不只是增加瀑布流列数，而是让内容密度能够根据可用空间灵活变化。

如果布局规则与设备型号绑定，随着设备形态不断增加，适配规则也可能随之变得更加复杂。相比为每种设备单独定义布局，我们更关注将布局变化与窗口或容器的可用空间建立关联，让布局根据实际空间自然调整。

HarmonyOS 提供的响应式布局、断点等能力，可以用于承接这种空间变化，根据不同空间区间调整网格列数、组件尺寸等布局规则，让页面布局随空间变化自然调整。

对于信息流而言，这意味着布局不必始终遵循固定的列数，而可以根据空间条件与浏览需求，在内容尺寸和信息密度之间找到更合适的平衡。

用户的另一条反馈，也很好地说明了这种变化带来的价值：

“大大减少了手指滑动的频次，我们现在信息筛选更多是通过眼睛扫，小红书很多时候先看封面，再决定是否点进去看内容。”

沉浸浏览：内容优先时，哪些界面能主动退让？

Pura X Max 外屏为 5.4 英寸，相较展开后的内屏，纵向空间更加受限。

顶部导航、页签和底部操作区域如果始终占据固定空间，留给内容本身的区域就会受到挤压。

面对这种情况，除了调整页面布局，我们还可以改变界面元素的显示方式：

当用户进入连续浏览状态时，能否让暂时不需要的界面元素主动退让？

在连续浏览场景中，我们根据不同屏幕形态调整界面元素的隐藏方式。

在 Pura X Max 外屏上，随着页面滑动，顶部和底部 Tab 可以同时隐藏，减少导航区域对屏幕空间的占用，让更多内容进入视野。而在内屏横屏场景中，考虑到用户浏览笔记、视频时，视觉重心更多集中在屏幕下方，我们选择优先隐藏底部 Tab，将释放出的空间留给内容展示，同时保留顶部 Tab，方便用户在不同内容频道之间切换，兼顾浏览的沉浸感与操作的便捷性。

同样是滑动隐藏，内外屏并没有采用完全一致的处理方式，而是根据不同屏幕形态下的内容布局与浏览习惯，调整导航元素的显示策略，在内容浏览与操作便利性之间取得平衡。

用户对此的感受十分直观：

“向下滑动后，上下状态栏被自动隐藏，满屏都是帖子，一屏可以多看好多内容。”

除了动态隐藏界面元素，我们也在 Pura X Max 等设备体验中结合沉浸光感设计，让界面组件与内容区域之间形成更自然的视觉衔接，进一步强化连续浏览时的沉浸感。

在横屏展开态的短视频笔记场景中，我们还结合智感握姿能力优化悬浮组件交互，让组件能够随用户握持状态自然调整位置，在保持视频沉浸浏览的同时，让互动操作更加顺手。

注：小红书智感握姿功能目前仅支持 Pura X Max、Mate XT 2 机型的横屏展开态，且仅适用于短视频笔记界面。

在这些体验中，HarmonyOS 提供的滑动隐藏、沉浸光感、智感握姿等体验进阶设计与实现方式，帮助扩大内容展示区域，为界面元素的动态收起、内容区域的扩展和悬浮组件的交互优化提供了支持。

从这一场景可以看到，空间优化不一定要依靠增加布局区域，可以根据用户状态，减少非当前任务所需界面的占用，将更多空间留给正在浏览的内容。

图文详情：当空间足够时，关联的信息能否同时看到？

进入一篇笔记后，用户的任务就从发现探索转向了阅读和互动。

在窄屏手机上，图片、正文和评论通常按照纵向结构排列，用户需要先浏览内容，再向下查看评论。

而当横向空间增加后，若仍然沿用单栏结构，页面虽然变宽了，用户获取内容和互动信息的路径却没有发生变化。

于是需要重新思考：

图片和评论一定要前后查看吗？当空间足够时，能不能让用户边看边评？

如果只是继续放大图片，新增的横向空间仍然主要服务于单一内容；而如果把评论区引入同一视野，则可以改变内容与互动信息的组织方式。

在 Pura X Max 等设备的大屏场景中，我们通过“边看边评”体验，让图片与评论同时呈现：用户可以在左侧查看图片，在右侧浏览评论，不必在内容与互动信息之间反复切换。与此同时，我们结合沉浸光感体验，对界面进行模糊透底处理，让图文区域的视觉层次更加协调。

这种布局调整带来的变化，不仅体现在页面结构上，也体现在用户获取信息的过程中：

“左边高清大图，右边滚动评论和文字说明，信息分区清晰，再也不用来回翻看。”

还有用户表示：

“一边翻看图片，一边看网友心得，学习效率直接 double。”

当图片、正文与评论能够同时进入视野，用户便可以在阅读笔记的同时浏览其他用户的观点，减少在内容与评论之间来回切换的操作。

在“边看边评”体验中，我们没有简单地将新增空间用于放大图片，而是将图片与评论组织在同一视野中，让用户在阅读内容的同时获取互动信息。

这一实践也带来一个值得关注的思路：页面布局如何调整，不仅取决于屏幕空间的大小，也与用户需要获取的信息关联程度有关。当图片与评论、列表与详情等信息具备较强的关联性，且窗口空间能够满足并列展示的需要时，页面结构就有可能从“前后出现”转向“同时出现”。

HarmonyOS 提供的响应式布局、分栏等相关能力，可以帮助将这种结构变化转化为随空间变化的布局规则：当窗口达到相应空间条件时，单栏结构可以自动切换为并列展示；当空间重新收窄时，再回到单栏结构。

对于我们而言，适配的重点不只是让页面适应不同尺寸的屏幕，更重要的是结合空间条件、用户任务与信息关系，找到更合适的内容组织方式，从而提升信息获取效率。

消息页面：当空间足够时，还需在列表与内容之间切换吗？

图文详情关注的是关联信息能否同时呈现，而消息场景面对的是另一类高频切换问题。

在手机上，由于空间有限，消息列表与会话内容通常采用两级页面结构：

消息列表 → 打开会话内容 → 返回列表 → 再打开下一条会话

但当窗口拥有更多空间时，新的问题随之出现：

如果列表和内容已经能够同时放进一个窗口，“返回列表”这一步还有没有必要？

在空间足够的情况下，我们通过分栏重新组织消息页面：左侧保留列表，右侧展示当前内容。用户可以直接在列表中切换不同消息，右侧内容随之更新。

通过这种方式，大屏空间不再只是用于展示更多内容，而是帮助我们减少原有任务链路中的操作步骤。用户可以在保留列表上下文的同时，连续查看不同会话，不必每次都先返回列表，再进入下一条消息。

类似的设计思路也适用于“列表 + 详情”“目录 + 内容”“导航 + 详情”等页面，当窗口空间发生变化时，这些原本依赖页面层级完成的信息浏览任务，也可能转变为同一页面内的并列操作。

HarmonyOS 的响应式布局和窗口适配能力，可以让这种结构变化随着窗口尺寸自然发生，而不需要针对不同设备分别维护一套业务页面。在空间达到相应条件时，列表与详情可以自动组合到同一页面中。

通过这一场景，我们也重新认识到原有的一些页面跳转并非任务本身所必需，可能是受限于屏幕空间才产生的，当空间条件发生变化，这些操作步骤也可以重新评估。

从适配设备到响应窗口：让一套规则覆盖更多形态

回顾以上场景，我们解决的问题各不相同：

信息流需要在内容尺寸与浏览效率之间取得平衡；沉浸浏览需要为内容释放更多可视空间；图文详情需要让关联信息同时呈现；消息页面则需要减少列表与内容之间的重复切换。

但这些实践背后，有一个共同的出发点：

根据当前窗口能够提供的空间，以及用户正在完成的任务，决定内容应该如何组织、界面应该如何呈现。

随着直板机、折叠屏、双折叠、三折叠等设备形态不断丰富，同一应用需要面对的空间组合也越来越多。相比完全按照设备型号定义页面规则，将布局与窗口空间建立关联，成为多设备适配中的一种实现思路。

HarmonyOS 面向多终端提供“一次开发，多端部署”能力。通过界面、功能和工程等不同层面的适配，让一套代码工程可以面向不同类型终端进行部署和体验适配。

对应到我们的具体实践，这些变化分别体现为：列数调整、界面元素的动态隐藏、信息关系重组、以及单栏与分栏切换。

这些变化背后对应的是不同的空间条件和用户任务：信息流关注内容发现，沉浸浏览则关注内容区域的可视空间，图文详情关注关联信息的同时呈现，消息页面关注列表与内容之间的切换。

设备形态变化带来的，不仅是屏幕尺寸变化，还包括可用空间、窗口比例和布局关系的变化。

因此，在面对新设备形态时，我们不仅关注设备的变化，还可以思考：这个设备带来了什么新的空间条件，现有的布局规则又能否自然响应？

让每一块新增的屏幕空间，都产生价值

从 Pura X Max 带来的不同屏幕空间出发，我们关注的并不是简单放大页面，而是如何让新增空间更好地服务于用户需求。

在不同场景下探索不同的空间利用方式：

信息流中，增加内容密度，让用户根据浏览需求调整列数；

沉浸浏览中，让暂时不需要的界面元素主动退让，把空间还给内容。

图文详情中，重新组织信息关系，让图片与评论同时进入视野；

消息页面中，并列列表与内容，减少原本由屏幕限制带来的页面跳转；

从窄屏走向宽屏，原来的内容和交互方式是否仍然适合新的空间，成为适配过程中需要面对的问题。

从页面放大到信息重组，从适配具体设备到响应窗口空间，这些场景呈现出一个变化：

同样的内容和用户任务，在不同空间条件下，可以对应不同的组织方式。

在这一过程中，HarmonyOS 提供的响应式布局、断点、分栏、窗口适配以及“一次开发，多端部署”等能力，为这些页面布局调整和体验优化提供了技术支持。

从我们的实践来看，多设备适配不只是调整页面尺寸，更是根据空间条件和用户任务，重新组织内容与交互方式，让新增空间承载更多信息、呈现更完整的内容，并带来更自然的交互体验和更高效的操作路径。而这些变化，最终都被用户真实感知。

注：不同设备型号、系统版本及应用版本的功能与体验可能有所差异，具体以实际使用情况为准。

你在做多设备适配时，遇到的最大挑战是什么？欢迎在评论区留言交流~