Partes Plantillas CSS

Plantillas CSS para catálogos de piezas con artículos similares

Dos fichas de producto en un catálogo de piezas pueden parecer idénticas y significar cosas completamente diferentes. Un artículo se envía esta tarde, el segundo es un pedido especial con un plazo de entrega de seis semanas, y el tercero se ha descatalogado en favor de una versión más reciente. El estilo permite visualizar esa diferencia antes de que el usuario haga clic, y las plantillas CSS para piezas proporcionan a los proveedores un conjunto de reglas visuales para estas distinciones.

Estado del stock en fichas idénticas

Las condiciones del inventario cambian más rápido que las fotos de los productos, por lo que los indicadores asociados a ellas realizan la mayor parte del trabajo diario.

Algunas de estas condiciones merecen un tratamiento específico:

• En stock, con poco stock y en espera, diferenciados por un indicador más claro que el color.

• Artículos de pedido especial, donde el plazo de entrega se indica junto al precio.

• Componentes descatalogados que señalan el reemplazo.

• Compatibilidad confirmada con la máquina seleccionada y una advertencia cuando la compatibilidad es incorrecta.

Los distribuidores que ofrecen líneas OEM y de posventa simultáneamente necesitan una señal adicional, ya que la diferencia de precio genera una pregunta que una etiqueta pequeña responde más rápidamente que un párrafo.

Facilitando la lectura de códigos largos

El número de pieza es el nombre real del producto, por lo que merece mayor relevancia visual que el texto circundante. Un ancho fijo, un mayor espaciado entre letras y un contraste marcado facilitan la lectura en voz alta de un código de diecinueve caracteres y permiten compararlo con el código desgastado en el banco de trabajo. Las tablas de especificaciones también se benefician de esta atención, con unidades alineadas, separadores de fila claros y anchos de columna que se mantienen constantes a lo largo de la lista.

Nicepage cubre la mayor parte de esto mediante sus controles visuales, y el código CSS personalizado se encarga de lo que no cubre. La documentación de CSS personalizado explica cómo se agregan reglas y se asignan clases a los elementos, manteniendo los tratamientos específicos del catálogo, como las insignias de compatibilidad, las filas de comparación o los filtros, fuera del sistema visual general.

Las pantallas estrechas requieren menos columnas

En los teléfonos, el estilo del catálogo suele verse afectado. Un código de veinte caracteres se divide en dos partes sin sentido, una tabla de especificaciones oculta el precio y cuatro tarjetas seguidas dificultan la lectura. El ajuste de texto controlado, una tabla que se desplaza lateralmente y un número de tarjetas que disminuye al reducirse el tamaño de la pantalla solucionan la mayoría de estos problemas.

Es importante mantener estas reglas al pie de la letra, ya que una regla que existe para una familia de productos con descripciones inusualmente largas no debería modificar el diseño de todas las tarjetas del catálogo. El estilo que se mantiene en un catálogo en crecimiento suele ser sencillo: un lenguaje visual para los elementos repetidos, además de una breve lista de excepciones que justifican su uso.