• Telegram
  • Google Plus
  • Linked In

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

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

تاریخ درج: خلاصه

طراحی سایت، آموزش متریال دیزاین، نوار سیستمی چیست، ایجاد نوار سیستمی در متریال دیزاین

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

نوار وضعیت/نوار پنجره :

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


نوار وضعیت در Android

نوار پنجره در Chrome


معیارها (اندازه ها) :

ارتفاع نوار وضعیت در اندروید : 24dp
ارتفاع پنجره در کروم : 32dp
نوار وضعیت اندروید در بالای نوار اپلیکیشن
نوار پنجره کروم در بالای نوار اپلیکیشن
کنترل های پنجره در کروم داخل نوار اپلیکیشن

نوار وضعیت تیره :

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



رنگ نوار وضعیت بر پایه یک نمونه گرفته شده از رنگ محتوا


نوار وضعیت نیمه شفاف، 20% سیاه 000000#


نوار وضعیت تیره


نوار وضعیت به رنگ نوار اپلیکیشن ولی مقداری تیره تر


نوار وضعیت روشن :

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



رنگ نوار وضعیت بر پایه یک نمونه گرفته شده از رنگ محتوا


نوار وضعیت نیمه شفاف، 70% سفید FFFFFF#


نوار وضعیت روشن با رنگ زمینه پیش فرض E0E0E0 #


نوار وضعیت روشن به رنگ نوار اپلیکیشن روشن ولی مقداری تیره تر


نوار راهبری در اندروید:

نوار راهبری در اندروید حاوی کنترل های راهبری دستگاه مانند Back ،home و overview میباشد.
ارتفاع : 56dp



تیره


روشن


متغیرهای رنگ :

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



نیمه شفاف


نیمه شفاف بر روی تصویر


شفاف


شفاف بر روی عکس


قفسه سیستم عامل Chrome :

قفسه شامل پیاده ساز برنامه (launcher)، آیکون های برنامه و تنظیمات سیستم در سیستم عامل کروم میباشد.
ارتفاع : 56dp


مثال قفسه سیستم عامل Chrome

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In