SAP Fiori Design Guidelines

As diretrizes descrevem como os apps SAP Fiori devem parecer, se comportar e se comunicar. As principais áreas são:

• Princípios — as cinco ideias por trás de cada decisão de design.
• Fundamentos visuais — cor, tipografia, iconografia, espaçamento, temas e redação.
• Elementos de UI — orientação por controle: quando usar, quando não usar e como deve se comportar.
• Floorplans — estruturas de página completas para tarefas recorrentes, como o list report, o object page e o overview page.
• Padrões — comportamentos transversais, como mensagens, tratamento de draft e navegação.
• UI kits — arquivos de design que permitem aos designers montar mock-ups de telas com os mesmos componentes que os desenvolvedores usam.

Há edições separadas para web, iOS e Android, porque os apps móveis nativos seguem as convenções de suas plataformas sem perder a linguagem de design SAP Fiori. Desde 2025, as diretrizes fazem parte do portal mais amplo SAP Design System, em sap.com. As SAP Fiori Design Guidelines são, portanto, um design system completo, não uma folha de estilos.

A SAP define cinco princípios para a experiência do usuário SAP Fiori:

O quinto princípio pede uma experiência que crie uma conexão emocional com os usuários e facilite seu trabalho. Os princípios são deliberadamente abstratos. Eles se tornam concretos nos floorplans e nas orientações sobre elementos de UI, que é onde as revisões de design costumam se apoiar. Os cinco princípios de design do SAP Fiori são a régua; o restante das diretrizes mostra como atendê-la.

As diretrizes descrevem o resultado pretendido; as tecnologias o produzem.

• SAPUI5 fornece controles que já seguem as diretrizes visualmente, mas um desenvolvedor ainda pode combiná-los em uma tela que quebra o comportamento pretendido.
• SAP Fiori elements implementa floorplans selecionados como templates orientados a metadados. A orientação da SAP para desenvolvedores cita a conformidade automática com o SAP Fiori como um de seus benefícios, porque o layout e o comportamento vêm do framework da SAP.
• Apps SAPUI5 freestyle só alcançam a conformidade com trabalho de design deliberado, já que cada decisão de layout é customizada.
• UI5 Web Components levam a mesma linguagem visual a outros frameworks web.

É por isso que muitas equipes escolhem primeiro o floorplan e depois a tecnologia: se um floorplan se encaixa, o SAP Fiori elements o entrega com menos esforço. As SAP Fiori Design Guidelines respondem "o que este app deve ser?", enquanto o SAPUI5 e o SAP Fiori elements respondem "como ele é construído?".

O design visual do SAP Fiori evoluiu várias vezes desde os apps originais focados em tarefas, com famílias de temas como Belize e Quartz, seguidas pela atual família de temas SAP Horizon. Cada etapa manteve os princípios, mas mudou a linguagem visual, a experiência do launchpad e os padrões disponíveis. No SAPUI5, o SAP Horizon aparece como temas como Morning Horizon e Evening Horizon.

Daí decorrem duas consequências práticas:

1. A orientação depende da versão. As diretrizes para web são versionadas de acordo com as releases do SAPUI5, e a SAP atualiza apenas a versão mais recente das diretrizes; por isso, uma equipe em um front-end server on-premise mais antigo deve verificar qual orientação corresponde à sua release.
2. O endereço mudou. As diretrizes agora ficam no portal SAP Design System, e os favoritos antigos redirecionam para lá.

Ler as SAP Fiori Design Guidelines da versão errada pode transformar uma revisão de design em uma discussão sobre recursos que o sistema não tem.

As diretrizes são mais úteis nos pontos em que as decisões de design ficam fixadas:

• Requisitos: descrever um app customizado como "um list report com um object page" dá ao negócio e à TI um vocabulário comum antes que alguém escreva código.
• Escolha de tecnologia: se um floorplan padrão cobre o requisito, o SAP Fiori elements costuma ser o caminho mais barato; se não, o desenvolvimento freestyle se justifica.
• Revisões de design: os revisores podem apontar uma diretriz específica em vez de discutir gosto.
• Aceite: as orientações sobre redação, tratamento de mensagens e acessibilidade dão aos testadores critérios concretos.

Exemplo: a Alder Manufacturing quer uma tela para que os compradores revisem as confirmações de fornecedor da Cedar Office Supply. Consultar primeiro os floorplans mostra que um list report com um object page se encaixa, o que define tanto o design quanto a abordagem de construção. As SAP Fiori Design Guidelines rendem mais quando são consultadas antes do primeiro mock-up, não depois da primeira reclamação.

1. Tratar as diretrizes como documentação para desenvolvedores. Elas descrevem a experiência; os detalhes de implementação ficam no SAPUI5 SDK.
2. Desenhar um layout customizado quando um floorplan se encaixa. Layouts customizados custam mais para construir e manter e se distanciam dos próprios apps da SAP.
3. Ler a edição web para um app móvel nativo. iOS e Android têm edições próprias.
4. Ignorar redação e mensagens. Rótulos, estados vazios e textos de erro fazem parte das diretrizes, e profissionais relatam com frequência que são a primeira coisa que os revisores apontam.
5. Confundir conformidade com adequação à tarefa. Um app pode seguir todas as diretrizes e ainda modelar as etapas erradas. A aderência ao processo precisa ser verificada à parte.

As SAP Fiori Design Guidelines são um padrão compartilhado e funcionam melhor quando a equipe inteira, e não apenas os designers, as utiliza.