لوگوی جشنواره وب و موبایل ایران
گرافیک گرافیک رابط کاربری هنرهای تجسمی

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

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

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

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

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

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

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

اصول طراحی

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

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

سادگی

ساده

قابل درک

قابل درک

قابل اجرا

قابل اجرا

سازگار

سازگار

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

گرید با واحد DP

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

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

در مقیاس ۱۰۰٪

در مقیاس ۱۰۰٪

در مقیاس ۸۰۰٪

در مقیاس ۸۰۰٪

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

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

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

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

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

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

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

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

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

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

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

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

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

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

style_icons_system_grid_area_live-1001boom

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

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

style_icons_system_grid_area_trim-1001boom

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

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

style_icons_system_grid_area_live_dense-1001boom

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

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

style_icons_system_grid_area_trim_dense-1001boom

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

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

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

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

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

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

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

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

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

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

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

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

هندسه

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

ساختار

ساختار

ترکیب‌بندی

ترکیب‌بندی

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

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

۲. گوشه (Corner)

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

۴. استروک (Stroke)

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

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

style_icons_system_anatomy-1001boom

گوشه‌ها

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

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

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

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

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

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

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

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

ثبات

ثبات

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

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

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

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

استروک داخلی

استروک داخلی

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

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

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

style_icons_system_anatomy_optical_complex-1001boom

پیچیدگی

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

style_icons_system_anatomy_optical_small-1001boom

مقیاس کوچک

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

فضای تنفس (Clearance)

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

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

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

جای‌گیری (Placement)

جای‌گیری (Placement)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۱. سر

۲. گردن

۳. بالاتنه

۴. بازو

۵. پا

تمام بدن

تمام بدن

بالاتنه

بالاتنه

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

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

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

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

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

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

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

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

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

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

style_icons_system_human_fullbody2-1001boom

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

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

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

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

style_icons_system_human_upperbody2-1001boom

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

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

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

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

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

style_icons_system_human_contained2-1001boom

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

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

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

style_icons_system_human_detailedparts2-1001boom

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رنگ

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

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

آیکن‌های سیستمstyle_icons_system_color2-1001boom

1

نظر بدهید

مطالب را هر روز در ایمیل خود دریافت کنید.

[انصراف]