Sistema de Design Fluente - Fluent Design System
 O aplicativo Agenda no Windows 10 , mostrando aspectos do Fluent Design, como acrílico e bordas de janela mais estreitas.
| |||||||||
| Outros nomes | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Autor (es) original (is) | Microsoft | ||||||||
| Desenvolvedor (s) | Microsoft | ||||||||
| lançamento inicial | 2017 | ||||||||
| Liberação (ões) estável (s) [±] | |||||||||
| |||||||||
| Versão (s) de visualização [±] | |||||||||
| |||||||||
| Repositório | |||||||||
| Escrito em | Objective-C , C ++ , C # , TypeScript , Kotlin , Swift , JavaScript | ||||||||
| Plataforma | Android , iOS , MacOS , Windows | ||||||||
| Antecessor | |||||||||
| Modelo | Software de linguagem de design | ||||||||
| Licença | Licença MIT | ||||||||
| Local na rede Internet | desenvolvedor |
||||||||
| Parte de uma série sobre |
| Windows 10 |
|---|
 |
| Relacionado |
Fluent Design System (codinome Project Neon ), oficialmente apresentado como Microsoft Fluent Design System , é uma linguagem de design desenvolvida em 2017 pela Microsoft . O Fluent Design é uma reformulação do Microsoft Design Language (popularmente conhecido como "Metro") que inclui diretrizes para os designs e as interações usados no software desenvolvido para todos os dispositivos e plataformas Windows 10 . O sistema é baseado em cinco componentes principais: Luz, Profundidade, Movimento, Material e Escala. A nova linguagem de design inclui o uso mais proeminente de efeitos de movimento, profundidade e translucidez.
A transição para Fluent é um projeto de longo prazo; aspectos do design começaram a aparecer no Windows 10, começando com a "Atualização dos Criadores de Outono" lançada em outubro de 2017, bem como uma atualização do software do sistema Xbox One lançada junto com ela. Posteriormente, foi revelado que ele foi projetado em conjunto com o Windows 10X , além da próxima atualização do Windows 11 com um design semelhante.
Comparado ao Metro e Aero
Os princípios-chave do Fluent, ou "blocos" (luz, profundidade, movimento, material e escala), fogem do conceito plano que o Metro definiu e, ao mesmo tempo que preserva a aparência limpa que o Metro introduziu, o Fluent renova os visuais do Aero , um design abordagem que foi introduzida no Windows Vista e no Windows 7 , incluindo translucidez borrada, padrões animados de paralaxe, sombra projetada, efeitos de realce seguindo o ponteiro do mouse ou movimentos de gesto de entrada e "materiais falsos" Metro descartados.
Aplicações atuais do Fluent
Luz
Revelar destaque
O objetivo da luz é chamar a atenção e iluminar informações. Ao pairar, o realce de Revelar ilumina bordas ocultas próximas em objetos, como listas de menu de navegação de hambúrguer e botões. Após a seleção, como clicando ou tocando, um efeito de iluminação circular branca aparece rapidamente. Além disso, no ambiente Holográfico do Windows , existe um ponteiro branco arredondado .
Em 6 de novembro de 2017, o funcionário da Microsoft David Haz afirmou que existem planos para aplicar o destaque de revelação à barra de tarefas , mas em julho de 2019, isso não ocorreu.
Com o WinUI 2.6, a Microsoft descontinuou o destaque de revelação para combinar com suas ofertas de web e celular que não oferecem destaque de revelação.
Revelar o foco
Itens focalizáveis com brilho de borda através do visual de foco
Profundidade
A adição de profundidade utiliza o eixo z e permite a diferenciação de conteúdo por meio de camadas. A profundidade é apresentada por meio de sombras projetadas e camadas de profundidade Z. Isso é especialmente aparente no aplicativo do Office redesenhado em 2019.
Movimento
O Motion estabelece um relacionamento entre os elementos da IU e fornece uma continuidade na experiência.
Adicionar / excluir animações
Liste animações para inserir e remover itens de uma coleção.
Animações conectadas
Animações conectadas são transições de itens. Durante uma mudança de conteúdo, um elemento parece continuar voando pelo aplicativo.
Transição de conteúdo
Usado quando apenas uma parte do conteúdo de uma página será alterada.
Furar
Drill é usado ao navegar mais fundo em um aplicativo. Por exemplo, exibir mais informações após a seleção de um item.
Desaparecer
Fade-in e fade-out para trazer e descartar itens da vista.
Paralaxe
Parallax move objetos em taxas diferentes. O plano de fundo se move mais devagar do que o conteúdo acima dele. Por exemplo, uma lista rolará mais rápido do que a imagem de fundo, criando um efeito de profundidade além do movimento.
Feedback da imprensa
Quando um item é pressionado, ele recua momentaneamente para o plano de fundo e, em seguida, é restaurado à sua posição original. Exemplos de feedback da imprensa incluem os blocos ativos do menu Iniciar , ações rápidas do Action Center e botões da barra de endereço do Microsoft Edge .
Material
Acrílico
Novos ícones com materiais acrílicos foram criados para programas da Microsoft, começando com os aplicativos do Office e o Microsoft Edge baseado em Chromium em 2018 e 2019, respectivamente. Versões preliminares dos ícones finais foram vistas no vídeo "Conheça os novos ícones do Office 365", antes que mais fossem detectadas quando o Windows 10X foi revelado, antes de ser oficialmente revelado em 12 de dezembro de 2019. Esses ícones começaram a aparecer na Microsoft Store atualizações para esses aplicativos, começando com Mail e Calendário .
O material acrílico cria um efeito translúcido e desfocado com um leve efeito de ruído. Uma hierarquia visual pode ser criada usando diferentes opacidades. Por exemplo, em um aplicativo, as superfícies de conteúdo primário costumam ser opacas (com exceção de widgets ou aplicativos leves, como Calculadora ), um painel secundário pode ter 80% de acrílico de fundo e o painel terciário pode ter 60% de acrílico de fundo. O acrílico de fundo desfoca todos os itens atrás do material acrílico ativo. Acrílico no aplicativo desfoca o conteúdo dentro do aplicativo.
O acrílico é desativado em uma janela específica quando o aplicativo não está mais selecionado. Ambos os tipos de acrílico são desabilitados em todo o sistema quando a transparência é desabilitada, quando o modo de economia de bateria está habilitado ou em hardware de baixo custo. O acrílico de fundo é desativado quando uma janela é desmarcada ou no modo Windows 10 Mobile , HoloLens ou tablet.
Mica
Mica é um novo material opaco introduzido no Windows 11 que assume a tonalidade do papel de parede do usuário. Ao contrário do acrílico que foi projetado para superfícies transitórias (por exemplo: menus de contexto), Mica é projetado para uso em superfícies primárias de longa duração.
Escala
Escala Apps em diferentes formatos , tamanhos de tela e 0E para 3D . Os elementos se adaptam ao tamanho de sua tela e estão disponíveis em várias dimensões. Os controles conscientes também são categorizados em Escala (por exemplo, barras de rolagem e entradas que se adaptam a diferentes métodos de invocação)
Indeterminado
- Som espacial
Veja também
Referências
links externos
-
Website oficial
- "Projetar e codificar aplicativos UWP" . Microsoft.
- Gusmorino, Paul; Ostojic, Bojana (8 de maio de 2017). "Apresentando o Design Fluent" . Canal 9 . MSDN.
