اسنک بار ها در طراحی متریال

تاریخ انتشار: 22 اسفند 1394

تعداد بازدید: 15 نفر

اسنک بار چیست؟

اسنک بار ها یک پیام کوتاه (feedback) درباره یک عملیات را نمایش میدهند و در پایین صفحه ظاهر میشوند.

مکان قرار گیری :

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

رفتار :

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

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

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

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

عملیات ها به غیر از بستن یا cancel :

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

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

اسنک بارهای متوالی :

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

دو اسنک بار متفاوت متوالی

مشخصات :

موبایل

ارتفاع اسنک بار یک خطی : 48dp
ارتفاع اسنک بار چند خطی : 80dp
متن : Roboto Regular 14sp
دکمه عملیاتی : متن با حروف بزرگ، Roboto Medium 14sp
رنگ پس زمینه پیش فرض : 100% ، 323232#

مثال اسنک بار در موبایل

اسنک بار در موبایل در حالت افقی

مشخصات اسنک بار در موبایل

تبلت/desktop

ارتفاع اسنک بار یک خطی : 48dp
حداقل پهنا : 288dp
جداکثر پهنا : 568dp
گوشه گرد : 2dp
متن : Roboto Regular 14sp
دکمه عملیاتی : متن با حروف بزرگ، Roboto Medium 14sp
رنگ پس زمینه پیش فرض : 100% ، 323232#

مثال اسنک بار در desktop/تبلت

مشخصات اسنک بار در تبلت/desktop
ارتفاع اسنک بار : 48dp
padding چپ و راست اسنک بار : 24dp
padding بالا و پایین اسنک بار : 14dp
padding چپ دکمه ئر اسنک بار : 48dp

مطلب بعدی -> هدرهای ثانویه

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

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

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

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