• Telegram
  • Google Plus
  • Linked In

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

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

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

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

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

کارت ها میتوانند با استفاده از بلوک های محتوا ساخته شوند که شامل موارد زیر میباشند :

  • یک هدر دلخواه
  • یک عنوان اصلی
  • رسانه (rich media)
  • متن پشتیبان
  • عملیات ها
این بلوک ها میتوانند جهت ترویج انواع مختلف محتوا استفاده شوند. برای مثال، اعداد میتوانند از طریق افزایش مقیاس نوشتاریشان دارای تأکید شوند.
در تبلت/desktop کارت ها باید از خط محوری 24dp پیروی کنند.


padding بالای عنوان اصلی : 24dp
padding پایین عنوان اصلی : 16dp
padding ردیف دکمه عملیاتی : 8dp
padding بالای متن پشتیبان : 16dp
padding پایین متن پشتیبان : 24dp

انواع بلوک های محتوا :

رسانه :
نرخ تصویر 16:9 یا 1:1 (پیشنهاد شده)
عملیات ها :
padding : 8dp
عنوان/متن اصلی :
عنوان : 24sp یا 14sp
sub-title(زیر عنوان) : 14sp
padding چپ و راست : 16dp در موبایل
در تبلت/desktop کارت ها باید از خط محوری 24dp پیروی کنند.
padding بالا : 16dp یا 24dp (در صورت وجود عنوان اصلی بزرگ)
padding پایین : 16dp (اگر عملیات اضافی یا متن پشتیبان وجود داشته باشد) یا 24dp (بدون وجود عملیات یا متن پشتیبان)
متن پشتیبان :
متن پشتیبان : 14sp
padding چپ و راست : 16dp در موبایل
در تبلت/desktop کارت ها باید از خط محوری 24dp پیروی کنند.
padding بالا : 16dp
padding پایین :24dp ( اگر عملیات اضافی یا متن وجود داشته باشد 16dp)
نقاط گلوله ای (bullet) ولی نه متن آن ها، تصاویر و دکمه ها ممکن است خارج از padding 16dp قرار بگیرند.
حاشیه های کارت در موبایل :
padding از لبه صفحه نمایش تا کارت : 8dp
فضای بین کارت ها : 8dp
برجستگی(elevation) :
میزان برجستگی کارت در حالت معمولی : 2dp
میزان برجستگی کارت در حالت بالا رفته : 8dp
کارت ها یک برجستگی پیش فرض به اندازه 2dp دارند.
در desktop کارت ها میتوانند در حالت معمولی برجستگی به اندازه 0dp داشته باشند و در حالت hover به اندازه 8dp بالا می آیند.

میزان برجستگی کارت در حالت معمولی (2dp) و در حالت بالا آمده (8dp)


میزان برجستگی کارت در حالت معمولی (0dp) و در حالت بالا آمده (8dp) فقط در desktop


نمونه یک کارت در desktop با میزان برجستگی در حالت معمولی 0dp (عکس سمت چپ) و میزان برجستگی در حالت hover به اندازه 8dp (عکس سمت راست)

ترکیب های بلوک های محتوا :

مثال های زیر ترکیب های ممکن با استفاده از بلوک های محتوا را نشان میدهند :
ناحیه رسانه :
- نرخ 16:9
متن پشتیبان :
- متن : 14sp
- padding چپ و راست : 16dp
- padding بالا و پایین : 16dp



ناحیه آواتار(شکل)، عنوان و زیر عنوان :
- ارتفاع : 72dp
- padding چپ و راست : 16dp
- padding بالا و پایین : 16dp
ناحیه رسانه :
- نرخ 16:9
متن پشتیبان :
- متن : 14sp
- padding چپ و راست : 16dp
- padding بالا و پایین : 16dp
عملیات ها :
padding : 8dp


ناحیه آواتار(شکل)، عنوان و زیر عنوان :
- ارتفاع : 72dp
- padding چپ و راست : 16dp
- padding بالا و پایین : 16dp
ناحیه رسانه :
- نرخ 16:9
عملیات ها :
padding : 8dp
padding بین عملیات ها : 4dp



ناحیه رسانه :
- نرخ 16:9
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding پایین : 16dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding پایین : 16dp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 16:9
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding پایین : 16dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding پایین : 16dp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp
متن پشتیبان در حالت گسترده :
- متن : 14sp
- padding بالا : 16dp
- padding پایین : 24dp
- padding چپ و راست : 16dp



متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding پایین : 16dp
- padding چپ و راست : 16dp
عنوان ثانویه (sub-title) :
- padding بالا : 12dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding پایین : 16dp
- padding چپ و راست : 16dp
متن پشتیبان :
- متن : 14sp
- padding چپ و راست : 16dp
- padding بالا و پایین : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 16:9
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 1:1
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding پایین : 16dp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 1:1
متن اصلی :
- متن : 24sp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 1x
- padding بالا : 16dp
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 3/8x
- padding بالا : 16dp
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 2x
- padding بالا : 16dp
متن اصلی :
- متن : 24sp
- padding بالا : 24dp
- padding چپ و راست : 16dp
متن ثانویه (sub-text) :
- متن : 14sp
- padding چپ و راست : 16dp
عملیات ها :
padding : 8dp



ناحیه رسانه :
- نرخ 3x
- padding : 16dp
متن اصلی :
- متن : 24sp
عملیات ها :
padding در اطراف : 8dp + 16dp


مطلب بعدی -> تراشه ها (Chips)

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

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

  • Telegram
  • Google Plus
  • Linked In