--- title: "Item: l'elemento che disegna ogni scheda della tua app" description: "L'Item compone ogni scheda della navigazione della tua app: icona, etichetta e indicatore. Scopri come l'abbiamo progettato." canonical_url: "https://it.goodbarber.com/blog/item-l-elemento-che-disegna-ogni-scheda-della-tua-app-a1116/" lang: it date: 2026-09-24 last_updated: 2026-09-24 --- # Item: l'elemento che disegna ogni scheda della tua app [Indietro](/blog/make-it-r10/) # Item: l'elemento che disegna ogni scheda della tua app Scritto da [Marie-Pierre Jeffard](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/) il Giovedì 24 Settembre 2026 ## Ogni scheda della navigazione della tua app poggia su uno stesso elemento: l'Item, che può riunire un'icona, un'etichetta e un indicatore. L'abbiamo progettato per disegnare le nostre TabBar di oggi e di domani. Ora è documentato nel Design System di GoodBarber. ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98137935-68342886.jpg?v=1790245607.6727977) I tuoi contenuti sono curati, i tuoi colori scelti. Resta la barra di navigazione, quella che i tuoi utenti usano per passare da una sezione all'altra e che pesa molto sull'impressione che lascia la tua app. Ognuna delle sue schede poggia su un elemento pensato come un mattoncino: l'**Item**. Nella [nuova generazione di TabBar](https://it.goodbarber.com/blog/tabbar-arriva-una-nuova-generazione-a1008/), è lui a dare carattere a ogni navigazione. ## Un'icona, un'etichetta, un indicatore [L'Item si stacca dalla sua TabBar e rivela i suoi elementi figli](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) In un Item, ogni elemento ha il suo ruolo. L'icona rappresenta la sezione, l'etichetta ne mostra il nome e l'indicatore, facoltativo, segnala la scheda attiva. Ognuno si mostra o si nasconde separatamente, il che dà tre composizioni: icona ed etichetta, solo icona, solo etichetta. È ciò che distingue la [Minimal TabBar](https://it.goodbarber.com/blog/minimal-tabbar-una-navigazione-compatta-icon-only-e-decisamente-moderna-a1017/), tutta icone, dalla [Clean TabBar](https://it.goodbarber.com/blog/clean-tabbar-una-navigazione-text-only-sottile-ed-elegante-a1023/), tutta testo: lo stesso elemento, composto in modo diverso. ## 17 proprietà per le TabBar di oggi e di domani ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98137935-68342888.jpg?v=1790245609.1728044) Per progettare una TabBar, i nostri designer dispongono di 17 proprietà: 8 per l'Item, 6 per la sua icona e 3 per la sua etichetta. La superficie dell'Item accetta un colore pieno, un gradiente o un effetto sfocato, un bordo, un'ombra, angoli vivi o arrotondati. Il suo layout ne regola la dimensione, l'orientamento, il margine interno, che delimita l'area touch, e la spaziatura che fa respirare i suoi elementi. Tanta ricchezza non ti chiede di regolare tutto. Ci serve per comporre layout di TabBar completi, allineati ai codici attuali del design delle app: Bold, Minimal e Clean TabBar sono i primi tre. Quando questi codici cambieranno, nuovi layout nasceranno dallo stesso elemento, senza ripartire da zero. Così possiamo proporti TabBar sempre al passo con i tempi. Nel tuo back office scegli la tua TabBar, poi la accordi alla tua identità: dimensione delle schede, arrotondamento degli angoli, colori, font delle etichette, modo di segnalare la scheda attiva. Le tue icone possono perfino affiancare quelle di sistema. ## Stati leggibili, animazioni curate [Dot, Tiny, Line: gli indicatori e le loro animazioni di selezione](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Un Item ha due stati: predefinito e selezionato. Per distinguere la scheda attiva dispone di quattro mezzi, da soli o combinati: il colore, lo sfondo, il bordo e l'indicatore. Quest'ultimo compare solo sulla scheda selezionata, in tre forme: un punto (**Dot**), un trattino (**Tiny**) o una linea (**Line**). Ogni forma ha il suo movimento. Il punto e la linea si restringono sulla scheda precedente e crescono sulla nuova, il trattino scivola dall'una all'altra. Quando la selezione passa per lo sfondo, come nella [Bold TabBar](https://it.goodbarber.com/blog/bold-tabbar-una-navigazione-piu-presente-pensata-per-strutturare-l-interfaccia-a1013/), è lo sfondo colorato a spostarsi. Transizioni brevi, che rendono leggibile ogni cambiamento senza esagerare. ## Lo stesso Item, dal mobile al desktop ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98137935-68342890.jpg?v=1790245610.5608106) L'Item adatta orientamento, margine interno e spaziatura a ogni schermo: mobile, tablet e desktop. In fondo a uno smartphone, l'icona si posiziona sopra l'etichetta. Su desktop, la TabBar diventa una barra laterale e l'Item può passare in orizzontale per trovarvi posto. Configuri la tua navigazione una sola volta: ogni schermo riceve la versione che gli si addice. ## L'Item entra nel Design System ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98137935-68342891.jpg?v=1790245612.3248186) Dopo la [TabBar](https://it.goodbarber.com/uxdesign/tabbar/), l'Item ha [la sua pagina](https://it.goodbarber.com/uxdesign/item/) nel [Design System di GoodBarber](https://it.goodbarber.com/uxdesign/), e arriva in famiglia. Con l'[Item Icon](https://it.goodbarber.com/uxdesign/item-icon/), l'[Item Label](https://it.goodbarber.com/uxdesign/item-label/) e l'[Item Indicator](https://it.goodbarber.com/uxdesign/item-indicator/), apre una nuova categoria: gli [UI Elements](https://it.goodbarber.com/uxdesign/ui-elements/), i mattoncini dei nostri componenti, ognuno dedicato a un solo ruolo. Per scoprire l'Item nel dettaglio, vai alla [sua pagina del Design System](https://it.goodbarber.com/uxdesign/item/). E per vederlo all'opera, scegli la tua TabBar nella sezione Menu del tuo back office. ![Marie-Pierre Jeffard](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Informazioni sull'autore[Marie-Pierre Jeffard](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer Sono UI Designer di GoodBarber. Design system delle app, componenti, layout, sito, illustrazioni, animazioni: tutto quello che faccio ruota intorno all'interfaccia. Quello che mi piace del nostro prodotto è inventare regole universali, che funzionano su tutti gli schermi e accolgono tutte le identità visive. L'app diventa uno scrigno per i tuoi contenuti. Amo ciò che sembra semplice, e tutto il lavoro invisibile che serve per arrivarci: le regole, le scelte e i vincoli che tengono in piedi un'interfaccia. È questo che racconto qui. [Scopri di più](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/marie-pierre-jeffard/)