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

در مطلب‌های پیشین، انواع زبان‌ها و سبک‌های طراحی رابط گرافیک، نکات اصلی طراحی آیکن اپلیکیشن‌ها و در نهایت به چگونگی طراحی آیکن اپلیکیشن در متریال دیزاین (زبان طراحی کمپانی ارائه شده توسط کمپانی گوگل) را بررسی کردیم. در این مطلب به چگونگی طراحی آیکن‌های سیستم (System icons) با استفاده از گوگل متریال دیزاین می‌پردازیم.

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

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

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

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

اصول طراحی

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

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

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

گرید با واحد DP

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

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

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

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

منطقه محتوا (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)

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

هندسه

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

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

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

۲. گوشه (Corner)

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

۴. استروک (Stroke)

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

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

گوشه‌ها

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

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

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

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

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

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

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

پیچیدگی

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

مقیاس کوچک

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

فضای تنفس (Clearance)

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

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

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

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

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

۱. سر

۲. گردن

۳. بالاتنه

۴. بازو

۵. پا

فرم

تمام بدن

بالاتنه

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

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

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

رنگ

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

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