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

المبادئ

تصميم الماتريال يستخدم أدوات أساسية تاتي من عالم تصميم الطباعة(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) سيتحركوا بشكل عام معا.

Layout-principles-papercraft-papercraft-01a_large_mdpi (1)

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

Layout-principles-papercraft-papercraft-03a_large_mdpi

 

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

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

layout-principles-papercraft-papercraft-03_MISSINGASSET_large_mdpi

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

papercraft-04_large_mdpi      papercraft-04_dont_large_mdpi

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

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

layout-principles-papercraft-papercraft-05a_large_mdpi

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

layout-principles-papercraft-papercraft-06a_large_mdpi

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

layout-principles-papercraft-papercraft-07a_large_mdpi

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

layout-principles-papercraft-papercraft-08a_large_mdpi

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

layout-principles-papercraft-papercraft-10a_large_mdpi

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

layout-principles-papercraft-papercraft-10a_large_mdpi (1)

الإجراءات العائمة (Floating Actions)

الإجراءات العائمة هي عبارة عن ورقة دائرية منفصلة عن شريط الأدوات.

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

layout-principles-papercraft-papercraft-11a_large_mdpi

والإجراء العائم يمكن أن يتراوح ما بين خط الالتماس(seam) اذا كان مرتبط بمحتوي كل من الورقتين لإنشاء هذه الصلة.

لا تعرض أبدا خط تماس مزخرف لمجرد توفير الإرساء لهذا الإجراء (action).

layout-principles-papercraft-papercraft-12a_large_mdpi

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

عند إنشاء المخططات للأجهزة المختلفة، تم الجمع بين استراتيجيات (fixed, sticky, fluid) للسلوك الشبكي (grid behavior).

وفيما يلي بعض الإرشادات البسيطة التي يجب اتباعها:

1. احترام الثوابت الإنسانية.

2. شاشة أكبر ≠ قدرة إدراكية أكبر.

3. طول السطر يجب أن يكون متوازن.

4. حساب لمسافات الزوايا.

5. السماح بمسافات بيضاء، ولا تقيد نفسك بأشرطة الأدوات الرأسية.

 

استخدام استراتيجيات علي مستويات متعددة من التسلسل الهرمي، مثل مستوي الشاشة ومستوي البطاقة.

قالب سطح المكتب يبين بعض الشاشات المستجيبة مع جميع أنظمة الشبكات (grid) المطبقة.

 


Desktop Template
[.ai] 100 MB

layout-principles-responsive-responsive-01_large_mdpi

الأبعاد

يتم قياس العمق ب dps، تماما مثل محور X- , Y-axis . ومع ذلك، فإنه من المفيد أن نفكر في أولوية العناصر داخل (Z-space) وليس من حيث الموضع المطلق والثابت (absolute, fixed positions).

 

نموذج مفاهيمي (A conceptual model)

في مستوي عال، يمكن اعتبار أن كل تطبيق يكون في مكان ومساحة مميزة أو حاوية (container).

هذا يعني ان قطع الورق في التطبيق الواحد لا تتداخل في (z-space) مع ورقة في تطبيق آخر.

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

الحاويات (Containers) تسمح بتطبيقات متعددة ليكون في طريقة العرض في نفس الوقت، علي سبيل المثال،في تابات المتصفح المتعددة.

layout-principles-dimensionality-dimensionality-01_large_mdpi

ضمن تطبيق محدد، معظم العناصر يتم وضعها نسبيا وفقا للخطوات الرئيسية والثانوية علي طول Z-axis .

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

layout-principles-dimensionality-dimensionality-02_large_mdpi

عناصر النظام ، مثل شريط الحالة ونظام الحوارات (dialogs) ، موجود في حيز نظام منفصل فوق وتحت جميع حاويات (containers) التطبيق.

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

layout-principles-dimensionality-dimensionality-03_large_mdpi

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

العمق ليس زخرفة

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

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

layout-principles-dimensionality-dimensionality-04_large_mdpi

الظلال (Shadows)

الظلال تتكون من طبقتين: الظل العلوي للعمق والظل السفلي للوضوح.

layout-principles-dimensionality-shadows-01_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi (1)

layout-principles-dimensionality-shadows-02_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi (2)

layout-principles-dimensionality-shadows-03_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi

layout-principles-dimensionality-shadows-04_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi

layout-principles-dimensionality-shadows-05_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi

layout-principles-dimensionality-shadows-06_large_mdpi

layout-principles-dimensionality-shadows-08_large_mdpi (1)

layout-principles-dimensionality-shadows-07_large_mdpi

 

المصدر

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

اضف رد