تجربة المُستخدِم
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
الفئة 2: محسَّنة للاستخدام على الشاشات الكبيرة
بالنسبة إلى المستخدمين، واجهة المستخدم هي التطبيق. وتحدّد واجهة المستخدم تجربة المستخدم،
التي تحدّد رضا المستخدم واستخدام التطبيق وعمليات شراء التطبيق والاحتفاظ
بالعملاء.
توفّر الشاشات الكبيرة مساحة عرض واسعة لواجهات المستخدم المبتكرة والمتوافقة
التي توفّر تجربة مستخدم لا يمكن تكرارها على الشاشات الصغيرة.
يمكنك تحسين تطبيقك للشاشات الكبيرة من خلال تضمين عناصر واجهة المستخدم التالية:
- شريط التنقّل أو لائحة التنقّل
- مساحات اللمس الكبيرة
- القوائم ومربّعات الحوار في مواضع مناسبة
- تنسيقات النوافذ المتعدّدة
التنسيقات التكيُّفية
أنشئ تصاميم قابلة للتكيّف تعمل على تحسين واجهة مستخدم تطبيقك على الشاشات الكبيرة والصغيرة.
تصميم وإنشاء أشكال أجهزة متعددة في الوقت نفسه تجهيز تطبيقك ليكون متوافقًا مع أنواع الأجهزة الجديدة في المستقبل
التنسيقات الأساسية
استفِد من تصاميم الشاشات الكبيرة التي أثبتت فعاليتها لتوفير تجربة مستخدم استثنائية في تطبيقك.
أنشئ تفاصيل قائمة أو لوحة داعمة أو تنسيق خلاصة لجعل المحتوى
أكثر قابلية للإدارة وأكثر متعة.
واجهة مستخدم متجاوبة
تنسيق عناصر واجهة المستخدم استنادًا إلى حجم الشاشة يجب تقييد عرض الأزرار والبطاقات
والحقول النصية التي تظهر على الشاشة بالكامل على الشاشات الصغيرة، ويجب ضبطها على حجم مناسب وظيفيًا على الشاشات الكبيرة. لا تسمح لمربّعات الحوار وغيرها من النوافذ المشروطة
بملء الشاشة بالكامل. يجب وضع قوائم السياق وغيرها من العروض المنبثقة المتعلّقة بالعناصر بجانب العنصر الذي اختَره المستخدم، وليس في منتصف الشاشة.
تضمين الأنشطة
يمكنك تحديث تطبيقاتك القديمة المستندة إلى الأنشطة باستخدام تنسيقات متعددة الأقسام على الشاشات الكبيرة. ولا يلزم إعادة صياغة الرموز البرمجية. يمكنك ضبط التنسيقات في ملف XML أو باستخدام
بضع طلبات بيانات من واجهة برمجة التطبيقات Jetpack WindowManager API.
الخطوات التالية
للتعرّف على تطوير واجهة المستخدم لتحسين تجربة المستخدم، يُرجى الاطّلاع على ملفّات تعليمات المطوّرين التالية:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
