القياسات وخطوط الأساس (Metrics and Keylines)
شبكات (Grids) خط الأساس
كل العناصر تحاذي 8 dp مربع إلي الشبكة (grid) الأساسية. الفئة تحاذي 4 dp إلي الشبكة الأساسية. الأيقونات في أشرطة الأدوات تحاذي 4 dp مربع إلي الشبكة الأساسية. وهذا ينطبق علي المحمول ، والتابلت، الكمبيوتر المكتبي.
خطوط الأساس والتباعد (Keylines and Spacing)
الموبايل
يتضمن تخطيط الموبايل مجموعة متنوعة من الشاشات ومعلومات حول كيفية عمل خطوط الأساس والتباعد في مختلف اطراف الشاشة والعناصر. وفيما يلي مثال علي شاشات مضمنة للتحميل.
التباعد العمودي
1. 24dp
2. 56dp
3. 48dp
4. 72dp
هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp من الحواف اليسري إلي اليمني.
المحتوي المرتبط بأيقونة أو صورة شخصية بمحاذاة 72 dp من الحافة اليسري, 16 dp هوامش افقية علي الموبايل.
السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية والخطوط إلي اليسار وكيف أن 56 dp الإجراء العائم “floating action” والنص يحاذي علي اليمين.
التباعد العمودي
1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp
هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري إلي اليمني.
المحتوي المرتبط بأيقونة أو صورة شخصية بمحاذاة 72 dp من الحافة اليسري, 16 dp هوامش افقية علي الموبايل.
السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية وخطوط القائمة والعنوان الفرعي و الاجراء العائم “floating action” إلي اليسار وكيف أن الأيقونات تحاذي اليمين.
التباعد العمودي
1. 24dp
2. 56dp
3. 8dp
4. 72dp
هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية بمحاذاة 72 dp من الحافة اليسري.وخط أساس تم اضافة 32 dp من الحافة اليمني لمراعاة 56 dp الإجراء العائم الدائري. وهذا يسمح للأيقونات أدناه بمحاذاة الإجراء العائم(floating action). 16 dp هوامش افقية علي الموبايل.
السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات إلي اليسار وكيف أن الأيقونات و الإجراء العائم “56 dp floating action” تحاذي اليمين.
التباعد العمودي
1. 24dp
2. 56dp
3. 48dp
4. 8dp
هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري.
16 dp هوامش افقية علي الموبايل.
السياق
تظهر هذه الشاشة كيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار وكيف أن الإجراء العائم “56 dp floating action” والأيقونات والنص تحاذي اليمين.
التباعد العمودي
1. 48dp
2. 8dp
3. 56dp
هوامش الخطوط الأساسية الرأسية والأفقية
الخطوط الأساسية الرأسية عند 16 dp للأيقونات من الحواف اليمني واليسري من جانب القائمة الجانبية.
المحتوي المرتبط بأيقونة أو صورة رمزية يحاذي 72 dp من الحافة اليسري للقائمة الجانبية.
عرض القائمة الجانبية يساوي عرض الشاشة ناقص ارتفاع شريط الإجراءات (the action bar) ، أو في هذه الحالة 56 dp من الحافة اليمني للشاشة.
16 dp هوامش افقية علي الموبايل.
السياق
تظهر هذه الشاشة عرض القائمة الجانبية وكيفية محاذاة الأيقونات والصور الرمزية والنص إلي اليسار والأيقونات للمين
التابلت (Tablet)
يتضمن قالب تخطيط التابلت 14 شاشة مختلفة ويبين كيفية تباعد الخطوط الرئيسية والتباعد عبر حواف الشاشة والعناصر. وفيما يلي مثال ل 14 شاشة للتحميل.
للتحميل من هنا
1. 24dp
2. 64dp
3. 8dp
4. 72dp
سطح المكتب (Desktop)
يضمن قالب تخطيط سطح المكتب (desktop) 4 شاشات مختلفين ولكل منها 4 أحجام اطارات مختلفين ويبين كيف تعمل الخطوط الرئيسية والتباعد عبر الإطارات المختلفة. وفيما يلي مثال لشاشة متاحة للتحميل . اعتمادا علي حجم الاطار ، والخطوط الرئيسية وتباعد البلوكات (blocks ) سترث قواعد الشبكة (grid) من كلا التابلت والموبايل.
للتحميل من هنا
نسب خطوط الأساس (Ratio Keylines)
ينطبق علي عرض شاشة الموبايل وعرض عناصر واجعة المستخدم في الموبايل والتابلت وسطح المكتب.
مثال
عرض الشاشة
مثال
عرض العنصر
الخطوط الرئيسية الإضافية
الخطوط الرئيسية(keyline ) الإضافية تحدد الزيادة، مثل ارتفاع شريط الإجراء (action bar)، ويستخدم مضاعقات لهذه الزيادة لتحديد حجم وموضع العناصر الأخري في التطبيق.
ينطبق في الغالب علي سطح المكتب “desktop”، وغالبا للتابلت ، ونادرا للموبايل. عدد الزيادات ستختلف بناء علي حجم النافذة.
حجم لمس الهدف (Touch Target Size)
الحد الأدني لحجم لمس الهدف هو 48 dp. ضع ذلك في الاعتبار عند مباعدة الأيقونات (24 dp) أو الصور الرمزية (40 dp) في التخطيط (layout). يجب أن لا تتداخل الأهداف التي يمكن أن تلمسها (الأهداف الملموسة “targets Touch”).
مصمم
عمل جيد بارك الله فيكم
صراحة الدروس في الموقع ريادية يقل مثيلها في مواقع عربية اخرى