يحدد التخطيط البنية المرئية للمستخدم ليتفاعل مع تطبيقك، كما هو الحال في نشاط ما. يوفر Android مجموعة من المكتبات ونقاط البداية الأساسية وأساليب لعرض المحتوى وتحديد موضعه.
الخلاصات
يتم الالتزام بالمناطق الآمنة للأجهزة، والتي تتضمن أجزاء من واجهة المستخدم مثل خطوط الشاشة، والأجزاء الداخلية، والشاشات، ولوحات المفاتيح البرمجية، وأشرطة النظام.
يجب: توفير تخطيط مرن للمستخدمين للتفاعل مع لوحة المفاتيح.
الفيديو 1: توفير تنسيق مرن للمستخدمين للتفاعل
احتفظ بالتفاعلات الأساسية، مثل التنقل الأساسي، في منطقة شاشة يمكن الوصول إليها.
الشكل 1: توفّر أزرار الإجراءات العائمة نقطة تفاعل بارزة ويمكن الوصول إليها استخدم الاحتواء لتجميع المحتوى ذي الصلة لتوجيه المستخدم خلال المحتوى والإجراءات.
الشكل 2: البطاقات التي تستخدم الاحتواء الصريح لتجميع المحتوى الذي يتضمن إجراءات ذات صلة توفير محاذاة متسقة بين المحتوى المتشابه وعناصر واجهة المستخدم.
لا تفعل: عرقلة سهولة القراءة من خلال وضع مسافات متباينة مثل العناصر، ما قد يجعل التصميمات تبدو عشوائية.
افعل: أنشئ مسافات متسقة بين العناصر المشابهة.
الشكل 3: عدم إيقاف سهولة قراءة النص لا تلتزم بالتخطيط العمودي أو التخطيط المثالي: فكر في نسب عرض إلى ارتفاع مختلفة، وفئات أحجام، ودرجات دقة مختلفة قد يواجهها المستخدمون.
لا تربك المستخدم بالكثير من الإجراءات لكل مشاهدة.
عند إنشاء تخطيطات مخصصة، لاحظ كيف يجب أن يكون المحتوى داخل التخطيط باستخدام شروط المحاذاة أو القيود أو الجاذبية. ضمِّن كيفية استجابة الصور لحاويتها للعرض بشكل صحيح.
أجزاء من شاشة تطبيق Android النموذجية
تتألف معظم تطبيقات Android من مناطق يُشار إليها باسم أشرطة النظام ومنطقة التنقل والنص.
أشرطة النظام
يعرض شريط الحالة وشريط التنقل، المعروفان معًا باسم أشرطة النظام، معلومات مهمة، مثل مستوى البطارية والوقت وتنبيهات الإشعارات، كما يوفران تفاعلاً مباشرًا مع الجهاز من أي مكان. تعرَّف على مزيد من المعلومات حول أشرطة النظام.
أشرطة النظام هي جزء لا يتجزأ من واجهة الجهاز. قم بإضافتها كطبقة علوية من تصميماتك لضمان احتسابها داخل تخطيط الشاشة. وإلا فقد يفترض المستخدمون عن طريق الخطأ أن الغرض من ذلك هو إخفاءها، وتفوّت نمطها، وبالتالي يمكن أن يؤدي ذلك إلى إيقاف المسافات.
أضف الأشرطة كطبقة علوية. يمكنك استخدام android:navigationBarColor وandroid:statusBarColor لتطبيق ألوان على أشرطة النظام في مظهر التطبيق.
منطقة التنقل
يمثل التنقل العناصر المختلفة التي تسمح للمستخدم بالتنقل داخل تطبيقك أو الوصول إلى الإجراءات المهمة أو عبر نظام Android الأساسي.
منطقة الجسم
تحتوي منطقة النص على محتوى الشاشة. يتكون محتوى النص من مجموعات ومعلمات تنسيق إضافية. يجب أن يستمر ضمن مناطق التنقل وشريط النظام.
عرِّف WindowCompat.setDecorFitsSystemWindows(window, false) للإدخالات
الشاملة بين الحافة.
لتحديد أنماط التكوين والتنقل المناسبة لتخطيطك، حاول فهم كيفية تفاعل المستخدمين مع المحتوى الخاص بك وكيفية تنقلهم في بنية معلومات التطبيق. يمكن أن يوجه هذا الفهم تصميمك نحو أن يكون أكثر تركيزًا على المستخدم من خلال إنشاء واجهة مستخدم يمكن للمستخدمين العمل عليها.
تكوين المحتوى وبنيته
أنشِئ تدفقًا وتناغمًا مرنًا من خلال بنية وطرق احتواء للمحتوى.
البنية الأساسية: استخدام الهوامش والأعمدة للحواجز البصرية
لبدء إنشاء هيكل متين بحواجز حماية متسقة، أضف هوامش وأعمدة إلى تخطيطاتك.
توفّر الهوامش مسافات على الحافتين اليسرى واليمنى للشاشة والمحتوى. تبلغ قيمة الهامش القياسي 16 وحدة بكسل مستقلة الكثافة، لكن يجب أن تتكيف الهوامش لتتوافق مع الشاشات الأكبر حجمًا. يجب أن يبقى محتوى نص تطبيقك وإجراءاته ضمن هذه الهوامش ومتوافقة معها.
يمكنك أيضًا التأكّد من المناطق الآمنة أو الإضافات الداخلية في هذه الخطوة. تمنع النوافذ الداخلية في شريط النظام الإجراءات المهمة من الوقوع تحت أشرطة النظام. راجع رسم المحتوى خلف أشرطة النظام للحصول على التفاصيل.
استخدِم الأعمدة لإنشاء بنية شبكة مرنة للمحاذاة بشكل متناسق، ولتوفير تعريف عمودي للتخطيط عن طريق تقسيم المحتوى داخل منطقة النص الأساسي. يظهر المحتوى في مناطق الشاشة التي تحتوي على أعمدة. تضفي هذه الأعمدة هيكلاً على التخطيط الخاص بك، مما يوفر بنية ملائمة لترتيب العناصر.
استخدِم شبكة أعمدة لمحاذاة المحتوى مع شبكة أساسية مع الحفاظ على مرونة تحديد الحجم. يمكن لشبكة الأعمدة استيعاب عوامل الشكل المختلفة من خلال تغيير أحجام الأعمدة وعدد الأعمدة حسب الحاجة حسب حجم الشاشة في نقاط معينة مع السماح للمحتوى أيضًا بتوسيع نطاقه. تجنب أن تكون دقيقًا جدًا مع شبكة الأعمدة، فهذا هو الغرض من الشبكة الأساسية: توفير وحدات تباعد متسقة.
كن حذرًا من إنشاء شبكة من الصفوف المصاحبة لأنها قد تقيد توسيع نطاق المحتوى الأفقي عبر الاتجاهات وعوامل الشكل، وعادةً سيوفّر إنشاء قواعد المساحة المتروكة الاتساق المرئي المطلوب.
استخدام الاحتواء لتجميع العناصر بصريًا
يشير الاحتواء إلى استخدام المساحة البيضاء والعناصر المرئية معًا لإنشاء تجميع مرئي. الحاوية هي شكل يمثل منطقة مغلقة. في تخطيط واحد، يمكنك تجميع العناصر التي تشارك محتوى أو وظيفة متشابهة وفصلها عن العناصر الأخرى باستخدام المساحة المفتوحة وأسلوب الخط والفواصل.
يمكنك تجميع العناصر المتشابهة مع مساحة بيضاء أو قسم مرئي للمساعدة في توجيه المستخدم خلال المحتوى.
يستخدم الاحتواء الضمني المساحة البيضاء لتجميع المحتوى بصريًا لإنشاء حدود الحاوية بينما يستخدم الاحتواء الصريح كائنات مثل خطوط التقسيم والبطاقات لتجميع المحتوى معًا.
يوضح الشكل التالي مثالاً لاستخدام الاحتواء الضمني لاحتواء العنوان والنسخة الأساسية. تُستخدم شبكة الأعمدة لمحاذاة المجموعات وإنشائها. ويتم تضمين أهم التفاصيل بوضوح في البطاقات. استخدام الأيقنة والتسلسل الهرمي النوعي لفصل مرئي أكبر.
مكانة المحتوى في السوق
يوفر Android طرقًا متعددة للتعامل مع عناصر المحتوى في الحاويات المعنية، ما يساعد في تحديد موضعها بشكل مناسب، بما في ذلك الجاذبية، والتباعد، والتحجيم.
الجاذبية هي معيار لوضع كائن داخل حاوية من المحتمل أن تكون أكبر لحالات استخدام معيّنة. يوضِّح الشكل التالي أمثلة على تحديد موضع العناصر في البداية والوسط (1)، وفي الأعلى والوسط الأفقي (2)، وأسفل اليسار (3)، والنهاية واليمين (1).
التوسعة
يُعد تغيير الحجم أمرًا بالغ الأهمية لتلائم المحتوى الديناميكي واتجاه الجهاز وأحجام الشاشة. يمكن أن تظل العناصر ثابتة أو يمكن تغيير حجمها.
من المهم ملاحظة كيفية عرض الصور ضمن حاوياتها مع ضبط التحجيم والموضع لضمان ظهورها بالشكل الذي تريد أن تظهر به على الرغم من سياق الجهاز، وإلا فقد يظهر التركيز الأساسي للصورة بشكل غير واضح أو قد تكون الصور صغيرة جدًا أو كبيرة جدًا بالنسبة إلى التنسيق، أو إلى تأثيرات أخرى غير مرغوب فيها.
يمكن أن يظهر المحتوى الذي لم يتم تدوينه بشكل مختلف عمّا تتوقّعه أو تريده.
المحتوى المثبّت
تم تضمين العديد من العناصر في التفاعلات والتمرير وتحديد الموضع باستخدام الخانات أو السقالات. يمكن تعديل بعض العناصر لتظل ثابتة بدلاً من التفاعل مع عملية الانتقال، على سبيل المثال أزرار الإجراءات العائمة (FAB) التي تتضمن إجراءات مهمة.
محاذاة
يمكنك استخدام AlignmentLine لإنشاء خطوط محاذاة مخصّصة يمكن استخدامها من خلال التنسيقات الرئيسية
لمحاذاة عناصر العناصر الثانوية وتحديد موضعها.
لا تفعل: عرقلة سهولة القراءة من خلال المسافات بشكل غير متناسق مثل العناصر، ما قد يجعل التصميمات تبدو عشوائية.
افعل: أنشئ مسافات متسقة بين العناصر المشابهة.
تخطيط المكون
توفّر مكونات المادة 3 إعداداتها وحالاتها الخاصة للتفاعل والمحتوى.
يوفر Compose تخطيطات ملائمة لدمج المكونات المادية في أنماط الشاشة الشائعة. توفر المواد، مثل Scaffold، فتحات لمكونات مختلفة وعناصر شاشة أخرى. اقرأ المزيد حول مكونات المواد والتنسيق.
التخطيطات وأنماط التنقل
إذا كان تطبيقك يحتوي على وجهات متعددة يمكن للمستخدمين اجتيازها، نقترح استخدام أزواج التصميم والتنقّل التي يشيع استخدامها في التطبيقات الأخرى. ونظرًا لأن العديد من المستخدمين يمتلكون بالفعل نماذج عقلية لهذه الأزواج، سيكون تطبيقك أكثر سهولة بالنسبة لهم.
اقترانات التخطيط والتنقّل
يتم استخدام شريط التنقل ودرج التنقل المشروط كأنماط تنقل أساسية لطرق عرض التنسيق الرئيسي ووجهات التنقل الأساسية.
يمكن أن يحتوي شريط التنقل على ثلاث إلى خمس وجهات تنقل عبر نفس مستوى التسلسل الهرمي. يُترجم هذا المكون إلى شريط التنقل للشاشات الكبيرة.
على الرغم من أن لائحة التنقل يمكن أن تحتوي على أكثر من خمس وجهات تنقل، إلا أن النمط ليس مثاليًا مثل شريط التنقل بسبب الحاجة إلى الوصول إلى الشريط العلوي في الأحجام المضغوطة.
إنّ علامات التبويب الخاصة بمادة 3 وشريط التطبيق السفلي هما نمطان ثانويان يمكنك استخدامهما للتنقّل في المحتوى الأساسي أو يكمّلان المحتوى في طرق العرض الخاصة بالأطفال.
إجراءات التصميم
توفير عناصر تحكم لتمكين المستخدمين من إنجاز الإجراءات. تتضمن الأنماط الشائعة إجراءات الشريط العلوي وزر الإجراءات العائم (FAB) والقوائم.
بالنسبة إلى الإجراءات الأكثر أهمية، يوفّر زر الإجراء الرئيسي زرًا كبيرًا وبشكل بارز للمستخدم. قم بتقديم إجراء واحد فقط في كل مرة
على هذا المستوى. يمكن أن يظهر FAB بمقاسات متعددة وشكل موسّع يتضمّن تصنيفًا. يمكنك استخدام Scaffold لتثبيت زر الإجراء الرئيسي (FAB) والتأكّد من أنّه يظهر دائمًا
حتى عند الانتقال للأسفل.
يمكنك وضع إجراءات ثانوية داخل الشريط العلوي، أو داخل الصفحة إذا تم تجميعها بالقرب من المحتوى ذي الصلة.
بالنسبة إلى أي إجراءات إضافية غير مطلوبة بشكل فوري أو غير مطلوب بشكل متكرر، أضِف تلك الإجراءات في قائمة كاملة.
التخطيطات الأساسية
استخدِم التنسيقات الأساسية كنقطة بداية وتركيبات جاهزة للاستخدام تساعد التنسيقات على التكيف مع حالات الاستخدام الشائعة وأحجام الشاشات. هذه التنسيقات جمالية وعملية، وهي مشتقة من إرشادات المادة 3.
يتضمن إطار عمل Android مكونات متخصصة تجعل تنفيذ التنسيقات أمرًا بسيطًا وموثوقًا باستخدام واجهات برمجة التطبيقات Jetpack Compose أو Views.
تخطيط على شكل قائمة
يتيح تخطيط القائمة التفصيلية للمستخدمين استكشاف قوائم العناصر التي تحتوي على معلومات وصفية أو توضيحية أو أخرى تكميلية - تفاصيل العنصر. بالنسبة إلى أحجام الشاشات الصغيرة، لا يظهر سوى عرض القائمة أو التفاصيل. من خلال عرض مجموعة من المحتوى في تخطيط مستند إلى صف، تشكل القوائم الشكل الأكثر شيوعًا من التخطيطات للتطبيقات. تكون تفاصيل القائمة مثالية لتطبيقات المراسلة أو مدراء جهات الاتصال أو متصفّحات الملفات أو أي تطبيق يمكن فيه تنظيم المحتوى على شكل قائمة بالعناصر التي تكشف عن معلومات إضافية.
يمكن أن يكون المحتوى ثابتًا أو ديناميكيًا.
- المحتوى الديناميكي هو المحتوى الذي يعرضه تطبيقك لحظيًا، وهو مثالي لعرض محتوى من إنشاء المستخدمين أو يعكس ما يفضّله أو إجراءاته. على سبيل المثال، تخيل أن تطبيق الصور يحتوي على قائمة قابلة للتمرير من الصور التي ينشئها المستخدمون، والتي تكون فريدة من نوعها لكل مستخدم وتتغير مع تحميل المستخدم لمزيد من الصور. تعرض هذه الصور محتوى ديناميكيًا.
- ويمثّل المحتوى الثابت محتوى غير قابل للتعديل ولا يمكن تعديله إلا من خلال إجراء تغييرات على رمز تطبيقك مباشرةً. أمثلة المحتوى الثابت هي الصور والنصوص التي قد يراها كل مستخدم.
يوفر ملف Figma الآن في Android أمثلة متعددة للتخطيط. يعرض المثال التالي مجموعة محتوى أحادية البُعد.
يمكنك استكشاف قوائم Material 3 للحصول على إرشادات حول التصميم حول مكوّنات القائمة ومواصفاتها.
تخطيط الخلاصة
يرتب تخطيط الخلاصة عناصر المحتوى المكافئة في شبكة قابلة للتهيئة لعرض قدر كبير من المحتوى بسرعة ومناسبة. (راجِع إرشادات المادة 3 لاستخدام البطاقات في مجموعة.) يمكن أن تكون الخلاصات عملية على شكل قائمة أو شبكة على الشاشات المدمجة، وعادةً ما تكون على شكل بطاقات أو مربّعات. يمكن أن يكون المحتوى ديناميكيًا، أي "يتم تغذيه" من مصدر خارجي ديناميكي مثل واجهة برمجة التطبيقات.
يتكون تخطيط الشبكة من صفوف وأعمدة تتكون من مبادئ الاحتواء الضمني أو الصريح. (يمكنك الاطّلاع على الاحتواء على هذه الصفحة لمزيد من المعلومات). يمكن تطبيق تخطيط الشبكة بشكل أكثر صرامة أو تدريجه لتغيير الصفوف والأعمدة. يجب أن يحتوي كلاهما على تطبيق متسق من التباعد والمنطق لتجنب إرباك المستخدمين. استكشِف إرشادات المادة 3 المتعلقة بتصميم الخلاصات.
يمكنك تنفيذ تنسيق الخلاصة في ميزة "إنشاء" باستخدام القوائم البطيئة أو الشبكات الكسولة
أو في طرق العرض باستخدام RecyclerView أو CardView.
تخطيط اللوحة الداعمة
قد تتطلب طريقة العرض على الأجهزة الجوّالة محتوى أو عناصر تحكُّم داعمة. عادةً ما تكون في شكل أوراق أو مربعات حوار، ويمكنها مساعدة العرض الأساسي في الحفاظ على تركيزه وغير مزدحم. اطّلع على إرشادات M3 لاستخدام التنسيق الأساسي للجزء الداعم.
تعرَّف على إرشادات M3 لبطاقات البيانات السفلية.
التنسيقات النسبية
قد تظهر الإدخالات أو المحتوى أو الإجراءات الأخرى بالنسبة إلى بعضها البعض أو مشروطة بحاوية رئيسية. يمكن أن تكون التخطيطات أكثر تخصيصًا، ولكن تأكد من اتباع مجموعات متسقة وأعمدة والمسافات.
يمكن أن تستخدم التخطيطات أيضًا مجموعة من أنواع التخطيط. على سبيل المثال، يمكنك إقران عرض دوّار أو تمرير أفقي ببطاقات عمودية. أو يمكنك تقديم مخطط مخصص ببيانات قائمة رأسية.
يمكنك عرض المحتوى في صفوف أو أعمدة قابلة للتمرير باستخدام صفوف بطيئة وأعمدة كسولة.
تعرّف على المزيد من المعلومات حول أساسيات تخطيط الإنشاء وما الذي يجعله متاحًا.
المصادقة هي تخطيط نسبي شائع، كما هو موضح في الشكل التالي.
التخطيط بملء الشاشة هو تخطيط شائع آخر، كما يستخدم في الوضع المجسم.
إذا كنت تستخدم طرق العرض بدلاً من "إنشاء"، يمكنك استخدام ConstraintLayout لعرض طرق العرض وفقًا للعلاقات بين طرق العرض التابعة والتنسيق الرئيسي، ما يتيح إنشاء تنسيقات كبيرة ومعقّدة.
يتيح لك ConstraintLayout الإنشاء بالكامل من خلال السحب والإفلات بدلاً من
تعديل ملف XML باستخدام أداة تعديل التنسيق. اطّلِع على المزيد من المعلومات عن إنشاء واجهة مستخدم باستخدام
"محرِّر التنسيق".
تكييف التخطيطات
التصميم التكيُّفي هو ممارسة تصميم التخطيطات التي تتكيف مع نقاط التوقف والأجهزة المحددة. عادةً ما نأخذ في الاعتبار عرض الجهاز لتحديد المكان الذي يجب أن يتغير فيه التخطيط أو يتكيف. يستخدم كل من الويب وAndroid مفاهيم التصميم سريعة الاستجابة، مثل الشبكات والصور المرنة، لإنشاء تنسيقات تستجيب بشكل أفضل لسياقها.
للحصول على إرشادات تصميم حول تعديل التنسيقات مع أحجام الشاشات الموسّعة، يُرجى الاطّلاع على دليل المطوِّر حول إنشاء تنسيقات تكيُّفية في Compose وصفحة تطبيق التنسيق M3. ويمكنك أيضًا الاطّلاع على معرض Android الأساسي للشاشات الكبيرة لاستلهام الأفكار وتنفيذها لتنسيقات الشاشات الكبيرة.
على الرغم من أنه لا يلزم أن يكون كل تطبيق متاحًا على كل حجم شاشة، إلا أنه يتيح للمستخدمين مزيدًا من الحرية في ما يتعلق بسهولة الاستخدام وسهولة الاستخدام وجودة التطبيق.
- يمكنك تصميم شاشات رئيسية (توصيل المفاهيم الأساسية أو تطبيقك) بأحجام الصفوف كنقاط توقف للعمل كإرشادات.
- أو صمم المحتوى ليكون متجاوبًا مع جميع المستخدمين من خلال ملاحظة الكيفية التي يجب بها تقييد المحتوى أو توسيعه أو إعادة تدفّقه.
للمزيد من المعلومات حول التنسيقات، يُرجى الاطّلاع على صفحة فهم التخطيط باستخدام Material Design 3 (M3).
عناصر WebView
WebView هو عرض يعرض صفحات الويب داخل التطبيق. في معظم الحالات، ننصح باستخدام متصفّح ويب عادي، مثل Chrome، لعرض المحتوى إلى المستخدم. للتعرّف على مزيد من المعلومات حول متصفّحات الويب، اقرأ دليل استدعاء متصفّح يتضمن نية.