HarmonyOS收银台设计规范：构建简洁高效的支付体验

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的设计标准。