آیکون
آیکون‌های دیزاین سیستم سنّت تصاویری کوچک برای نمایش نمادینِ کنش‌ها، مفهوم پیام‌ها و شفاف‌کنندهٔ مسیر راهبری در بخش‌های مختلف رابط کاربر یک محصول‌اند. مشترک بودن این تصاویر با تجربهٔ متداول کاربران در محصولات دیجیتال، درک المان‌های تعاملی را آسان، لذت‌بخش و دسترس‌پذیر می‌کند.
کاربرد
آیکون‌ها با قرارگیری در کامپوننت‌های مختلف دیزاین سیستم به شفافیت نقش تعاملی و ارتباطی آن‌ها کمک می‌کنند. در دکمه‌ها، دکمه‌های آیکون‌دار و دکمه آیکون انتظار کاربر را برای تعاملی‌بودن تأیید و در فیلدهای ورودی، دادهٔ مورد انتظار محصول از کاربر را شفاف می‌کنند. همچنین با استفادهٔ پیش‌فرض در بردکرام‌ها، ردیف‌ها و فیلدهای انتخاب مسیر راهبری را پیش‌بینی‌پذیر می‌سازند. با استفاده از آیکون‌هایی که کارشناس دسترس‌پذیری تأیید کرده است، می‌توان در فضای مختص لیبل‌ها یا متن دکمه‌ها صرفه‌جویی کرد.
دیزاین
مفهوم نمادین
آیکون‌های دیزاین سیستم سنّت ظاهری آشنا، سبک و انعطاف‌پذیر دارند. در گام اول مفاهیم با توجه به تجربهٔ مشترک و فراگیر در محصولات دیجیتال طراحی شده‌اند. در گام بعدی آیکون‌های جدید با حفظ یکپارچگی در استایل طراحی بصری، اختصار در مفهوم ارائه‌شده و با خوانایی متمایز به مجموعه اضافه می‌شوند.
این یکپارچگی با استفاده از اشکال هندسی مشخص، چیدمانی با حداکثر تقارن و خطوط موازی تأمین می‌شود.
بوم دیزاین
بوم دیزاین آیکون‌ها در فضایی مربع با ابعاد 24dp در نظر گرفته می‌شود و خطوط و اشکال هندسی سازندهٔ آیکون محدود به آن است. این اجزاء معمولا در محدودهٔ مربعی 22dp در مرکز بوم قرار می گیرند و در مواردی که پیچیدگی دیزاین و تأمین خوانایی آیکون فضایی بیشتر نیاز دارد این محدوده به ابعاد 24dp در یک بعد افزایش می‌یابد.
شکل‌های هندسی
دایره، مربع، مستطیل افقی، عمودی و مورب شکل‌های هندسی اصلی‌ای هستند که با توجه به چیدمان مناسب برای طراحی نماد انتخاب‌شده به‌کار می‌روند. با حفظ این شکل‌ها در زمینهٔ طراحی، ساختاری هماهنگ و انعطاف‌پذیر در طراحی ایجاد می‌شود که چیدمان اجزاء آیکون را در فضای بوم تنظیم می‌کند.
با استفاده از سایر شکل‌های هندسی مانند مثلث، چهارضلعی و چند ضلعی‌های منتظم و حفظ تقارن حداکثری، اجزاء آیکون طراحی می‌شوند و در ساختار شکل‌های هندسی اصلی کنار هم قرار می‌گیرند.
ضخامت خط
ضخامت خط در بخش‌های اصلی آیکون‌ها 2dp است و در طراحی‌هایی با اجزاء پیچیده این ضخامت در بخش‌های غیر اصلی به 1.5dp و 1dp کاهش می‌یابد.
گوشه‌ها
شعاع گوشه‌های آیکون‌ها در انتهای خطوطی با زاویهٔ ۹۰ درجه و زوایای بیرونی شکل‌ها 2dp است. در بخش‌هایی که خطوط با زاویه‌ای غیر از ۹۰ درجه خمیده شده یا با منحنی‌ها تلاقی دارند و همچنین زوایای درونی شکل‌ها، گردی گوشه‌ها از 1dp تا 0dp انتخاب می‌شود. تمامی خطوط اطراف اشکال به گوشهٔ کاملا گرد منتهی می‌شوند به‌غیر از مواردی که شکل یا خطی دیگر با زاویه‌ای غیر از ۹۰ درجه آن را بریده باشد.
استایل
آیکون‌های سنّت با ۲ استایل توپر و توخالی طراحی می‌شوند که با توجه به محل کاربرد در محصول می‌توان از هر دوی آن‌ها استفاده کرد.
مقیاس
آیکون‌ها در مقیاس 24dp در مختصات صحیح پیکسل‌های بوم طراحی شده‌اند تا کاملاً شفاف باشند. Perfect Pixel بودن اجزاء آیکون‌ها کمک می‌کند تا در مقیاس‌های کوچک‌تر و بزرگ‌تر از 24dp تا حد زیادی از اعوجاج (Distortion) این اجزاء جلوگیری شود.
| مقیاس | نام مقیاس |
|---|---|
| 16dp | xxs |
| 18dp | xs |
| 20dp | sm |
| 24dp | md |
| 32dp | lg |
| 40dp | xlg |
قواعد نام‌گذاری
نام آیکون‌ها نباید به کاربرد آن‌ها در سیستم اشاره کند، بلکه باید آن‌ها را توصیف کند.
برای نام‌گذاری آیکون‌ها در سنّت از فرمول زیر استفاده می‌شود:
{object-names}-{shape?}-{size?}-{multiple?}-{variant?-number?}-{outlined?}-{thickness?}| Keyword | کاربرد |
|---|---|
{object-names} | توصیف از چپ به راست آبجکت استفاده‌شده در آیکون که بین آن‌ها با "-" فاصله‌گذاری شده است. |
{shapes} | توصیف شکل پس‌زمینهٔ آیکون. (square, circle, card and etc.) |
{size} | توصیف اندازهٔ آیکون (small, medium, large and etc.) |
{multiple} | توصیف تکرار در آیکون. (در صورتی که طرح اصلی تکرار شده باشد) |
{variant-number} | گاهی چندین طرح از یک آیکون موجود است که برای تمایز بین آن‌ها از کلیدواژهٔ variant استفاده می‌شود. در صورتی که چندین گونهٔ مختلف از آیکون وجود داشت، شمارهٔ گونه هم نوشته می‌شود. مثال: *-variant-1, *-variant-2 and etc. |
{outlined} | توصیف اینکه آیکون خطی طراحی شده است یا نه. در صورت خطی بودن آیکون در انتها کلیدواژهٔ "o-" نوشته می‌شود. |
{thickness} | توصیف ضخامت آیکون. (thick or thin) |