HarmonyOS收银台设计规范：构建简洁高效的支付体验
在现代移动支付应用中，支付收银台是用户与商户之间重要的交互界面。为确保支付过程的流畅性和一致性，HarmonyOS为开发者提供了详细的收银台设计规范。本文将详细解读如何基于HarmonyOS平台构建支付收银台，涵盖从页面布局、支付方式选择到支付按钮设计等多个方面，帮助开发者打造简洁且高效的支付体验。
1. 收银台页面设计概述
收银台页面的设计包含三个核心部分：商户信息展示、支付方式选择和支付确认按钮。开发者需通过配置文件（module.json5）、页面代码（.ets文件）和资源文件（如图片、字符串等）来实现这一功能。页面的整体布局应简洁明了，确保用户能在最短时间内完成支付操作。
页面容器设计
收银台的页面容器应采用半模态弹窗的形式展示，以确保页面内容不被其他操作打扰。HarmonyOS的UX规范要求将收银台展示为半模态容器，具体实现可以参考CashierBindSheetContainer.ets代码示例。以下是如何定义页面容器：
import { CashierComponent } from './CashierComponent';
@Component
export struct CashierBindSheetContainer {
@Builder
cashierBuilder() {
Column() {
CashierComponent();
}
}
build() {
Column() {
Column() {
}.bindSheet(true, this.cashierBuilder(), {
title: () => {},
height: SheetSize.FIT_CONTENT,
showClose: true,
enableOutsideInteractive: false,
backgroundColor: '#E5FFFFFF',
blurStyle: BlurStyle.COMPONENT_THICK,
onWillDismiss: ((action: DismissSheetAction) => {
// 退出事件监听
}),
});
}.width('100%');
}
}收银台页面布局
收银台页面的布局分为三大部分：头部商户信息展示、中部支付方式列表以及底部支付按钮。下面是如何构建这三个部分的代码示例：
@Preview
@Component
export struct CashierComponent {
private mercShortName: string = "华为支付测试商户";
private paymentAmount: string = '0.01';
@State selectedPaymentType: PaymentType = new PaymentType();
@Builder
orderDetail() {
// 后续展示实现
}
@Builder
displayHeader() {
// 后续展示实现
}
@Builder
paymentListBuilder() {
// 后续展示实现
}
@Builder
buttonArea() {
// 后续展示实现
}
@Builder
cashierUI() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
this.orderDetail();
this.paymentListBuilder();
}
.align(Alignment.Top)
.padding({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') });
Column() {
this.buttonArea();
}
.flexShrink(0)
.padding({ left: $r('sys.float.ohos_id_elements_margin_horizontal_l') });
}
build() {
Column() {
this.cashierUI();
}
}
}2. 商户信息展示
商户信息是用户完成支付前必须确认的重要内容。商户名称和支付金额应该清晰地展示在收银台页面的顶部，确保用户在支付时不产生疑惑。商户信息的展示可以通过PaymentOrderComp组件来实现，具体代码如下：
@Builder
orderDetail() {
Column() {
PaymentOrderComp({
mercShortName: this.mercShortName,
paymentAmount: this.paymentAmount,
})
.margin({ bottom: 24 });
}
.width('100%')
.padding({ top: $r('sys.float.ohos_id_elements_margin_vertical_m') })
}3. 支付方式选择
支付方式列表是收银台页面的核心部分，用户可以从多个支付方式中选择自己喜欢的支付方式。为了增强用户体验，选中的支付方式应以视觉效果标示，确保用户知道自己当前的选择。以下是支付方式列表的代码实现：
@Builder
paymentListBuilder() {
Column() {
List() {
ForEach(paymentTypeList, (paymentType: PaymentType) => {
ListItem() {
PaymentItemComp({
paymentType: paymentType,
canChecked: true,
isChecked: this.selectedPayTypeSerialNo === paymentType.payTypeSerialNo,
onSelect: () => {
if (paymentType.isAvailable) {
this.select(paymentType);
}
},
})
}
})
}
}
}4. 支付按钮设计
支付按钮是收银台界面的交互元素，用户完成支付方式选择后，点击支付按钮即可发起支付。按钮应具备显著的视觉效果，且易于点击。可以通过ConfirmButton组件来创建支付按钮：
@Builder
buttonArea() {
ConfirmButton({
text: $r('app.string.kit_hwpay_checkout_confirm_pay'),
})
.margin({ top: $r('sys.float.ohos_id_elements_margin_vertical_l') });
}5. 页面资源与支付类型定义
在支付收银台中，涉及到的资源文件（如图片、字符串等）应统一存放在src/main/resources目录下。支付方式的枚举和支付类型的定义至关重要，它们可以通过如下代码进行定义：
export class PaymentType {
payTypeSerialNo?: string;
payTypeDesc?: string;
isAvailable?: boolean;
custPayType: string = '';
}6. 测试数据与支付工具
在开发过程中，测试数据和支付工具的定义也非常重要，下面是支付方式的测试数据：
export const paymentTypeList: PaymentType[] = [
{ payTypeSerialNo: '1', payTypeDesc: 'xx银行储蓄卡 (0606)', isAvailable: true, custPayType: 'BankFastPayment' },
{ payTypeSerialNo: '2', payTypeDesc: 'xx银行储蓄卡 (0909)', isAvailable: true, custPayType: 'BankFastPayment' }
];7. 总结
通过遵循HarmonyOS收银台设计规范，开发者可以轻松构建出一个功能完备且用户友好的支付界面。无论是商户信息展示、支付方式选择，还是支付按钮的设计，每一部分都应注重细节，以确保支付过程的顺畅和高效。希望本篇博客能够帮助开发者在实现支付收银台时，提升用户体验并确保符合HarmonyOS的设计标准。