UI/UX e componentes no desenvolvimento móvel: o que são, tipos e como usar

Sistemas de design: Material Design e Human Interface Guidelines

Cada plataforma oferece seu próprio conjunto de regras e componentes. Para Android, este é o Material Design, desenvolvido pelo Google em 2014. O Material Design usa a metáfora do material físico — camadas, sombras (Elevation), transições animadas e layouts adaptativos. Os princípios-chave incluem hierarquia por elevação, movimento significativo e adaptabilidade a diferentes fatores de forma. Recomendamos explorar o Material Design 3 (Material You) — a versão mais recente com tema dinâmico e cores personalizadas.

A Apple oferece as Human Interface Guidelines (HIG) — um conjunto de regras para iOS, iPadOS, macOS, watchOS e tvOS. As HIG enfatizam tipografia clara (San Francisco), Safe Area para considerar o Notch e Dynamic Island, navegação baseada em gestos e consistência. Diferentemente do Material Design, as HIG não usam "camadas" e Elevation — em vez disso, usam desfoque (vibrancy), sombras e separadores sutis. A documentação completa das HIG é atualizada regularmente com novos lançamentos do iOS.

Na IT Sectr, usamos ambos os sistemas de design dependendo da plataforma do cliente. Para projetos multiplataforma com Flutter, desenvolvemos um sistema de design unificado que combina as melhores práticas do Material Design e das HIG. Essa abordagem preserva uma UX nativa em cada plataforma sem duplicação de código.

Frameworks declarativos de UI: SwiftUI e Jetpack Compose

A abordagem tradicional para construir UI é o layout imperativo via XML (Android) ou Interface Builder / código (iOS). A alternativa moderna são os frameworks declarativos, onde o desenvolvedor descreve como a interface deve ser em cada estado, e o framework cuida das atualizações.

Jetpack Compose (Android)

Jetpack Compose é um kit de ferramentas moderno do Google para construir UI nativa em Kotlin. Em vez de layouts XML, são usadas funções componíveis do Kotlin (@Composable). O Compose é totalmente declarativo: quando os dados mudam, apenas as partes alteradas da tela são redesenhadas. Exemplo de uma tela simples com texto e botão:

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

SwiftUI (iOS)

SwiftUI é o framework declarativo da Apple apresentado em 2019. Funciona em todas as plataformas Apple (iOS, iPadOS, macOS, watchOS, tvOS) através de uma API unificada. O SwiftUI usa estruturas View, propriedades @State e @Binding para gerenciamento de dados e modificadores para estilização. O equivalente do exemplo acima em SwiftUI:

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

Flutter Widgets

Flutter do Google usa sua própria biblioteca de widgets. Tudo no Flutter é um widget — desde padding até uma tela inteira. Os widgets são divididos em StatelessWidget (imutáveis) e StatefulWidget (com estado). Os contêineres básicos são Container, Row, Column, Stack. O Flutter não usa componentes nativos da plataforma — ele desenha tudo através do Skia Engine, garantindo uma aparência consistente tanto no Android quanto no 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('Нажми меня'),
                ),
            ],
        );
    }
}

Componentes de UI nativos para Android e iOS

Apesar da disseminação dos frameworks declarativos, entender os componentes nativos continua importante para dar suporte a projetos legados e personalização profunda.

Navegação

A navegação no Android é baseada em Activity (telas de atividade) e Fragment (fragmentos dentro de uma Activity). O Jetpack Navigation Component simplifica as transições entre telas através de um gráfico de navegação. No iOS, a navegação é implementada via NavigationController — uma pilha de controladores com transições animadas. Tab Bar e Bottom Navigation permitem alternar entre as seções principais do aplicativo. Drawer (menu lateral) e Toolbar/ActionBar são usados para ações adicionais. O Android Navigation Component é recomendado para todos os novos projetos.

Listas

Para exibir grandes quantidades de dados, o Android usa RecyclerView — um contêiner eficiente com reutilização de ViewHolder. Os equivalentes no iOS são UITableView (listas verticais) e UICollectionView (grades). O Jetpack Compose oferece LazyColumn e LazyVerticalGrid, enquanto o SwiftUI fornece List e LazyVStack/LazyHStack. A principal vantagem dos componentes Lazy é renderizar apenas os elementos visíveis.

Layouts e posicionamento

O Android View System oferece vários contêineres de layout: ConstraintLayout (sistema flexível de restrições), LinearLayout (disposição linear), RelativeLayout (posicionamento relativo), FrameLayout (empilhamento de camadas). No iOS, o Core Auto Layout usa um sistema de restrições (NSLayoutConstraint) para descrever o posicionamento dos elementos. SwiftUI e Flutter usam VStack/HStack/ZStack e Row/Column/Stack respectivamente.

Unidades de medida e layout responsivo

Os componentes de UI de dispositivos móveis são exibidos levando em consideração diferentes densidades de pixel. Para fazer a interface parecer igual em todas as telas, são usadas unidades independentes de densidade.

As densidades de tela são classificadas como: mdpi (160 dpi, 1x), hdpi (240 dpi, 1.5x), xhdpi (320 dpi, 2x), xxhdpi (480 dpi, 3x), xxxhdpi (640 dpi, 4x). Ao preparar imagens, você precisa criar recursos para todas as densidades: icon.png, icon_hdpi.png, icon_xhdpi.png e assim por diante. Formatos vetoriais (VectorDrawable no Android, SF Symbols no iOS) resolvem o problema de múltiplos recursos rasterizados.

Na IT Sectr, usamos um fator de escala para exportar ícones do Figma: exportamos em 1x, 2x, 3x para iOS e mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi para Android. Isso garante exibição nítida em todos os dispositivos, incluindo tablets e smartphones dobráveis.

Conceitos modernos de UI: Modo Escuro, Safe Area, Acessibilidade

Os componentes de UI de aplicativos móveis modernos devem suportar uma série de padrões, sem os quais a experiência do usuário seria incompleta.

Modo Escuro / Modo Claro

Modo Escuro é uma opção obrigatória em aplicativos modernos. O Material Design 3 e o iOS 13+ oferecem suporte integrado ao tema escuro. É importante não inverter as cores, mas usar paletas de cores separadas: fundo escuro, texto claro, contraste reduzido para elementos secundários. A alternância automática pode ser vinculada ao tema do sistema do dispositivo.

Safe Area e suporte a Notch / Dynamic Island

Os iPhones modernos têm um Notch (recorte para a câmera frontal) e Dynamic Island. Dispositivos Android também têm recortes e cantos arredondados (Corner Radius). Safe Area é a área da tela garantidamente livre de elementos do sistema (barra de status, indicador de início), barra de navegação e recortes. O iOS aplica automaticamente Safe Area Insets; o Android requer verificação explícita através de WindowInsets ou DisplayCutout.

Acessibilidade (a11y)

Acessibilidade garante a usabilidade do aplicativo para pessoas com deficiência. Requisitos principais: suporte a TalkBack (Android) e VoiceOver (iOS), contentDescription correto para ImageView, contraste de cor suficiente (mínimo 4.5:1 para texto), suporte a Dynamic Type (iOS) para redimensionamento de fontes, navegação sem visão e alternativas a gestos. WCAG 2.1 é o padrão internacional de acessibilidade.

Globalização e localização (i18n / l10n)

Internacionalização (i18n) é preparar o aplicativo para suportar vários idiomas e formatos regionais. Localização (l10n) é traduzir strings, datas, moedas e especificidades culturais. O Android usa diretórios de recursos (values-ru, values-de), o iOS usa Localizable.strings e XLIFF. O Flutter suporta flutter_localizations com arquivos de tradução ARB.

Gestos e interação

A interação por toque inclui muitos gestos: Tap (toque), Long Press (pressionar longo), Swipe (deslizar), Pinch-to-Zoom (pinça para ampliar), Pull-to-Refresh (puxar para atualizar), Drag-and-Drop (arrastar e soltar). O Android usa GestureDetector, o iOS usa UIGestureRecognizer. O iOS também suporta 3D Touch (Force Touch) e Haptic Touch com feedback tátil através do Taptic Engine.