Danh sách kiểm tra thiết kế
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Các nguyên tắc sau đây đề cập đến những lỗi thiết kế thường gặp khi tạo hoặc chỉnh sửa kiểu bản đồ. Google khuyên bạn cũng nên tham khảo ý kiến của nhà thiết kế đồ hoạ để tập hợp và xem xét thiết kế của bạn.
Đảm bảo có đủ độ tương phản về màu sắc: Độ tương phản giúp văn bản dễ đọc và giúp phân biệt một số đối tượng trên bản đồ. Để biết thông tin chi tiết, hãy xem phần Chọn màu tô và màu nét có độ tương phản.
Kiểm tra các mức thu phóng khác nhau: Kiểm thử để đảm bảo các phần tử kiểu của bạn trông đẹp ở các mức thu phóng khác nhau.
Tránh dùng những tổ hợp màu sắc được biết là gây vấn đề cho người dùng bị mù màu: Đảm bảo thiết kế của bạn phù hợp với những người bị mù màu.
Kiểm tra Chế độ ban đêm: Đối với các thiết kế dành cho thiết bị di động, hãy đảm bảo thiết kế của bạn hoạt động với Chế độ ban đêm.
Chọn màu tô và màu nét tương phản
Đảm bảo có đủ độ tương phản giữa màu tô và màu nét để đảm bảo các đối tượng trên bản đồ của bạn có thể phân biệt được với nền và với các đối tượng tương tự trên bản đồ.
Đa giác cho một đường kẻ: Chọn màu tương phản để thể hiện chi tiết trên một đường kẻ. Ví dụ: đường đi là đường nét đứt và nếu màu sắc không có đủ độ tương phản, thì đường đi sẽ trông giống như một đường liền nét. Đường cao tốc được đánh dấu viền ở các cạnh ngoài, vì vậy, nếu không có độ tương phản, đường cao tốc có thể trông như đường liền nét và do đó có thể bị nhầm lẫn với các loại đường khác.
Đa giác cho một hình dạng: Độ tương phản giúp bạn nhìn thấy đường viền giữa các đa giác nằm cạnh nhau.
Nét chữ và màu nền: Đối với văn bản, nét chữ là màu đường viền, giúp văn bản dễ đọc hơn trên nền có màu. Nếu màu nét vẽ quá giống với màu tô, thì phông chữ của bạn cũng có thể xuất hiện mờ hoặc không rõ nét.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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."]]