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

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

1. البنية الأساسية: شبكة التنسيق لتوجيه المحتوى

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

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

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

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

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

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

اختَر شبكة أعمدة للحصول على تصميمات متجاوبة ومتسقة وأحادية الاتجاه، أو عندما تحتاج إلى مرونة أكبر.

وبغض النظر عن النوع، يجب أن يتكيّف تخطيط الشبكة أيضًا مع مختلف الأحجام وعوامل الشكل.

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

يمكنك بدلاً من ذلك استخدام شبكة تصميم هرمية للحفاظ على ترتيب شاشة التفاصيل.

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

مزيد من المعلومات حول حاويات التنسيق، مثل أدوات التقسيم إلى صفحات وتنسيق التدفق

المخطوطة والبناء الحجري هما نوعان آخران من شبكات التخطيط.

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

2. تطبيق الاحتواء

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

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

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

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

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

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

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

حدِّد ما إذا كان المحتوى أحادي الأبعاد أو ثنائي الأبعاد. على سبيل المثال، يمكن أن يتدفق المحتوى أفقيًا أو عموديًا أو في كلا الاتجاهين.

كما هو موضّح في الشكل التالي، يمكن أن يستخدم تنسيق المصادقة تنسيق شبكة ثنائية الأبعاد.

يمكن أن تكون عناصر واجهة المستخدم مرنة وتتدفق في بُعد واحد، مثل الفلاتر أو علامات المحتوى. مزيد من المعلومات عن flexbox

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

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

المحاذاة

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

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

4. تغيير حجم المحتوى واقتصاصه

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

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

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

على سبيل المثال، تشغل صورة الجزء الرئيسي بعرض الشاشة بأكملها مساحة الشاشة بأكملها على الهاتف في الوضع الأفقي.

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

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

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

بالنسبة إلى إدخال النص، مثل المراسلة والمصادقة، يتم إرفاق الإدخال بلوحة المفاتيح ويتم التركيز عليه فقط.

المكوّنات في التنسيق

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

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