تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
إذا كان تطبيقك يتضمّن وجهات متعدّدة يمكن للمستخدمين التنقّل بينها، ننصحك باستخدام أزواج من التصميمات وعناصر التنقّل التي تستخدمها التطبيقات الأخرى عادةً.
وبما أنّ العديد من المستخدمين لديهم نماذج ذهنية لهذه الاقترانات، سيكون تطبيقك أكثر سهولة بالنسبة إليهم.
تنسيقات وعناصر تنقّل متوافقة
يُستخدم شريط التنقّل ودرج التنقّل المشروط كأنماط تنقّل أساسية لعناصر عرض التنسيق الرئيسية ووجهات التنقّل الأساسية.
يمكن أن يحتوي شريط التنقّل على ثلاث إلى خمس وجهات تنقّل ضمن مستوى التدرّج الهرمي نفسه. يتم تحويل هذا المكوّن إلى شريط التنقّل الجانبي على الشاشات الكبيرة.
على الرغم من أنّ لائحة التنقّل يمكن أن تتضمّن أكثر من خمس وجهات تنقّل، فإنّ هذا النمط ليس مثاليًا مثل شريط التنقّل.
ويرجع ذلك إلى الحاجة إلى الوصول إلى الشريط العلوي على الأحجام الصغيرة.
تعمل علامات التبويب هنا كطبقة تنقّل ثانوية لتجميع المحتوى المشابه.
إجراءات التصميم
توفير عناصر تحكّم تتيح للمستخدمين تنفيذ الإجراءات تشمل الأنماط الشائعة
إجراءات الشريط العلوي وزر الإجراء العائم (FAB) والقوائم.
بالنسبة إلى الإجراءات ذات الأهمية القصوى، يوفّر زر الإجراء العائم زرًا كبيرًا وبارزًا للمستخدم. يجب تقديم إجراء واحد فقط في كل مرة على هذا المستوى. يمكن أن يظهر زر الإجراء العائم بأحجام متعددة وبشكل موسّع يتضمّن تصنيفًا. استخدِم Scaffold لتثبيت زر الإجراء العائم، مع التأكّد من أنّه يظهر دائمًا حتى عند التمرير.
زر إجراء عائم (FAB) يتيح للمستخدم إضافة نباتات بسرعة إلى معرض النباتات
يمكنك وضع الإجراءات الثانوية ضمن الشريط العلوي أو ضمن الصفحة إذا كانت مجمّعة بالقرب من المحتوى ذي الصلة.
الشكل 20: إجراء التنبيه في الشريط العلوي عند عرض التفاصيل
(على اليمين) ورمز القائمة المنسدلة المضمّن في عنصر القائمة (على اليسار)
بالنسبة إلى أي إجراءات إضافية لا تحتاج إليها بشكل فوري أو متكرر، أضِف هذه الإجراءات في قائمة تتضمّن خيارات إضافية.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["If your app contains multiple destinations for users to traverse, we recommend\nemploying layout and navigation pairings that are commonly used by other apps.\nBecause many users already possess the mental models for these pairings, your\napp will be more intuitive for them.\n\nLayout and navigation pairings\n\nThe navigation bar and modal navigation drawer are used as primary navigation\npatterns for parent layout views and primary navigation destinations. \n\nThe navigation bar can hold three to five navigation destinations across the\nsame hierarchy level. This component translates to the navigation rail for large\nscreens.\n\n\nAlthough the navigation drawer can hold more than five navigation destinations,\nthe pattern is not as ideal as the navigation bar.\nThis is due to the need to reach to the top bar on compact sizes. \n\n[Material 3 Tabs](https://m3.material.io/components/tabs/overview) and the [bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) are\nsecondary navigation patterns that you can can use to supplement primary\nnavigation or appear on children views.\n\n\nHere, tabs act as a secondary navigation layer to group sibling content.\n\nLayout actions\n\nProvide controls to enable users to accomplish actions. Common patterns include\ntop bar actions, floating action button (FAB), and menus. \n\nFor actions of the highest importance, a [FAB](https://m3.material.io/components/floating-action-button/overview) provides a large\nand prominent button for the user. Provide only one action at a time at this\nlevel. A FAB can appear in multiple sizes and an expanded form, which includes a\nlabel. Use [Scaffold](/jetpack/compose/components/scaffold) to pin a FAB, making sure it's always\nvisible even on scroll by.\n\n\nA floating action button (FAB) that allows the\nuser to quickly add plants to the plant gallery\n\nYou can place secondary actions within the top bar or, if it's grouped near\nrelated content, within the page.\n**Figure 20:** Alert action in the top bar on show detail (left) and overflow icon inline of list item (right)\n\nFor any additional actions that aren't promptly or frequently needed, add those\nactions in an overflow menu."]]