مبادئ جوجل التوجيهية لتصميم الماتريال : الشكل أو النمط (Style) – الجزء الثالث

الأيقونات

أيقونات النظام (System Icons)

التعريف أيقونات النظام أو أيقونات واجهة المستخدم ، ترمز إلي أمر ، ملف، جهاز ، أو دليل. ويستخدم نظام الأيقونات أيضا لتمثيل إجراءات (actions) شائعة مثل الطباعة والحفظ والحذف. تصميم أيقونات النظام بسيط ،حديث، وودي. كل أيقونة يتم تقليلها إلي حدها الأدني ، مع كل فكرة يتم تنفيذها في جوهرها. التصميمات تضمن انقرائية جيدة ووضوح حتي في الأحجام الصغيرة. Style-SystemIcon-icon_set_large_mdpi [divider] [/divider]

مبادئ التصميم

الأشكال تكون عريضة (bold) وهندسية (geometric) في التنفيذ. اللعب علي التماثل والتناسق في شكل الأيقونة يعطيها ميزة فريدة من نوعها، أثناء الحفاظ علي البساطة والعرض (Bold). Style-SystemIcons-design_principlesb_large_mdpi Style-SystemIcons-design_principlesa_large_mdpi Style-SystemIcons-design_principlesd_large_mdpi Style-SystemIcons-design_principlesc_large_mdpi [divider] [/divider]

 الشبكة، النسبة، والحجم (Grid, Proportion, and Size)

شبكة الأيقونة (icon grid) هي شبكة مرنة تستند علي عناصر رئيسية ونسب مشتركة بين الأيقونات . شكل الأيقونة مبني من أشكال هندسية مسطحة التي تحاذي الشبكة (grid). 4 أشكال هندسية مستخدمين في الشبكة (Grid)، بأحجام محددة لضمان تناسق الوزن البصري (visual weight) والتناسب في جميع الأشكال. تتوفر مجموعتين من الأشكال بأحجام مختلفة لتتمكن من استخدمامها للأيقونات في تطبيقك. Style-SystemIcons-grid_proportion_sizesb_large_mdpi Style-SystemIcons-grid_proportion_sizesa_large_mdpi Style-SystemIcons-grid_proportion_sizesd_large_mdpi Style-SystemIcons-grid_proportion_sizesc_large_mdpi Style-SystemIcons-grid_proportion_sizese_large_mdpi Style-SystemIcons-grid_proportion_sizesf_large_mdpi [divider] [/divider]

زوايا دائرية (Round Corners)

اضافة زوايا دائرية للأشكال المربعة والمستطيلة. اللعب في الزوايا المستديرة والحادة يمكن أن يتم تطبيقة للأشكال المربعة والمستطيلة التي تحتوي علي بروز (protrusion) أو تفصيل (indentation). كل الأيقونات القوية (stroked) لها زوايا حادة. Style-SystemIcons-round_cornersb_large_mdpi Style-SystemIcons-round_cornersa_large_mdpi style-systemicons-stroke-terminalb_large_mdpi style-systemicons-stroke-terminala_large_mdpi [divider] [/divider] كل حجم لمجموعة أيقونات النظام يتطلب زاوية مستديرة مختلفة من أجل التناسق البصري. style-systemicons-stroke-weightb_large_mdpi style-systemicons-stroke-weighta_large_mdpi [divider] [/divider]

التناسق

التناسق هو أمر مهم. استخدم أيقونات النظام الحالي كلما أمكن وخلال التطبيقات المختلفة.   style-systemicons-do_large_mdpi
افعل
style-systemicons-dont_large_mdpi
لا تفعل
[divider] [/divider]

الأيقونات في السياق والتطبيق (Context and Application)

الأيقونات تقع (nestled) في 24 dps المربع المحيط يحدد بواسطة الشبكة (grid). Style-SystemIcons-icons_incontextb_large_mdpi Style-SystemIcons-icons_incontexta_large_mdpi   المصدر]]>

شارك

2 thoughts on “مبادئ جوجل التوجيهية لتصميم الماتريال : الشكل أو النمط (Style) – الجزء الثالث

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *