UX Design Principles for HarmonyOS Next: Circle & Rectangle Watches

Read the original article：UX Design Principles for HarmonyOS Next: Circle & Rectangle Watches

Hi, here are core UX principles for designing HarmonyOS Next apps tailored for both circular and rectangular watch displays.

Introduction

Designing apps for smartwatches is like working with a canvas the size of a coin — and HarmonyOS Next introduces new challenges with both circular and rectangular screens. How can developers ensure great UX across such different form factors?

This guide breaks down best practices, common pitfalls, and practical design tips gathered from HarmonyOS documentation and real-world experience building apps for wearables. Whether you’re creating a step tracker, a calendar view, or a music controller, these principles will help your app feel native and effortless on any watch.

Understanding the Form Factors: Circle vs. Rectangle

Designing for both shapes means embracing flexibility and adaptability. Circular screens emphasize centered layouts and radial menus, while rectangular ones work better with traditional vertical flows and edge-aligned elements.

🟠 Circular Watches

• Swiping (up/down/left/right)
• Tap interaction within a circle
• Rotating bezel or crown inpu
• Radial menus and centered UI
• Avoid clipped corners

🟦 Rectangle Watches

• Scroll-first UI
• Edge-to-edge cards
• Standard top-to-bottom reading order
• Grid alignment

Typography & Readability

Small screens demand maximum clarity. Follow these rules:

• Body text: 12–14fp, Titles: 18–24fp
• Use bold weights for sunlight readability
• Keep sentences short — 1–2 lines max
• Use system font tokens for scaling across devices

Iconography and Minimal UI

Icons are your app’s body language. Make them speak clearly:

• Use simple outlines or bold fills
• Avoid decorative or complex icons
• Label only if the icon’s meaning isn’t obvious
• Minimalist approach: 1 screen = 1 core action

Tip: Prioritize the most frequent action on each screen.UI

Designing for Circular Navigation

Circle screens introduce new interactions:

• Use radial menus or circular layouts when possible
• Avoid UI elements too close to clipped edges
• Maintain a minimum 96px tap zone
• Support rotating crown/bezel gestures

Goal: Center the user’s attention and reduce thumb movement.D

Scroll & ArkList Design

Scrolling is how most watch users explore data.

• Use ArkList for efficient list rendering
• Keep 2–4 items visible per screen
• Add padding top and bottom to prevent mis-taps
• Show scroll indicators when useful
• Prefer title + subtitle or icon + label formats

Performance Tip: Minimize flick lag with optimized data binding.

Consistent Spacing and Alignment

Visual rhythm creates harmony in a tiny space.

• Use 16px or 32px margin grids
• Align text baselines and icons
• Don’t mix left and center alignment on one screen
• Group related items with tighter spacing

Tips & Pitfalls to Watch For

✅ Do:

• Preview on both form factors early
• Use Harmony Design Kit assets
• Test on-device tap accuracy

❌ Avoid:

• Long sentences or multi-function screens
• Mixing alignment styles
• Forgetting scroll performance

Conclusion

Smartwatch UX is a discipline of restraint. On HarmonyOS Next:

• Prioritize simplicity and single-action screens
• Embrace screen shape when building layouts
• Use system tokens and components for consistency
• Think like your user — one glance, one gesture, one result

Written by Emirhan Serin