راهنمای نمادهای مواد

نمادهای مادی چیست؟

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

محور FILL

Fill به شما این امکان را می دهد که سبک آیکون پیش فرض را تغییر دهید. یک نماد می‌تواند هم حالت پر نشده و هم حالت پر را ارائه دهد.

برای انتقال یک حالت، از محور fill برای انیمیشن یا تعامل استفاده کنید. مقادیر 0 برای پیش فرض یا 1 برای کاملاً پر شده است. همراه با محور وزن، پر نیز بر ظاهر نماد تأثیر می گذارد.

محور wght

وزن وزن ضربه ای نماد را با طیفی از وزن ها بین نازک (100) و پررنگ (700) مشخص می کند. وزن همچنین می تواند بر اندازه کلی نماد تأثیر بگذارد.

محور GRAD

تجسم محور درجه

وزن و درجه بر ضخامت نماد تأثیر می گذارد. تنظیمات درجه نسبت به تنظیم وزن دانه بندی بیشتری دارند و تأثیر کمی بر اندازه نماد دارند.

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

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

تاکید کم (مثلاً درجه 25-): برای کاهش تابش نور برای یک نماد روشن در پس زمینه تیره، از درجه پایین استفاده کنید.

تاکید زیاد (مثلاً نمره 200): برای برجسته کردن یک نماد، نمره مثبت را افزایش دهید.

محور opsz

اندازه های نوری از 20dp تا 48dp می باشد.

برای اینکه تصویر در اندازه های مختلف یکسان به نظر برسد، وزن ضربه (ضخامت) با مقیاس اندازه نماد تغییر می کند. اندازه اپتیکال راهی برای تنظیم خودکار وزن ضربه هنگام افزایش یا کاهش اندازه نماد ارائه می دهد.

دریافت نمادهای مادی

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

صدور مجوز

نمادهای مواد تحت مجوز آپاچی نسخه 2.0 در دسترس هستند.

مرور و دانلود آیکون های فردی

مجموعه کامل نمادهای مواد از کتابخانه نمادهای مواد در قالب‌های SVG یا PNG در دسترس است. آنها برای وب، اندروید و iOS یا با هر ابزار طراح مناسب هستند.

مخزن Git

مخزن git شامل مجموعه کاملی از نمادهای مواد در قالب SVG است.

$ git clone https://github.com/google/material-design-icons

استفاده از نمادهای مادی

استفاده در وب

فونت Material Symbols ساده ترین راه برای ترکیب نمادهای مواد در پروژه های وب است.

آیکون ها در یک فونت بسته بندی می شوند تا توسعه دهندگان وب به راحتی بتوانند این نمادها را تنها با چند خط کد ترکیب کنند.

فونت استاتیک با فونت گوگل

ساده ترین راه برای تنظیم فونت های نماد برای استفاده در هر صفحه وب، از طریق فونت های گوگل است. این خط تکی از HTML را وارد کنید:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

قطعه بالا شامل پیکربندی پیش‌فرض برای هر محور ، با وزن 400، اندازه نوری در 48، درجه 0 و fill (همچنین 0) است.

از Fonts CSS API برای پیکربندی مقادیر محورهای مختلف استفاده کنید. به نمونه های زیر دقت کنید:

فونت متغیر با فونت گوگل

اگر می‌خواهید نمادها را از طریق CSS متحرک کنید، یا می‌خواهید کنترل دقیق‌تری روی ویژگی‌های نماد داشته باشید، از فونت متغیر Google Symbols استفاده کنید. با استفاده از محدوده ها، در قالب number..number ، می توانیم کل فونت متغیر را بارگذاری کنیم. پشتیبانی Can I Use's Variable Fonts را بررسی کنید تا متوجه شوید که آیا کاربران شما قادر به بارگیری فونت متغیر هستند، به احتمال زیاد. در اینجا چند نمونه آورده شده است:

یا حتی آنها را متحرک کنید!

خود میزبانی فونت

فونت نماد را در مکانی که کنترل می‌کنید میزبانی کنید تا تصمیم بگیرید چه زمانی دارایی را به‌روزرسانی کنید. به عنوان مثال اگر URL https://example.com/material-symbols.woff است، سپس قانون CSS زیر را اضافه کنید:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

برای رندر صحیح فونت، قوانین CSS را برای رندر کردن آیکون اعلام کنید. این قوانین معمولاً به عنوان بخشی از شیوه نامه Google Fonts API ارائه می شوند، اما باید به صورت دستی در پروژه های شما در هنگام میزبانی شخصی گنجانده شوند:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

استفاده از آیکون ها در HTML

نمونه‌های ارائه‌شده در بالا از یک ویژگی تایپوگرافی به نام لیگاتور استفاده می‌کنند که به سادگی با استفاده از نام متنی نماد نماد را ارائه می‌دهد. مرورگر وب به طور خودکار پیوند متن را با بردار نماد جایگزین می کند و کد قابل خواندن تری نسبت به مرجع کاراکتر عددی معادل ارائه می دهد. برای مثال، در HTML خود، به جای arrow_forward &#xE5C8; . برای نمادهای دیگر، از حروف مار نام نماد استفاده کنید (یعنی جاهای خالی را با زیرخط جایگزین کنید).

این ویژگی در اکثر مرورگرهای مدرن در دستگاه های دسکتاپ و موبایل پشتیبانی می شود. به پشتیبانی لیگاتورهای Can I Use مراجعه کنید تا ببینید آیا کاربران شما قادر به پردازش لیگاتورها هستند یا خیر، به احتمال زیاد آنها می توانند.

اگر نیاز به پشتیبانی از مرورگرهایی دارید که از لیگاتور پشتیبانی نمی‌کنند، نمادها را با استفاده از ارجاعات نویسه‌های عددی (معروف به نقاط کد) مانند مثال زیر مشخص کنید:

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

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

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

در اندروید استفاده کنید

در کتابخانه نمادهای مواد، همه نمادها با فرمت Vector Drawable هستند. برای کسب اطلاعات بیشتر، مستندات Android Vector Asset Studio را بررسی کنید.

در iOS استفاده کنید

آیکون ها در قالب Apple Symbols نیز موجود هستند. برای کسب اطلاعات بیشتر در مورد آنها، نمای کلی و راهنمای استفاده از نمادهای اپل را بررسی کنید.

استفاده در فلاتر

پشتیبانی فلوتر برای Material Symbols برنامه ریزی شده است. منتظر بروزرسانی ها باشید.