طراحی لبه‌به‌لبه

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

شکل ۱. چپ. برنامه‌ای که تمام‌صفحه نیست. راست. برنامه‌ای که لبه‌به‌لبه است.

ربودن مالکیت توپ

  • برای داشتن تجربه لبه‌به‌لبه، محتوای پیمایشی و پس‌زمینه را در زیر نوارهای سیستم رسم کنید.
  • از افزودن اشاره‌های تک‌ضرب یا هدف‌های کشیدن در زیر حاشیه‌های سیستم خودداری کنید؛ این موارد با ناوبری اشاره‌ای و لبه‌به‌لبه تداخل دارند.
شکل ۲. برنامه‌ای با حاشیه‌های ژست که با رنگ سبز برجسته شده است.

محتوایتان را در پشت نوارهای سیستم رسم کنید

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

برنامه می‌تواند با واکنش به حاشیه‌ها، هم‌پوشانی‌های محتوا را برطرف کند. حاشیه‌ها توضیح می‌دهند محتوای برنامه شما چقدر باید حاشیه داشته باشد تا با نوار سیستم یا ویژگی‌های فیزیکی دستگاه مثل برش‌های نمایشگر هم‌پوشانی نداشته باشد. درباره نحوه پشتیبانی از لبه‌به‌لبه و مدیریت حاشیه‌ها در Compose و Views بخوانید.

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

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

ملاحظات نوار وضعیت

برای راهنمایی‌های اساسی درباره طراحی نوار سیستم، نوارهای سیستم Android را ببینید. بخش زیر ملاحظات تکمیلی درباره نوار وضعیت را مورد بحث قرار می‌دهد.

محتوای پیمایشی

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

انجام دهید

اگر نوار برنامه چسبنده باشد، نوار برنامه بالای کوچک را تا ارتفاع نوار وضعیت جمع می‌کند.

انجام دهید

اگر نوار برنامه بالای کوچک چسبنده نیست، گرادیان رنگ پس‌زمینه هماهنگ اضافه کنید.

وقتی میانای کاربر در زیر پیمایش می‌شود، نوارهای وضعیت باید نیمه‌شفاف باشند تا نمادهای نوار وضعیت شلوغ به‌نظر نرسند. برای انجام این کار، ابتدا با اجرای مراحل موجود در مستندات LazyColumn یا RecyclerView، یک واسط کاربر پیمایش‌پذیر لبه‌به‌لبه ایجاد کنید. سپس، با انجام یکی از موارد زیر مطمئن شوید که نوار سیستم شفاف است:

  • درصورت امکان، هنگام پیمایش به محافظت خودکار «نوار ابزار بالای» Material 3 تکیه کنید.
  • ترکیب‌بندی گرادیان سفارشی ایجاد کنید. برای اطلاعات بیشتر، به محافظت از نوار سیستم مراجعه کنید.
شکل ۳. برنامه‌ای با حاشیه‌های ژست که با رنگ سبز برجسته شده است.

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

Don´t

محافظت گرادیانی داشته باشد که با پس‌زمینه هر قاب مطابقت نداشته باشد

انجام دهید

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

به‌همین ترتیب، کشوهای پیمایش نیز باید از بقیه برنامه محافظت جداگانه‌ای داشته باشند.

شکل ۴. نوار وضعیت نیمه‌شفاف برای کشوی پیمایش. این تصویر محافظت نوار وضعیت را برای کشوی پیمایش نشان می‌دهد، اما برای برنامه نشان نمی‌دهد.

از محافظت‌های نوار وضعیت به‌صورت پشته‌ای استفاده نکنید، برای مثال هم از محافظت تعبیه‌شده Material 3 TopAppBar و هم از محافظت سفارشی استفاده نکنید.

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

محتوای پیمایشی

نوارهای برنامه پایین باید هنگام پیمایش جمع شوند.

انجام دهید

وقتی نوار برنامه پایین به‌صورت پویانمایی محو می‌شود، سایه نوار سیستم برای پیمایش سه‌دکمه‌ای اضافه می‌شود.

انجام دهید

پیمایش اشاره‌ای شفاف بماند و پوشش اضافی اضافه نشود.

برش‌های نمایشگر

برش‌های نمایشگر می‌توانند بر ظاهر رابط کاربری شما تأثیر بگذارند. برنامه‌ها باید حاشیه‌های برش نمایشگر را مدیریت کنند تا بخش‌های مهم میانای کاربر زیر برش نمایشگر رسم نشوند.

انجام دهید

بااستفاده از حاشیه‌های برش نمایشگر، میانای کاربر مهم را درج کنید.

Don´t

واسط کاربر مهم را در لبه صفحه‌نمایش قرار دهید.

بااین‌حال، پس‌زمینه‌های نوار برنامه یکپارچه باید به بریدگی نمایشگر کشیده شوند، همان‌طور که در تصویر زیر نشان داده شده است.

شکل ۵. پس‌زمینه‌های نوار برنامه یکپارچه به برش نمایشگر کشیده می‌شوند درحالی‌که میانای کاربر مهم در داخل قرار می‌گیرد.

مطمئن شوید گردونه‌های افقی در برش نمایشگر کشیده می‌شوند.

شکل ۶. نمایشگر افقی لبه‌به‌لبه که گردونه در برش نمایشگر پیمایش می‌کند.

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

راهنمایی‌های دیگر

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