aswin-haridas/diretrizes-de-ui-apple

Diretrizes de design de UI (neutras em relação à plataforma)

119 páginas de referência em references/ (ao lado deste arquivo), reescritas a partir da HIG da Apple para se aplicar a qualquer plataforma. Cada página mantém uma linha Fonte: apontando para a original.

Como usar

1. Identifique os tópicos que a tarefa aborda (componente, padrão, fundamento, entrada). Escolha a partir do catálogo abaixo.
2. Leia apenas as páginas relevantes com a ferramenta de Leitura, ex.: references/buttons.md. Use grep references/ para uma palavra-chave quando não tiver certeza de qual página cobre o assunto.
3. Aplique a orientação à plataforma realmente em uso (web, Android, iOS, desktop...). Quando uma página nomear equivalentes multiplataforma (leitores de tela, Cmd/Ctrl, Material vs. convenções do sistema), escolha o da plataforma alvo; siga as convenções nativas dessa plataforma onde houver conflito.
4. Ao revisar uma UI, cite a página e a regra específica (ex.: "alerts.md: use um botão de cancelar para ações destrutivas") e diga concretamente o que mudar.

Sempre pondere design-principles.md (propósito, agência, responsabilidade, familiaridade, flexibilidade, simplicidade, ofício, encanto) e accessibility.md para qualquer trabalho de UI.

Páginas de índice: index.md, foundations.md, patterns.md, components.md, inputs.md.

Catálogo

• accessibility.md — Acessibilidade: Interfaces de usuário acessíveis capacitam todos a ter uma ótima experiência com seu aplicativo ou jogo.
• action-sheets.md — Folhas de ação: Uma folha de ação (às vezes chamada de diálogo de confirmação ou menu de folha inferior) é uma visualização modal que apresenta escolhas relacionadas a uma ação que as pessoas...
• activity-views.md — Visualizações de atividade: Uma visualização de atividade — frequentemente chamada de folha de compartilhamento — apresenta uma variedade de tarefas que as pessoas podem realizar no contexto atual. Na web...
• alerts.md — Alertas: Um alerta fornece informações críticas que as pessoas precisam imediatamente.
• app-icons.md — Ícones de aplicativo: Um ícone único e memorável expressa o propósito e a personalidade do seu aplicativo ou jogo e ajuda as pessoas a reconhecê-lo rapidamente.
• augmented-reality.md — Realidade aumentada: A realidade aumentada (ou RA) permite que você ofereça experiências imersivas e envolventes que misturam perfeitamente objetos virtuais com o mundo real.
• boxes.md — Caixas: Uma caixa cria um grupo visualmente distinto de informações e componentes logicamente relacionados.
• branding.md — Marca: Aplicativos e jogos expressam sua identidade de marca única de maneiras que os tornam instantaneamente reconhecíveis, ao mesmo tempo que se sentem em casa na plataforma e...
• buttons.md — Botões: Um botão inicia uma ação instantânea.
• charting-data.md — Gráficos de dados: Apresentar dados em um gráfico pode ajudar você a comunicar informações com clareza e apelo.
• charts.md — Gráficos: Organize dados em um gráfico para comunicar informações com clareza e apelo visual.
• collaboration-and-sharing.md — Colaboração e compartilhamento: Ótimas experiências de colaboração e compartilhamento são simples e responsivas, permitindo que as pessoas interajam com o conteúdo enquanto se comunicam de forma eficaz...
• collections.md — Coleções: Uma coleção gerencia um conjunto ordenado de conteúdo e o apresenta em um layout personalizável e altamente visual.
• color-wells.md — Amostras de cor: Uma amostra de cor permite que as pessoas ajustem a cor do texto, formas, guias e outros elementos na tela.
• color.md — Cor: O uso criterioso da cor pode melhorar a comunicação, evocar sua marca, fornecer continuidade visual, comunicar status e feedback e ajudar as pessoas...
• column-views.md — Visualizações em colunas: Uma visualização em colunas — também chamada de navegador ou colunas Miller — permite que as pessoas visualizem e naveguem em uma hierarquia de dados usando uma série de colunas verticais...
• combo-boxes.md — Caixas de combinação: Uma caixa de combinação combina um campo de texto com um botão de menu suspenso em um único controle.
• components.md — Componentes: Aprenda a usar e personalizar componentes definidos pelo sistema para oferecer às pessoas uma experiência familiar e consistente.
• content.md — Conteúdo: - Gráficos
• context-menus.md — Menus de contexto: Um menu de contexto fornece acesso a funcionalidades diretamente relacionadas a um item, sem sobrecarregar a interface.
• controls.md — Controles: Um controle fornece acesso rápido a um recurso do seu aplicativo a partir de superfícies do sistema, como um painel de configurações rápidas, a tela de bloqueio ou um botão de hardware...
• dark-mode.md — Modo escuro: O modo escuro é uma configuração de aparência do sistema que usa uma paleta de cores escuras para fornecer uma experiência de visualização confortável, adaptada para ambientes com pouca luz...
• design-principles.md — Princípios de design: Explore princípios fundamentais que guiam o design em todas as plataformas — web, mobile, desktop e além.
• designing-for-games.md — Design para jogos: Quando as pessoas jogam seu jogo em qualquer dispositivo, elas mergulham no mundo que você projetou enquanto confiam nos recursos da plataforma que amam.
• disclosure-controls.md — Controles de divulgação: Controles de divulgação revelam e ocultam informações e funcionalidades relacionadas a controles ou visualizações específicas.
• drag-and-drop.md — Arrastar e soltar: Usando arrastar e soltar, as pessoas podem mover ou duplicar fotos, texto e outros conteúdos selecionados arrastando a seleção de um local para outro...
• edit-menus.md — Menus de edição: Um menu de edição permite que as pessoas façam alterações no conteúdo selecionado na visualização atual, além de oferecer comandos relacionados como Copiar, Selecionar...
• entering-data.md — Inserção de dados: Quando você precisa de informações das pessoas, projete maneiras que facilitem o fornecimento sem cometer erros.
• feedback.md — Feedback: O feedback ajuda as pessoas a saber o que está acontecendo, descobrir o que podem fazer em seguida, entender os resultados das ações e evitar erros.
• file-management.md — Gerenciamento de arquivos: Alguns aplicativos podem suportar documentos e arquivos que as pessoas esperam gerenciar em todo o sistema.
• focus-and-selection.md — Foco e seleção: O foco ajuda as pessoas a confirmar visualmente o objeto que sua interação visa.
• foundations.md — Fundamentos: Entenda como elementos fundamentais de design ajudam você a criar experiências ricas.
• game-controls.md — Controles de jogo: Controles de jogo precisos e intuitivos melhoram a jogabilidade e podem aumentar a imersão do jogador no jogo.
• gauges.md — Medidores: Um medidor exibe um valor numérico específico dentro de uma faixa de valores.
• generative-ai.md — IA generativa: A IA generativa capacita você a aprimorar seu aplicativo ou jogo com conteúdo dinâmico e oferecer recursos inteligentes que desbloqueiam novos níveis de criatividade...
• gestures.md — Gestos: Um gesto é um movimento físico que uma pessoa usa para afetar diretamente um objeto em um aplicativo ou jogo em seu dispositivo.
• getting-started.md — Primeiros passos: Crie um aplicativo ou jogo que se sinta em casa em todas as plataformas que você suporta — web, mobile, desktop e além.
• going-full-screen.md — Tela cheia: Telefones, tablets, desktops e navegadores da web oferecem modos de tela cheia que permitem que as pessoas expandam uma janela para preencher a tela, ocultando os controles do sistema...
• gyro-and-accelerometer.md — Giroscópio e acelerômetro: Giroscópios e acelerômetros no dispositivo podem fornecer dados sobre o movimento do dispositivo no mundo físico.
• icons.md — Ícones: Um ícone eficaz é um ativo gráfico que expressa um único conceito de maneiras que as pessoas entendem instantaneamente.
• image-views.md — Visualizações de imagem: Uma visualização de imagem exibe uma única imagem — ou, em alguns casos, uma sequência animada de imagens — em um fundo transparente ou opaco.
• image-wells.md — Amostras de imagem: Uma amostra de imagem é uma versão editável de uma visualização de imagem.
• images.md — Imagens: Para garantir que sua arte tenha ótima aparência em todos os dispositivos que você suporta, aprenda como o sistema exibe o conteúdo e como fornecer arte na resolução apropriada...
• inclusion.md — Inclusão: Aplicativos e jogos inclusivos colocam as pessoas em primeiro lugar, priorizando a comunicação respeitosa e apresentando conteúdo e funcionalidades de maneiras que todos...
• index.md — Diretrizes de design de interface: Estas diretrizes contêm orientações e melhores práticas que podem ajudá-lo a projetar uma ótima experiência em qualquer plataforma — web, mobile, desktop...
• inputs.md — Entradas: Aprenda sobre os vários métodos que as pessoas usam para controlar seu aplicativo ou jogo e inserir dados.
• keyboards.md — Teclados: Um teclado físico pode ser um dispositivo de entrada essencial para inserir texto, jogar, controlar aplicativos e muito mais.
• labels.md — Rótulos: Um rótulo é um pedaço de texto estático que as pessoas podem ler e frequentemente copiar, mas não editar.
• launching.md — Inicialização: Uma experiência de inicialização simplificada ajuda as pessoas a começar a usar seu aplicativo ou jogo imediatamente.
• layout-and-organization.md — Layout e organização: - Caixas
• layout.md — Layout: Um layout consistente que se adapta a diferentes tamanhos de tela, orientações e configurações de multitarefa ajuda as pessoas a entender e aproveitar seu aplicativo...
• lists-and-tables.md — Listas e tabelas: Listas e tabelas apresentam dados em uma ou mais colunas de linhas.
• live-viewing-apps.md — Aplicativos de visualização ao vivo: Ao projetar um aplicativo de visualização ao vivo, priorize o conteúdo e crie interações divertidas e fluidas que incentivem a imersão na experiência de visualização ao vivo...
• loading.md — Carregamento: A melhor experiência de carregamento de conteúdo termina antes que as pessoas se tornem conscientes dela.
• machine-learning.md — Aprendizado de máquina: O aprendizado de máquina permite que aplicativos e jogos aprendam com dados e padrões de uso, permitindo que você melhore as experiências existentes e crie experiências envolventes...
• managing-accounts.md — Gerenciamento de contas: Quando não cria uma barreira desnecessária para sua experiência, uma conta pode ser uma maneira conveniente para as pessoas acessarem seu conteúdo e...
• managing-notifications.md — Gerenciamento de notificações: As notificações podem fornecer às pessoas informações oportunas e importantes, esteja o dispositivo bloqueado ou em uso.
• maps.md — Mapas: Um mapa exibe dados geográficos externos ou internos em seu aplicativo ou em seu site.
• materials.md — Materiais: Um material é um efeito visual que cria uma sensação de profundidade, camadas e hierarquia entre elementos de primeiro plano e fundo.
• menus-and-actions.md — Menus e ações: - Visualizações de atividade
• menus.md — Menus: Um menu revela suas opções quando as pessoas interagem com ele, tornando-o uma forma eficiente em termos de espaço para apresentar comandos em seu aplicativo ou jogo.
• modality.md — Modalidade: A modalidade é uma técnica de design que apresenta o conteúdo em um modo separado e dedicado que impede a interação com a visualização pai e requer...
• motion.md — Movimento: Movimentos bonitos e fluidos dão vida à interface, transmitindo status, fornecendo feedback e instrução e enriquecendo a experiência visual...
• multitasking.md — Multitarefa: A multitarefa permite que as pessoas alternem rapidamente de um aplicativo para outro, realizando tarefas em cada um.
• navigation-and-search.md — Navegação e pesquisa: - Campos de pesquisa
• nearby-interactions.md — Interações próximas: As interações próximas suportam experiências no dispositivo que integram a presença de pessoas e objetos no ambiente próximo, usando proximidade...
• nfc.md — NFC: A comunicação de campo próximo (NFC) permite que dispositivos a poucos centímetros um do outro troquem informações sem fio.
• notifications.md — Notificações: Uma notificação fornece às pessoas informações oportunas e de alto valor que podem ser compreendidas rapidamente.
• offering-help.md — Oferecendo ajuda: Embora as experiências mais eficazes sejam acessíveis e intuitivas, você pode fornecer ajuda contextual quando necessário.
• onboarding.md — Integração: A integração pode ajudar as pessoas a começar rapidamente a usar seu aplicativo ou jogo.
• outline-views.md — Visualizações de estrutura de tópicos: Uma visualização de estrutura de tópicos apresenta dados hierárquicos em uma lista rolável de células organizadas em colunas e linhas.
• page-controls.md — Controles de página: Um controle de página (também chamado de indicador de página ou indicador de pontos) exibe uma linha de imagens indicadoras, cada uma representando uma página em um...
• panels.md — Painéis: Em um aplicativo desktop, um painel normalmente flutua acima de outras janelas abertas, fornecendo controles, opções ou informações suplementares relacionadas ao...
• patterns.md — Padrões: Obtenha orientação de design para suportar ações, tarefas e experiências comuns do usuário.
• pickers.md — Seletores: Um seletor exibe uma ou mais listas roláveis de valores distintos que as pessoas podem escolher.
• playing-audio.md — Reprodução de áudio: As pessoas esperam experiências de áudio ricas que se ajustem automaticamente quando o contexto muda no dispositivo.
• playing-haptics.md — Reprodução de hápticos: A reprodução de hápticos pode envolver o sentido do tato das pessoas e trazer sua familiaridade com o mundo físico para seu aplicativo ou jogo.
• playing-video.md — Reprodução de vídeo: As pessoas esperam desfrutar de experiências de vídeo ricas em seus dispositivos, independentemente do aplicativo ou jogo que estejam usando.
• pointing-devices.md — Dispositivos apontadores: As pessoas podem usar um dispositivo apontador como um trackpad ou mouse para navegar na interface e iniciar ações.
• pop-up-buttons.md — Botões pop-up: Um botão pop-up (também chamado de dropdown ou select em algumas plataformas) exibe um menu de opções mutuamente exclusivas.
• popovers.md — Popovers: Um popover é uma visualização transitória que aparece acima de outro conteúdo quando as pessoas clicam ou tocam em um controle ou área interativa.
• presentation.md — Apresentação: - Folhas de ação
• printing.md — Impressão: Um aplicativo pode integrar a funcionalidade de impressão fornecida pelo sistema quando fizer sentido, apresentando opções personalizadas de impressora e documento, se necessário...
• privacy.md — Privacidade: A privacidade é fundamental: é crucial ser transparente sobre os dados e recursos relacionados à privacidade que você exige e essencial proteger...
• progress-indicators.md — Indicadores de progresso: Os indicadores de progresso informam às pessoas que seu aplicativo não está travado enquanto carrega conteúdo ou realiza operações longas.
• pull-down-buttons.md — Botões pull-down: Um botão pull-down exibe um menu de itens ou ações que se relacionam diretamente com o propósito do botão.
• rating-indicators.md — Indicadores de classificação: Um indicador de classificação usa uma série de símbolos gráficos dispostos horizontalmente — por padrão, estrelas — para comunicar um nível de classificação.
• ratings-and-reviews.md — Avaliações e comentários: As pessoas geralmente visualizam as avaliações e comentários de um aplicativo ou jogo antes de baixá-lo.
• right-to-left.md — Direita para esquerda: Suporte a idiomas da direita para a esquerda, como árabe e...