نوارهای سیستم اندروید

نوار وضعیت و نوار ناوبری با هم نوارهای سیستم نامیده می شوند. آنها اطلاعات مهمی مانند سطح باتری، زمان و هشدارهای اعلان را نمایش می دهند و تعامل مستقیم دستگاه را از هر کجا ارائه می دهند.

مهم است که برجستگی نوارهای سیستم را در نظر بگیرید، چه در حال طراحی رابط کاربری برای تعامل با سیستم عامل اندروید، چه روش های ورودی یا سایر قابلیت های دستگاه هستید.

شکل 1: تصاویر پشت میله های سیستم

غذای آماده

  • هنگام طراحی برنامه خود، نوارهای سیستم را درج کنید. مناطق امن رابط کاربری، تعاملات سیستم، روش‌های ورودی، برش‌های نمایشگر، نوارهای وضعیت، نوارهای عنوان، نوارهای پیمایش و سایر قابلیت‌های دستگاه را در نظر بگیرید.

  • وضعیت سیستم و نوارهای ناوبری را شفاف یا شفاف نگه دارید و محتوا را در پشت این نوارها بکشید تا لبه به لبه شوند.

  • از اضافه کردن حرکات ضربه یا کشیدن اهداف زیر درج‌های اشاره اجتناب کنید. اینها با ناوبری لبه به لبه و حرکت در تضاد هستند.

    شکل 2: ورودی های اشاره سیستم. از قرار دادن اهداف ضربه ای در زیر این مناطق خودداری کنید

محتوای خود را پشت میله های سیستم بکشید

ویژگی لبه به لبه به اندروید اجازه می دهد تا رابط کاربری را در زیر نوارهای سیستم بکشد تا تجربه ای همه جانبه داشته باشد، که درخواست رایج کاربران است.

یک برنامه می‌تواند با واکنش به درج‌ها، همپوشانی‌های محتوا را برطرف کند. Inset ها توضیح می دهند که محتوای برنامه شما چقدر باید محفظه شود تا از همپوشانی با بخش هایی از رابط کاربری سیستم عامل Android مانند نوار پیمایش یا نوار وضعیت یا ویژگی های فیزیکی دستگاه مانند برش های نمایشگر جلوگیری شود. در مورد نحوه پشتیبانی لبه به لبه و مدیریت inset ها در Compose و views بخوانید.

هنگام طراحی برای موارد استفاده لبه به لبه، از انواع زیرپوش های زیر آگاه باشید:

  • نوارهای درونی سیستم برای رابط کاربری اعمال می‌شود که هم قابل لمس است و هم نباید توسط نوارهای سیستم از نظر بصری پوشیده شود.
  • درج‌های اشاره‌ای سیستم برای نواحی ناوبری اشاره‌ای استفاده می‌شود که سیستم بر برنامه شما اولویت دارد.

نوار وضعیت

در اندروید، نوار وضعیت شامل نمادهای اعلان و نمادهای سیستم است. کاربر با پایین کشیدن نوار وضعیت برای دسترسی به سایه اعلان، با نوار وضعیت تعامل می کند.

شکل 3: ناحیه نوار وضعیت که در بالای نوار برنامه بالا مشخص شده است

نمادهای نوار وضعیت بسته به زمینه، زمان روز، تنظیمات برگزیده یا مضامین تنظیم شده توسط کاربر و سایر پارامترها می توانند متفاوت ظاهر شوند. می توانید سبک نماد نوار وضعیت را مانند مثال های زیر تنظیم کنید.

شکل 4: نمادهای نوار وضعیت در تم روشن و تاریک.

اطمینان حاصل کنید که محتوای برنامه شما کل صفحه را در بر می گیرد. همانطور که در مثال زیر نشان داده شده است، نوارهای وضعیت و ناوبری را با محتوای لبه به لبه شفاف یا شفاف نگه دارید.

شکل 5: یک برنامه لبه به لبه با نوارهای سیستم شفاف برای اجازه دادن به محتوای شما با استفاده از بیشترین فضای صفحه نمایش ایده آل است.

لبه به لبه در اندروید 15 اعمال می شود تا نوارهای سیستم به طور پیش فرض شفاف یا شفاف باشند. در نسخه‌های قبلی اندروید، نوارهای سیستم را مات نگذارید.

شکل 6: برای ارتقای محتوای خود لبه به لبه بروید. میله های سیستم مات نداشته باشید.

هنگامی که یک اعلان می رسد، یک نماد معمولا در نوار وضعیت ظاهر می شود. این به کاربر سیگنال می دهد که چیزی برای دیدن در کشوی اعلان وجود دارد. این می تواند نماد یا نماد برنامه شما برای نشان دادن کانال باشد. طراحی اعلان ها را ببینید.

شکل 7: نماد اعلان در نوار وضعیت

سبک نوار وضعیت را تنظیم کنید

با فراخوانی enableEdgeToEdge() از شفاف بودن نوار وضعیت در همه نسخه ها اطمینان حاصل کنید. مطمئن شوید که رنگ‌های نماد نوار وضعیت را برای کنتراست به‌روزرسانی کرده‌اید. به عنوان مثال، برای ایجاد نمادهای تیره:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

نمایش برش ها و نوار وضعیت

بریدگی نمایشگر ناحیه ای در برخی از دستگاه ها است که تا سطح نمایشگر گسترش می یابد تا فضایی را برای سنسورهای جلویی فراهم کند. می تواند ظاهر نوارهای وضعیت را تحت تأثیر قرار دهد. برش های نمایشگر بسته به سازنده می تواند متفاوت باشد.

در مورد نحوه پشتیبانی از برش های نمایشگر بخوانید.

شکل 8: نمونه هایی از برش های نمایشگر

Android به کاربران امکان می‌دهد با استفاده از کنترل‌های بازگشت، خانه و نمای کلی، ناوبری را کنترل کنند:

  • Back مستقیماً به نمای قبلی برمی گردد.
  • صفحه اصلی به خارج از برنامه و به صفحه اصلی دستگاه منتقل می شود.
  • نمای کلی نشان می دهد که برنامه ها باز هستند و اخیراً باز شده اند.

کاربران می‌توانند از میان پیکربندی‌های نوار ناوبری مختلف از جمله ناوبری اشاره‌ای (توصیه می‌شود) و ناوبری سه دکمه‌ای را انتخاب کنند. برای ارائه بهترین تجربه، چندین نوع پیمایش را در نظر بگیرید.

ناوبری با اشاره

در Android 10 (سطح API 29) معرفی شده است، پیمایش اشاره‌ای نوع پیشنهادی پیمایش است، اگرچه نمی‌توانید اولویت کاربر را نادیده بگیرید. پیمایش اشاره‌ای از دکمه‌هایی برای بازگشت، خانه و نمای کلی استفاده نمی‌کند، در عوض یک دسته حرکتی را برای مقرون به صرفه نشان می‌دهد. کاربران با کشیدن انگشت از لبه چپ یا راست صفحه برای بازگشت به عقب و از پایین برای بازگشت به خانه تعامل دارند. کشیدن انگشت به بالا و نگه داشتن نمای کلی باز می شود.

ناوبری اشاره ای یک الگوی ناوبری مقیاس پذیرتر برای طراحی در تلفن همراه و صفحه نمایش بزرگتر است. برای ارائه بهترین تجربه کاربری، پیمایش اشاره‌ای را توسط:

  • پشتیبانی از محتوای لبه به لبه
  • از افزودن فعل و انفعالات یا اهداف لمسی در قسمت‌های ناوبری اشاره‌ای خودداری کنید.

درباره پیاده‌سازی پیمایش اشاره‌ای بخوانید.

شکل 9: نوار ناوبری دسته اشاره

ناوبری سه دکمه

ناوبری سه دکمه سه دکمه برای بازگشت، خانه و نمای کلی ارائه می دهد.

شکل 10: نوار ناوبری سه دکمه ای

سایر تغییرات نوار ناوبری

بسته به نسخه Android و دستگاه، سایر تنظیمات نوار ناوبری ممکن است برای کاربران شما در دسترس باشد. برای مثال، ناوبری دو دکمه ای، دو دکمه را برای خانه و بازگشت فراهم می کند.

شکل 11: نوار پیمایش دو دکمه ای

یک سبک ناوبری تنظیم کنید

با فراخوانی enableEdgeToEdge() از شفاف یا شفاف بودن نوار پیمایش در همه نسخه‌ها اطمینان حاصل کنید.

در دستگاه‌های Android 15 و جدیدتر، یا پس از فراخوانی enableEdgeToEdge() ، پیمایش حرکتی به‌طور پیش‌فرض شفاف است. ناوبری سه دکمه به طور پیش فرض نیمه شفاف است یا اگر در داخل نوار وظیفه دستگاه صفحه بزرگ باشد، مات است.

اگر برنامه شما دارای نوار برنامه پایینی است، Window.setNavigationBarContrastEnforced() را روی false قرار دهید تا مطمئن شوید که نوار برنامه پایین می‌تواند زیر نوار پیمایش سیستم بدون اعمال یک اسکریم شفاف در پیمایش سه دکمه‌ای، کشیده شود.

اندروید در حالت پیمایش حرکتی و در حالت دکمه، حفاظت بصری رابط کاربری را انجام می دهد.

  • حالت پیمایش اشاره ای : سیستم از سازگاری رنگ پویا استفاده می کند، که در آن محتویات نوارهای سیستم بر اساس محتوای پشت آن ها تغییر رنگ می دهند. در مثال زیر، دستگیره در نوار پیمایش اگر بالای محتوای روشن قرار گیرد به رنگ تیره تغییر می کند و بالعکس.

    شکل 12: سازگاری رنگ پویا
  • حالت‌های دکمه‌ای : سیستم در پشت نوارهای پیمایش دکمه‌ای یک خط شفاف اعمال می‌کند، که می‌توان با تنظیم Window.setNavigationBarContrastEnforced() روی false حذف کرد.

    شکل 13: انطباق رنگ پویا، که در آن نوارهای سیستم بر اساس محتوای پشت خود تغییر رنگ می دهند

صفحه کلید و ناوبری

شکل 14: صفحه کلید روی صفحه با نوارهای ناوبری

هر نوع پیمایش به طور مناسبی به صفحه‌کلید روی صفحه‌نمایش واکنش نشان می‌دهد تا به کاربر اجازه دهد تا اقداماتی مانند رد کردن یا حتی تغییر نوع صفحه‌کلید را انجام دهد. برای اطمینان از انتقال صاف صفحه‌کلید، برای اطمینان از انتقال نرم که انتقال برنامه را با صفحه‌کلید که از پایین صفحه به بالا و پایین می‌لغزد همگام‌سازی می‌کند، از WindowInsetsAnimationCompat استفاده کنید.

حالت فراگیر

شکل 15: حالت غوطه ور که یک تجربه تمام صفحه را در یک دستگاه تلفن همراه با منظره گرا نشان می دهد

زمانی که نیاز به تجربه تمام صفحه دارید، می توانید نوارهای سیستم را پنهان کنید، برای مثال زمانی که کاربر در حال تماشای فیلم است. کاربر همچنان باید بتواند ضربه بزند تا نوارهای سیستم و رابط کاربری نمایش داده شود تا بتواند با کنترل‌های سیستم پیمایش کند یا با آن تعامل داشته باشد. درباره طراحی برای حالت های تمام صفحه بیشتر بیاموزید یا در مورد نحوه پنهان کردن نوارهای سیستم برای حالت همهجانبه بخوانید.