راهنمای طراحی آیکن های سیستم در متریال دیزاین گوگل

آیکن‌های سیستم (System icons)

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

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

• آیکن‌های سیستم آماده و پیش‌فرض متریال دیزاین گوگل را می‌توانید از اینجا دانلود کنید.

اصول طراحی

شکل‌ها مشخص، جسورانه و هندسی هستند.

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

ساده

قابل درک

قابل اجرا

سازگار

خطوط راهنما (گرید)، تناسب، و اندازه

گرید با واحد DP

آیکن‌های سیستم در اندازه ۲۴dp نمایش داده می‌شوند. هنگام خلق این آیکن‌ها، باید به این نکته توجه شود که فرایند طراحی به منظور بالا بردن دقت در کامل بودن پیکسل‌ها، در مقیاس ۱۰۰٪ انجام گیرد.

از آنجایی که ماوس و صفحه کلید روش‌های ورود اطلاعات اولیه هستند، اندازه‌گیری ممکن است به تراکم صفحه‌آرایی و سامان‌دهی (Layout) محدود شود. برای صفحه‌آرایی‌های متراکم روی دسکتاپ، آیکن‌ها می‌توانند تا ۲۰dp کوچک شوند.

در مقیاس ۱۰۰٪

در مقیاس ۸۰۰٪

گرید متراکم در ابعاد ۲۰dp و مقیاس ۱۰۰%

گرید متراکم در ابعاد ۲۰dp و مقیاس ۱۰۰%

خطوط راهنمای طراحی آیکن

خطوط راهنما یا گرید (grid) آیکن به منظور تسهیل استحکام و ایجاد مجموعه‌ای از قوانین برای مشخص کردن محل قرارگیری هر عنصر گرافیکی توسعه یافته‌اند. این استانداردسازی سیستمی منطقی و در عین حال انعطاف‌پذیر را به وجود می‌آورد.

خطوط راهنما (Grid)

خطوط کلیدی (Keylines)

منطقه محتوا (Content area)

محتوای یک آیکن باید درون منطقه اصلی (Live area) باقی بماند. تنها اگر وزن بصری اضافی نیاز بود محتوا می‌تواند تا منطقه حاشیه (trim are) ادامه یابد. هیچ بخشی از آیکن را در خارج از منطقه حاشیه قرار ندهید.

صفحه‌آرایی‌های (Layouts) متراکم

برای صفحه‌آرایی‌های متراکم روی دسکتاپ، آیکن‌ها ممکن است تا اندازه ۲۰dp همراه با منطقه حاشیه در اندازه ۲dp اطراف آیکن کوچک شوند.

منطقه اصلی (Live area)

محتویات آیکن در اندازه ۲۰dp x ۲۰ dp، با حاشیه ای به اندازه ۴dp در پیرامون آن، محاط شده است.

منطقه حاشیه (Trim area)

فضای خالی در اندازه ۴ پیکسل، منطقه حاشیه را در اطراف فضای ۲۰dp x ۲۰dp منطقه اصلی می‌سازد.

منطقه اصلی متراکم

محتویات آیکن در اندازه ۱۶dp x ۱۶dp، با حاشیه ای به اندازه ۲dp در پیرامون آن، محاط شده است.

منطقه حاشیه متراکم

فضای خالی در اندازه ۲ پیکسل، منطقه حاشیه را در اطراف منطقه اصلی می‌سازد.

شکل‌های خطوط کلیدی (Keyline shapes)

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

مربع
ارتفاع: ۱۸ dp
عرض: ۱۸ dp

دایره
قطر: ۲۰ dp

مستطیل عمودی
ارتفاع: ۲۰ dp
عرض: ۱۶ dp

مستطیل افقی
ارتفاع: ۱۶ dp
عرض: ۲۰ dp

هندسه

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

ساختار

ترکیب‌بندی

آناتومی آیکن‌های سیستم

۱. انتهای استروک‌ها (Stroke terminal)

۲. گوشه (Corner)

۳. منطقه داخلی (Counter area)

۴. استروک (Stroke)

۵. استروک داخلی (Counter stroke)

۶. منطقه مرزی (Bounding area)

گوشه‌ها

حفظ یک شعاع ثابت در گوشه‌ها، یکی از کلیدهای یک‌پارچه‌سازی خانواده آیکن‌های سیستم است. گوشه‌های آیکن با شعاعی به اندازه ۲dp گرد می‌شوند، اما گوشه‌ استروک‌ را گرد نکنید. (استروک شکل‌ها حداکثر تا ۲dp گرد می‌شود)

گوشه‌های داخلی باید قائمه (زاویه ۹۰ درجه) باشند. گوشه‌های داخلی شکل‌ها را گرد نکنید.

گوشه‌های خارجی گرد شده با شعاع ۲dp

گوشه‌های داخلی با زاویه قائمه

استروک‌ها (Strokes)

وزن ثابت استروک‌ها، کلید دیگری از یک‌پارچه‌سازی خانواده آیکن‌های سیستم است. برای تمامی استروک‌ها شامل منحنی‌ها، زوایا و تمامی استروک‌های داخلی و خارجی، عرضی به اندازه ۲dp را در نظر بگیرید.

ثبات

منحنی‌ها و زوایا

انتهای استروک‌ها

استروک داخلی

اصلاحات بصری (Optical corrections)

گاهی افزودن پیچیدگی‌های ظریف به خوانایی آیکن می‌افزاید. هنگامی که استفاده از جزییات پیچیده اجتناب ناپذیر است، تناسبات باید تنظیم‌ شده باشند.

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

پیچیدگی

در آیکن گیره کاغذ برای حفظ تناسب در منحنی‌های متعدد در فضای ۲۴dp x ۲۴dp آیکن، به جای استروک با عرض ۲dp، از استروک با عرض ۱.۵dp استفاده شده‌ است.

مقیاس کوچک

در آیکن بلندگو از استروکی با عرض ۱.۵dp برای نشان‌دادن امواج صدا در فضای ۲۴dp x ۲۴dp آیکن استفاده شده است.

فضای تنفس (Clearance)

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

فضای تنفس
آیکن: ۲۴dp
محدوده تماس: ۴۸dp

جای‌گیری (Placement)

فضای تنفس برای آیکن‌های متراکم
آیکن: ۲۰dp
محدوده تماس: ۴۰dp

مثال‌های گویا

ثبات و یک‌دست بودن، در درک آیکن‌ها  به کاربر کمک می‌کند. هرجا که ممکن است در اپلیکیشن‌های مختلف از آیکن‌های سیستم موجود و ثابت استفاده کنید.

از استروکی با وزن ثابت و انتهای قائمه استفاده کنید.

از استروک با وزن متغیر یا با انتهای گرد شده استفاده نکنید.

آیکن‌ها را استوار و از نمای رو به رو نمایش دهید.

آیکن‌ها را کج نکنید، نچرخانید و یا ظاهر سه‌بعدی به آنها نبخشید.

از آیکن‌های ساده شده به منظور وضوح و خوانایی بالاتر استفاده کنید.

از جزییات و پیچیده کردن آیکن‌ها دوری کنید.

آیکن‌ها را گرافیکی و مشخص بسازید.

از وزن‌های ظریف و باریک در استروک‌ها استفاده نکنید.

از شکل‌های هندسی و سازگار با طرح استفاده کنید.

از شکل‌های آزاد و طبیعی استفاده نکنید.

آیکن‌ها را روی مختصات پیکسل‌ قرار دهید. به این معنا که اعداد روی محور‌های X و Y صحیح باشند و اعشار نداشته باشند.
آیکن‌ها باید طول و عرض برابر داشته باشند (مثلا ۲۴*۲۴) تا شکل آنها تغییر نکند و تحریف نشود.

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

آیکن‌نگاری انسان

آناتومی آیکن انسان

۱. سر

۲. گردن

۳. بالاتنه

۴. بازو

۵. پا

تمام بدن

بالاتنه

فرم

نمونه تمام بدن

نمونه بالاتنه

نمونه بریده شده

نمونه بخش‌های داری جزییات

تمام بدن

نمونه‌های تمام بدن

هم‌ترازی بصری

بالاتنه

نمونه‌های بالاتنه

هم‌ترازی بصری

محدوده دربرگیرنده (Contained)

نمونه‌های بریده شده

بخش‌های دارای جزییات

نمونه‌های بخش‌های دارای جزییات

قوانین آیکن انسان

از استروکی با وزن ثابت و انتهای قائمه (بازوها و پاها) استفاده کنید.

از استروک با وزن متغیر یا با انتهای گرد شده (بازوها و پاها) استفاده نکنید.

عناصر را به منظور وضوح بالاتر، هم‌تراز کنید. (هم‌ترازی سر با انتهای بازو در عکس)

هیچ بخشی از بازوها یا پاها را برش نزنید.

عناصر را به صورت کامل درون شکل محاطی قرار دهید.

با عناصرخطوط مرزی شکل محاطی را قطع نکنید.

عنصر انسان را هنگامی اضافه کنید که به مفهوم‌تر شدن آیکن کمک می‌کند.

عنصر انسان را هنگامی که تنها باعث پیچیده‌تر شدن آیکن می‌شود اضافه نکنید.

از ساده‌ترین شکل‌ها برای بازنمایی کاراکتر‌های انسانی استفاده کنید.

از اشیای بی‌جان برای بازنمایی کاراکتر‌های انسانی استفاده نکنید.

رنگ

میزان کدری (opacity) استاندارد برای یک آیکن فعال بر روی پیش‌زمینه‌ای روشن، ۵۴٪ است (000000#). آیکن فعالی که از نظر مراحل بصری در جایگاه پایین‌تری قرار دارد و دیرتر دیده می‌شود، باید به میزان ۲۶٪ کدر باشد. (000000#)

میزان کدری (opacity) استاندارد برای یک آیکن فعال بر روی پیش‌زمینه‌ای تیره، ۱۰۰٪ است (FFFFFF#). آیکن فعالی که از نظر مراحل بصری در جایگاه پایین‌تری قرار دارد و دیرتر دیده می‌شود، باید به میزان ۳۰٪ کدر باشد. (FFFFFF#)

منبع: 1001boom.com