استودیو گروسیان

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

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

مسعود گروسیان

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

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


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

خب برگردیم به دسته‌بندی آیکون‌ها:

 

آیکون اوت لاین چیست؟

 آیکون‌های Outline

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

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

 

icon-filled.png (23 KB)

 آیکون‌های Filled

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

 icon-glyph.png (11 KB)

آیکون‌های Glyph

آیکون‌های Glyph را با Filled اشتباه نگیرید (خودم قبلا اشتباه می‌کردم :| ). اینجا خبری از outline، رنگ‌های متنوع و سایه‌های وکتوری نیست. یک شکل پیوسته و تک‌رنگ.

 

آیکون فلت چیست؟

آیکون‌های Flat

مشابه با آیکون‌های Filled که نسخه‌ی پیچیده‌تر آیکون‌های Outline بودند، آیکون‌های فلت را می‌توان نوع پیشرفته‌تر یا پیچیده‌تر آیکون‌های Glyph دانست. البته احتمالا خاطرتان هست پیدایش آیکون‌های فلت با هدف ساده‌ترکردن آیکون‌های Skeuomorphic شروع شد و ربطی به Glyph‌ها نداشت.

 

آیکون hand-drawn چیست؟

آیکون‌های Hand-Drawn

خسته‌تان نمی‌کنم. واضح‌است این آیکون‌ها انگار با دست کشیده‌شده‌اند و برای طراحی آن‌ها معمولا از Brush‌های فرم‌دار Illustrator استفاده می‌شود. 

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

 آیکون‌های واقعی‌طور Skeuomorphic

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

 

در این میان، آیکون‌های Outline، Filled، Glyph و Flat در زمان نوشتن این مطلب کاربرد بیشتری دارند. این روزها، از تب آیکون‌های Flat کمی کاسته‌شده است و در عوض، آیکون‌های Filled بیشتر طرفدار پیدا کرده‌اند.


برای‌تان وب‌سایت‌ها و اپلیکیشن‌هایی پر از آیکون‌های دوست‌داشتنی آرزو می‌کنم. خوشحالمان می‌کنید اگر نکات دیگری به نظرتان رسید در توییتر با ما درمیان بگذارید و دوستان‌تان را از انتشار این مطلب باخبر سازید.

اشتراک‌گذاری
نظر خود را به ما توئیت کنید