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

الأيقونات

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

التعريف

أيقونات النظام أو أيقونات واجهة المستخدم ، ترمز إلي أمر ، ملف، جهاز ، أو دليل. ويستخدم نظام الأيقونات أيضا لتمثيل إجراءات (actions) شائعة مثل الطباعة والحفظ والحذف.

تصميم أيقونات النظام بسيط ،حديث، وودي. كل أيقونة يتم تقليلها إلي حدها الأدني ، مع كل فكرة يتم تنفيذها في جوهرها. التصميمات تضمن انقرائية جيدة ووضوح حتي في الأحجام الصغيرة.

Style-SystemIcon-icon_set_large_mdpi

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

الأشكال تكون عريضة (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

 الشبكة، النسبة، والحجم (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

زوايا دائرية (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

كل حجم لمجموعة أيقونات النظام يتطلب زاوية مستديرة مختلفة من أجل التناسق البصري.

style-systemicons-stroke-weightb_large_mdpi style-systemicons-stroke-weighta_large_mdpi

التناسق

التناسق هو أمر مهم. استخدم أيقونات النظام الحالي كلما أمكن وخلال التطبيقات المختلفة.

 

style-systemicons-do_large_mdpi

افعل

style-systemicons-dont_large_mdpi

لا تفعل

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

الأيقونات تقع (nestled) في 24 dps المربع المحيط يحدد بواسطة الشبكة (grid).

Style-SystemIcons-icons_incontextb_large_mdpi Style-SystemIcons-icons_incontexta_large_mdpi

 

المصدر

مقالات ذات صلة

2 تعليقان

  1. Ahmed Abed
    10 سبتمبر,2014 في 8:57 م - Reply

    مقال رائع

  2. daygeek
    17 سبتمبر,2014 في 3:01 م - Reply

    شكرا لك أخي على الموضوع