القياسات وخطوط الأساس (Metrics and Keylines) شبكات (Grids) خط الأساس كل العناصر تحاذي 8 dp مربع إلي الشبكة (grid) الأساسية. الفئة تحاذي 4 dp إلي الشبكة الأساسية. الأيقونات في أشرطة الأدوات تحاذي 4 dp مربع إلي الشبكة الأساسية. وهذا ينطبق علي المحمول ، والتابلت، الكمبيوتر المكتبي.              [divider] [/divider]

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

 الموبايل

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

  [divider] 44 [/divider]   [caption id="attachment_5811" align="alignright" width="290"] التباعد العمودي
1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp[/caption] [caption id="attachment_5812" align="alignright" width="290"] هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري إلي اليمني.
المحتوي المرتبط بأيقونة أو صورة شخصية بمحاذاة 72 dp من الحافة اليسري, 16 dp هوامش افقية علي الموبايل.[/caption] [caption id="attachment_5813" align="alignright" width="290"] السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية وخطوط القائمة والعنوان الفرعي و الاجراء العائم “floating action” إلي اليسار وكيف أن الأيقونات تحاذي اليمين.[/caption] [divider] 44 [/divider] [caption id="attachment_5811" align="alignright" width="290"] التباعد العمودي
1. 24dp
2. 56dp
3. 8dp
4. 72dp[/caption] [caption id="attachment_5812" align="alignright" width="290"] هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية بمحاذاة 72 dp من الحافة اليسري.وخط أساس تم اضافة 32 dp من الحافة اليمني لمراعاة 56 dp الإجراء العائم الدائري. وهذا يسمح للأيقونات أدناه بمحاذاة الإجراء العائم(floating action). 16 dp هوامش افقية علي الموبايل.[/caption] [caption id="attachment_5813" align="alignright" width="290"] السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات إلي اليسار وكيف أن الأيقونات و الإجراء العائم “56 dp floating action” تحاذي اليمين.[/caption] [divider] 44 [/divider] [caption id="attachment_5811" align="alignright" width="290"] التباعد العمودي
1. 24dp
2. 56dp
3. 48dp
4. 8dp[/caption] [caption id="attachment_5812" align="alignright" width="290"] هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري.
16 dp هوامش افقية علي الموبايل.[/caption] [caption id="attachment_5813" align="alignright" width="290"] السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار وكيف أن الإجراء العائم “56 dp floating action” والأيقونات والنص تحاذي اليمين.[/caption] [divider] 44 [/divider] [caption id="attachment_5811" align="alignright" width="290"] التباعد العمودي
1. 48dp
2. 8dp
3. 56dp[/caption] [caption id="attachment_5812" align="alignright" width="290"] هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري من جانب القائمة الجانبية.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري للقائمة الجانبية.
عرض القائمة الجانبية يساوي عرض الشاشة ناقص ارتفاع شريط الإجراءات (the action bar) ، أو في هذه الحالة 56 dp من الحافة اليمني للشاشة.
16 dp هوامش افقية علي الموبايل.[/caption] [caption id="attachment_5813" align="alignright" width="290"] السياق
تظهر هذه الشاشة عرض القائمة الجانبية وكيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار والأيقونات للمين[/caption] [divider] 44 [/divider]

التابلت (Tablet)

يتضمن قالب تخطيط التابلت 14 شاشة مختلفة ويبين كيفية تباعد الخطوط الرئيسية والتباعد عبر حواف الشاشة والعناصر. وفيما يلي مثال ل 14 شاشة للتحميل. للتحميل من هنا [caption id="attachment_6016" align="alignnone" width="917"] 1. 24dp
2. 64dp
3. 8dp
4. 72dp[/caption]

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

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

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

ينطبق علي عرض شاشة الموبايل وعرض عناصر واجعة المستخدم في الموبايل والتابلت وسطح المكتب. [caption id="attachment_6037" align="alignleft" width="360"] مثال[/caption] [caption id="attachment_6036" align="alignleft" width="360"] عرض الشاشة[/caption]   [caption id="attachment_6040" align="alignleft" width="360"] مثال[/caption] [caption id="attachment_6039" align="alignleft" width="360"] عرض العنصر[/caption] [divider] 44 [/divider]

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

الخطوط الرئيسية(keyline ) الإضافية تحدد الزيادة، مثل ارتفاع شريط الإجراء (action bar)، ويستخدم مضاعقات لهذه الزيادة لتحديد حجم وموضع العناصر الأخري في التطبيق. ينطبق في الغالب علي سطح المكتب “desktop”، وغالبا للتابلت ، ونادرا للموبايل. عدد الزيادات ستختلف بناء علي حجم النافذة. [divider] 44 [/divider]

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

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