نوار وضعیت، نوار عنوان و نوار ناوبری روی هم رفته، نوارهای سیستم نامیده می‌شوند. آنها اطلاعات مهمی مانند میزان باتری، زمان و هشدارهای اعلان را نمایش می‌دهند و تعامل مستقیم با دستگاه را از هر مکانی فراهم می‌کنند.
در نظر گرفتن اهمیت نوارهای سیستمی بسیار مهم است، چه در حال طراحی رابط کاربری برای تعامل با سیستم عامل اندروید، چه در حال طراحی روش‌های ورودی یا سایر قابلیت‌های دستگاه باشید.
غذاهای بیرون‌بر
هنگام طراحی برنامه خود، نوارهای سیستم را لحاظ کنید. مناطق امن رابط کاربری، تعاملات سیستم، روش‌های ورودی، برش‌های صفحه نمایش، نوارهای وضعیت، نوارهای عنوان، نوارهای ناوبری و سایر قابلیت‌های دستگاه را در نظر بگیرید.
نوارهای وضعیت سیستم و ناوبری را شفاف یا نیمه‌شفاف نگه دارید و محتوا را پشت این نوارها بکشید تا لبه به لبه نمایش داده شوند.
از طرح‌بندی‌های متعارف (canonical layouts) استفاده کنید که از فضای صفحه نمایش به طور مؤثر استفاده می‌کنند.
نوار وضعیت
در اندروید، نوار وضعیت شامل آیکون‌های اعلان و آیکون‌های سیستم است. کاربر با کشیدن نوار وضعیت به پایین برای دسترسی به سایه‌بان اعلان، با آن تعامل می‌کند. سبک‌های نوار وضعیت می‌توانند شفاف یا نیمه‌شفاف باشند.
آیکون‌های نوار وضعیت
نمادهای نوار وضعیت می‌توانند بسته به زمینه، زمان روز، تنظیمات یا تم‌های تنظیم‌شده توسط کاربر و سایر پارامترها، متفاوت ظاهر شوند. برای اطلاعات بیشتر، به نمادهای نوار سیستم مراجعه کنید.
وقتی یک اعلان می‌رسد، معمولاً یک آیکون در نوار وضعیت ظاهر می‌شود. این به کاربر نشان می‌دهد که چیزی برای دیدن در کشوی اعلان‌ها وجود دارد. این می‌تواند آیکون برنامه شما یا نمادی برای نمایش کانال باشد. به طراحی اعلان‌ها مراجعه کنید.
تنظیم سبک نوار وضعیت
نوار وضعیت را شفاف یا نیمه‌شفاف کنید تا مطمئن شوید محتوای برنامه شما کل صفحه را می‌پوشاند. سپس، سبک آیکون‌های نوار سیستم خود را طوری تنظیم کنید که آیکون‌ها کنتراست مناسبی داشته باشند.
در اندروید ۱۵، قابلیت نمایش لبه به لبه (لبه به لبه) اجباری شده و نوار وضعیت به طور پیش‌فرض شفاف است. برای سازگاری با نسخه‌های قبلی، تابع enableEdgeToEdge() را فراخوانی کنید.
در تصویر سمت چپ زیر، نوار وضعیت شفاف است و پس‌زمینه سبز TopAppBar پشت نوار وضعیت کشیده شده است.
نوارهای وضعیت شفاف زمانی ایده‌آل هستند که رابط کاربری زیر نوار وضعیت ظاهر نمی‌شود یا تصویری زیر نوار وضعیت رسم می‌شود. نوارهای وضعیت شفاف زمانی ایده‌آل هستند که رابط کاربری زیر نوار وضعیت اسکرول می‌کند. برای اطلاعات بیشتر در مورد محافظت از گرادیان ، به طراحی لبه به لبه مراجعه کنید.
ناوبری
اندروید به کاربران اجازه می‌دهد تا با استفاده از کنترل‌های برگشت، خانه و نمای کلی، ناوبری را کنترل کنند:
- بازگشت مستقیماً به نمای قبلی برمی‌گردد.
- صفحه اصلی از برنامه خارج شده و به صفحه اصلی دستگاه منتقل می‌شود.
- نمای کلی، برنامه‌های فعال و برنامه‌های اخیرِ رد نشده را نشان می‌دهد.
کاربران می‌توانند از بین پیکربندی‌های مختلف ناوبری، از جمله ناوبری حرکتی و ناوبری تطبیقی، یکی را انتخاب کنند. برای ارائه بهترین تجربه، انواع مختلف ناوبری را در نظر بگیرید.
ناوبری با اشاره
پیمایش حرکتی از دکمه‌هایی برای بازگشت، خانه و نمای کلی استفاده نمی‌کند، در عوض یک دسته حرکتی واحد را برای سهولت دسترسی نشان می‌دهد. کاربران با کشیدن انگشت از لبه چپ یا راست صفحه برای برگشت به عقب و از پایین برای رفتن به خانه، تعامل می‌کنند. کشیدن انگشت به بالا و نگه داشتن آن، نمای کلی را باز می‌کند.
ناوبری حرکتی، الگوی ناوبری مقیاس‌پذیرتری برای طراحی در موبایل و صفحات نمایش بزرگتر است. برای ارائه بهترین تجربه کاربری، با انجام موارد زیر، ناوبری حرکتی را در نظر بگیرید:
- پشتیبانی از محتوای لبه به لبه.
- از اضافه کردن تعاملات یا اهداف لمسی در زیر منوی ناوبری حرکتی خودداری کنید.
برای اطلاعات بیشتر، به افزودن پشتیبانی برای پیمایش اشاره‌ای مراجعه کنید.
ناوبری تطبیقی
یکی دیگر از الگوهای ناوبری رایج در اندروید، جابجایی بین ریل ناوبری و نوار ناوبری بسته به کلاس اندازه پنجره صفحه نمایش است. اجزای ناوبری تطبیقی در Jetpack Compose، چندین فرم فاکتور را مدیریت می‌کنند و در عین حال، نوار سیستم را از شلوغی دور نگه می‌دارند.
برای اطلاعات بیشتر، به ساخت ناوبری تطبیقی مراجعه کنید.
آیکون‌های ناوبری
نمادهای ناوبری همچنین می‌توانند بسته به تنظیمات یا قالب‌های تنظیم‌شده توسط کاربر، به شکل‌های مختلفی ظاهر شوند. برای اطلاعات بیشتر، به نمادهای نوار سیستم مراجعه کنید.
تنظیم سبک ناوبری
اندروید محافظت بصری از رابط کاربری را در حالت ناوبری حرکتی و در حالت‌های دکمه‌ای مدیریت می‌کند. سیستم از تطبیق رنگ پویا استفاده می‌کند، که در آن محتوای نوارهای سیستم بر اساس محتوای پشت آنها تغییر رنگ می‌دهد.
حالت ناوبری با اشاره
پس از هدف قرار دادن اندروید ۱۵ یا فراخوانی enableEdgeToEdge روی Activity ، سیستم یک نوار ناوبری ژست شفاف رسم می‌کند و تطبیق رنگ پویا را اعمال می‌کند. در مثال زیر، اگر دستگیره در نوار ناوبری بالای محتوای روشن قرار گیرد، به رنگ تیره تغییر می‌کند و برعکس.
نوارهای ناوبری حرکتی شفاف همیشه توصیه می‌شوند.
انجام دهید
نکن
حالت‌های دکمه
پس از هدف قرار دادن اندروید ۱۵ یا فراخوانی enableEdgeToEdge روی Activity ، سیستم یک لایه شفاف پشت نوارهای ناوبری دکمه اعمال می‌کند که می‌توانید با تنظیم Window.setNavigationBarContrastEnforced() روی false آن را حذف کنید.
توصیه می‌کنیم وقتی نوار برنامه‌ی پایینی یا نوار ناوبری پایینی برنامه وجود دارد، یا وقتی رابط کاربری زیر نوار ناوبری سه دکمه‌ای اسکرول نمی‌کند، از نوارهای ناوبری سه دکمه‌ای شفاف استفاده کنید. برای داشتن یک نوار ناوبری شفاف، Window.setNavigationBarContrastEnforced() را روی false تنظیم کنید و نوارهای برنامه‌ی پایینی را طوری پدگذاری کنید که زیر نوارهای ناوبری سیستم رسم شوند، همانطور که در شکل‌های ۷، ۸ و ۹ مشاهده می‌شود. برای اطلاعات بیشتر به محافظت از نوار سیستم مراجعه کنید.
برای پیمایش محتوا از یک نوار ناوبری سه دکمه‌ای شفاف استفاده کنید. برای اطلاعات بیشتر در مورد ملاحظات نوار ناوبری شفاف، به طراحی لبه به لبه مراجعه کنید.
صفحه کلید و ناوبری
هر نوع ناوبری به طور مناسب به صفحه کلید روی صفحه واکنش نشان می‌دهد تا به کاربر اجازه دهد اقداماتی مانند لغو یا حتی تغییر نوع صفحه کلید را انجام دهد. برای اطمینان از انتقال روان که انتقال برنامه را با حرکت کشویی صفحه کلید از پایین صفحه به بالا و پایین همگام‌سازی می‌کند، از WindowInsetsAnimationCompat استفاده کنید.
طرح‌بندی‌ها
طرح‌بندی‌های تطبیقی، محتوای یک برنامه را به گونه‌ای نمایش می‌دهند که از فضای موجود بهترین استفاده را ببرد. این طرح‌بندی‌ها با انتقال محتوا به پنل‌های ثانویه یا ثالثیه، از شلوغی رابط کاربری می‌کاهند.
برای اطلاعات بیشتر، به طرح‌بندی‌های متعارف مراجعه کنید.
برش‌های نمایشگر
بریدگی نمایشگر ناحیه‌ای در برخی دستگاه‌ها است که تا سطح نمایشگر امتداد می‌یابد تا فضایی برای حسگرهای جلویی فراهم کند. بریدگی‌های نمایشگر بسته به سازنده می‌توانند متفاوت باشند. در نظر بگیرید که بریدگی‌های نمایشگر چگونه با محتوا، جهت‌گیری و لبه به لبه تعامل خواهند داشت.
حالت فراگیر
وقتی به یک تجربه تمام صفحه نیاز دارید، مثلاً وقتی کاربر در حال تماشای فیلم است، می‌توانید نوارهای سیستم را پنهان کنید. کاربر همچنان باید بتواند برای نمایش نوارهای سیستم ضربه بزند و با کنترل‌های سیستم حرکت کند یا با آنها تعامل داشته باشد. درباره طراحی برای حالت‌های تمام صفحه بیشتر بیاموزید، یا درباره نحوه پنهان کردن نوارهای سیستم برای حالت فراگیر مطالعه کنید.