Checklist desain
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Panduan berikut membahas masalah desain umum saat membuat atau mengedit gaya peta. Google merekomendasikan agar Anda juga berkonsultasi dengan desainer grafis untuk menyusun dan meninjau desain Anda.
Pastikan ada kontras warna yang cukup: Kontras membantu menjaga teks tetap mudah dibaca dan membantu membedakan fitur peta tertentu. Untuk mengetahui detailnya, lihat
Memilih warna pengisi dan goresan yang kontras.
Periksa tingkat zoom yang berbeda: Uji apakah elemen gaya Anda terlihat bagus pada tingkat zoom yang berbeda.
Hindari kombinasi warna yang diketahui menimbulkan masalah bagi pengguna yang buta warna:
Pastikan desain Anda dapat digunakan untuk orang yang buta warna.
Periksa Mode malam: Untuk desain seluler, pastikan desain Anda kompatibel dengan Mode malam.
Memilih warna pengisi dan goresan yang kontras
Pastikan ada kontras yang cukup antara warna pengisi dan goresan untuk memastikan fitur peta Anda dapat dibedakan dari latar belakang dan dari fitur peta yang serupa.
Poligon untuk garis: Pilih warna yang kontras untuk menampilkan detail di garis. Misalnya, jalur ditunjukkan dengan garis putus-putus, dan jika warna tidak cukup kontras, jalur akan terlihat seperti garis yang solid. Jalan raya diberi garis batas di tepi luar, jadi tanpa kontras, jalan raya mungkin terlihat solid, dan karenanya bisa tertukar dengan jenis jalan yang lain.
Poligon untuk bentuk: Kontras membantu Anda melihat batas di antara poligon yang bersebelahan satu sama lain.
Pengisi dan goresan teks: Untuk teks, goresan adalah warna garis batas yang membantu membuat teks mudah dibaca terhadap warna latar belakang. Jika warna goresan terlalu mirip dengan warna pengisi, font Anda mungkin juga terlihat buram atau tidak fokus.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-27 UTC.
[null,null,["Terakhir diperbarui pada 2025-08-27 UTC."],[],[],null,["Select 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\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."]]
