通用型页面

混合内容首页

混合内容首页通常具有标签栏、按钮组、多组可滑动元素与轮播图等内容。
建议banner轮播图保持高度不变，并在两侧扩展显示前后几张，避免轮播图直接等比放大占用大量页面空间，影响下方内容浏览。

卡片流首页

卡片流首页常见于对视频、图片进行信息分组呈现的各类应用中。
卡片可以根据屏幕栅格增列，通常在中屏上建议3列卡片，大屏上建议4-5列卡片。针对高度不一致的瀑布流卡片，建议在增列后显示较少的列数，以免让用户眼花缭乱，丢失阅读的位置与进度。

应用设置页

范示一：针对应用设置页的列表布局，建议在中、大屏下使用浮窗承载（推荐）。

范示二：也可以使用分栏布局呈现应用设置，减少层级跳转（推荐）。

范示三：在大屏设备下，也可使用缩进布局，增加信息两侧的边距，避免列表过度拉伸导致阅读困难。

我的页

我的页主要承载个人帐号相关信息和功能，以列表为主，在中、大屏场景下适合使用分栏布局，增加层级效率。

“我的”页面也可以用浮窗来承接，通过在当前页轻量化地呈现，来隐喻与内容之间的上下文关系。

对于混合信息流类型的“我的页”，可根据内容类型调整布局。
范示一

范示二

搜索页

在大屏设备的应用内进行搜索时，若当前搜索内容简单且，平板上则可以考虑窗口显示，在搜索框下方以浅层窗口的样式出现。
建议在直板机和折叠屏上全屏显示，在平板上全屏显示推荐内容，平板上则可以考虑窗口显示，在搜索框下方以浅层窗口的样式出现。

搜索引导页的历史搜索词条与热搜建议内容平铺，充分利用中、大屏设备显示面积大的优势，提升搜索效率。

当搜索页的热搜仅呈现单个榜单且内容数量较少时，通过将热搜内容进行增列与挪移，完成页面填充。

对于已采用分栏布局的应用，搜索页建议在当前页跳转。

搜索页建议采用单列列表布局展示相关联想词条，词条按优先级自上而下有序排列。为保障用户阅读的视觉上对齐效果，建议小屏与中屏设备的联想词条与标题栏返回icon对齐，大屏设备则与搜索框内搜索icon对齐。

账号登录页

根据不同的登录流程，在中、大屏场景下可以选择不同的布局策略：
针对需要前置登录才可以使用的应用，可使用全屏适配来强调登录任务，控件不要拉伸；

针对允许后置登录的应用，可以使用浮窗来承载临时性登录任务，让用户在完成登录后快速回到上文场景，延续之前的体验。

影音娱乐

长视频

1. 视频详情

针对中、大屏场景，通过扩大视频显示区域，为用户营造更具沉浸感的视觉体验。

为满足不同用户群体对于推荐内容的诉求，中屏建议增设推荐模块：
范示一：页面上滑时，画面等比例缩小，左右两侧留黑并固定于屏幕顶端。

范示二：采用右侧面板，通屏显示更多推荐内容。

2. 沉浸播放

全屏播放视频时，自动进入沉浸模式隐藏标题栏、操作栏等信息，仅保留必要交互，减少非必要信息控件对画面的遮挡，提升观看视频的沉浸感。

功能区显示：在操作选集、倍数、画质等功能时，建议使用近手面板或推挤面板来承载相关功能，可通过缩小或移动画板位置，减少对播放内容的遮挡。

弹幕显示：全屏播放视频时，若画面上下存在黑边，弹幕需在上方黑边区域展示；无黑边时，建议控制画面内弹幕密度，避免遮挡画面内容。

3. 悬停播放

折叠屏设备进入半折悬停状态时，视频播放界面需切换至悬停播放状态，保障用户正常观看与操作

短视频与直播

短视频与直播画面通常采用纵向画面比例，在折叠屏和平板横屏使用场景下，屏幕空间利用率较低，建议利用侧边呈现画面相关内容信息。

1. 短视频-查看评论

纵向比例的短视频与直播画面，在折叠屏和平板横屏使用时默认全屏展示，当用户在点击评论入口后，画面会向左侧推挤，右侧区域同步展示评论内容。

• 横向视频16:9

• 纵向视频9:16

• 唤起键盘

2. 短视频-查看主页

用户可通过左滑或点击博主头像查看博主主页，在播放的同时快速查看博主信息或切换视频。

3. 短剧-查看剧集

用户在观看短剧时，也可通过抽屉和面板的形式显示剧集列表。

音乐播放

1. 播放时歌词同显

音乐播放时可以利用大屏优势将歌词等相关内容展开到音乐播放页中，充分利用屏幕空间。

2. 音乐播放-查看评论

在中、大屏幕上播放音乐时，可以通过侧面面板临时使用部分屏幕空间的方式，查看评论或相似推荐等内容。

相机拍摄

相机拍摄的场景主要是拍照、录视频或者扫码。拍摄时，系统会根据不同设备的大小和握持习惯，自动调整快门键等按钮的位置，让大屏设备用起来更顺手。

全屏拍摄

在大屏拍摄场景下，考虑到用户双手握持姿态下拇指热区覆盖有限，可将快门等高频操作的控件，放置在屏幕两侧利手位置。

悬停拍摄

部分拍摄场景下，用户也可以将手机放置在桌面上，进行离手悬停拍摄。
悬停状态下，应用需遵循“上部展示内容，下部扩展操作”的逻辑进行设计。屏幕上部显示实时取景和预览，下部放置快门等操作按钮，保证用户操控便捷，且操作时手机不易倾倒。

扫一扫

同样，扫码界面在布局时将手电筒、相册打开等功能放置在屏幕两侧的利手区域。

通讯互联

IM与邮件列表

在中、大屏设备下，IM对话建议使用分栏布局，左侧消息列表，右侧对话框。

视频通话

1. 普通视频通话

视频通话场景中，尽可能提供全屏沉浸的视频画面。视频原比例不同时，应当保持画面显示尽量完整，请勿直接填充屏幕，造成画面裁切。
在更大的屏幕上，可以采用左右的布局方式同时展示通话双方的视频。

多人通话场景中，需结合设备物理尺寸实现取景框的响应式布局适配，尽可能让画面占据最大屏幕空间，保障观看体验。

2. 视频会议

多人会议场景中，需结合设备屏幕宽度，实现投屏画面与参会人信息的自适应布局。

根据投屏内容的比例进行自适应布局，在投屏画面为竖向时，中屏设备将投屏画面放置在左侧，参会人放在右侧。

3. 悬停视频

视频通话或多人会议场景下，用户也可以将手机放置在桌面上，进行离手悬停通话。悬停状态下，应用需遵循“上部展示内容，下部扩展操作”的逻辑进行设计。

在会议场景下的悬停态，应优先在上半部分显示投屏内容，投屏内容相关的操作功能和取景框放入下半部分，避免对投屏内容的遮挡。

社交论坛

社交Feed流首页

信息流首页常见于社交、资讯类应用。用户通常需要高效进行流式浏览，建议控制单行的文字数量，提升阅读效率。
范示一
在中、大屏场景下，需限制图片、视频的显示尺寸，适当调整图片大小，确保单屏信息总量不降低。

范示二
多张图片聚合时，也可以跟随屏幕宽度变化，横向增加列数。

社交类详情页

以图片/视频为主的社交详情页，在屏幕较宽的中大屏设备下，可将图与文拆分，将上下结构的内容变为左右结构，方便用户同步浏览图文信息。

在屏幕宽度较窄的中大屏设备下，依然保持上下结构，图片大小自适应，例如平板竖屏。

以文字为主的社交详情页，在屏幕较宽的中大屏设备下，也可采用左右结构，左侧展示帖子内容，右侧展示评论区，满足用户边看边评的需求。

资讯阅读

资讯Feed流首页

资讯Feed流页通常为应用首页、推荐页，为用户快速提供最新资讯，在宽屏设备中可利用屏幕宽度优势，展示更多内容信息。
图文混合信息流适配时，图片与视频元素可适当放大，。单行多图组合可等比缩放，单一图片宽度建议不超过屏幕宽度的 30%。

还可采用卡片形式承载信息，将每条资讯由卡片单独承载，大屏设备中宽屏可通过增列挪移，提升单屏浏览效率。

除上述场景外，也可以灵活处理图文关系，采用卡片式布局对信息进行组合，通过挪移、延伸、增列等填充的布局方式显示更多信息流内容。

资讯内容页

当用户阅读新闻详情时，建议展示纯图文信息，大屏时可将图文内容左右缩进，控制单行文本数量，保证最佳阅读动线；图片放大至全屏时适应屏幕最大宽/高。

除上述场景外，为提升屏幕空间利用率，右侧可展示推荐模块。

阅读详情页

在大屏设备中，建议采用左右布局，提高阅读效率。

在阅读场景下，建议使用沉浸模式，隐藏状态栏和导航栏。在大屏设备下采用左右分页布局，模拟真实书本阅读体验，避免单行文本过多导致阅读困难。

生活服务

美食详情

建议大屏设备下采用分栏布局，左侧为列表，右侧显示详情，提升操作效率。

电商购物

商品购买

1. 商品详情

在商品详情页中，用户的购买决策需要多个信息集合，在大屏设备上建议采用左右布局，在查看商品图片的同时浏览更多信息，帮助用户决策。

2. 商品详情-查看评论

商品详情页，用户查看评论时，建议大屏采用右侧面板承载评论内容，商品详情根据窗口大小进行响应式布局

3. 购物车

大屏上可采用左右布局，左侧为列表，右侧承载商品结算金额明细。

直播购物

1. 全屏直播间

直播画面需在中大屏设备上依据屏幕尺寸，实现响应式适配，且需保证直播画面显示完全。

2. 直播购物-边看边买

在直播购物场景中，用户有边看直播讲解边浏览商品信息的需求，在宽屏设备上可通过右侧推挤的面板承载商品信息，辅助用户高效购买。

商品分类

商品分类主页辅助用户快速查找商品，在中大屏设备上可通过增列展示更多商品。

金融理财

资讯页

金融类应用中通常会有金融资讯内容。建议在中、大屏设备上，可以通过增列方式填充屏幕，呈现更多的最新资讯动态内容。

自选股

自选股页面，在中大屏设备上可利用屏幕宽度展示更多信息内容。

自选股详情页，在中大屏上，可采用分栏布局，左侧显示自选股列表，右侧显示对应的股票详情，方便用户快速切换查看不同自选股信息。

地图导航

地图导航类应用通常包括地图浏览、地点查询、路线导航等核心功能，界面以地图预览为主，通过底部面板、侧边悬浮面板等实现功能交互，确保用户操作的同时不遮挡地图关键信息。

地点信息查看

在中大屏设备上，建议采用侧边悬浮面板承载用户搜索或点击地图触发地点信息，确保信息显示完整且不干扰地图浏览。

为方便左、右利手用户操作，在中大屏设备上，可通过面板上方 bar 来拖动侧边悬浮面板至左、右两侧，适配不同用户使用习惯。

路线导航

导航场景下应最大限度减少对地图界面遮挡，可通过悬浮控件集中呈现关键导航信息，提高导航场景下的信息获取效率和安全性。

游戏场景

游戏类应用的核心在于沉浸式体验与强交互操作，中大屏设备凭借更广阔的显示空间，可显著拓宽游戏视野、优化交互效率，进而大幅提升沉浸式体验。

游戏视野

游戏视野是影响用户体验的关键因素，利用大屏优势做好视野适配，能让玩家获得更开阔的场景感知，提升用户对游戏的掌控感。

1. 视野补偿

以手机视野为基准，折叠屏和平板的视野采用“横缺纵补”策略：横向视野略有缺失，纵向视野同步拓展，且两者面积相近，因此整体游戏视野与手机基本相当。

折叠屏横向缺失部分视野，纵向补偿部分视野。

平板横向缺失部分视野，纵向补偿部分视野。

2. 完美视野
在宽屏设备上，手机与折叠屏的横向游戏视野保持一致，而折叠屏在此基础上，进一步拓展了部分纵向视野，实现了纵向场景内容的增量呈现【不推荐直接等比放大，导致用户视野变小】

竖屏游戏，在折叠屏和平板上适当放大，需保证核心内容展示完整

双指缩放

对非对战、无公平性约束的游戏，可支持双指缩放调节画面大小，让用户能自主拓展游戏视野，获得更广阔的场景观察范围。

挖孔避让

当挖孔区在顶部时，为避免其遮挡操作区域或页面信息，需进行挖孔避让；可将操作按钮和信息展示向屏幕内侧移动。