این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

مروری بر آیکون‌های مواد - از کجا می‌توان آنها را دریافت کرد و چگونه آنها را با پروژه‌های خود ادغام کرد.

آیکون های متریال چیست؟

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

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

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

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

صدور مجوز

ما این نمادها را در دسترس شما قرار داده ایم تا آنها را تحت مجوز Apache نسخه 2.0 در محصولات خود بگنجانید. با خیال راحت این نمادها و مستندات را در محصولات خود میکس کنید و دوباره به اشتراک بگذارید. ما دوست داریم در برنامه شما در مورد صفحه نمایش اسناد ذکر شود، اما الزامی نیست.

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

مجموعه کامل نمادهای مواد در کتابخانه نماد مواد موجود است. نمادها برای دانلود در SVG یا PNG در دسترس هستند، فرمت هایی که برای پروژه های وب، اندروید و iOS مناسب هستند یا برای گنجاندن در هر ابزار طراح.

دانلود همه چیز

آخرین آرشیو زیپ پایدار (~310 مگابایت) از همه نمادها یا نسخه خونریزی لبه را از master بگیرید.

مخزن گیت

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

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

فونت آیکون برای وب

فونت آیکون مواد ساده ترین راه برای ترکیب آیکون های متریال با پروژه های وب است. ما تمام نمادهای مواد را در یک فونت بسته بندی کرده ایم که از قابلیت های رندر تایپوگرافی مرورگرهای مدرن بهره می برد تا توسعه دهندگان وب به راحتی بتوانند این نمادها را تنها با چند خط کد ترکیب کنند.

استفاده از فونت نه تنها راحت ترین روش است، بلکه کارآمد است و عالی به نظر می رسد:

بیش از 900 نماد همه از یک فایل کوچک.
از سرورهای فونت وب گوگل ارائه می شود یا می تواند خود میزبانی شود.
توسط تمام مرورگرهای وب مدرن پشتیبانی می شود.
رنگی، اندازه و به طور کامل با CSS قرار داده شده است.
مبتنی بر برداری: در هر مقیاسی عالی به نظر می رسد، نمایشگرهای شبکیه چشم، صفحه نمایش های نمایش با dpi پایین.

فونت آیکون در کوچکترین فرمت woff2 تنها 42 کیلوبایت و در فرمت woff استاندارد 56 کیلوبایت وزن دارد. در مقایسه، حجم فایل های SVG فشرده شده با gzip معمولاً حدود 62 کیلوبایت خواهد بود، اما با کامپایل کردن تنها آیکون های مورد نیاز در یک فایل SVG با نماد sprites، می توان این حجم را به میزان قابل توجهی کاهش داد.

روش راه اندازی 1. استفاده از طریق فونت گوگل

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

مشابه سایر فونت‌های وب Google، CSS صحیح برای فعال کردن فونت «Material Icons» مخصوص مرورگر ارائه می‌شود. یک کلاس CSS اضافی به نام .material-icons اعلام خواهد شد. هر عنصری که از این کلاس استفاده کند، CSS صحیحی برای رندر کردن این نمادها از فونت وب خواهد داشت.

روش راه اندازی 2. میزبانی خود

برای کسانی که به دنبال خود میزبانی فونت وب هستند، برخی تنظیمات اضافی لازم است. فونت نماد را در مکانی میزبانی کنید، به عنوان مثال https://example.com/material-icons.woff ، و قانون CSS زیر را اضافه کنید:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

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

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

گنجاندن آیکون ها در صفحه وب خود آسان است. در اینجا یک مثال کوچک وجود دارد:

صورت

face

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

این ویژگی در اکثر مرورگرهای مدرن در دستگاه های دسکتاپ و موبایل پشتیبانی می شود.

مرورگر	نسخه پشتیبان لیگاتورها
گوگل کروم	11
موزیلا فایرفاکس	3.5
اپل سافاری	5
مایکروسافت IE	10
مایکروسافت اج	18
اپرا	15
Apple MobileSafari	iOS 4.2
مرورگر اندروید	3.0

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

طبیعی



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

آیکون های یک ظاهر طراحی شده در طراحی متریال

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

سایز بندی

اگرچه نمادهای موجود در فونت را می‌توان به هر اندازه بزرگ کرد، مطابق با دستورالعمل‌های آیکون‌های طراحی متریال ، توصیه می‌کنیم آنها را در ابعاد 18، 24، 36 یا 48 پیکسل نشان دهیم. پیش فرض 24 پیکسل است.

قوانین CSS برای دستورالعمل های اندازه طراحی متریال استاندارد:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

آیکون های متریال به بهترین شکل 24 پیکسل به نظر می رسند، اما اگر یک نماد باید در اندازه دیگری نمایش داده شود، استفاده از قوانین CSS بالا می تواند کمک کند:

18 پیکسل

face

24 پیکسل

face

36 پیکسل

face

48 پیکسل

face

رنگ آمیزی

استفاده از فونت آیکون امکان استایل دهی آسان به یک نماد در هر رنگی را فراهم می کند. مطابق با دستورالعمل‌های آیکون طراحی متریال ، برای آیکون‌های فعال توصیه می‌کنیم هنگام نمایش این نمادها در پس‌زمینه‌های روشن یا تیره، از سیاه با کدورت 54 درصد یا سفید با شفافیت 100 درصد استفاده کنید. اگر نمادی غیرفعال یا غیرفعال است، به ترتیب برای پس‌زمینه‌های روشن و تاریک، از رنگ سیاه با 26 درصد یا سفید در 30 درصد استفاده کنید.

در اینجا چند نمونه با استفاده از سبک های CSS مواد توضیح داده شده در بالا آورده شده است:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

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

طبیعی

face

معلول

face

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

طبیعی

face

معلول

face

برای تنظیم رنگ آیکون سفارشی، یک قانون CSS تعریف کنید که رنگ مورد نظر را برای فونت مشخص می کند:

.material-icons.orange600 { color: #FB8C00; }

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

طبیعی

face

تصاویر آیکون برای وب

آیکون های متریال نیز به عنوان تصاویر معمولی، هم در فرمت های PNG و هم SVG در دسترس هستند.

SVG

آیکون های متریال به صورت SVG ارائه می شوند که برای پروژه های وب مناسب هستند. نمادهای جداگانه از کتابخانه نمادهای مواد قابل دانلود هستند. SVGها همچنین از مخزن git icons design در مسیر زیر در دسترس هستند:

material-design-icons/src/

به عنوان مثال، نمادهای نقشه ها در src/maps هستند:

material-design-icons/src/maps/

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

PNG

PNG سنتی ترین راه برای نمایش آیکون ها در وب است. بارگیری‌های ما از کتابخانه آیکون‌های مواد، تراکم‌های تکی و دوگانه را برای هر نماد ارائه می‌کنند. در دانلود به ترتیب 1x و 2x نامیده می شوند. آیکون ها نیز در مخزن git در زیر موجود هستند:

material-design-icons/png/

اگر چندین آیکون در یک وب سایت استفاده می شود، ایجاد spritesheets از تصاویر توصیه می شود. برای اطلاعات بیشتر، به توصیه‌های موجود در فهرست sprites در مخزن git مراجعه کنید.

آیکون ها برای اندروید

PNG های مناسب برای اندروید از کتابخانه آیکون های مواد در دسترس هستند. اینها در تمام تراکم های صفحه نمایش پشتیبانی می شوند، بنابراین باید در هر دستگاهی خوب به نظر برسند.

آیکون ها نیز در مخزن متریال دیزاین icons git با همان ترکیب رنگ ها و اندازه ها به نام های زیر موجود هستند:

Vector Drawable در حال حاضر فقط به عنوان یک نماد سیاه 24dp در دسترس است. این برای سازگاری با استانداردترین اندازه نماد ما است. برای رندر کردن نماد به رنگی دیگر، از رنگ آمیزی قابل ترسیم موجود در Android Lollipop استفاده کنید.

هنگام استفاده از Vector Drawable، ممکن است نیازی به افزودن PNG چگالی xxxhdpi نباشد، زیرا بعید است دستگاهی که از آن تراکم صفحه پشتیبانی می‌کند از Drawable‌های برداری پشتیبانی نمی‌کند.

آیکون ها برای iOS

آیکون های متریال نیز در برنامه های iOS به خوبی کار می کنند. هم در کتابخانه آیکون های مواد و هم در مخزن git ، این نمادها در مجموعه های تصویری Xcode بسته بندی می شوند که به راحتی با کاتالوگ های دارایی Xcode (xcassets) کار می کنند. این مجموعه‌های تصویری را می‌توان با کشیدن آن‌ها در Xcode در کاتالوگ دارایی یا با کپی کردن پوشه در پوشه xcasset به هر کاتالوگ دارایی Xcode اضافه کرد.

مجموعه تصاویر iOS

مجموعه تصاویر شامل تصاویر با تراکم تک، دو و سه گانه (1x، 2x، 3x) است، بنابراین آنها بر روی تمام تراکم های صفحه نمایش iOS شناخته شده کار می کنند. هر دو نماد سیاه و سفید ارائه شده است، اما توصیه می کنیم از imageWithRenderingMode UIImage با UIImageRenderingModeAlwaysTemplate استفاده کنید که به تصویر اجازه می دهد به عنوان یک ماسک آلفا استفاده شود که می تواند به هر رنگ ممکن رنگ آمیزی شود.

مثال Objective-C:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

مثال سوئیفت:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

نمادها در RTL

زبان هایی مانند عربی و عبری از راست به چپ (RTL) خوانده می شوند. برای زبان‌های RTL، رابط‌های کاربری باید برای نمایش بیشتر عناصر در RTL منعکس شوند. هنگامی که یک رابط کاربری برای RTL منعکس می شود، برخی از نمادها نیز باید آینه شوند. هنگامی که متن، طرح‌بندی و نمادنگاری برای پشتیبانی از رابط‌های کاربری راست به چپ آینه می‌شوند، هر چیزی که به زمان مربوط می‌شود باید به‌عنوان حرکت از راست به چپ نشان داده شود. به عنوان مثال، جلو به سمت چپ، و به عقب به سمت راست اشاره می کند. با این حال، توجه داشته باشید که زمینه ای که نماد در آن قرار می گیرد نیز بر روی آینه بودن یا نبودن یک نماد تأثیر می گذارد.

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

آیکون های RTL در اندروید

این مقاله توسعه دهنده اندروید به طور عمیق نحوه پیاده سازی رابط های کاربری RTL را شرح می دهد. به‌طور پیش‌فرض در اندروید، زمانی که جهت چیدمان منعکس می‌شود، نمادها منعکس نمی‌شوند. شما باید به طور خاص آیکون های مناسب را در صورت نیاز، با ارائه دارایی های تخصصی برای زبان های RTL، یا با استفاده از عملکرد چارچوب برای منعکس کردن دارایی ها، منعکس کنید.

برای ارائه دارایی های تخصصی برای زبان های RTL، می توانید از واجد شرایط ldrtl در فهرست های منابع، مانند res/drawable-ldrtl/ استفاده کنید. منابع داخل این دایرکتوری ها فقط برای زبان های RTL استفاده خواهند شد. برای دستگاه‌هایی که Android API 19 یا جدیدتر دارند، این چارچوب ویژگی autoMirrored را برای Drawables نیز ارائه می‌کند. وقتی این ویژگی روی true تنظیم شود، قابل ترسیم به طور خودکار در زبان‌های RTL منعکس می‌شود.

استفاده از AutoMirrored:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

اگر استفاده از AutoMirrored یا ارائه منابع Drawable جایگزین گزینه‌ای نیست، ویژگی ImageView scaleX همچنین می‌تواند برای انعکاس نقشه‌های ترسیمی (به عنوان مثال، با ارائه یک طرح‌بندی خاص RTL در یک فهرست res/layout-ldrtl ) استفاده شود.

انعکاس در فایل طرح بندی:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

در نهایت، ترسیم‌ها را می‌توان به صورت برنامه‌ریزی منعکس کرد.

جهت چیدمان را با استفاده از getLayoutDirection به صورت دستی بررسی کنید:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

انعکاس محتویات ImageView از طریق برنامه:

imageView.setScaleX(-1);

نمادهای RTL در iOS

iOS مفهوم UISemanticContentAttribute را دارد که به هر نما متصل است. این می تواند unspecified باشد، forceLeftToRight ، forceRightToLeft ، playback یا spatial . iOS از این مقدار و (تنظیم چپ به راست (LTR)/RTL دستگاهی که رابط را ارائه می‌کند، استفاده می‌کند.

به طور پیش فرض، محتوای معنایی تصاویر روی unspecified تنظیم شده است. این باعث می شود که آنها در حالت RTL منعکس شوند. اگر نمی خواهید یک نماد هرگز آینه شود، باید به صراحت آن را روی forceLeftToRight تنظیم کنید. اپل برخی از استثنائات را که نباید آینه‌بندی شوند، اعلام می‌کند، مانند پخش رسانه (سریع به جلو، عقب و غیره)، نت‌های موسیقی، تصاویر نشان‌دهنده گذشت زمان و غیره.

مثال Objective-C:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

مثال Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

برای مستندات عمیق تر در مورد نحوه پیاده سازی RTL در iOS و macOS، لطفاً اسناد RTL اپل را مرور کنید.

محتوای معنایی در iOS 9 اضافه شد. اگر از نسخه‌های قبلی iOS پشتیبانی می‌کنید، چارچوب بین‌المللی‌سازی مواد برخی از عملکردها را به iOS 8 گزارش می‌دهد.

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

ما مقاله زیر را به عنوان آغازگر به RTL در وب توصیه می کنیم: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks .mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

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

مثال زیر نحوه پیاده سازی یک قانون ساده RTL CSS را نشان می دهد. همچنین می توانید آن را در کدپن مشاهده کنید .

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

آیکون های RTL خود را با استفاده از ImageMagick ایجاد کنید

اگر بازتاب آیکون ها در کد گزینه ای نیست، می توانید از ImageMagick برای بازتاب افقی تصویر استفاده کنید.

convert -flop my_icon.png my_icon_rtl.png

کدام نمادها باید برای RTL منعکس شوند؟

در اینجا لیستی از نمادهایی وجود دارد که می توانند به صورت برنامه نویسی در RTL منعکس شوند:


arrow back	arrow back ios	فلش رو به جلو
فلش رو به جلو ios	فلش سمت چپ	فلش سمت راست
تکلیف	بازگشت تکلیف	بک اسپیس
باتری ناشناخته	تماس برقرار شد	ادغام تماس
تماس از دست رفته	تماس از دست رفته خروجی	تماس دریافت شد
تقسیم تماس	شورون چپ	شورون راست
حالت کروم خوان	دستگاه ناشناخته	dvr
note یادداشت رویداد	لیست پخش ویژه	ویدیوی ویژه
صفحه اول	پرواز زمین	پرواز برخاست
کاهش تورفتگی قالب	افزایش تورفتگی قالب	لیست فرمت گلوله شده
به جلو	توابع	ورودی
صفحه کلید	برچسب	برچسب مهم است
طرح کلی برچسب	آخرین صفحه	اندازی راه اندازی
لیست	کمک زنده	اشتراک‌گذاری صفحه نمایش تلفن همراه
نمودار چند	پیش از این پیمایش کنید	پیمایش بعدی
هفته آینده	یادداشت	باز کردن در جدید
افزودن لیست پخش	صف موسیقی	انجام دادن
پاسخ	پاسخ همه	اشتراک‌گذاری صفحه
ارسال	متن کوتاه	نمودار نمایش
مرتب کردن	ستاره نیمه	موضوع
trending flat	toc	روند نزولی
در حال افزایش است	واگرد	مشاهده لیست
مشاهده لحاف	wrap text