نوار اپلیکیشن (app bar) در طراحی متریال

App bar :

آیکون راهبری در سمت چپ نوار اپلیکیشن میتواند :

• یک کنترل برای باز کردن یک منوی راهبری باشد.
• یک فلش به سمت بالا برای راهبری به سمت بالا در سلسله مراتب برنامه هایتان باشد.
• اگر هیچ راهبری ای در صفحه نیاز نباشد حذف میشود.

عنوان نوار اپلیکیشن، صفحه فعلی را مشخص میکند. این عنوان میتواند عنوان یک اپلیکیشن، عنوان صفحه یا فیلتر یک صفحه باشد.
آیکون های سمت راست نوار اپلیکیشن، آیکون های عملیاتی مربوط به برنامه ها می باشند.
آیکون منو، منوی سرریزی (overflow) را باز میکند که شامل عملیات های دیگر و آیتم های منو مانند help ، settings و feedback می باشد.

ساختار نوار اپلیکیشن :

سمت چپ : آیکون راهبری، عنوان و آیکون فیلتر
سمت راست : آیکون های منو و عملیاتی

تیره

روشن

رنگی

شفاف

 

رنگ عنوان :

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

معیارها (metrics) :

ارتفاع ناحیه عملیاتی : 56dp
ارتفاع ناحیه عنوان : 80dp
padding پایین ناحیه عنوان : 8dp
ارتفاع ناحیه توضیحات : 72dp
paddingپایین ناحیه توضیحات : 16dp

خط اصلی جدا کننده با ارتفاع نوار اپلیکیشن تنظیم میشود. در اینجا با ارتفاع 64dp که در واقع خط جداکننده را مشخص میکند.
ارتفاع نوار اپلیکیشن : 64dp
padding محتوای نوار از چپ و راست : 24dp
padding بالا و پایین آیکون نوار : 20dp


ارتفاع نوار اپلیکیشن : 128dp
padding آیکون نوار از چپ و راست : 24dp
padding محتوای نوار از چپ : 80dp

تراکم (چگالی) :

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

نوار اپلیکیشن متراکم در desktop
ارتفاع نوار اپلیکیشن : 48dp
padding محتوای نوار از چپ و راست : 24dp
padding محتوای نوار از چپ : 80dp
ارتفاع آیکون : 40dp


نوار اپلیکیشن متراکم با ارتفاع زیاد
ارتفاع نوار اپلیکیشن : 96dp
padding محتوای نوار از چپ و راست : 24dp
padding محتوای نوار از چپ : 80dp

منو ها :

منو یک صفحه موقت میباشد که همیشه روی نوار اپلیکیشن باز میشود.
 

نوار اپلیکیشن در حالت عادی


منو در داخل نوار اپلیکیشن
 

---