Explorar recursos do SLDS
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Descrever os principais recursos do SLDS: diretrizes de design, planos de componente e tokens de design.
- Acessar a documentação do SLDS para ver diretrizes relativas ao design, à acessibilidade e ao tom e à linguagem no SLDS.
Apresentando a equipe do sistema de design
Você sabe que a equipe do sistema de design é responsável pelo SLDS. Mas suas responsabilidades não acabam aqui. Seu objetivo oficial é:
Estabelecer uma experiência de alta qualidade alinhada com a marca em todo o nosso produto por meio de diretrizes humanas e ferramentas internas.
Vamos entender isso melhor.
A equipe do sistema de design oferece diretrizes humanas permitindo que designers e desenvolvedores produzam soluções de design de alta qualidade alinhadas com a marca. A equipe também ajuda os colaboradores a entender como pequenas mudanças podem afetar o sistema como um todo, e como contribuir com elementos que funcionem entre produtos e em vários casos de uso. Por fim, a equipe cria ferramentas, como diretrizes de interação e de design visual, que abordam conceitos gerais, padrões de design e tipos de página.
Os fundamentos do SLDS
Agora chegamos às engrenagens do SLDS. Para manter seus produtos alinhados com a experiência de usuário do Salesforce, as equipes de produto podem encontrar um conjunto completo de recursos de design em lightningdesignsystem.com.
As diretrizes de design descrevem padrões baseados em casos de uso específicos. Os padrões estão associados a planos (CSS acessível e documentado). Os consumidores usam planos para criar aplicativos nativos e web com o Lightning Experience. As diretrizes de design lidam com questões mais amplas sobre a experiência de usuário do Salesforce, como: Como os dados são exibidos? Como os dados são inseridos? Como a pesquisa é gerenciada? Como a IU indica que a informação está sendo carregada? O SLDS tem dois tipos de diretrizes de design.
-
Planos, um tipo de diretriz de design, são HTML e CSS estáticos, acessíveis e independentes de estrutura para elementos de IU, como caixas de seleção, cabeçalhos de página e menus dinâmicos. Os desenvolvedores usam planos para criar componentes. (O nome completo dos planos é planos de componente. As pessoas costumam se referir a eles como componentes, mas isso não está exatamente correto. Componentes costumam ser totalmente funcionais, mas o HTML5 e o CSS no SLDS são estáticos. Você precisa integrar um plano do SLDS a uma estrutura JavaScript para que um usuário possa interagir com ele.)
-
Tokens, outro tipo de diretriz de design, são entidades nomeadas que armazenam atributos de design visual. Na Salesforce, nós os utilizamos em vez de valores embutidos em código (como valores hexadecimais para cores ou valores de pixel para espaçamento). Os tokens nos ajudam a manter uma IU escalonável e consistente. O uso de tokens de design pode economizar tempo para os designers e ajudar a manter a consistência. O mais importante: quando um designer usa um token, cada instância dele é atualizada automaticamente sempre que esse token é atualizado no SLDS, sem a necessidade de atualizações manuais. O uso de tokens para representar atributos de design facilita a atualização e o dimensionamento dos elementos de design entre aplicativos web e nativos pela equipe do sistema de design.
Mais recursos
O SLDS também inclui:
-
Ferramentas como APIs, plug-ins e kits de design que facilitam e agilizam a criação com SLDS.
-
Diretrizes de tom e linguagem para tornar o conteúdo do Salesforce claro, consistente e cativante, seja em um aplicativo ou online. Essas diretrizes se aplicam a todos os textos do Salesforce, desde comunicações oficiais a instruções na tela e mensagens de erro.
-
Diretrizes de acessibilidade que ajudam pessoas com necessidades especiais a perceber, entender, navegar, interagir com e contribuir para aplicativos Salesforce. Todos os aplicativos Salesforce buscam atender ao padrão da indústria WC3 WCAG 2.0 AA para serem perceptíveis, operáveis, compreensíveis e robustos para todos os usuários. Alguns exemplos incluem:
- Oferecimento de alternativas de interação por teclado para todas as ações feitas pelo mouse
- Rótulos adequados em todos os campos e botões de formulário
- Oferecimento de alternativas baseadas em texto para todas as imagens, vídeos, ícones e SVGs
Cada componente do SLDS precisa transmitir sua identidade, modelo de operação e estado para tecnologias adaptativas, e precisa usar marcação ARIA para se identificar aos usuários de tecnologias adaptativas. Para saber mais sobre acessibilidade, explore os recursos abaixo.
O futuro do SLDS
A Salesforce é uma das líderes na indústria de sistemas de design. O SLDS foi o primeiro sistema de design empresarial de código aberto no mundo. Hoje em dia, a equipe do SLDS faz as seguintes perguntas em relação ao sistema de design do futuro: Como um sistema de design pode usar inteligência artificial? Podemos viabilizar o uso de componentes web do Lightning por todos em todas as plataformas JavaScript? Podemos fazer isso sem refazer o código? Como vários sistemas de design podem evoluir com base uns nos outros para estender casos de uso a outros tópicos?
Sejam quais forem as respostas, as perguntas continuarão a surgir. Esperamos que você se junte a nós nessa jornada enquanto o SLDS continua a evoluir.