آیکن‌ها در UI

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

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

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

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

استفاده درست از پکیج آیکن‌ها در UI

انتخاب آیکن‌های یکنواخت

پکیج‌های آیکن متنوعی وجود دارد. برخی آیکن‌ها به صورت تمام رنگ هستند که به آن‌ها Bold و گاهی Solid نیز گفته می‌شود. برخی آیکن‌ها به صورت Outline هستند و رنگ زمینه ندارند و صرفا Border دارند.

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

انواع مختلف آیکن‌ها عبارتنداز: bold، solid، outline

دسترسی‌پذیری در آیکن‌ها

در جلسه‌ای که درباره دسترسی‌پذیری صحبت کردیم، موضوعات مختلفی از جمله آیکن‌ها را بیان کردیم. هنگام درج دکمه‌ها و آیکن‌ها، باید توجه کنیم که بند اول انگشت اشاره انسان، حدود 48 پیکسل هست (البته دست انسان‌ها نیز متفاوت هست) اما حداقل باید آیکن 24 پیکسلی و فضای حاشیه آن، در جمع به 48 پیکسل برسد که کاربر هنگام tap کردن، راحت باشد و دو آیتم کلیک نشود. این مقوله هنگام استفاده از ماوس نیز صدق می‌کند.

استفاده از آیکن‌ها با توجه به قانون دسترسی پذیری

منابع استفاده از آیکن‌ها

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

وب‌سایت و ابزار آنلاین

با استفاده از ابزارهایی مانند flaticon.com و icons8.com می‌توانیم به صورت آنلاین، آیکن‌های خود را ویرایش کنیم و از آن‌ها خروجی بگیریم. پکیجی که ما در پروژه استفاده کردیم iconsax.io هست که با مراجعه به وب‌سایت آن، می‌توانید آن را دانلود کنید. وب‌سایت‌های زیاد دیگری همچون hicon.me نیز هستند که در ویدئو آموزشی به آن‌ها اشاره کرده‌ایم. پکیج قدرتمند fontawesome.com را نیز به خاطر داشته باشید. سایت‌های نام برده شده منابع خوبی نیز برای دانلود رایگان آیکون برای طراحی سایت هستند.

کامیونیتی فیگما

داخل کامیونیتی فیگما به آدرس figma.com/community تعداد زیادی از فایل‌های آماده و کامپوننت‌شده از آیکن را می‌توانید بیابید. کافی است که واژه آیکن را جستجو کنید. موارد زیادی را خواهید یافت. افزون بر این، با جستجو در پلاگین‌های فیگما، موارد زیادی همچون پکیج قدرتمند Material design icons را خواهید یافت که مربوط به شرکت گوگل و دیزاین سیستم متریال است. اگر برای کار با نرم‌افزار رایگان فیگما نیاز به آموزش دارید، می‌توانید به قسمت‌های قبلی دوره مراجعه کنید.

تاثیر مثبت انتخاب درست آیکن‌ها در UI

درست است که استفاده از آیکن و تصاویر می‌تواند شکل و رنگ دیگری به طراحی بدهد. اما دقت داشته باشید که اگر پکیج آیکن یا تصویر خود را به درستی انتخاب نکنید، این موضوع می‌تواند نتیجه عکس دهد.
در این قسمت از دوره رایگان ui ux آموزش استفاده از آیکن‌ها در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍

5/5 - (6 امتیاز)

6 پاسخ

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

    1. درود بر شما. وقت بخیر

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

      موفق باشید.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045