HarmonyOS 7: Spatialization & Multi-Device Adaptation — 5 Page Types to Prioritize First

HarmonyOS 7 introduces spatialization capabilities such as immersive light-sense components and on-device 3D Gaussian Splatting (3DGS) reconstruction, alongside multi-device experience guidelines. For most tool, office, content, and meeting apps, the first phase should focus on foundational work: page hierarchy, information density, window width strategies, interaction confirmation, and multi-device layout rules — not complex 3D visuals.

Decide Whether a Page Deserves Spatialization

Not every page benefits from spatialization. High-frequency, information-dense pages with clear state changes (workbench, image preview, product showcase, project dashboard, meeting details) are good candidates. Low-frequency, single-action pages (login, simple toggles, single-field settings) should stay simple.

Three questions help prioritize:

Is the page high-frequency? Prioritize if: Home, workbench, list, detail visited often. Defer if: Rare settings, one-off pages.

Is the information complex? Prioritize if: Multiple modules, states, data layers. Defer if: Single button, single input.

Does it need visual feedback? Prioritize if: Drag, select, preview, confirm, obvious state changes. Defer if: Static text, simple navigation.

A priority matrix for common page types:

Home / Workbench – High priority. Reason: Carries app entry and core state.

Image Preview – High priority. Reason: Visual content needs depth and immersion.

List / Detail – Medium-High priority. Reason: Suitable for master-detail structure and hierarchy.

Edit / Form – Medium priority. Reason: Must emphasize confirm, save, risk warnings.

Empty / Onboarding – Medium priority. Reason: Good for lightweight guidance and structure.

Settings – Low-Medium priority. Reason: Clarity and stability first, avoid excessive motion.

Login – Low priority. Reason: Single goal, reduce distraction.

Immersive light-sense components suit core interfaces; 3DGS suits 3D content scenes (spatial modeling, product showcase, cultural exhibition). Ordinary tool apps without 3D content can skip 3DGS initially.

Home & Workbench: Restructure Information Hierarchy First

Home and workbench are the first information layer users see. On phones a vertical card list works; on tablets, foldables, and multi-window, the same list feels cramped or sparse. Reorganize into zones: primary tasks left, auxiliary info right.

Example: a meeting-notes app home page with modules — Today's Meetings, Recent Records, To-Do Reminders, Project Entry, Quick Actions. Layout suggestions per screen state:

Phone portrait : Single column cards, prioritize current task.

Phone landscape : Keep single column or lightweight two-column, avoid scattering.

Foldable unfolded : Left: main tasks; Right: recent records or to-dos.

Tablet landscape : Workbench zones: main tasks, to-dos, project entries side by side.

Multi-window : Keep core cards readable, hide low-priority decorative content.

Avoid dumping everything on large screens. Define a module priority structure:

interface WorkbenchSection {
  id: string;
  title: string;
  priority: 'primary' | 'secondary' | 'support';
  visibleInCompact: boolean;
  visibleInExpanded: boolean;
}

This project-side draft (not a HarmonyOS API) drives later tablet columns, foldable layouts, and multi-window adaptation.

List & Detail: Implement Master-Detail Structure

On phones, list and detail are separate screens. On larger screens they can sit side-by-side: list left, detail right. Example for a meeting app:

Phone State : Meeting list alone → Large-Screen State : Left: meeting list

Phone State : Tap to enter detail → Large-Screen State : Right: meeting detail

Phone State : Back to pick another → Large-Screen State : Select list item → right pane refreshes

Phone State : Edit opens new page → Large-Screen State : Right pane enters edit inline or pops editor

Applicable to contacts, projects, files, messages, favorites, local-life merchant lists. Use a width threshold to decide master-detail:

const MIN_DETAIL_WIDTH = 560;
const LIST_WIDTH = 320;
const GAP = 16;
const PAGE_PADDING = 24;

function canUseMasterDetail(windowWidth: number): boolean {
  const availableWidth = windowWidth - PAGE_PADDING * 2;
  const requiredWidth = LIST_WIDTH + GAP + MIN_DETAIL_WIDTH;
  return availableWidth >= requiredWidth;
}

Three key refinements for list-detail pages:

Empty selection state : Large screens must not show blank right pane; show default detail or prompt like "Select a meeting to view details".

List selected state : Left selection must be obvious so user knows detail source.

Edit mode : Clarify whether detail editing is inline or navigates away.

Spatialization here means clear visual layers (list layer, detail layer, action layer) — not heavy animation.

Edit & Form Pages: Secure Confirmation Boundaries

Edit/form pages prioritize input, validation, save, and confirmation. With HarmonyOS 7 Agent/Skill/AI generating drafts, extracting to-dos, auto-filling fields, and suggesting assignees, distinguishing content origin becomes critical.

Example: meeting minutes editor with three content types:

Original meeting transcript : Read-only reference.

AI-generated draft : Editable, confirm before save.

User-finalized content : Saved to project or meeting record.

Mixing them confuses users. Separate layers with a state structure:

interface DraftEditState {
  sourceText: string;
  generatedDraft: string;
  userEditedContent: string;
  hasUserConfirmed: boolean;
  hasUnsavedChanges: boolean;
}

Multi-device layout priorities for edit pages:

Title bar : Show current editing object and save status clearly.

Input area : Phone: single column; Large: split reference left, edit right.

Action area : Save, Cancel, Confirm buttons fixed in clear positions.

Error hints : Near relevant input, not only global toast.

Preview area : Large: show preview; Phone: collapsible.

On large screens, left reference (original transcript or AI draft), right final edit. On phones, vertical stack. Spatialization = distinct visual hierarchy for source, draft, confirmed content.

Empty States, Settings & Low-Frequency Pages: Stay Restrained

Empty states guide next actions. Provide concrete entry points:

No meetings : New meeting, import recording, view sample.

No to-dos : Extract to-dos from meetings entry.

No projects : Create project, link meeting entry.

No contacts : Add contact, import contacts.

No search results : Adjust keywords, clear filters.

Large screens can add a right guidance card; phones keep primary action button prominent.

Settings pages favor stability. Group by frequency and risk:

Common : Notifications, display, default view.

Data : Sync, backup, export.

Permissions : Recording, files, contacts.

Security : Privacy, account, login status.

High-risk : Clear data, delete account.

Large screens: left category panel, right detail. Phones: grouped list. Width threshold for split:

const GROUP_PANEL_WIDTH = 260;
const DETAIL_MIN_WIDTH = 560;
const GAP = 16;
const PAGE_PADDING = 24;

function canUseSettingsSplit(windowWidth: number): boolean {
  const availableWidth = windowWidth - PAGE_PADDING * 2;
  const requiredWidth = GROUP_PANEL_WIDTH + GAP + DETAIL_MIN_WIDTH;
  return availableWidth >= requiredWidth;
}

Summary

Spatialization and multi-device adaptation must be considered together. Visuals alone yield pretty but unusable apps; mere stretching yields layout without hierarchy. Start with five core page types:

Home / Workbench : Information hierarchy and core entry points.

List / Detail : Master-detail structure and selection state.

Edit / Form : Input, confirmation, save, and rollback.

Empty / Onboarding : Next action and lightweight guidance.

Settings / Management : Categorization, permissions, data, high-risk ops.

Apply per app domain: meeting-notes apps → workbench, meeting list/detail, minutes editor, to-do empty state, settings. Local-life apps → home recommendations, merchant list/detail, booking form, no-results page, permissions. Image tools → asset home, image detail, batch edit, empty album, storage settings.

After this foundation stabilizes, layer immersive light-sense, 3DGS, spatial animations, and advanced visual capabilities — they'll enhance rather than decorate.