برگه های تحتانی شرطی (modal) در طراحی متریال

تاریخ انتشار: 12 بهمن 1394

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

برگه های تحتانی شرطی (modal bottom sheets) :

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

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

برگه تحتانی شرطی با مجموعه ای از عملیات ها در یک شبکه (grid)

کاربرد :

برگه های تحتانی شرطی میتوانند :

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

برگه های تحتانی شرطی میتوانند نام های طولانی در منو، آیتم های منو که دارای زیرمتن (subtext) میباشند و آیکون های همراه با آیتم های منو را نمایش دهند.
در زمان نمایش آیتم های منو، برگه تحتانی شرطی که در حالت باز میباشد، در حداقل فاصله 8dp از انتهای نوار اپلیکیشن باقی میماند.

برگه تحتانی میتواند آیتم های منو را به همراه آیکون استفاده کند.

آیتم های منو به همراه زیر متن

لینک دهی عمیق :

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

یک برگه تحتانی با لینک عمیق میتواند توضیحات مربوط به یک لغت را بدون نیاز به باز کردن برنامه دیکشنری نمایش دهد.

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

برگه های تحتانی ممکن است حاوی لینک هایی باشند که یک راهبری عمیق در داخل برنامه ای دیگر را انجام میدهند.
این لینک ها میتوانند :

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

با این حال، این لینک های عمیق ممکن است به کاربر اجازه راهبری به سمت بالا در سلسله مراتب برنامه را ندهند. آن ها میتاونند در سطح اولیه باقی بمانند، به سطوح پایین تر بروند یا دوباره به همان سطح اولیه برگردند.
لینک های عمیق میتوانند کاربر را کاملاً از برگه تحتانی خارج کرده و به یک برنامه دیگر ببرند.
جهت فعال کردن راهبری به سمت بالا از لینک های عمیق در برگه های تحتانی، یک لینک واضح (explicit) تعریف کنید تا برنامه را از طریق یک منوی سرریز (overflow) باز نماید. عملیات های داخل برگه های تختانی دارای لینک های عمیق، میتوانند باعث باز شدن برنامه parent شوند مانند عملیات اضافه کردن مخاطب (add contact)

موبایل :

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

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

ارتفاع برگه تحتانی باید با میزان محتوای آن هماهنگ باشد.

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

تبلت/desktop :

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

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