قائمة التحقّق من التصميم
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تتناول الإرشادات التالية المشاكل الشائعة في التصميم عند إنشاء نمط خريطة أو تعديله. تنصحك Google أيضًا بالاستعانة بمصمّم غرافيك لتجميع تصميمك ومراجعته.
التأكّد من توفّر تباين كافٍ في الألوان: يساعد التباين في الحفاظ على إمكانية قراءة النص ويساعد في التمييز بين ميزات معيّنة على الخريطة. للاطّلاع على التفاصيل، راجِع اختيار ألوان متناقضة للتعبئة والخطوط.
التحقّق من مستويات تكبير/تصغير مختلفة: اختبِر ما إذا كانت عناصر النمط تبدو جيدة عند مستويات تكبير/تصغير مختلفة.
تجنُّب تركيبات الألوان المعروفة بأنّها تسبّب مشاكل للمستخدمين المصابين بعمى الألوان:
احرص على أن يكون تصميمك قابلاً للاستخدام من قِبل الأشخاص المصابين بعمى الألوان.
التحقّق من "الوضع الليلي": بالنسبة إلى التصاميم المتوافقة مع الأجهزة الجوّالة، تأكَّد من أنّ تصميمك يعمل مع "الوضع الليلي".
اختيار ألوان متناقضة للتعبئة والحدود
تأكَّد من توفّر تباين كافٍ بين ألوان التعبئة والحدود لضمان إمكانية تمييز عناصر الخريطة عن الخلفية وعن عناصر الخريطة المشابهة.
المضلّعات للخط: اختَر ألوانًا متناقضة لإظهار التفاصيل على الخط. على سبيل المثال، المسارات هي خطوط منقطة، وإذا لم يكن هناك تباين كافٍ بين الألوان، ستبدو وكأنّها خط متصل. يتم تحديد الطرق السريعة على الحواف الخارجية، لذا بدون تباين، قد تبدو صلبة، وبالتالي يمكن الخلط بينها وبين أنواع الطرق الأخرى.
المضلّعات الخاصة بشكل: يساعدك التباين في رؤية الحدود بين المضلّعات المتجاورة.
خط النص وتعبئته: بالنسبة إلى النص، يمثّل الخط لون المخطط التفصيلي الذي يساعد في جعل النص قابلاً للقراءة على ألوان الخلفية. إذا كان لون الحد
مشابهًا جدًا للون التعبئة، قد تبدو الخطوط أيضًا غير واضحة أو
غير مركّزة.
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-31 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
