أساسيات التنسيق

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

الخلاصات

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

• يجب فعله: توفير تخطيط مرن للمستخدمين للتفاعل مع لوحة المفاتيح.

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

  

• استخدم الاحتواء لتجميع المحتوى ذي الصلة لتوجيه المستخدم من خلال المحتوى والإجراءات.

  

• توفير محاذاة متسقة بين المحتوى المتشابه وعناصر واجهة المستخدم.

  لا تفعل: عرقلة سهولة القراءة من خلال المسافات بشكل غير متناسق مثل العناصر، ما قد يجعل التصميمات تبدو عشوائية.

  مسموح به: إنشاء مسافات متسقة بين العناصر المتشابهة.

  

• لا تلتزم بالرسم الرأسي أو التخطيطي: فكر في نسب عرض إلى ارتفاع وفئات أحجام ودرجات دقة مختلفة قد يواجهها المستخدمون.

• لا تربك المستخدم بعدد كبير جدًا من الإجراءات لكل مشاهدة.

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

أجزاء من شاشة تطبيق Android النموذجية

تتألف معظم تطبيقات Android من مناطق يُشار إليها باسم أشرطة النظام ومنطقة التنقّل والنص.

أشرطة النظام

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

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

أضف الأشرطة كطبقة علوية. استخدِم android:navigationBarColor وandroid:statusBarColor لتطبيق ألوان على أشرطة النظام في مظهر تطبيقك.

منطقة التنقل

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

منطقة الجسم

تحتوي منطقة النص الأساسي على محتوى الشاشة. يتكون محتوى النص الأساسي من مجموعات ومعلمات تخطيط إضافية. يجب أن يستمر ضمن مناطق شريط التنقل والنظام.

عرِّف WindowCompat.setDecorFitsSystemWindows(window, false) للحصول على مساحات داخلية شاملة.

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

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

أنشِئ تدفقًا وإيقاعًا مرنًا من خلال بنية وطرق احتواء للمحتوى.

بنية القاعدة: استخدِم الهوامش والأعمدة لوضع حواجز للحماية المرئية

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

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

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

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

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

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

استخدام الاحتواء لتجميع العناصر بصريًا

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

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

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

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

مكانة المحتوى في السوق

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

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

التوسعة

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

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

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

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

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

محاذاة

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

لا تفعل: عرقلة سهولة القراءة من خلال المسافات بشكل غير متناسق مثل العناصر، ما قد يجعل التصميمات تبدو عشوائية.

مسموح به: إنشاء مسافات متسقة بين العناصر المتشابهة.

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

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

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

التخطيطات وأنماط التنقل

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

أزواج التنسيق والتنقّل

يتم استخدام شريط التنقل ودرج التنقل المشروط كأنماط تنقل أساسية لطرق عرض التخطيط الرئيسي ووجهات التنقل الأساسية.

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

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

إنّ علامات التبويب في المادة 3 وشريط التطبيق السفلي هي أنماط تنقّل ثانوية يمكنك استخدامها لإكمال التنقّل الأساسي أو الظهور في طرق عرض الأطفال.

.

إجراءات التصميم

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

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

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

إذا أردت اتخاذ أي إجراءات إضافية غير ضرورية بشكل متكرر أو متكرر، يمكنك إضافة تلك الإجراءات في القائمة الكاملة.

التخطيطات الأساسية

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

يشتمل إطار عمل Android على مكونات متخصصة تجعل عملية تنفيذ التنسيقات أمرًا بسيطًا وموثوقًا باستخدام Jetpack Compose أو واجهات برمجة تطبيقات Views.

تنسيق على شكل قائمة

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

يمكن أن يكون المحتوى ثابتًا أو ديناميكيًا.

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

يوفر ملف Figma الآن في Android أمثلة متعددة للتخطيط. يوضّح المثال التالي مجموعة محتوى أحادية البُعد.

استكشاف قوائم Material 3 لمزيد من إرشادات التصميم حول مكونات القائمة ومواصفاتها.

تنسيق الخلاصة

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

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

يمكنك تطبيق تنسيق خلاصة في Compose باستخدام القوائم البطيئة أو الشبكات البطيئة، أو في "طرق العرض" مع RecyclerView أو CardView.

تخطيط جزء الدعم

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

تعرَّف على إرشادات M3 لأوراق البيانات السفلية.

التخطيطات النسبية

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

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

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

الاطّلاع على مزيد من المعلومات حول أساسيات تنسيق Compose ومكوّناتها القابلة للإنشاء

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

التخطيط بملء الشاشة هو تخطيط شائع آخر، كما يستخدم في الوضع المجسم.

إذا كنت تستخدم "المشاهدات" بدلاً من "الإنشاء"، يمكنك استخدام ConstraintLayout لعرض طرق العرض وفقًا للعلاقات بين طرق العرض التابعة والتنسيق الرئيسي، ما يتيح إنشاء تنسيقات كبيرة ومعقّدة. تتيح لك ConstraintLayout إمكانية الإنشاء بالكامل من خلال السحب والإفلات بدلاً من تعديل ملف XML باستخدام محرِّر التنسيق. مزيد من المعلومات حول إنشاء واجهة مستخدم باستخدام "محرِّر التنسيق"

تكييف التخطيطات

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

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

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

• يمكنك تصميم الشاشات الرئيسية (توصيل المفاهيم الأساسية أو تطبيقك) بأحجام الفئات كنقاط توقف لتكون بمثابة إرشادات.
• أو صمم المحتوى ليتصرف بشكل متجاوب من خلال تدوين كيفية تقييد المحتوى أو توسيعه أو إعادة تدفقه.

للمزيد من المعلومات حول التنسيقات، يمكنك الاطّلاع على صفحة فهم تنسيق Material Design 3 (M3).

عناصر WebView

WebView هي طريقة عرض تعرض صفحات الويب داخل التطبيق. في معظم الحالات، ننصح باستخدام متصفح ويب قياسي، مثل Chrome، لتقديم المحتوى إلى المستخدم. وللتعرّف على مزيد من المعلومات عن متصفحات الويب، يُرجى قراءة دليل استدعاء متصفّح يتضمن نية.