Ui Hierarchy Cross Platform

Nghiên Cứu: Cấu Trúc UI Hierarchy — Cross-Platform

Date: 2026-03-11 Sources: Apple HIG, Material Design 3, Figma SDK Foundation V2 Purpose: So sánh cấu trúc UI hierarchy giữa 3 hệ sinh thái để validate hệ thống tier của Prisma

1. So Sánh 3 Hệ Sinh Thái

Apple (iOS / SwiftUI / UIKit)

App
└ Scene (WindowGroup)
  └ NavigationStack / TabView         ← Navigation container
    └ View (Screen)                   ← LEVEL 1: Screen
      ├ NavigationBar                 ← Fixed chrome
      ├ ScrollView / List             ← LEVEL 2: Content area
      │ ├ Section                     ← LEVEL 3: Content section
      │ │ ├ VStack / HStack / LazyVGrid  ← LEVEL 4: Layout container (Group)
      │ │ │ ├ Cell / Row              ← LEVEL 5: Component (reusable UI)
      │ │ │ │ ├ Image                 ← LEVEL 6: Element
      │ │ │ │ ├ Text                  ← LEVEL 6: Element
      │ │ │ │ └ Toggle                ← LEVEL 6: Element
      │ │ │ └ ...
      │ │ └ ...
      │ └ ...
      └ TabBar                        ← Fixed chrome

Apple hierarchy thực tế: 6 levels

Android / Material Design 3

Activity / Fragment
└ Scaffold                            ← LEVEL 1: Screen shell
  ├ TopAppBar                         ← Fixed chrome
  ├ Content (Body Region)             ← LEVEL 2: Body region
  │ ├ Pane (1-3 panes)               ← LEVEL 2b: Pane (responsive)
  │ │ ├ LazyColumn / LazyVerticalGrid ← LEVEL 3: Scrollable list
  │ │ │ ├ Card / ListItem            ← LEVEL 4: Component
  │ │ │ │ ├ Icon                     ← LEVEL 5: Element
  │ │ │ │ ├ Text                     ← LEVEL 5: Element
  │ │ │ │ └ Switch                   ← LEVEL 5: Element
  │ │ │ └ ...
  │ │ └ ...
  │ └ ...
  ├ BottomNavigation                  ← Fixed chrome
  └ FAB                               ← Floating action

M3 layout concepts:

• Window → Navigation Region + Body Region
• Body Region → 1-3 Panes (fixed or flexible)
• Panes → Content organized in lists/grids
• Canonical Layouts: List-Detail, Supporting Pane, Feed

Figma VNPAY (hiện tại)

2. Master Comparison Table

3. Analysis: Prisma Cần Element Tier Không?

Tại sao Apple & Android KHÔNG có "Element" spacing tokens?

Kết luận: Element KHÔNG CẦN tier-level tokens

Lý do:

1. Apple & Android đều không có Element spacing tokens — element spacing nằm trong component spec
2. Element quá nhỏ để cần density scaling — icon 20px không đổi giữa compact/default
3. Element spacing đã được handle bởi comp tier — --comp-stack-gap-small: 4px đã cover gap giữa icon+text
4. Element sizing → nên là primitive — icon size, avatar size... là static, không scale theo density

Đề xuất: Thêm Element Sizing Token (KHÔNG phải spacing tier)

Thay vì tạo --elem-* tier giống page/section/group/comp, chỉ cần thêm sizing primitives:

/* Element sizing — trong primitives, KHÔNG trong density */
--icon-size-xs: 12px;
--icon-size-sm: 16px;
--icon-size-default: 20px;
--icon-size-md: 24px;
--icon-size-lg: 32px;
--icon-size-xl: 40px;

--avatar-size-xs: 20px;
--avatar-size-sm: 24px;
--avatar-size-default: 32px;
--avatar-size-md: 40px;
--avatar-size-lg: 48px;
--avatar-size-xl: 64px;

--indicator-size: 8px;
--indicator-size-sm: 6px;

4. Validation: Prisma 4-Tier = Industry Standard

Kết luận: Prisma 4-tier system (page > section > group > comp) đã đúng và match industry standard. Element tier tồn tại trong design hierarchy nhưng KHÔNG cần spacing/density tokens riêng. Element sizing tokens (icon, avatar) nên là primitives, không phải density tier.

5. Triết Lý Thiết Kế (từ Figma)

Prisma đi theo hướng VNPAY = Design system oriented, đúng vì Prisma là design system. Token-first approach phù hợp khi:

• Serve nhiều platform (web, iOS, Android, React Native)
• Cần consistency across products
• Scale qua nhiều team và brand