Flat Design
Design plat
Le design plat utilise des formes simples, des couleurs unies et des zones plates claires, avec peu de profondeur factice.
Un autre exemple
Une application de transports en commun utilise des icônes claires, des couleurs pleines et du texte en gras plutôt que du brillant.
Parties principales
- 01Content surface
- 02Distinct visual treatment
- 03Action and readability check
Utilisez-le lorsque
Utilisez-le lorsque la rapidité, la lisibilité facile et des visuels calmes sont plus importants que des matériaux réalistes.
Ne l'utilisez pas lorsque
Ne retirez jamais tous les signes indiquant qu'une chose peut être utilisée. Les contrôles plats nécessitent toujours des états et des bordures clairs.
Nom utilisé dans le code
solid planes + minimal depth Avant d'expédier
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Design plat (Flat Design). User context: Une application de transports en commun utilise des icônes claires, des couleurs pleines et du texte en gras plutôt que du brillant. Design concept to apply: Design plat (Flat Design). Why it fits: Utilisez-le lorsque la rapidité, la lisibilité facile et des visuels calmes sont plus importants que des matériaux réalistes. Do not use it when: Ne retirez jamais tous les signes indiquant qu'une chose peut être utilisée. Les contrôles plats nécessitent toujours des états et des bordures clairs. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Aucun standard officiel unique ne régit l’ensemble du terme. Sa signification peut varier selon les équipes, plateformes ou frameworks. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Design plat (Flat Design) is used now. Definition: Le design plat utilise des formes simples, des couleurs unies et des zones plates claires, avec peu de profondeur factice. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.