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

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

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

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

غذای آماده

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

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

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

    شکل 2: مطمئن شوید که رنگ نوار سیستم با رنگ بدنه برنامه شما مطابقت دارد
  • از اضافه کردن حرکات ضربه یا کشیدن اهداف زیر درج‌های اشاره اجتناب کنید. اینها با ناوبری لبه به لبه و حرکت در تضاد هستند.

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

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

ویژگی لبه به لبه به اندروید اجازه می دهد تا برای تجربه ای فراگیرتر، رابط کاربری را در زیر نوارهای سیستم بکشد. ما استفاده از لبه به لبه را توصیه می کنیم زیرا شفاف کردن نوار پیمایش یک درخواست رایج از سوی کاربران است. (در مورد نحوه پشتیبانی از لبه به لبه بخوانید).

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

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

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

نوار وضعیت

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

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

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

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

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

شکل 6: نوارهای شفاف با استفاده از ویژگی لبه به لبه ، ایده‌آل برای اجازه دادن به محتوای شما با استفاده از بیشترین فضای صفحه نمایش.


شکل 7: نوارهای سیستم خود را برای ارتقای محتوای خود یا مطابقت با برند برنامه خود سبک کنید. نوارهای سیستم را روی ویژگی های پیش فرض قرار ندهید.

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

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

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

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

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

اگر رنگ پس‌زمینه را به‌صورت دستی تنظیم می‌کنید، می‌توانید به صورت اختیاری محتوای نوار وضعیت را به صورت روشن یا تاریک برای کنتراست بهینه تنظیم کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال زیر نحوه پیاده سازی یک سبک ناوبری را نشان می دهد.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

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

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

    شکل 13: سازگاری رنگ پویا
  • حالت‌های دکمه : سیستم در پشت میله‌های سیستم (برای سطح API 29 یا بالاتر) یک نوار شفاف (برای سطح API 28 یا پایین‌تر) یک خط شفاف اعمال می‌کند.

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

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

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

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

حالت فراگیر

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

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