SAP Fiori Design Guidelines

Las directrices describen cómo deben verse, comportarse y comunicarse las aplicaciones SAP Fiori. Las áreas principales son:

• Principios: las cinco ideas que sustentan cada decisión de diseño.
• Fundamentos visuales: color, tipografía, iconografía, espaciado, temas y redacción.
• Elementos de UI: orientación por control: cuándo usarlo, cuándo no y cómo debe comportarse.
• Floorplans: estructuras de página completas para tareas recurrentes, como el list report, el object page y el overview page.
• Patrones: comportamientos transversales como los mensajes, la gestión de draft y la navegación.
• UI kits: archivos de diseño que permiten a los diseñadores crear maquetas de pantallas con los mismos componentes que utilizan los desarrolladores.

Existen ediciones separadas para web, iOS y Android, porque las aplicaciones móviles nativas siguen las convenciones de su plataforma a la vez que mantienen el lenguaje de diseño de SAP Fiori. Desde 2025, las directrices forman parte del portal más amplio SAP Design System en sap.com. Por tanto, las SAP Fiori Design Guidelines son un sistema de diseño completo, no una hoja de estilos.

SAP define cinco principios para la experiencia de usuario de SAP Fiori:

El quinto principio pide una experiencia que establezca una conexión emocional con los usuarios y les facilite el trabajo. Los principios son deliberadamente abstractos. Se concretan en los floorplans y en la orientación sobre elementos de UI, que es a lo que suelen remitir las revisiones de diseño. Los cinco principios de diseño de SAP Fiori son la vara de medir; el resto de las directrices muestra cómo cumplirla.

Las directrices describen el resultado buscado; las tecnologías lo producen.

• SAPUI5 ofrece controles que ya siguen visualmente las directrices, pero un desarrollador aún puede combinarlos en una pantalla que rompa el comportamiento previsto.
• SAP Fiori elements implementa determinados floorplans como plantillas basadas en metadatos. La guía para desarrolladores de SAP menciona el cumplimiento automático de SAP Fiori como una de sus ventajas, porque el layout y el comportamiento provienen del framework de SAP.
• Las aplicaciones SAPUI5 freestyle solo alcanzan el cumplimiento mediante un trabajo de diseño deliberado, ya que cada decisión de layout es personalizada.
• UI5 Web Components llevan el mismo lenguaje visual a otros frameworks web.

Por eso muchos equipos eligen primero el floorplan y después la tecnología: si un floorplan encaja, SAP Fiori elements lo ofrece con menos esfuerzo. Las SAP Fiori Design Guidelines responden a "¿qué debe ser esta aplicación?", mientras que SAPUI5 y SAP Fiori elements responden a "¿cómo se construye?".

El diseño visual de SAP Fiori ha evolucionado varias veces desde las aplicaciones originales centradas en tareas, con familias de temas como Belize y Quartz, seguidas de la actual familia de temas SAP Horizon. Cada etapa mantuvo los principios, pero cambió el lenguaje visual, la experiencia del launchpad y los patrones disponibles. En SAPUI5, SAP Horizon aparece como temas como Morning Horizon y Evening Horizon.

De ello se derivan dos consecuencias prácticas:

1. La orientación depende de la versión. Las directrices web se versionan en paralelo a las releases de SAPUI5, y SAP solo actualiza la versión más reciente de las directrices, por lo que un equipo con un front-end server on-premise más antiguo debe comprobar qué orientación corresponde a su release.
2. La ubicación ha cambiado. Las directrices se encuentran ahora en el portal SAP Design System, y los antiguos marcadores redirigen allí.

Leer las SAP Fiori Design Guidelines de una versión equivocada puede convertir una revisión de diseño en una discusión sobre funciones que el sistema no tiene.

Las directrices resultan más útiles en los momentos en que se fijan las decisiones de diseño:

• Requisitos: describir una aplicación personalizada como "un list report con un object page" da al negocio y a TI un vocabulario común antes de que nadie escriba código.
• Elección de tecnología: si un floorplan estándar cubre el requisito, SAP Fiori elements suele ser la vía más económica; si no, el desarrollo freestyle está justificado.
• Revisiones de diseño: los revisores pueden remitir a una directriz concreta en lugar de discutir sobre gustos.
• Aceptación: la orientación sobre redacción, gestión de mensajes y accesibilidad ofrece a los testers criterios concretos.

Ejemplo: Alder Manufacturing quiere una pantalla para que los compradores revisen las confirmaciones de proveedor de Cedar Office Supply. Consultar primero los floorplans muestra que encaja un list report con un object page, lo que resuelve tanto el diseño como el enfoque de construcción. Las SAP Fiori Design Guidelines rinden más cuando se consultan antes de la primera maqueta, no después de la primera queja.

1. Tratar las directrices como documentación para desarrolladores. Describen la experiencia; los detalles de implementación están en el SAPUI5 SDK.
2. Diseñar un layout personalizado cuando encaja un floorplan. Los layouts personalizados cuestan más de construir y mantener y se alejan de las aplicaciones propias de SAP.
3. Consultar la edición web para una aplicación móvil nativa. iOS y Android tienen sus propias ediciones.
4. Pasar por alto la redacción y los mensajes. Las etiquetas, los estados vacíos y los textos de error forman parte de las directrices, y los profesionales señalan con frecuencia que son lo primero que marcan los revisores.
5. Equiparar el cumplimiento con la adecuación a la tarea. Una aplicación puede seguir todas las directrices y aun así modelar los pasos equivocados. La adecuación al proceso debe comprobarse por separado.

Las SAP Fiori Design Guidelines son un estándar compartido y funcionan mejor cuando las utiliza todo el equipo, no solo los diseñadores.