فواصل

المبادئ تصميم الماتريال يستخدم أدوات أساسية تاتي من عالم تصميم الطباعة(print design)، مثل شبكات خط الأساس(baseline grids) ومجموعة شائعة من الشبكات الهيكيلة(structural grids) التي تعمل خلال صفحات مختلفة. التخطيط تم تصميمه ليتمدد (scale) عبر أحجام الشاشات المختلفة وسيساعد علي تطوير وتنمية واجهة المستخدم وفي النهاية المساعدة في إنشاء تطبيقات قابلة للتطوير. المبادئ التوجيهية للتخطيط تشجع التطبيقات أيضا علي أن يكون مظهرها متناسق ويشعر باستخدام نفس العناصر البصرية، الشبكات الهيكيلة، وقواعد تباعد (spacing rules) عامة عبر المنصات المختلفة وأحجام الشاشات. التناسق الهيكلي والبصري ينشئ بيئة للمستخدم سهل التعرف عليها في جميع المنتجات. مما يسهل استخدامها من قبل جميع المستخدمين مع توفير مستوي عال من الألفة والراحة. قبل الخوض في تفاصيل التخطيط، فكر مرة أخري في ماهية تصميم الماتريال(material): التصميم علي أساس صفات ونوعيات الورق(qualities of paper). من المهم فهم قواعد كيفية تصرف وصياغة الورقة .

حرفة الورق (Paper Craft)

في تصميم الماتريال، كل بكسل ترسم بتطبيق موجود علي صفحة من الورق (sheet of paper). ورقة تكون لون خلفيتها فلات (flat) ويمكن تحجيمها لخدمة أغراض متنوعة. التخطيط النموذجي يتألف من أوراق متعددة. النظام قد يرسم بكسل للعناصر مثل الحالة(status) أو نظام الأشرطة (system bars)، والذي لا يبقي علي الورق. من المفيد أن نفكر في مثل عناصر النظام هذه كما يتم طباعتها علي الجانب الخلفي من زجاج شاشة العرض ، وعلي سطح منفصل عن أسفل محتوي التطبيق.

ترتيب وتنظيم الورق (Arranging Paper)

الطبقات (Seams) يتم إنشائها عندما يتقاسم صفحتين من الورق كامل طول (full length) الجانب المشترك.صفحتين من الورق متصلين معا بخط (seam) سيتحركوا بشكل عام معا.

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

[divider] [/divider]

أشرطة أدوات الورق (Paper Toolbars)

شريط الأدوات عبارة عن شريط من الورق يركز علي عرض الإجراءات (Actions). هذه الإجراءات عادة ما تتجمع علي الحواف اليمني واليسري من شريط الأدوات. الإجراءات المتعلقة بالملاحة “navigation” ( قائمة الدرج “drawer menu” ، سهم لأعلي) يظهر علي اليسار ، بينما الإجراءات التي تنطبق علي السياق الحالي هي في اليمين.

[divider] [/divider] الإجراءات في اليسار واليمين في شريط الأدوات لا تنقسم أبدا بواسطة صفحة ورق أخري. ومع ذلك، شريط الأدوات يمكن أن يقيد عرضه إلي أقل من كامل طول ورقته.

افعل لا تفعل تقييد العرض إلي أقل من كامل طول ورقته. لا تسمح لصفحة الورقة أن تقسم بواسطة صفحة ورق أخري. [divider] [/divider] أشرطة الأدوات غالبا ما تتشكل فوق صفحة أخري من الورق التي تعرض المحتوي إجراءات شريط الأدوات يرتبط به. حيث أن تمرير الورقة تحت شريط الأدوات ، شريط الأدوات يقص الورق في نقطة الدخول ، ويمنعه من المرور للجانب المعاكس.

[divider] [/divider] شريط الأدوات يمكن أيضا أن يعرض في البداية كأنه ملتصق (seamed) مع الورقة الثانية ، ولكن بعد ذلك يرفع إلي خطوة التشكيل. ويسمي هذا المتغير قصاصة ولقطة الشلال (waterfall).

[divider] [/divider] بالتبادل ، يمكن الحفاظ علي التماس والتصاق شريط الأدوات لها، ودفع الشاشة كأنهم ورقتين يتحركان معا.

[divider] [/divider] أخيرا، يمكن أن تغطي الورقة الثانية شريط الأدوات وهو يتحرك.

[divider] [/divider] شريط الأدوات لديه ارتفاع قياسي (standard )، ولكن يمكن أن يكون أطول . عندما يكون أطولن الإجراءات يمكن أن تثبت اما في أعلي أو في أسفل شريط الأدوات.

[divider] [/divider] شريط الأدوات يمكن أن يتغير ارتفاعه ديناميكيا بمجرد أن يصبح مثبت(pinned). عند تغيير الحجم (resizing).

[divider] [/divider] الإجراءات العائمة (Floating Actions) الإجراءات العائمة هي عبارة عن ورقة دائرية منفصلة عن شريط الأدوات. يمثل الإجراء العائم (floating action) إجرء واحد يعزز سياقها.والإجراء العائم يمكن أن يتراوح خطوة اذا ما كان يتعلق بمضمون الورقة المنشأة لهذه الخطوة.

[divider] [/divider] والإجراء العائم يمكن أن يتراوح ما بين خط الالتماس(seam) اذا كان مرتبط بمحتوي كل من الورقتين لإنشاء هذه الصلة. لا تعرض أبدا خط تماس مزخرف لمجرد توفير الإرساء لهذا الإجراء (action).

مبادئ الاستجابة

عند إنشاء المخططات للأجهزة المختلفة، تم الجمع بين استراتيجيات (fixed, sticky, fluid) للسلوك الشبكي (grid behavior). وفيما يلي بعض الإرشادات البسيطة التي يجب اتباعها: 1. احترام الثوابت الإنسانية. 2. شاشة أكبر ≠ قدرة إدراكية أكبر. 3. طول السطر يجب أن يكون متوازن. 4. حساب لمسافات الزوايا. 5. السماح بمسافات بيضاء، ولا تقيد نفسك بأشرطة الأدوات الرأسية. استخدام استراتيجيات علي مستويات متعددة من التسلسل الهرمي، مثل مستوي الشاشة ومستوي البطاقة. قالب سطح المكتب يبين بعض الشاشات المستجيبة مع جميع أنظمة الشبكات (grid) المطبقة.

Desktop Template

[.ai] 100 MB

الأبعاد

يتم قياس العمق ب dps، تماما مثل محور X- , Y-axis . ومع ذلك، فإنه من المفيد أن نفكر في أولوية العناصر داخل (Z-space) وليس من حيث الموضع المطلق والثابت (absolute, fixed positions). نموذج مفاهيمي (A conceptual model) في مستوي عال، يمكن اعتبار أن كل تطبيق يكون في مكان ومساحة مميزة أو حاوية (container). هذا يعني ان قطع الورق في التطبيق الواحد لا تتداخل في (z-space) مع ورقة في تطبيق آخر. وهذا يعني أيضا أن الإجراءات والبنود تكون معزولة عن التطبيق: علي سبيل المثال، التمرير لإغلاق عنصر القائمة في تطبيق واحد لن يؤدي لإجتياز عنصر القائمة مساحة تطبيق غير مرتبط به. الحاويات (Containers) تسمح بتطبيقات متعددة ليكون في طريقة العرض في نفس الوقت، علي سبيل المثال،في تابات المتصفح المتعددة.

ضمن تطبيق محدد، معظم العناصر يتم وضعها نسبيا وفقا للخطوات الرئيسية والثانوية علي طول Z-axis . عناصر أخري لها أولوية ثابتة(fixed) داخل z-space للتطبيق ، بمعني أنها تظهر دائما أعلي أو أقل من عناصر أخري، بغض النظر عن الموضع النسبي لتلك العناصر علي طول المحور z-axis. علي سبيل المثال،أزرار الإجراءات العائمة تظهر دائما فوق المحتوي وأشرطة الأدوات، بغض النظر عن كم من صفحات الورق يمكن أن تكون قيد الاستخدام بواسطة التطبيق.

[divider] [/divider] عناصر النظام ، مثل شريط الحالة ونظام الحوارات (dialogs) ، موجود في حيز نظام منفصل فوق وتحت جميع حاويات (containers) التطبيق. اعتمادا علي السياق، قد لا تكون عناصر النظام تعرض في التطبيق ، ولكن نظام المساحة يحدد الأولوية النسبية لعناصر النظام عند تواجدهم. وهذا يضمن، علي سبيل المثال، أن نظام مربع الحوار يظهر دائما فوق التطبيق الحالي.

[divider] [/divider]

اعتبارات التخطيط

العمق ليس زخرفة فكر فيما يتعلق بأولوية العنصر داخل z-space ، وليس موضعه المطلق (absolute position). العمق داخل التطبيق يجب أن يوصل التسلسل الهرمي وأهميته، تساعد علي تركيز انتباه المستخدمين لهذه المهمة في متناول اليد.