FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 宽屏通用适配规则

# 1. 概述

FinClip 小程序支持大屏幕(PC/TV/车载平板等),保证内容清晰可读、界面元素操作简易,建立高效、友好、一致的用户体验,最大程度地适应和支持不同的需求,本指引提供宽屏适配相关建议,以供参考。

# 2. 适配宽屏

在 PC/TV/车载平板上,因视图增大可展示更多的信息,可对小程序的布局进行优化

# 2.1 适配原则

竖屏:以手机尺寸414×736显示 1-1-1.png

横屏:以平板尺寸768×1024显示 1-1-2.png

# 2.2 适配布局优化

(1)左右布局:充分利用屏幕宽度,页面元素左右布置提高视图利用率 2-1-1.png

(2)自由布局:对内容布局适当地重新设计,让元素充分展示在视图中 2-1-2.png

(3)更适合的导航方式:将横排的导航栏,改为侧边栏样式,更好地区分界面主次关系 2-1-3.png

# 3. 宽屏交互适配

# 3.1 PC 端交互适配

PC 端依赖鼠标和键盘操作,需要将移动端手势转译为鼠标操作 2-1-4.png

# 3.2 TV 端交互适配

TV 端依赖遥控器与电视交互,需要明确当前光标所在位置,提示选中或悬停的元素 2-1-5.png

# 3.3 车载平板端交互适配

车载平板端应优先考虑驾驶员安全作为前提,交互区域应该清晰可读,容易操作,满足车辆行驶中完成简单的交互行为 2-1-6.png

© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单

填写 FinClip 问卷抽缤纷夏日盲盒
Hi,这里是我们为 FinClip 用户准备的一封调研问卷,期待您的参与,您的反馈和建议,将指引 FinClip 未来前进的方向。