设计-HarmonyOS鸿蒙设计规范和指南-华为开发者联盟

文档管理中心
account24arrow_back16arrow_downarrow_right16back18close18collapse16expand16headpicinfo28jumphover16jumpnormal16language24menu18menu24moresearch24user
HarmonyOS 新体验

多场景设计最佳实践
根据你的业务应用场景，学习最佳界面适配方法与样式创新设计。
影音娱乐
社交通讯
拍摄美化
新闻阅读
电商购物
金融理财
便捷生活
旅游住宿
出行导航
移动支付
游戏类
汽车类
沉浸全屏播放
全屏播放视频，上下有黑边时，弹幕仅在上方黑边区域内显示；上下无黑边时，弹幕减少。
画中画体验
点击视频播放页的画中画按钮，调起悬浮小窗，可在浏览其他内容的同时继续观看视频。
左右布局播放
播放页面，在折叠屏上左右布局，避免图片变形或留白过大，提高屏幕使用效率。
应用内分屏
在应用内打开视频通话等内容，可以提供应用内分屏入口，实现边聊边看等任务并行体验。
会议自适应布局
会议界面根据设备的屏幕宽度，进行投屏画面内容和参会人信息的自适应布局。
动态的卡片布局
手机顶部关注列表和动态卡片，在宽屏设备上挪移布局并形成分栏，露出多列动态卡片。
沉浸式拍照
基于不同设备的物理尺寸和持握方式自动调整快门键等按钮的位置，优化大屏使用体验。
图片选择器
在进行图片选择器的设计时，建议根据不同屏幕尺寸设备，自动调整布局和大小以适应。
图片编辑
图片或视频编辑时，在折叠屏上，建议提供布局切换按钮，允许手动调整布局样式。
新闻边看边评
阅读新闻详情时，为确保沉浸阅读体验，在平板上建议采用挪移布局，实现边看边评。
书架重复布局
书架是阅读常用场景，建议采用重复布局，增加一屏显示数量，容纳更多书籍信息。
阅读搜索
在不同设备上，搜索推荐可自动调整展示形式。例如，平板上可以考虑浅层窗口化显示。
商品搜索
建议采用轻量化搜索体验，点击搜索时，原地激活搜索框，使用搜索面板承载推荐内容。
分屏购物比价
查看商品时，在宽屏设备上可进行分屏，同时查看两个商品的详细参数并进行购物比价。
直播边看边买
看直播听商品讲解的同时，可以利用侧边辅助面板查看商品详情，提升购买决策效率。
首页自适应布局
银行理财类应用在多端宽屏适配时，可通过延伸布局露出更多图标信息，或通过图标背景的形变为宽屏设备提供更舒适的布局体验。
瀑布流分栏布局
金融资讯对于阅读效率有更高的诉求，点击资讯卡片时，可使用分栏布局显示新闻资讯详情。方便用户快速切换查看不同资讯内容。
卡片的灵活布局
金融类应用中卡片类型较多，在宽屏设备上，可灵活使用卡片的延伸、形变或挪移布局。如卡片挪移布局：从上下结构变为左右结构。
美食页面店铺页
在店铺页进行宽屏适配时，建议默认使用分栏布局，以实现“列表+详情”快速切换的效果。
美食页面选规格
当用户选择美食的具体规格时，建议调用半模态窗口显示，折叠屏上为窗口居中显示。
图文笔记
折叠屏图文占比建议为6:4，图片右侧贴合文字区域，与左侧页边距尽量缩小，保证显示。
时间选择
选择查询车票的时间，折叠屏、平板和电脑通过系统的半模态控件，拉起日历控件。
查看订单
折叠屏、平板和电脑使用宫格布局。折叠屏订单页直接露出待支付或已经预定的车票信息。
酒店排行榜
手机、折叠屏上使用沉浸式 banner，而平板、电脑上建议采用左大右小的布局。
面板多档位调节
在折叠屏等宽屏设备上，使用侧边半模态面板而非全屏拉伸底部面板，减少地图遮挡。
路线导航
在折叠屏等设备上，建议沿用悬浮面板设计，内容在大屏上通过自适应布局带来更好体验。
选择车型
选择起点和终点后，车型列表在半模态面板上展示，打车路线则在地图上展示。
收付款
若页面内容元素较少，在宽屏设备适配时两侧可能出现较多留白时，可考虑通过浅层窗口的形式来承载原有页面，达成轻量交互的体验。
余额页
在宽屏设备上可考虑使用挪移布局，将上下布局的页面元素变为左右布局的形式，从而避免组件在宽屏设备上被横向过度拉伸。
账单页
在宽屏设备上，账单列表页可使用分栏布局，例如分栏左侧为账单列表，分栏右侧展示本月的收支分析数据可视化页面。
游戏战绩浅层化
在折叠屏上，保证游戏视野的同时，纵向可增加游戏战绩展示，带来更好游戏体验。
任务并行
可通过分屏，实现多应用并行，在折叠屏或平板上进行边购物边玩或边聊边玩。
挖孔避让
挖孔区在顶部时，需要避让以防遮挡，操作按钮需往另一侧移动，同时避免侧边大量留白。
全屏 3D 看车
在折叠屏上，建议使用沉浸式布局，显示更大的汽车 3D 模型图，提升全屏看车使用体验。
汽车评分
评分页面，建议整体使用沉浸式背景，减少视觉割裂感，可视化展示数据，提升使用体验。
视频购车
在浏览文章/视频时，推送文章相关车辆，在折叠屏上，建议使用1:1侧边面板展示。
img
丰富的设计资源
为你提供多种效率组件和界面模版，以及不断更新的设计资源库，包含图标、色彩、文字、音效等丰富的资源。
了解详情
img
img
了解详情