← All components

ExpressiveRéférence

Services

nginx
Running · 3 d:443
postgres
Restarting · 2 tentatives:5432

UX / UIRègles illustrées

À faire
Titre
Contenu sur sc
Teinte sc sur surface, rien d'autre.
À éviter
Titre
Ombre + barre latérale
Ombre portée, barre colorée à gauche, petit rayon : le cliché générique.
À éviter
Carte
Cartes imbriquées : la hiérarchie se perd.
À faire
nginxRunning
Port 443 · 3 j
Titre, statut et action sur la même ligne : la carte est dense et lisible.
À éviter
nginx
Running
Une chip et un bouton seuls sur leur ligne alors qu'ils tenaient à côté du titre : du vide pour rien.
À faire

nginx

Running
Port 443 · 3 j
10.0.0.4
Premier bloc collé au start, dernier au end : les 20 px du haut et du bas restent identiques.
À éviter

nginx

Running
Port 443 · 3 j
10.0.0.4
Colonne centrée : un vide s'ouvre au-dessus du titre et les marges du haut et du bas ne suivent plus le padding.
À faire
nginx
Port 443 · 3 j
1.2 GB · 4 workers
Running
Un seul pas de 12 px entre tous les blocs : le rythme est constant et deux cartes s'alignent.
À éviter
nginx
Port 443 · 3 j
1.2 GB · 4 workers
Running
Écarts de 4, 30 et 8 px pour « équilibrer » à l'œil : le rythme casse et les cartes ne s'alignent plus.
À faire
Apparence
SystèmeSombreClair
Le contrôle tient dans la boîte de contenu : les segments se partagent la largeur disponible.
À éviter
Apparence
SystèmeSombreClair
Le contrôle dépasse la boîte de contenu : le rayon de la carte rogne le bord droit et le dernier segment perd sa forme.

Carte de sujetUne chip nomme le sujet, les tuiles montrent le contenu

Médias favoris
MontagneVilleStudio+4Tout voir

Une seule chip de sujet dans l'en-tête, une forme décorative au coin, et des tuiles toutes au même gabarit avec un `gap` de 12 px. La tuile « tout voir » est une tuile comme les autres, pas une action de pied de carte.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

Services

nginx · en marche depuis 3 j

Écran du haut : lire

3 jours de série

Panneau bulle avec volume doux. Dessous, le motif 3DS : un écran du haut pour lire, un écran du bas, plus étroit, pour toucher.

ChromeY2K

Services
nginx · running 3 d

Panneau verre dépoli avec barre de titre chromée, comme une fenêtre de lecteur multimédia 2001.