¿Cómo nombrar capas en UI?
Vamos a hablar sobre como nombrar las capas cuando estamos diseñando una interfaz de usuario.
Hay muchas formas de nombrar las capas, pero la que a mi más me ha sido de utilidad y ha evitado que pierda tiempo pensando en que nombre ponerle a las capas de mis diseños, es utilizar los nombres de los componentes de cada sistema operativo para el que estoy diseñando además de las clásicas de HTML5 como son container, body, article, table, etc.
Estas etiquetas vienen bien cuando el diseño en el que estamos trabajando consta de por ejemplo varias secciones
Podemos enumerar las capas o ser más específicos con los nombres de las secciones. A mi me gusta utilizar la sintaxis:
nombredelcontenido.tag
Cada tag corresponde con una etiqueta o nombre de componente que estoy diseñando.
Si estoy diseñando un slider que va a controlar el audio de mi aplicación entonces podría nombrar a mi capa superior como volumen.slider
Y que pasa con las capas internas? Bueno, podemos ir nombrando las capas en función de lo que contienen si son grupos o autolayouts, o, de lo que representan.
Get Santiago Martínez’s stories in your inbox
Join Medium for free to get updates from this writer.
Por ejemplo al icono podiamos nombrarlo voulumen.icon
y al autolayout que contiene la línea y el botón de control del slider podemos llamarle control.slider
Por último a las capas internas del control slider podemos llamarles como lo que represtentan: un rango y un boton. Entonces podemos llamarles rango.slider
y boton.slider
Podemos aplicar el mismo concepto con cada elemento que estemos construyendo, lo importante es conocer e identificar que tipo de componente estamos creando.
Como se que es un poco tedioso estar revisando la documentación de cada sistema operativo, te dejo el enlace a una tabla de Notion donde podrás consultar toda la información de los componentes de Android e iOS, están clasificados por componentes que podrás encontrar en ambas plataformas y las que son especificas de cada una.
Link de Notion ↓
Espero te haya sido de ayuda esta metodología, y ¿tu como nombras las capas de tus archivos? Te leo en los comentarios 😋
También de invito a que veas mi perfil de Figma donde estaré subiendo recursos que te puedan ayudar.
