HDC2023+HarmonyOS应用开发(UX)+PART1.pdf

《HDC2023+HarmonyOS应用开发(UX)+PART1.pdf》由会员分享，可在线阅读，更多相关《HDC2023+HarmonyOS应用开发(UX)+PART1.pdf（118页珍藏版）》请在三个皮匠报告上搜索。

1、HarmonyOS应开发（UX）如何打造优秀的折叠屏&平板应体验2019年业界发折叠屏移动智能终端书定义折叠屏上更多内容、更效率、更加沉浸的3设计原则针对屏幕设备的6种基础动态布局规则屏幕设备宽屏适配开发指南2020年发布折叠屏移动智能终端机界设计及开发指南V2.0组织零基础效适配折叠屏折叠屏效适配进阶之路主题沙折叠屏独有的外屏、任务并、双窗交互范式影娱乐、游戏等4类场景设计建议2022年发布折叠屏移动智能终端机界设计及开发指南V2.1详细的控件适配范式、8典型场景的设计建议系统控件、H5、多任务并的开发指南2023年9+折叠屏创新布局&交互范式悬停设计规范发布折叠屏软件设计与开发业规范 V3

2、.0200+应建合作通过HarmonyOS折叠屏设计与开发规范，改善了折叠屏应体验70+Top应改善了图字体问题33+Top应解决了2列宫格过问题40+Top应改善了Banner图、弹出框过问题19年今，折叠屏应体验有了明显改善但依然有量应存在折叠屏/平板上的体验痛点弹出框过图标/本过图变形不适配横屏内容积留图显示不全、左右留过为帮助开发者和设计师更好地进折叠屏&平板上的应体验评估，华为联合11家绿盟伙伴发布了折叠屏&平板应体验评估标准从以下四个进折叠屏/平板应体验评估基础功能完整交互易效布局合理美观折叠适配 内容完整 横竖屏适配 挖孔适配 多窗适配基础功能完整内容完整不要显示不全不要信息量过

3、少不要元素变形/模糊横竖屏适配响应式布局，适配横竖屏显示横竖屏适配响应式布局，适配横竖屏显示横竖屏适配尺接近1:1的设备，横竖屏保持致的布局挖孔适配挖孔区遮挡核交互或重要信息，需局部避让挖孔适配挖孔区不遮挡核交互，需避让多窗适配两种悬浮窗两种分屏多窗适配示例 适中 信息量适中 边距适中 布局合理 布局创新布局合理美观各元素&信息量适宜签-布局合理随着屏幕变宽，签间距均匀变宽，响应式布局。若有够的空间，在宽屏设备上签和搜索可同排展示Banner-布局合理随着屏幕变宽，Banner图数量响应式增加，适配屏幕宽度，可以有不同的banner卡形状单个设备上同排建议不要超过3个主要BannerBanne

4、r-布局合理在不同宽度的屏幕上，除Banner卡形状可变外，也可以有新的布局图标-布局合理随着屏幕变宽，图标间距均匀变宽，数量变多但要避免信息过密，折叠屏上排图标建议不超过8个，平板横屏建议不超过13个宫格-布局合理每屏幕呈现的宫格列数不要太多，避免信息过密。横向宫格卡，折叠屏3列最佳，平板3-4列最佳宫格-布局合理通过“双指捏合”势调整宫格列数，满不同群的诉求确保各元素的&信息量适宜后，还可以结合实际场景的业务特点和6基础布局规则，进布局创新：确保各元素的&信息量适宜后，还可以结合实际场景的业务特点和6基础布局规则，进布局创新：自适应动态布局界面布局结构不变响应式动态布局界面布局结构调整适应

5、动态布局界布局结构不变响应式动态布局界布局结构调整相对拉伸内容随布局横向拉伸相对缩放内容随布局按例缩放延伸布局内容数量随布局扩展挪移布局内容从上下布局变为左右重复布局内容单列变为多列瀑布布局内容变为瀑布流形式延伸+缩放+动露出辅助信息视频类：在宽屏设备上适应地露出辅助信息，利屏幕空间带来边看边评的增值体验延伸+缩放+动露出辅助信息视频类：在宽屏设备上适应地露出辅助信息，利屏幕空间带来边看边评的增值体验延伸+挪移布局阅读类：宽屏设备上挪移布局，带来更舒适的图阅读体验延伸+挪移布局阅读类：宽屏设备上挪移布局，带来更舒适的图阅读体验延伸+分栏购物类：宽屏设备上分栏，利屏幕空间带来效交互的增值体验延伸

6、+分栏购物类：宽屏设备上分栏，利屏幕空间带来效交互的增值体验瀑布流布局浏览类：宽屏设备上瀑布流布局，带来更具吸引的信息浏览体验瀑布流+分栏浏览类：宽屏设备上瀑布流+分栏，提供效率且有视觉吸引的浏览体验瀑布流+分栏浏览类：宽屏设备上瀑布流+分栏，提供效率且有视觉吸引的浏览体验 易点击 易切换 少跳转 更由交互易效易点击交互热区满触屏点击要求：不于52vp*52vp52vp拇指易交互热区分布交互类控件，分布在指易操作区域难交互区可交互区易交互区频交互类控件，分布式在拇指易操作区域，例如导航易点击上下关联的弹出框等操作，跟随触发控件位置易点击办公或浏览型：通过分栏布局，提升切换效率易切换通过应内悬浮