مبادئ جوجل التوجيهية لتصميم الماتريال :التخطيط (Layout) – الجزء الثاني

القياسات وخطوط الأساس (Metrics and Keylines)

شبكات (Grids) خط الأساس

كل العناصر تحاذي 8 dp مربع إلي الشبكة (grid) الأساسية. الفئة تحاذي 4 dp إلي الشبكة الأساسية. الأيقونات في أشرطة الأدوات تحاذي 4 dp مربع إلي الشبكة الأساسية. وهذا ينطبق علي المحمول ، والتابلت، الكمبيوتر المكتبي.

 

layout-metrics-baselinegrids-01-8dp-baselinea_large_mdpi   layout-metrics-baselinegrids-01-8dp-baselineb_large_mdpi   layout-metrics-baselinegrids-01-8dp-baselinec_large_mdpi

 

layout-metrics-baselinegrids-02-8dp-baseline_large_mdpi (1)

 

layout-metrics-baselinegrids-baseline-03_large_mdpi

خطوط الأساس والتباعد  (Keylines and Spacing)

 الموبايل

يتضمن تخطيط الموبايل مجموعة متنوعة من الشاشات ومعلومات حول كيفية عمل خطوط الأساس والتباعد في مختلف اطراف الشاشة والعناصر. وفيما يلي مثال علي شاشات مضمنة للتحميل.

layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi

التباعد العمودي
1. 24dp
2. 56dp
3. 48dp
4. 72dp

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi

هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp من الحواف اليسري إلي اليمني.
المحتوي المرتبط بأيقونة أو صورة شخصية بمحاذاة 72 dp من الحافة اليسري, 16 dp هوامش افقية علي الموبايل.

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi

السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية والخطوط إلي اليسار وكيف أن 56 dp الإجراء العائم “floating action” والنص يحاذي علي اليمين.

 

44

 

layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi

التباعد العمودي
1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi

هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري إلي اليمني.
المحتوي المرتبط بأيقونة أو صورة شخصية بمحاذاة 72 dp من الحافة اليسري, 16 dp هوامش افقية علي الموبايل.

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi

السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية وخطوط القائمة والعنوان الفرعي و الاجراء العائم “floating action” إلي اليسار وكيف أن الأيقونات تحاذي اليمين.

44
layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi

التباعد العمودي
1. 24dp
2. 56dp
3. 8dp
4. 72dp

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi

هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية بمحاذاة 72 dp من الحافة اليسري.وخط أساس تم اضافة 32 dp من الحافة اليمني لمراعاة 56 dp الإجراء العائم الدائري. وهذا يسمح للأيقونات أدناه بمحاذاة الإجراء العائم(floating action). 16 dp هوامش افقية علي الموبايل.

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi

السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات إلي اليسار وكيف أن الأيقونات و الإجراء العائم “56 dp floating action” تحاذي اليمين.

44
layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi

التباعد العمودي
1. 24dp
2. 56dp
3. 48dp
4. 8dp

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi

هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري.
16 dp هوامش افقية علي الموبايل.

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi

السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار وكيف أن الإجراء العائم “56 dp floating action” والأيقونات والنص تحاذي اليمين.

44
layout-metrics-keylines-keylines-spacing-mobile-01bc_large_mdpi

التباعد العمودي
1. 48dp
2. 8dp
3. 56dp

layout-metrics-keylines-keylines-spacing-mobile-01bb_large_mdpi

هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري من جانب القائمة الجانبية.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري للقائمة الجانبية.
عرض القائمة الجانبية يساوي عرض الشاشة ناقص ارتفاع شريط الإجراءات (the action bar) ، أو في هذه الحالة 56 dp من الحافة اليمني للشاشة.
16 dp هوامش افقية علي الموبايل.

layout-metrics-keylines-keylines-spacing-mobile-01ba_large_mdpi

السياق
تظهر هذه الشاشة عرض القائمة الجانبية وكيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار والأيقونات للمين

44

التابلت (Tablet)

يتضمن قالب تخطيط التابلت 14 شاشة مختلفة ويبين كيفية تباعد الخطوط الرئيسية والتباعد عبر حواف الشاشة والعناصر. وفيما يلي مثال ل 14 شاشة للتحميل.
للتحميل من هنا

layout-metrics-keylines-keylines-spacing-tablet-01_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-01a_large_mdpi

layout-metrics-keylines-keylines-spacing-tablet-01b_large_mdpi

1. 24dp
2. 64dp
3. 8dp
4. 72dp

سطح المكتب (Desktop)

يضمن قالب تخطيط سطح المكتب (desktop) 4 شاشات مختلفين ولكل منها 4 أحجام اطارات مختلفين ويبين كيف تعمل الخطوط الرئيسية والتباعد عبر الإطارات المختلفة. وفيما يلي مثال لشاشة متاحة للتحميل . اعتمادا علي حجم الاطار ، والخطوط الرئيسية وتباعد البلوكات (blocks ) سترث قواعد الشبكة (grid) من كلا التابلت والموبايل.
للتحميل من هنا

layout-metrics-keylines-keylines-desktopa_large_mdpi

layout-metrics-keylines-keylines-desktopb_large_mdpi layout-metrics-keylines-keylines-desktopc_large_mdpi layout-metrics-keylines-keylines-desktopd_large_mdpi

44

نسب خطوط الأساس (Ratio Keylines)

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

layout-metrics-ratiokeylines-ratiokeylines-02_large_mdpi

مثال

layout-metrics-ratiokeylines-keylines_15_large_mdpi

عرض الشاشة

 

layout-metrics-ratiokeylines-keylines_18_large_mdpi

مثال

layout-metrics-ratiokeylines-keylines_19_large_mdpi

عرض العنصر

44

الخطوط الرئيسية الإضافية

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

ينطبق في الغالب علي سطح المكتب “desktop”، وغالبا للتابلت ، ونادرا للموبايل. عدد الزيادات ستختلف بناء علي حجم النافذة.
layout-metrics-incrementalkeylines-incrementalkeylines-01_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-02_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-03_large_mdpi

layout-metrics-incrementalkeylines-incrementalkeylines-04_large_mdpi

44

حجم لمس الهدف (Touch Target Size)

الحد الأدني لحجم لمس الهدف هو 48 dp. ضع ذلك في الاعتبار عند مباعدة الأيقونات (24 dp) أو الصور الرمزية (40 dp) في التخطيط (layout). يجب أن لا تتداخل الأهداف التي يمكن أن تلمسها (الأهداف الملموسة “targets Touch”).

layout-metrics-touchtarget-touch-target-02a_large_mdpi layout-metrics-touchtarget-touch-target-02b_large_mdpi

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

تعليق واحد

  1. مصمم
    16 أكتوبر,2014 في 6:31 م - Reply

    عمل جيد بارك الله فيكم

    صراحة الدروس في الموقع ريادية يقل مثيلها في مواقع عربية اخرى