รายการตรวจสอบการออกแบบ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
หลักเกณฑ์ต่อไปนี้จะกล่าวถึงข้อผิดพลาดด้านการออกแบบที่พบบ่อยเมื่อสร้างหรือแก้ไขสไตล์แผนที่ Google ขอแนะนำ
ให้คุณปรึกษานักออกแบบกราฟิกเพื่อประกอบและตรวจสอบการออกแบบด้วย
ตรวจสอบว่าสีมีคอนทราสต์เพียงพอ: คอนทราสต์ช่วยให้ข้อความอ่านได้และช่วยแยกแยะฟีเจอร์บางอย่างในแผนที่ โปรดดูรายละเอียดที่หัวข้อ
เลือกสีเติมและสีเส้นขอบที่ตัดกัน
ตรวจสอบระดับการซูมต่างๆ: ทดสอบว่าองค์ประกอบสไตล์ดูดีใน
ระดับการซูมต่างๆ
หลีกเลี่ยงการใช้สีที่ทราบว่าอาจเป็นปัญหาสำหรับผู้ใช้ที่ตาบอดสี:
ตรวจสอบว่าการออกแบบของคุณใช้งานได้สำหรับผู้ที่ตาบอดสี
ตรวจสอบโหมดกลางคืน: สำหรับการออกแบบบนอุปกรณ์เคลื่อนที่ ให้ตรวจสอบว่าการออกแบบของคุณทำงานร่วมกับโหมดกลางคืนได้
เลือกสีเติมและสีเส้นโครงร่างที่ตัดกัน
ตรวจสอบว่าสีเติมและสีเส้นตัดกันเพียงพอเพื่อให้มั่นใจว่า
องค์ประกอบแผนที่แยกความแตกต่างจากพื้นหลังและองค์ประกอบแผนที่ที่คล้ายกันได้
รูปหลายเหลี่ยมสำหรับเส้น: เลือกสีที่ตัดกันเพื่อแสดงรายละเอียดใน
เส้น เช่น เส้นทางเป็นเส้นประ และหากสีมีความเปรียบต่างไม่เพียงพอ
ก็จะดูเหมือนเส้นทึบ ทางหลวงจะแสดงที่ขอบด้านนอก ดังนั้นหากไม่มีความคมชัด ทางหลวงอาจดูเป็นเส้นทึบและอาจทำให้สับสนกับถนนประเภทอื่นๆ
รูปหลายเหลี่ยมสำหรับรูปร่าง: ความคมชัดช่วยให้คุณเห็นเส้นขอบระหว่าง
รูปหลายเหลี่ยมที่อยู่ติดกัน
เส้นขอบและการเติมข้อความ: สำหรับข้อความ เส้นขอบคือสีโครงร่าง ซึ่งจะช่วยให้ข้อความอ่านได้เมื่อเทียบกับสีพื้นหลัง หากสีเส้นขอบ
คล้ายกับสีเติมมากเกินไป แบบอักษรอาจดูเบลอหรือ
ไม่ชัดด้วย
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 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."]]
