Lista de verificação de design
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
As diretrizes a seguir abordam problemas comuns de projetos, da criação ou edição de um estilo de mapa. O Google também recomenda que você consulte um designer gráfico para criar e revisar seu design.
Verifique se o contraste de cores é suficiente: isso ajuda a manter o texto legível e a distinguir alguns elementos do mapa. Para detalhes, leia Escolher cores contrastantes para preenchimento e traço.
Confira diferentes níveis de zoom: faça testes para saber se os elementos de estilo têm uma boa aparência em vários níveis de zoom.
Evite combinações de cores que podem causar dificuldades para usuários daltônicos: garanta que seu design seja acessível para pessoas daltônicas.
Verifique o Modo noturno: confira se o design funciona com o Modo noturno (para dispositivos móveis).
Escolher cores contrastantes para preenchimento e traço
Verifique se o contraste entre as cores de preenchimento e de traço é suficiente para que os elementos do seu mapa se diferenciem do fundo e de outros elementos semelhantes.
Polígonos que representam linhas: escolha cores contrastantes para mostrar os detalhes da linha. Por exemplo, as trilhas são representadas por linhas pontilhadas, que podem parecer contínuas se as cores não tiverem alto contraste. As rodovias são identificadas com contornos mais fortes. Se não houver contraste, esses traços não ficarão evidentes, e elas poderão ser confundidas com outros tipos de vias.
Polígonos que representam formas: o contraste ajuda a visualizar as bordas dos polígonos que aparecem perto um do outro.
Traço e preenchimento do texto: nos textos, o traço é a cor do contorno, que mantém o texto legível em contraste com as cores de fundo. Se a cor do traço for muito parecida com a do preenchimento, suas fontes podem parecer borradas ou fora de foco.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-08-31 UTC.
[null,null,["Última atualização 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."]]