تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تحدّد التنسيقات البنية المرئية التي يتفاعل المستخدم من خلالها مع تطبيقك،
مثلما يحدث في نشاط معيّن. يوفّر نظام التشغيل Android مجموعة من المكتبات ونقاط البداية الأساسية والتقنيات لعرض المحتوى وتحديد موضعه.
احترام مناطق الأمان في أجهزة Honor، والتي تشمل أجزاءً من واجهة المستخدم، مثل فتحات العرض، والحواف الداخلية من الحافة إلى الحافة، وشاشات الحواف، ولوحات المفاتيح البرمجية، وأشرطة النظام توفير تخطيط مرن للمستخدمين للتفاعل مع لوحة المفاتيح
تحذير: يُرجى توخّي الحذر عند تغطية المحتوى بلوحة المفاتيح.
بيئة العمل التفاعلية
يجب إبقاء التفاعلات الأساسية، مثل التنقّل الأساسي، في منطقة من الشاشة يسهل الوصول إليها. توفّر أزرار الإجراءات العائمة (FAB) نقطة تفاعل بارزة وسهلة الوصول
مجموعات الاحتواء
استخدِم الحاويات لتجميع المحتوى ذي الصلة من أجل توجيه المستخدم خلال المحتوى والإجراءات. البطاقات التي تستخدم الاحتواء الصريح لتجميع المحتوى مع الإجراءات ذات الصلة
المحاذاة
توفير محاذاة متسقة بين المحتوى المشابه وعناصر واجهة المستخدم
check_circle
الإجراءات التي يُنصح بها
تحديد تباعد متسق بين العناصر المتشابهة
cancel
الإجراءات غير المُوصى بها
إعاقة سهولة القراءة من خلال
المسافات غير المتسقة بين العناصر المتشابهة، ما قد يجعل التصاميم تبدو عشوائية
اتجاه التنسيق
لا تلتزم بالوضع العمودي أو بتصميم مثالي: ضع في اعتبارك نسب العرض إلى الارتفاع وفئات الأحجام ودرجات الدقة المختلفة التي قد يواجهها المستخدمون.
التفاعلات الأساسية
لا تربك المستخدم بالكثير من الإجراءات لكل عرض.
مواصفات تنسيق Notate
عند إنشاء تنسيقات مخصّصة، يجب توضيح كيفية عرض المحتوى ضمن التنسيق باستخدام مصطلحات المحاذاة أو القيود أو الجاذبية. تضمين كيفية استجابة الصور للحاوية الخاصة بها من أجل عرضها بشكل صحيح
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
