Projete a IU dos suplementos do Office

Os suplementos ampliam a experiência do Office fornecendo funcionalidades contextuais que os usuários podem acessar nos clientes Office. Os suplementos capacitam os usuários a fazer mais, permitindo que eles acessem funcionalidades externas no Office, sem alternâncias de contexto dispendiosas.

Seu design de IU adicional deve se integrar perfeitamente ao Office para fornecer uma interação eficiente e natural para seus usuários. Aproveite as vantagens dos comandos de suplemento para fornecer acesso ao seu suplemento e aplique as práticas recomendadas que recomendamos ao criar uma IU personalizada baseada em HTML.

Princípios de design do Office

Os aplicativos do Office seguem um conjunto geral de diretrizes de interação. Os aplicativos compartilham conteúdo e têm elementos que parecem e se comportam de maneira semelhante. Essa convergência baseia-se em um conjunto de princípios de design. Eles ajudam a equipe do Office a criar interfaces que dão suporte a tarefas dos clientes. Ao compreender e seguir esses princípios, você poderá oferecer suporte às metas de seus clientes dentro do Office.

Siga os princípios de design do Office para criar experiências positivas com os suplementos.

Criar explicitamente para o Office

A funcionalidade, bem como a aparência de um suplemento, devem complementar harmoniosamente a experiência do Office. Os suplementos devem parecer nativos em todas as plataformas, seja no Word em um iPad ou no PowerPoint na Web. Um suplemento bem projetado será uma combinação adequada da sua experiência, a plataforma e o aplicativo do Office. Aplique temas ao documento e à interface do usuário quando apropriado.

Usar IU do Fluent para a Web como linguagem de design

Considere o uso da IU do Fluent para a web como sua linguagem de design e conjunto de ferramentas. A IU do Fluent para a Web tem dois sabores.

  • Para projetos do React: use a IU do Fluent React, uma estrutura de front-end do React projetada para criar experiências que se encaixam perfeitamente em uma ampla variedade de produtos da Microsoft. Ele fornece componentes robustos, atualizados e acessíveis baseados no React que são altamente personalizáveis usando o CSS-in-JS. Para começar, confira Usar o Fluent UI React no React em Suplementos do Office.

  • Para projetos que não são do React: Use o Fabric Core, uma coleção de código aberto de classes CSS e misturas Sass para cores, animações, fontes, ícones e grades. (É chamado de "Fabric Core" em vez de "Fluent Core" por motivos históricos.) Para começar, consulte Fabric Core em Suplementos do Office.

    Observação

    Embora o Fabric Core seja a biblioteca recomendada para projetar suplementos não React, a equipe está trabalhando em componentes da Web da interface do usuário fluente para fornecer uma solução mais recente. Criada com base no FAST, a biblioteca de Web Components da IU do Fluent permite que você use, personalize e crie Web Components para criar uma interface do usuário mais moderna e baseada em padrões. Convidamos você a testar esta biblioteca preenchendo o início rápido e agradecemos seus comentários sobre sua experiência por meio do GitHub.

Favorecer o conteúdo em vez do Chrome

Permitir que a página, o slide ou a planilha do cliente permaneça o foco da experiência. Um suplemento é uma interface auxiliar. Nenhum elemento supérfluo de interface do usuário deve interferir no conteúdo e nas funcionalidades do suplemento. Crie uma identidade visual para sua experiência de maneira sensata. Sabemos que é importante fornecer aos usuários uma experiência exclusiva e reconhecível, mas evite distrações. Tente manter o foco no conteúdo e na conclusão de tarefas, não na marca. Para obter orientações sobre identidade visual eficaz, consulte Padrões de identidade visual.

Torne-o agradável e mantenha os usuários no controle

As pessoas gostam de usar produtos funcionais e visualmente atraentes. Crie sua experiência com atenção. Leve em conta cada interação e detalhe visual para acertar em todos os elementos. Permita que os usuários controlem a experiência. As etapas necessárias para concluir uma tarefa devem ser claras e relevantes. Decisões importantes devem ser fáceis de entender. As ações devem ser revertidas com facilidade. Um suplemento não é um destino, é um aprimoramento de uma funcionalidade do Office.

Design para todas as plataformas e métodos de entrada

Os suplementos são projetados para funcionar em todas as plataformas compatíveis com o Office, portanto, a experiência do usuário do suplemento deve ser otimizada para funcionar em várias plataformas e fatores forma. Dê suporte a mouse/teclado e dispositivos de entrada por toque e verifique se a interface do usuário HTML personalizada responde na adaptação aos diversos fatores forma. Para obter mais informações, consulte Otimizar para toque.

Confira também

  • Last updated on