Redface 2 · #603 · exploration design

Vue Drapeaux
— pistes de refonte.

36 mockups rendus avec le pipeline réel de l'app (Compose + Roborazzi, thème et couleurs de drapeaux authentiques). L'objectif : un large éventail d'options pour personnaliser la vue Drapeaux, du ultra-compact au confortable. Données fictives mais champs réalistes ; quotedMe (alerte « cité ») reste à confirmer côté serveur.

📅 24 juin 2026 36 variantes render Roborazzi · 360×900 · dark/light/amoled cadrage Codex GO

01

Spectre de densité

La colonne vertébrale : du ultra-compact au confortable. Un même contenu, cinq respirations.

Ultra-compact — 1 ligne, liseré couleur, +N pages, onglets segmentés, bottom icônes — A1 · ULTRAUltra-compact — 1 ligne, liseré couleur, +N pages, onglets segmentés, bottom icônes

Compact — dot + titre + meta condensée — A2 · COMPACTCompact — dot + titre + meta condensée

Équilibré — titre + meta + pages-à-lire + alerte cité — A3 · BALANCEDÉquilibré — titre + meta + pages-à-lire + alerte cité

Confort — avatars initiales, meta riche — A4 · COMFORTConfort — avatars initiales, meta riche

Confort+ — tuiles catégorie, espacements aérés — A5 · COMFORT+Confort+ — tuiles catégorie, espacements aérés

02

Personas (presets sélectionnables)

Combinaisons nommées, à proposer en presets. Variantes light / AMOLED.

Ultra-compact — thème clair — H · ULTRA / LIGHTUltra-compact — thème clair

Équilibré + recherche — thème clair — H · ÉQUILIBRÉ / LIGHTÉquilibré + recherche — thème clair

Confort + tuiles — AMOLED — H · CONFORT / AMOLEDConfort + tuiles — AMOLED

Ultra-compact — AMOLED true black — ULTRA / AMOLEDUltra-compact — AMOLED true black

Équilibré — AMOLED — ÉQUILIBRÉ / AMOLEDÉquilibré — AMOLED

03

Chrome & barres

Enlever ou garder : top bar, labels du bottom, barre système (immersif).

Chrome complet + barre de recherche — C1 · FULLChrome complet + barre de recherche

Sans top bar (onglets en tête) — C2 · NO TOPBARSans top bar (onglets en tête)

Bottom bar sans labels (icônes seules) — C3 · ICON-ONLYBottom bar sans labels (icônes seules)

Ultra immersif — pas de top bar, pas de bottom, plein écran — C5 · IMMERSIFUltra immersif — pas de top bar, pas de bottom, plein écran

04

Onglets / sélecteur de catégorie

Texte, puces couleur, segmenté, ou pas d'onglets (sticky headers).

Onglets texte (actuel) — B1 · TEXTEOnglets texte (actuel)

Puces couleur — B2 · COLOR PILLPuces couleur

SegmentedButton — B5 · SEGMENTEDSegmentedButton

Pas d'onglets — sticky headers + tuiles — B6 · STICKYPas d'onglets — sticky headers + tuiles

05

Recherche

Barre dockée ou chips de filtre.

SearchBar dockée — E1 · SEARCH BARSearchBar dockée

Chips de filtre (non-lus / cités / épinglés) — E3 · CHIPSChips de filtre (non-lus / cités / épinglés)

06

Anatomie de la ligne

Encodage couleur du drapeau & disposition des infos topic.

Dot / liseré / fond teinté / chip trailing — D · FLAG VIZDot / liseré / fond teinté / chip trailing

D · INFO LAYOUT2 lignes, pages-à-lire, alerte cité, meta à droite, avatar, ultra

Couleur de drapeau personnalisable — 6 couleurs + palette libre — D · CUSTOM COLORCouleur de drapeau personnalisable — 6 couleurs + palette libre

07

Menu contextuel (appui long)

Le menu riche : quick-actions, couleur du drapeau, actions secondaires.

Bottom sheet riche (recommandé) — F2 · SHEETBottom sheet riche (recommandé)

Bottom sheet — thème clair — F2 · SHEET / LIGHTBottom sheet — thème clair

Dropdown ancré (compact) — F1 · DROPDOWNDropdown ancré (compact)

Barre d'actions rapides flottante — F3 · QUICK BARBarre d'actions rapides flottante

08

Icônes de catégorie

Tuiles-initiales colorées (drawables Material Symbols à câbler en implémentation).

Mapping catégorie → tuile + accent — G · CATEGORY ICONSMapping catégorie → tuile + accent

09

Tri, groupement & repliage

Options de tri/groupement et catégories repliables / mono-catégorie.

Sheet Trier & grouper — I · SORTSheet Trier & grouper

Catégories repliables — J · COLLAPSIBLECatégories repliables

Mode mono-catégorie (drill-in) — J · MONO-CATMode mono-catégorie (drill-in)

10

Actions & sélection

Swipe-actions et sélection multiple (nettoyage en masse).

Swipe gauche = Lu/Retirer · swipe droit = Marquer lu — K · SWIPESwipe gauche = Lu/Retirer · swipe droit = Marquer lu

Sélection multiple + barre contextuelle — L · MULTI-SELECTSélection multiple + barre contextuelle

11

Progression de lecture

Barre de progression + delta « nouveaux posts » (plus utile que p.X/Y brut).

Progression + delta posts — M · PROGRESSProgression + delta posts

12

Accessibilité — cibles tactiles

Honnêteté sur la densité expert : le visuel 36dp vs la cible 48dp.

Overlay cible 48dp sur l'ultra-compact — A11Y · HIT TARGETSOverlay cible 48dp sur l'ultra-compact

13

Tablette / écran large

Layout 2 colonnes (rail catégories + liste) pour tablette / desktop.

Master-détail 2 panneaux — N · TABLET 2-COLMaster-détail 2 panneaux

Redface 2 · refonte vue Drapeaux #603 · mockups Compose/Roborazzi · galerie générée le 2026-06-24 · à reviewer pour choisir les directions à implémenter