¿Qué forma dar a mi app: esquinas rectas, redondeadas o redondas?

Esto es lo que cambia la forma en una app GoodBarber, dónde se ajusta y cómo llegar hasta el radio que elijas.

La forma es el redondeo de las esquinas de tus celdas, tus miniaturas, tus botones y tus campos, lo que solemos llamar esquinas redondeadas. En el Design System de GoodBarber, es el Shape atom, y propone tres formas listas para usar. Cuadrado, la esquina es recta y el radio vale 0. Redondeado, el radio vale 4 píxeles, lo justo para suavizar sin llamar la atención. Redondo, vale 12 píxeles en una celda o una miniatura, y en un botón o un campo ocupa toda la altura, la forma que los diseñadores llaman pill.

No ajustas estas esquinas elemento por elemento. Una forma elegida en Mi App › Estilo de la app › Miniaturas y celdas vale para todas las listas, todos los widgets de la Home y sus encabezados, en todas tus páginas. Es nuestro principio «Set once, consistent everywhere», un valor que se pone una vez y se repite en todas partes. Los botones y los campos tienen su propia opción, también en Estilo de la app, en Botones y Campos de formulario, con las mismas tres formas predefinidas. Así puedes tener celdas cuadradas y botones redondos.

En una app GoodBarber con esquinas rectas, no todo es cuadrado. Las celdas, las miniaturas y los botones lo son. Pero el avatar de un autor sigue siendo un círculo, redondo por naturaleza. Y otros pequeños elementos tienen su propia forma, que no sigue la forma elegida para la app: el icono de reproducción de un vídeo, la etiqueta de su duración, la pastilla de fecha. Nuestras plantillas los entregan redondos. Un círculo se reconoce de un vistazo, incluso muy pequeño, y señala algo aparte, una persona, una acción, una referencia.

Aun así, su forma no es fija. La pastilla de fecha tiene su propio cursor de forma, con tres posiciones. Así es como la app de Unit 7 de arriba, la de un taller de serigrafía, pasó sus pastillas a cuadrado, para llevar hasta el final su apuesta por las esquinas rectas.

Aquí tienes dos veces la misma pantalla, la de Eastside Music Workshop, una escuela de música. A la izquierda, todo es cuadrado, la opción Cuadrado para las miniaturas y celdas, la barra de pestañas con «Estilo de los ángulos» en Cuadrado, la pastilla de fecha en la primera posición de su cursor. La app es limpia, y algo severa para una escuela. A la derecha, han cambiado tres ajustes, el objeto shape en custom con un radio de 20, la barra de pestañas en «Todo redondeado» y la pastilla en la opción redonda. Nada más se ha movido, ni los colores, ni las fuentes, ni los espacios. Y sin embargo, la app cambia de carácter. Se vuelve acogedora, como una escuela a la que pequeños y mayores vienen a aprender música.

Eso es todo lo que hace un radio, y por eso merece que lo elijas en lugar de aceptarlo sin más.

Tres apps, tres formas, y cada una cuenta otra cosa. De izquierda a derecha, la imagen muestra esquinas rectas para la app de un taller de serigrafía, redondeadas para la de una sociedad de historia natural, redondas para la de una escuela de música. La tabla añade el radio libre.

Las tres primeras filas se eligen en Estilo de la app. La cuarta se ajusta en el editor, con dos claves.

Ninguna forma es mejor que otra. Cada una de estas tres apps se sostiene gracias a la suya, porque dice lo mismo que sus colores y sus fuentes.

Mi ajuste favorito es el de Eastside, un radio de 20 en las celdas, botones redondos y una barra de pestañas redonda. Viene del logo de la escuela, tres arcos redondeados, y esa curva vuelve en cada celda y cada botón. Con curvas tan generosas, cada celda se convierte en un objeto bien distinto sobre el fondo, y los botones redondos se ven al primer vistazo.

El radio de 20 se pone en el JSON, con los tres pasos de «Ajusta la forma de tu app en GoodBarber». Los botones y los campos pasan a la opción Redondo, y la barra de pestañas a «Todo redondeado».

La forma en resumen

• En una app GoodBarber, la forma de las esquinas se elige entre tres opciones, Cuadrado (0), Redondeado (4 px) y Redondo (12 px, o toda la altura en botones y campos).
• Una forma elegida en Estilo de la app › Miniaturas y celdas vale para todas las celdas, miniaturas, encabezados y fondos de widget. Los botones y los campos tienen la misma elección, en su propio panel.
• La barra de pestañas tiene su propio ajuste, «Estilo de los ángulos», con las plantillas Bold, Minimal y Clean TabBar.
• Algunos pequeños elementos no siguen la forma de la app. El avatar es redondo por naturaleza, el icono de reproducción, la duración y la pastilla de fecha tienen su propia forma, redonda en nuestras plantillas.
• Para un radio preciso, pasa por el JSON con la extensión gratuita Edición avanzada, poniendo type en custom y añadiendo radius, un número entero.