UI/UX e componenti nello sviluppo mobile: cosa sono, tipi e come usarli

Sistemi di design: Material Design e Human Interface Guidelines

Ogni piattaforma offre il proprio insieme di regole e componenti. Per Android, questo è Material Design, sviluppato da Google nel 2014. Material Design utilizza la metafora del materiale fisico — livelli, ombre (Elevation), transizioni animate e layout adattivi. I principi chiave includono gerarchia tramite elevazione, movimento significativo e adattabilità a diversi fattori di forma. Raccomandiamo di esplorare Material Design 3 (Material You) — l'ultima versione con tema dinamico e colori personalizzati.

Apple offre le Human Interface Guidelines (HIG) — un insieme di regole per iOS, iPadOS, macOS, watchOS e tvOS. Le HIG enfatizzano tipografia chiara (San Francisco), Safe Area per considerare Notch e Dynamic Island, navigazione basata su gesti e coerenza. A differenza di Material Design, le HIG non usano "livelli" ed Elevation — invece, usano sfocatura (vibrancy), ombre e separatori sottili. La documentazione completa delle HIG viene aggiornata regolarmente con le nuove versioni di iOS.

In IT Sectr, usiamo entrambi i sistemi di design a seconda della piattaforma del cliente. Per i progetti multipiattaforma Flutter, sviluppiamo un sistema di design unificato che combina le migliori pratiche di Material Design e HIG. Questo approccio preserva un'esperienza utente nativa su ogni piattaforma senza duplicazione di codice.

Framework UI dichiarativi: SwiftUI e Jetpack Compose

L'approccio tradizionale per costruire UI è il layout imperativo tramite XML (Android) o Interface Builder / codice (iOS). L'alternativa moderna sono i framework dichiarativi, dove lo sviluppatore descrive come dovrebbe apparire l'interfaccia in ogni stato, e il framework si occupa degli aggiornamenti.

Jetpack Compose (Android)

Jetpack Compose è un toolkit moderno di Google per costruire UI nativa in Kotlin. Invece dei layout XML, vengono utilizzate funzioni componibili Kotlin (@Composable). Compose è completamente dichiarativo: quando i dati cambiano, solo le parti modificate dello schermo vengono ridisegnate. Esempio di uno schermo semplice con testo e un pulsante:

@Composable
fun GreetingScreen() {
    var count = remember { mutableStateOf(0) }
    Column {
        Text(text = "Нажато: $count")
        Button(onClick = { count++ }) {
            Text("Нажми меня")
        }
    }
}

SwiftUI (iOS)

SwiftUI è il framework dichiarativo di Apple presentato nel 2019. Funziona su tutte le piattaforme Apple (iOS, iPadOS, macOS, watchOS, tvOS) tramite un'API unificata. SwiftUI utilizza strutture View, proprietà @State e @Binding per la gestione dei dati e modificatori per lo stile. L'equivalente dell'esempio sopra in SwiftUI:

struct GreetingView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Нажато: \(count)")
            Button("Нажми меня") {
                count += 1
            }
        }
    }
}

Flutter Widgets

Flutter di Google utilizza la propria libreria di widget. Tutto in Flutter è un widget — dal padding a un intero schermo. I widget si dividono in StatelessWidget (immutabili) e StatefulWidget (con stato). I contenitori di base sono Container, Row, Column, Stack. Flutter non utilizza componenti nativi della piattaforma — disegna tutto tramite Skia Engine, garantendo un aspetto coerente sia su Android che su iOS.

class GreetingWidget extends StatefulWidget {
    @override
    State createState() => _GreetingWidgetState();
}
class _GreetingWidgetState extends State<GreetingWidget> {
    int count = 0;
    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('Нажато: $count'),
                ElevatedButton(
                    onPressed: () => setState(() => count++),
                    child: Text('Нажми меня'),
                ),
            ],
        );
    }
}

Componenti UI nativi per Android e iOS

Nonostante la diffusione dei framework dichiarativi, comprendere i componenti nativi rimane importante per supportare progetti legacy e personalizzazioni avanzate.

Navigazione

La navigazione in Android si basa su Activity (schermate di attività) e Fragment (frammenti all'interno di una Activity). Jetpack Navigation Component semplifica le transizioni tra schermate tramite un grafo di navigazione. In iOS, la navigazione è implementata tramite NavigationController — una pila di controller con transizioni animate. Tab Bar e Bottom Navigation consentono di passare da una sezione all'altra dell'app. Drawer (menu laterale) e Toolbar/ActionBar vengono utilizzati per azioni aggiuntive. Android Navigation Component è raccomandato per tutti i nuovi progetti.

Elenchi

Per visualizzare grandi quantità di dati, Android utilizza RecyclerView — un contenitore efficiente con riutilizzo dei ViewHolder. Gli equivalenti iOS sono UITableView (elenchi verticali) e UICollectionView (griglie). Jetpack Compose offre LazyColumn e LazyVerticalGrid, mentre SwiftUI fornisce List e LazyVStack/LazyHStack. Il vantaggio chiave dei componenti Lazy è il rendering solo degli elementi visibili.

Layout e posizionamento

Il sistema di viste Android offre diversi contenitori di layout: ConstraintLayout (sistema di vincoli flessibile), LinearLayout (disposizione lineare), RelativeLayout (posizionamento relativo), FrameLayout (sovrapposizione di livelli). In iOS, Core Auto Layout utilizza un sistema di vincoli (NSLayoutConstraint) per descrivere il posizionamento degli elementi. SwiftUI e Flutter utilizzano rispettivamente VStack/HStack/ZStack e Row/Column/Stack.

Unità di misura e layout responsive

I componenti UI dei dispositivi mobili vengono visualizzati tenendo conto delle diverse densità di pixel. Per far sì che l'interfaccia appaia uguale su tutti gli schermi, vengono utilizzate unità indipendenti dalla densità.

Le densità dello schermo sono classificate come: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Quando si preparano le immagini, è necessario creare risorse per tutte le densità: icon.png, icon_hdpi.png, icon_xhdpi.png e così via. I formati vettoriali (VectorDrawable in Android, SF Symbols in iOS) risolvono il problema di molteplici risorse raster.

In IT Sectr, utilizziamo un fattore di scala per esportare le icone da Figma: esportiamo in 1x, 2x, 3x per iOS e mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi per Android. Questo garantisce una visualizzazione nitida su tutti i dispositivi, inclusi tablet e smartphone pieghevoli.

Concetti UI moderni: Dark Mode, Safe Area, Accessibilità

I componenti UI delle app mobili moderne devono supportare una serie di standard, senza i quali l'esperienza utente sarebbe incompleta.

Dark Mode / Light Mode

Dark Mode è un'opzione obbligatoria nelle applicazioni moderne. Material Design 3 e iOS 13+ offrono supporto integrato per il tema scuro. È importante non invertire i colori, ma utilizzare palette di colori separate: sfondo scuro, testo chiaro, contrasto ridotto per gli elementi secondari. Il passaggio automatico può essere legato al tema di sistema del dispositivo.

Safe Area e supporto per Notch / Dynamic Island

Gli iPhone moderni hanno un Notch (ritaglio per la fotocamera frontale) e Dynamic Island. Anche i dispositivi Android hanno ritagli e angoli arrotondati (Corner Radius). Safe Area è l'area dello schermo garantita libera da elementi di sistema (barra di stato, indicatore home), barra di navigazione e ritagli. iOS applica automaticamente Safe Area Insets; Android richiede un controllo esplicito tramite WindowInsets o DisplayCutout.

Accessibilità (a11y)

Accessibilità garantisce l'usabilità dell'app per le persone con disabilità. Requisiti principali: supporto per TalkBack (Android) e VoiceOver (iOS), contentDescription corretto per ImageView, contrasto cromatico sufficiente (minimo 4.5:1 per il testo), supporto per Dynamic Type (iOS) per il ridimensionamento dei font, navigazione senza vista e alternative ai gesti. WCAG 2.1 è lo standard internazionale per l'accessibilità.

Globalizzazione e localizzazione (i18n / l10n)

Internazionalizzazione (i18n) è la preparazione dell'app per supportare più lingue e formati regionali. Localizzazione (l10n) è la traduzione di stringhe, date, valute e specificità culturali. Android utilizza directory di risorse (values-ru, values-de), iOS utilizza Localizable.strings e XLIFF. Flutter supporta flutter_localizations con file di traduzione ARB.

Gesti e interazione

L'interazione tattile include molti gesti: Tap (tocco), Long Press (pressione prolungata), Swipe (scorrimento), Pinch-to-Zoom (pizzicare per zoomare), Pull-to-Refresh (tirare per aggiornare), Drag-and-Drop (trascinare e rilasciare). Android utilizza GestureDetector, iOS utilizza UIGestureRecognizer. iOS supporta anche 3D Touch (Force Touch) e Haptic Touch con feedback tattile tramite il Taptic Engine.