多设备银行理财界面

概述

本文从当前常见的多设备应用场景中选取银行理财应用作为典型案例，详细阐述“一多”理念在实际开发中的应用。银行理财应用在大屏幕设备上使用时，需保障用户办理金融业务的顺畅性，同时提升屏幕交互效率。多设备银行理财应用围绕首页、账户总览、理财详情和购买流程展开，覆盖了用户从资产入口浏览、产品查看到购买确认的核心链路。

当前应用已适配的设备包括：直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。

下文将从UX设计、工程管理、页面开发三个方面，系统介绍银行理财应用在实际开发中的最佳实践，为开发者提供可借鉴的实现思路。

• UX设计：介绍银行理财应用的交互逻辑与通用的设计要点，开发者可直接参考同类设计要点。
• 工程管理：介绍“一多”工程所需配置，并推荐采用结构更清晰的三层架构。
• 移动端页面和电脑端页面：遵循实际应用开发流程，以页面为基本单元，依次讲解窗口适配、页面开发的设计思路与实现方法。

UX设计

应用的UX设计可参考金融理财类的多设备响应式设计指南，设计参考图如下所示。

工程管理

为确保“一多”工程代码的复用性与可维护性，建议开发者采用分层架构组织代码工程。该架构将项目划分为产品定制层（products）、基础特性层（features）和公共能力层（commons）三个层级，各层级权责明确且功能独立，为开发者提供了清晰、高效且可扩展的设计方案。关于分层架构的具体设计细节，可参考分层架构设计。

创建工程

建议开发者参考多设备工程部署与发布相关内容，掌握分层架构工程的创建与配置方法后，创建模板项目工程。根据银行理财应用的开发需求进行针对性修改，确保工程架构贴合实际业务需求。

工程结构

银行理财应用采用推荐的分层架构，将代码工程按products、features、commons三个层级组织。各层级设计如下：

• products层：银行理财应用需要适配的设备包括直板机、双折叠（Mate X系列）、三折叠、阔折叠、平板和电脑。由于电脑界面布局与其他设备差异较大，因此单独创建名为“pc”的HAP包作为电脑设备的应用入口；直板机、双折叠（Mate X系列）、三折叠、阔折叠及平板设备上的界面布局整体相似，部分差异可以通过“一多”的自适应布局和响应式布局进行适配，为此创建名为“default”的HAP包作为这些设备的应用入口。
• features层：包含四个核心业务模块——账户（account）、投资（investment）、理财产品（wealth）和推荐（recommend）。为各模块分别创建对应HAR包，供products层按需引用。各模块相对独立，互不依赖，便于后续维护与迭代。
• commons层：为实现代码复用并减少冗余，集中存放公共常量、日志工具类及窗口管理工具等基础能力，供其他模块统一调用。

工程结构如下：

├──commons/financialbase                                 
│  └──src/main
│     ├──ets
│     │  ├──constants                         // 公共常量定义
│     │  └──utils                             // 工具类与窗口能力封装
│     └──resources                            // 公共资源
├──features                                   
│  ├──account                                 // 账户模块
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──components                     // 账户模块页面组件
│  │     │  ├──constants                      // 账户模块常量
│  │     │  ├──model                          // 账户模块数据模型
│  │     │  └──viewmodel                      // 账户模块视图模型
│  │     └──resources                         // 账户模块资源
│  ├──investment                              // 投资模块
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──components                     // 购买模块页面组件
│  │     │  ├──model                          // 购买模块数据模型
│  │     │  └──viewmodel                      // 投资模块视图模型
│  │     └──resources                         // 投资模块资源
│  ├──wealth                                  // 理财产品模块
│  │  └──src/main
│  │     ├──ets
│  │     │  ├──components                     // 产品与卖点展示组件
│  │     │  ├──model                          // 产品模块数据模型
│  │     │  └──viewmodel                      // 产品模块视图模型
│  │     └──resources                         // 产品模块资源
│  └──recommend                               // 推荐内容特性
│     └──src/main
│        ├──ets
│        │  ├──components                     // 推荐模块组件
│        │  ├──model                          // 推荐模块数据模型
│        │  └──viewmodel                      // 推荐模块视图模型
│        └──resources                         // 推荐模块资源
└──products                                    
   ├──default                                 // 手机/平板设备
   │  └──src/main
   │     ├──ets
   │     │  ├──entryability                   // 入口类
   │     │  ├──model                          // 数据模型
   │     │  ├──pages                          // 页面
   │     │  ├──view                           // 组件
   │     │  └──viewmodel                      // 视图模型
   │     └──resources                         // 资源文件
   └──pc                                      // PC设备
      └──src/main
         │  ├──model                          // 数据结构
         │  ├──pages                          // 页面
         │  ├──pcbackupability                // 数据备份与恢复扩展能力
         │  ├──view                           // 组件
         │  └──viewmodel                      // 视图模型
         └──resources                         // 资源文件

移动端页面

本章介绍如何针对直板机、双折叠（Mate X系列）、三折叠、阔折叠及平板设备上的银行理财应用，利用“一多”布局能力，实现页面层级“一套代码、多端适配”的目标。同时，阐述这些设备上的窗口适配方案。

窗口适配

• 窗口模式

  适配设备支持全屏、分屏、悬浮窗和自由窗口模式，具体参见窗口模式。其中，分屏模式与悬浮窗无需特殊设计，可通过系统方式进入。应用内监听窗口尺寸变化，通过断点刷新UI，即可自动适配全屏、分屏、悬浮窗和自由窗口模式下的布局。

• 窗口方向

  在module.json5配置文件中将orientation字段设置为follow_desktop（跟随桌面的旋转模式），详情可参考为应用配置旋转策略。

• 窗口沉浸式

  根据UX设计，需实现不同窗口模式（全屏、分屏、悬浮窗、自由窗口）下的沉浸式效果，可参考窗口沉浸式。推荐开发者使用实现沉浸式效果中的组件级沉浸方案（组件设置页面沉浸），同时进行动态安全区避让，确保沉浸式显示效果。自由窗口模式下，使用window.setWindowDecorVisible(false)隐藏标题栏，仅保留右上角三键，使应用页面延伸至标题栏区域，实现沉浸式显示效果。

首页

银行理财应用首页主要承担业务入口、消息公告、卡片内容和财富推荐的聚合展示。根据功能设计，应用首页相关内容划分为6个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

账户总览页

账户总览页用于展示用户总资产、昨日收益概览，以及活期、投资、负债等资产模块的分区信息。根据功能设计，应用账户总览页相关内容划分为6个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

理财详情页

理财详情页用于展示理财产品的关键信息、交易时间线及产品亮点，并提供“关注/买入”的底部操作入口。根据功能设计，将理财详情页相关内容划分为5个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

购买页

购买页用于完成理财产品的申购确认，用户在此确认金额、选择付款方式并核对产品信息。根据功能设计，将购买页相关内容划分为6个区域，效果图如下：

界面开发

在sm断点下，使用bindSheet为组件绑定半模态页面，md及以上断点，使用Navigation实现双栏。具体实现方案如下表所示：

电脑端页面

本章介绍如何基于现有移动端界面开发方案，实现代码逻辑与布局复用，高效完成电脑设备上银行理财应用的界面开发。

首页

银行理财应用首页主要承担业务入口、消息公告、卡片内容和财富推荐的聚合展示。根据功能设计，应用首页相关内容划分为6个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

账户总览页

账户总览页用于展示用户总资产、昨日收益概览，及活期、投资、负债等资产模块的分区信息。根据功能设计，应用账户总览页相关内容划分为6个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

理财详情页

理财详情页用于展示单个理财产品的关键信息、交易时间线及产品亮点，并提供“关注/买入”的底部操作入口。根据功能设计，将理财详情页相关内容划分为5个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：

购买页

购买页用于完成理财产品的申购确认，用户在此确认金额、选择付款方式并核对产品信息。根据功能设计，将购买页相关内容划分为6个区域，效果图如下：

界面开发

具体介绍及实现方案如下表所示：