بنرها در material design

یک بنر یک پیام برجسته و اقدامات اختیاری مرتبط را نشان می دهد.

کاربرد

یک بنر یک پیام مهم و مختصر را نشان می دهد و اقداماتی برای آدرس دهی یا رد کردن بنر در اختیار کاربران قرار می دهد، برای رد کردن بنر اقدام کاربر الزامی است.

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

اصول

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

ساختار و آناتومی

تصویر پشتیبانی(اختیاری)
کانتینر Container
متن
دکمه ها

کانتینر بنر

کانتینر بنر باید مستطیل شکل و در تمام عرض طرح گسترش یابد. کانتینر باید در یک مکان ثابت و برجسته در سرتاسر اپلیکیشن قرار بگیرد و ارتفاع مشابه صفحه نمایش را به اشتراک بگذارد.

یک بنر در بالای محتوا و در زیر top bar ظاهر می شود.

تنها یک بنر باید در یک زمان نمایش داده شود.

پیام بنر

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

دکمه ها

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

بنرها حداکثر دو دکمه متنی می توانند داشته باشند، عمل dismissive سمت چپ و تایید سمت راست.

اگر فضای کافی برای جا دادن هر دو وجود دارد دکمه ها را در زیر پیام بنر یا در همان خط قرار دهید.

بنرها ممکن است یک یا دو دکمه متن با تاکید کم داشته باشند.

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

میزان مزاحمت بنرها باید حداقل باشد اگر یک دکمه در بنر نیاز به تاکید بیشتری دارد میتوانید از یک دکمه به اندازه عرض صفحه استفاده کنید (هر چند ممکن است برجستگی آن حواس پرتی ایجاد کند).

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

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

دکمه ها را زیر هم نگه ندارید ، مگر اینکه فضای کافی برای نمایش آنها در کنار هم وجود نداشته باشد.

از آیکون close به عنوان تنها راه بستن بنر استفاده نکنید همه اقدامات باید به صورت text button نمایش داده شوند.

تصویر حمایت کننده

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

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

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

تعیین سطح و مکان

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

بنرها در بالای صفحه در زیرtop bar قرار دارند. بسته به شرایط محیط می توانند ثابت باشند یا با محتوا پیمایش شوند:

در تلفن همراه ، آنها در صفحه با محتوا و در همان ارتفاع محتوای برنامه حرکت می کنند.

در دسکتاپ ، آنها در بالای صفحه ثابت و در همان ارتفاع top bar ثابت هستند.

تصویر بالا یک نمونه نادرست را نمایش می دهد، سطح حاوی بنر باید به وضوح از top bar جداشود.

همچنین بنرها نباید روی top bar را بگیرند.

بنرها و جستجو

وقتی یک بنر با persistent search bar ظاهر می شود ، در زیر نوار جستجو قرار می گیرد.

بنرها و bottom navigation

در صورت وجود bottom navigation ، بنرها باید در بالای صفحه باقی بمانند.

بنرها و layout عریض

بنر ها در layout های عریض کل صفحه را می پوشانند. آنها در همان ارتفاع مانند top bar ظاهر می شوند و با اسکرول کردن محتوا روی صفحه می مانند.

هنگامی که navigation عمودی وجود دارد ، بنرها می توانند به جای عرض کامل صفحه نمایش در بالای محتوا ظاهر شوند.

بنر روی صفحه با navigation drawer کمی بالاتر از محتوا (در محور y) ، در همان ارتفاع محتوا قرار می گیرد.

از نشان دادن چندین بنر خودداری کنید.

بنرها و pannable content

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

رفتار و حرکت

ظاهر شدن

بنرها به طور معمول زمانی ظاهر می شود که یک صفحه نمایش محتوا را بارگذاری می کند.

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