Building Adaptive E-commerce UIs for HarmonyOS Next

This blog post delves into the development of a cross-terminal compatible e-commerce application for HarmonyOS Next, focusing on adaptive UI design strategies. We'll explore techniques for optimizing the user experience across various screen sizes, from small mobile phones to large tablets and desktops. We'll examine different layout approaches, such as grid and list views, and how to dynamically adjust the UI based on screen dimensions. Key components like the Swiper and adaptive layouts will be highlighted through code examples.

Different Product Display Modes: Grid vs. List

E-commerce applications typically offer two main product display modes: grid and list. The grid layout excels in displaying a large number of products in a compact space, ideal for quick browsing and comparison. Conversely, the list layout prioritizes detailed product information, making it suitable for situations where users want in-depth views. This choice significantly impacts user experience and browsing efficiency.

Adapting Layouts for Different Screen Sizes

Screen real estate directly influences layout choices. Small screens (mobile phones) often require a single-column layout to ensure readability and ease of use. In contrast, larger screens (tablets and desktops) benefit from multi-column layouts, maximizing screen utilization and enabling faster information consumption. For example, tablets might use a two-column layout, while desktops could employ three or more.

Grid Layout and Adaptive Layouts: Automatic Arrangement

The power of combining a grid layout with an adaptive layout allows for dynamic product card arrangement. By defining grid columns, spacing, and card width proportions, the system automatically adjusts the layout depending on the screen size. A single column might appear on small screens (100% width), while larger screens might show three columns (33.3% width each).

import { BreakpointSystem, BreakPointType } from '../common/breakpointsystem';

@Entry
@Component
struct ProductDisplay {
    @State currentBreakpoint: string ='sm';
    @State products: Array<{ id: number, name: string, image: Resource }> = [
        { id: 1, name: 'Product 1', image: $r('app.media.product1') },
        { id: 2, name: 'Product 2', image: $r('app.media.product2') },
        // More products...
    ];
    private breakpointSystem: BreakpointSystem = new BreakpointSystem();

    aboutToAppear() {
        this.breakpointSystem.register();
        this.breakpointSystem.onBreakpointChange((breakpoint: string) => {
            this.currentBreakpoint = breakpoint;
        });
    }

    aboutToDisappear() {
        this.breakpointSystem.unregister();
    }

    build() {
        GridRow({ breakpoints: { value: ['600vp', '840vp'], reference: BreakpointsReference.WindowSize } }) {
            ForEach(this.products, (product) => {
                GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
                    Column() {
                        Image(product.image).width('100%').aspectRatio(1).objectFit(ImageFit.Contain);
                        Text(product.name).fontSize(16).textAlign(TextAlign.Center);
                    }
                      .padding(10)
                      .backgroundColor('#FFFFFF')
                      .borderRadius(10)
                      .shadow({ color: '#00000020', offset: { x: 0, y: 2 }, blurRadius: 4 });
                }
            });
        }
    }
}

Designing the Shopping Interface

Large-Screen Layout: Three-Column Mode

On larger screens, a three-column layout provides ample space for navigation, product categories, and detailed product information. A side navigation bar allows for quick access to different sections, a product category bar facilitates browsing, and a product details bar showcases selected items.

@Entry
@Component
struct BigScreenShoppingPage {
    @State selectedCategory: string = 'All Products';
    @State productCategories: Array<string> = ['All Products', 'Electronics', 'Clothing', 'Home Supplies'];
    @State products: Array<{ id: number, name: string, image: Resource, category: string }> = [
        { id: 1, name: 'Product 1', image: $r('app.media.product1'), category: 'Electronics' },
        { id: 2, name: 'Product 2', image: $r('app.media.product2'), category: 'Clothing' },
        // More products...
    ];
    @State selectedProductId: number | null = null;

    build() {
        SideBarContainer(SideBarContainerType.Embed) {
            // Side Navigation Bar
            Column() {
                ForEach(['Home', 'Shopping Cart', 'Personal Center'], (item) => {
                    Text(item).fontSize(18).onClick(() => {
                        // Navigation logic
                    });
                });
            }
              .width('20%')
              .backgroundColor('#F1F3F5');

            Column() {
                // Product Category Bar
                GridRow() {
                    ForEach(this.productCategories, (category) => {
                        GridCol({ span: 3 }) {
                            Text(category).fontSize(16).onClick(() => {
                                this.selectedCategory = category;
                            });
                        }
                    });
                }

                // Product List Bar
                GridRow() {
                    ForEach(this.products.filter(product => this.selectedCategory === 'All Products' || product.category === this.selectedCategory), (product) => {
                        GridCol({ span: 4 }) {
                            Column() {
                                Image(product.image).width('100%').aspectRatio(1).objectFit(ImageFit.Contain).onClick(() => {
                                    this.selectedProductId = product.id;
                                });
                                Text(product.name).fontSize(14).textAlign(TextAlign.Center);
                            }
                              .padding(10)
                              .backgroundColor('#FFFFFF')
                              .borderRadius(10)
                              .shadow({ color: '#00000020', offset: { x: 0, y: 2 }, blurRadius: 4 });
                        }
                    });
                }

                // Product Details Bar
                if (this.selectedProductId!== null) {
                    const selectedProduct = this.products.find(product => product.id === this.selectedProductId);
                    if (selectedProduct) {
                        Column() {
                            Image(selectedProduct.image).width('100%').aspectRatio(1).objectFit(ImageFit.Contain);
                            Text(selectedProduct.name).fontSize(20).fontWeight(500);
                            // More product details information...
                        }
                          .width('30%')
                          .padding(20)
                          .backgroundColor('#FFFFFF')
                          .borderRadius(10)
                          .shadow({ color: '#00000020', offset: { x: 0, y: 2 }, blurRadius: 4 });
                    }
                }
            }
              .width('80%');
        }
          .sideBarWidth('20%')
          .showSideBar(true);
    }
}

Small-Screen Layout: Tab-Based Navigation

On smaller screens, a tab-based interface efficiently manages different sections while maintaining a clean single-column product list. This approach prioritizes ease of one-handed navigation.

@Entry
@Component
struct SmallScreenShoppingPage {
    @State currentTab: number = 0;
    @State products: Array<{ id: number, name: string, image: Resource }> = [
        { id: 1, name: 'Product 1', image: $r('app.media.product1') },
        { id: 2, name: 'Product 2', image: $r('app.media.product2') },
        // More products...
    ];

    build() {
        Column() {
            Tabs({ barPosition: BarPosition.End }) {
                TabContent() {
                    // Product List Page
                    List() {
                        ForEach(this.products, (product) => {
                            ListItem() {
                                Column() {
                                    Image(product.image).width(100).height(100).objectFit(ImageFit.Contain);
                                    Text(product.name).fontSize(16);
                                }
                            }
                        });
                    }
                }
                .tabBar(
                    Column() {
                        Image($r('app.media.product_list_icon')).width(24).height(24);
                        Text('Product List').fontSize(12);
                    }
                      .justifyContent(FlexAlign.Center).height('100%').width('100%')
                );
                TabContent() {
                    // Shopping Cart Page
                    // Contents of the shopping cart...
                }
                .tabBar(
                    Column() {
                        Image($r('app.media.shopping_cart_icon')).width(24).height(24);
                        Text('Shopping Cart').fontSize(12);
                    }
                      .justifyContent(FlexAlign.Center).height('100%').width('100%')
                );
                TabContent() {
                    // Personal Center Page
                    // Contents of the personal center...
                }
                .tabBar(
                    Column() {
                        Image($r('app.media.personal_center_icon')).width(24).height(24);
                        Text('Personal Center').fontSize(12);
                    }
                      .justifyContent(FlexAlign.Center).height('100%').width('100%')
                );
            }
              .barMode(BarMode.Fixed)
              .barWidth('100%')
              .barHeight(56)
              .onChange((index: number) => {
                    this.currentTab = index;
                });
        }
    }
}

Optimizing the Banner Carousel

The Swiper component provides an elegant solution for banner carousels. By adjusting the displayCount property, we can dynamically control the number of visible banners based on the screen size. For instance, one banner on small screens and two or three on larger screens.

@Entry
@Component
struct BannerSwiper {
    @State currentBreakpoint: string ='sm';
    @State banners: Array<Resource> = [
        $r('app.media.banner1'),
        $r('app.media.banner2'),
        $r('app.media.banner3')
    ];
    private breakpointSystem: BreakpointSystem = new BreakpointSystem();

    aboutToAppear() {
        this.breakpointSystem.register();
        this.breakpointSystem.onBreakpointChange((breakpoint: string) => {
            this.currentBreakpoint = breakpoint;
        });
    }

    aboutToDisappear() {
        this.breakpointSystem.unregister();
    }

    build() {
        Swiper() {
            ForEach(this.banners, (banner) => {
                Image(banner).width('100%').height(200).objectFit(ImageFit.Cover);
            });
        }
          .autoPlay(true)
          .indicator(true)
          .displayCount(new BreakPointType({ sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)!);
    }
}

Enhancing the Shopping Experience

Dynamically Resizing Product Cards

Dynamically adjusting product card dimensions based on screen size is crucial for a consistent user experience. Using aspectRatio maintains the card's aspect ratio, while constrainSize limits its size within specified boundaries.

@Component
struct ProductCard {
    @Prop product: { id: number, name: string, image: Resource };

    build() {
        Column() {
            Image(this.product.image).width('100%').aspectRatio(1).constrainSize({ minWidth: 150, maxWidth: 250 }).objectFit(ImageFit.Contain);
            Text(this.product.name).fontSize(16).textAlign(TextAlign.Center);
        }
          .padding(10)
          .backgroundColor('#FFFFFF')
          .borderRadius(10)
          .shadow({ color: '#00000020', offset: { x: 0, y: 2 }, blurRadius: 4 });
    }
}

Free Window Mode and UI Switching

HarmonyOS Next's free window mode necessitates seamless UI adaptation as window size changes. By detecting breakpoint changes, the application can automatically switch between layouts (e.g., from three-column to tab-based views) to optimize usability.

Optimizing Touch/Mouse Interactions

On larger screens, hovering over a product card could display additional details. On smaller screens, swipe gestures can offer intuitive product navigation.

@Component
struct InteractiveProductCard {
    @Prop product: { id: number, name: string, image: Resource };
    @State isHover: boolean = false;

    build() {
        Column() {
            Image(this.product.image).width('100%').aspectRatio(1).objectFit(ImageFit.Contain).onHover((isHover) => {
                this.isHover = isHover;
            });
            Text(this.product.name).fontSize(16).textAlign(TextAlign.Center);
            if (this.isHover) {
                Text('Product details information...').fontSize(14).opacity(0.8);
            }
        }
          .padding(10)
          .backgroundColor('#FFFFFF')
          .borderRadius(10)
          .shadow({ color: '#00000020', offset: { x: 0, y: 2 }, blurRadius: 4 })
          .onTouch((event) => {
                if (event.type === TouchType.Swipe) {
                    // Logic for swiping to switch products on touch
                }
            });
    }
}

Conclusion

Developing a truly adaptive e-commerce experience on HarmonyOS Next requires careful consideration of screen sizes and user interaction patterns. By leveraging the capabilities of HarmonyOS and employing the techniques discussed here, developers can create engaging and efficient shopping interfaces across a range of devices.