UX
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
TIER 2 - صفحه نمایش بزرگ بهینه شده است
برای کاربران، رابط کاربری برنامه است. رابط کاربری تجربه کاربر را تعیین می‌کند، که رضایت کاربر، استفاده از برنامه، خرید برنامه، حفظ مشتری را تعیین می‌کند.
صفحه نمایش های بزرگ فضای نمایش گسترده ای را برای رابط های کاربری نوآورانه و سازگار ارائه می دهند که UX ارائه می دهند، صفحه های کوچک قابل تکرار نیستند.
برنامه خود را برای نمایشگرهای بزرگ با گنجاندن عناصر رابط کاربری زیر بهینه کنید:
- ریل ناوبری یا کشو ناوبری
- اهداف لمسی بزرگ
- منوها و دیالوگ ها به خوبی قرار گرفته اند
- طرح بندی های چند جداره
طرح بندی های تطبیقی
طرح‌بندی‌های تطبیقی ایجاد کنید که رابط کاربری برنامه شما را در صفحه‌های بزرگ و کوچک بهینه می‌کند. طراحی و ساخت برای چندین فرم به طور همزمان. برنامه خود را برای انواع دستگاه های جدید در آینده مقاوم کنید.
چیدمان های متعارف
از طرح‌بندی‌های ثابت شده صفحه نمایش بزرگ استفاده کنید تا UX برنامه خود را استثنایی کنید. یک فهرست جزئیات، صفحه پشتیبانی یا طرح‌بندی فید ایجاد کنید تا محتوای بیشتر را قابل مدیریت‌تر و لذت‌بخش‌تر کنید.
رابط کاربری پاسخگو
فرمت عناصر UI بر اساس اندازه صفحه نمایش. پهنای دکمه‌ها، کارت‌ها و فیلدهای نوشتاری را که در صفحه‌های کوچک با عرض کامل هستند به اندازه عملکرد مناسب در صفحه‌های بزرگ محدود کنید. اجازه ندهید کادرهای محاوره ای و سایر پنجره های مدال کل صفحه را پر کنند. منوهای زمینه و سایر نمایشگرهای بازشو مرتبط با عنصر را در مجاورت عنصری که کاربر انتخاب کرده است قرار دهید، نه در مرکز صفحه.
تعبیه فعالیت
برنامه‌های قدیمی مبتنی بر فعالیت خود را با طرح‌بندی‌های چند صفحه‌ای در صفحه‌های بزرگ به‌روزرسانی کنید. نیازی به بازآفرینی کد نیست. طرح‌بندی‌های خود را در XML یا با چند تماس Jetpack WindowManager API پیکربندی کنید.
مراحل بعدی
برای آشنایی با توسعه UI برای UX بهینه شده، به راهنمای توسعه‌دهنده زیر مراجعه کنید:
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین به‌روزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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)"]]
