Lista de tareas de diseño
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Los siguientes lineamientos hacen referencia a dificultades frecuentes a la hora de crear o editar el diseño de un mapa. Google recomienda consultar también a un diseñador gráfico para ensamblar y revisar el diseño.
Asegúrate de que haya suficiente contraste de colores: El contraste permite que el texto sea fácil de leer y ayuda a destacar ciertos componentes del mapa. Para obtener más detalles, consulta Cómo elegir colores de relleno y trazo contrastantes.
Verifica distintos niveles de zoom: Comprueba que tus elementos de diseño se vean bien en los distintos niveles de zoom.
Evita las combinaciones de colores que sean problemáticas para los usuarios daltónicos: Asegúrate de que tu diseño sea apto para las personas daltónicas.
Prueba el Modo nocturno: Asegúrate de que tu diseño funcione bien con el Modo nocturno de los dispositivos móviles.
Elige colores contrastantes para el relleno y el trazo
Asegúrate de que haya suficiente contraste entre los colores de relleno y de trazo para que los componentes de tu mapa se puedan distinguir fácilmente del fondo y de otros componentes similares del mapa.
Polígonos que representan líneas: Elige colores que contrasten para mostrar los detalles de la línea. Por ejemplo, los caminos se representan con líneas de puntos y, si los colores no son suficientemente contrastantes, pueden verse como una línea continua. Las autopistas se representan con los bordes externos, de modo que, si los colores no contrastan, pueden verse como líneas continuas y confundirse con otros tipos de caminos.
Polígonos que representan formas: El contraste ayuda a ver los límites entre distintos polígonos que se muestran juntos.
Trazo y relleno del texto: En el texto, el color del trazo marca el contorno y ayuda a facilitar la lectura sobre el fondo. Si el color del trazo es demasiado similar al del relleno, las fuentes pueden parecer borrosas o fuera de foco.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-08-31 (UTC)
[null,null,["Última actualización: 2025-08-31 (UTC)"],[],[],null,["# Design checklist\n\nSelect platform: [Android](/maps/documentation/android-sdk/cloud-customization/design-resources \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/design-resources \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/design-resources \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/design-resources \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\nThe following guidelines address common design\npitfalls when creating or editing a map style. Google recommends\nyou also consult with a graphic designer to assemble and review your design.\n\n- **Make sure there is enough color contrast** : Contrast helps keep the text\n readable and helps distinguish certain map features. For details, see\n [Choose contrasting fill and stroke colors](#contrast).\n\n- **Check different zoom levels**: Test that your style elements look good at\n different zoom levels.\n\n- **Avoid color combinations known to be problematic for colorblind users**:\n Make sure your design is usable for people who are colorblind.\n\n- **Check Night mode**: For mobile designs, make sure your design works with\n Night mode.\n\nChoose contrasting fill and stroke colors\n-----------------------------------------\n\nMake sure there is enough contrast between fill and stroke colors to make sure\nyour map features are distinguishable from the background and from similar map\nfeatures.\n\n- **Polygons for a line**: Choose colors that contrast to show the detail on\n a line. For example, trails are dotted lines, and if the colors don't\n have enough contrast, it looks like a solid line. Highways are outlined on\n the outer edges, so without contrast, they may look solid, and therefore\n could be confused with other road types.\n\n- **Polygons for a shape**: Contrast helps you see the borders between\n polygons that are next to each other.\n\n- **Text stroke and fill**: For text, the stroke is your outline color, which\n helps to make the text readable against background colors. If the stroke\n color is too similar to the fill color, your fonts may also appear blurry or\n out of focus."]]
