Introdução ao Salesforce Lightning Design System

Introdução ao Salesforce Lightning Design System

Publicado por nome do autor em data do post

Esta introdução ao Salesforce Lightning Design System (SLDS) irá te ajudar a construir aplicativos com a aparência do Lightning Experience sem escrever uma única linha de CSS. SLDS é uma estrutura CSS que dá acesso aos ícones, paletas de cores e fontes que nossos desenvolvedores usam para criar o Lightning Experience.

Princípios básicos da IU do Lightning Experience

A interface do usuário do Lightning Experience, que o SLDS representa, foi criada usando quatro princípios básicos de design. Nós o encorajamos a mantê-los em mente ao desenvolver seus aplicativos.

  • Clareza – elimine a ambigüidade. Permita que as pessoas vejam, entendam e ajam com confiança.
  • Eficiência – simplifique e otimize fluxos de trabalho. Antecipe as necessidades de forma inteligente para ajudar as pessoas a trabalhar melhor, de maneira mais inteligente e mais rápida.
  • Consistência – Crie familiaridade e fortaleça a intuição aplicando a mesma solução ao mesmo problema.
  • Beleza – Demonstre respeito pelo tempo e atenção das pessoas por meio de um trabalho artesanal atencioso e elegante.

Benefícios do Salesforce Lightning Design System

O SLDS oferece as ferramentas para criar aplicativos consistentes com os princípios, linguagem de design e práticas recomendadas do Lightning Experience. Aqui estão os benefícios que tornam o SLDS tão útil:

  • Ele fornece uma experiência unificada e fluxos de trabalho simplificados ao estender recursos existentes ou integrar com sistemas externos.
  • Ele não reforça padrões como preenchimento e margens.
  • É atualizado continuamente. Contanto que você esteja usando a versão mais recente do SLDS, suas páginas são consistentes com o Lightning Experience.
  • Inclui acessibilidade na estrutura CSS.
  • Funciona com outros frameworks CSS, como Bootstrap.

Aplicando Salesforce Lightning Design System a páginas do Visualforce

Você pode usar o Lightning Design System (SLDS) para criar páginas do Visualforce que correspondam à aparência do aplicativo móvel Salesforce. Para usar SLDS, são necessários alguns ajustes em seu código e algumas coisas para lembrar. Na maior parte, o código do Visualforce que usa SLDS funciona sem problemas.

Use ícones SLDS no Visualforce

O Lightning Design System (SLDS) inclui versões PNG e SVG (individuais e spritemap) de nossos ícones de ação, personalizados, doctype, padrão e utilitários.

Crie uma página do Visualforce para o aplicativo Salesforce Mobile usando SLDS

Vamos criar uma página do Visualforce que exiba suas contas acessadas recentemente e tenha o estilo do Lightning Design System (SLDS) e adicione-a ao menu de navegação móvel.

Design de página responsivo usando SLDS

O design responsivo é um método de design da web que visa criar interfaces de usuário online que fornecem a melhor experiência de visualização, incluindo leitura e navegação fáceis, em vários tamanhos de tela.

Publicação escrita por Sarah Biruel, especialista em UX da Sottelli, com base no Developer Documentation da Salesforce.

Para acessar mais publicações de nossos especialistas, vá para a página Especialistas.

Feras no assunto

Quando se trata de nuvens Salesforce, somos especialistas em conectar estratégia e agilidade em um só projeto.

Fale com um especialista