تركيب المحتوى وبنيته

يمكنك إنشاء تدفّق وإيقاع مرنَين باستخدام طرق التنظيم والاحتواء الخاصة بمحتواك.

‫1. البنية الأساسية

لبدء إنشاء بنية متينة مع ضوابط متّسقة، أضِف هوامش وأعمدة إلى تخطيطاتك.

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

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

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

استخدِم شبكة أعمدة لمحاذاة المحتوى مع شبكة أساسية مع الحفاظ على حجم مرن. يمكن أن تستوعب شبكة الأعمدة أشكالاً مختلفة من خلال تغيير أحجام الأعمدة وعددها حسب ما يتطلبه حجم الشاشة في نقاط معيّنة، مع السماح أيضًا بتغيير حجم المحتوى. تجنَّب أن تكون دقيقًا جدًا في شبكة الأعمدة، فهذا هو الغرض من الشبكة الأساسية: توفير وحدات تباعد متسقة.

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

‫2- تطبيق الاحتواء

استخدام الاحتواء لتجميع العناصر بشكل مرئي:

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

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

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

يوضّح الشكل التالي مثالاً على استخدام الاحتواء الضمني لاحتواء العنوان والنسخة الأساسية. يتم استخدام شبكة الأعمدة لمحاذاة العناصر وإنشاء المجموعات. تكون اللحظات البارزة مضمّنة بشكل صريح في البطاقات. استخدام الرموز والتسلسل الهرمي للخطوط لتحقيق فصل مرئي أكبر

3- موضع المحتوى

يتيح نظام التشغيل Android عدة طرق للتعامل مع عناصر المحتوى في الحاويات الخاصة بها، ما يساعد في تحديد موضعها بشكل مناسب، بما في ذلك الجاذبية والمسافة بين العناصر وتغيير الحجم.

الجاذبية هي معيار لوضع عنصر داخل حاوية أكبر حجمًا في بعض حالات الاستخدام. يوضّح الشكل التالي أمثلة على وضع الكائنات في البداية والوسط (1)، وفي الأعلى والوسط أفقيًا (2)، وفي الأسفل إلى اليمين (3)، وفي النهاية وإلى اليسار (1).

‫4- تغيير حجم المحتوى

يُعدّ تغيير الحجم أمرًا بالغ الأهمية لاستيعاب المحتوى الديناميكي واتجاه الجهاز وأحجام الشاشات. يمكن أن تظل العناصر ثابتة أو يتم تغيير حجمها.

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

قد يظهر المحتوى غير المدون بشكل مختلف عمّا تتوقعه أو تريده.

المحتوى المثبَّت

تتضمّن العديد من العناصر تفاعلات وتمريرًا ومواضعًا مدمجة مع فتحات أو هياكل. يمكن تعديل بعض العناصر لتبقى ثابتة بدلاً من التفاعل مع التمرير، مثل أزرار الإجراءات العائمة (FAB) التي تتضمّن إجراءات مهمة.

محاذاة

استخدِم AlignmentLine لإنشاء خطوط محاذاة مخصّصة يمكن أن تستخدمها التصاميم الرئيسية لمحاذاة العناصر التابعة لها وتحديد مواضعها.

تخطيط المكوّن

توفّر مكوّنات Material 3 إعداداتها وحالاتها الخاصة للتفاعل والمحتوى.

توفّر Compose تنسيقات ملائمة لدمج Material Components في أنماط الشاشات الشائعة. توفّر العناصر القابلة للإنشاء، مثل Scaffold، مساحات للمكوّنات المختلفة وعناصر الشاشة الأخرى. مزيد من المعلومات حول مكوّنات Material والتصميم