Service Card
服务卡片 / 原子化万能卡片
The signature interactive widget of HarmonyOS — surfacing live app status and high-frequency services directly on the home screen without opening the app.
Live Demo
Actually clickable25°
多云转晴 · 深圳
What you just saw:The weather or to-do memo widget pinned to a Huawei home screen that lets you check off tasks or glance at city temperatures without launching the main application.
What it actually is
Service Card (Universal Widget / Service Card) is the flagship micro-interface paradigm in HarmonyOS ArkUI. It transcends traditional isolated apps by condensing essential data and state (such as real-time ride tracking, delivery status, flight check-in, media playback, and fitness metrics) into 2x2, 2x4, or 4x4 desktop micro-windows. Users can view dynamic updates at a glance, trigger one-tap actions like play/pause directly on the card, or launch lightweight atomic services without full installation.
Anatomy · What it's made of
Card Container微卡片容器
Standard grid form factor (2x2: 150x150, 2x4: 310x150) with 16-24px rounded corners
Header / Brand服务标识区
App micro-icon and card name at the top left
Key Visual / Data核心指标与状态
Large display numerals, dynamic sparkline charts, or state badges
Quick Action一键动作触发
Micro-buttons and pill actions triggering card actions or atomic service routing
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Time-sensitive or ambient app state needs continuous visibility (delivery tracking, market tickers, calendar reminders) | Yes |
| Providing ultra-fast single-tap actions (music playback toggle, smart home switch, one-tap check-in) | Yes |
| Serving as a direct interactive gateway into lightweight HarmonyOS atomic services | Yes |
| Overloading the widget with deep multi-step forms or long scrolling lists (redirect to the app instead) | No |
Do not treat service cards as mini-browsers; space is constrained and requires restrained, high-signal information.
Avoid complex nested scrolling lists or multi-level navigation within desktop cards to avoid degrading home screen swipe physics.
Similar Patterns
Don't mix these upService CardCurrent
服务卡片 / 原子化万能卡片
The signature interactive widget of HarmonyOS — surfacing live app status and high-frequency services directly on the home screen without opening the app.
Stat Card
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
In one line:The signature interactive widget of HarmonyOS — surfacing live app status and high-frequency services directly on the home screen without opening the app.
Stat Card
统计卡片
A small card that holds exactly one number, plus a label and a sense of which way the trend is moving.
Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
Banner
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a 2x2 weather service card following HarmonyOS ArkUI specs: ambient desktop widget displaying live temperature, weather icon, air quality, and one-tap refresh.
Don't just say this to AI
Bad → BetterDon't say this to AI
Draw a phone widget.
Say this instead
Follow HarmonyOS ArkUI Service Card specs: conform to standard 2x2 grid dimensions, expose vital live metrics and micro-actions, and support zero-install atomic service launching.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.