چرا همیشه فکر میکنیم فقط با استفاده از متن میتوانیم منظور خود را به کاربر برسانیم؟ گاهی اوقات استفاده از یک آیکون کوچک یا تصویر میتواند جایگزین یک پاراگراف متن باشد. البته از وکتورها و تصاویر نیز استفاده خواهیم کرد که موضوع جلسه بعدی ماست. آیکنها در طراحی ui، یکی از عناصر مهم به حساب میآیند. در این قسمت از دوره آموزش رایگان ui ux از آژانس نوآوری رسام قصد داریم در مورد انواع مختلف آیکن در طراحی صحبت کنیم. از شما دعوت میکنیم تا پایان مقاله ما را همراهی کنید.
یکنواختی، ارتباط موضوعی و استایل آنها، باید طوری باشد که مخاطب، مفهوم و هدف آن را به خوبی درک کند. به عنوان مثال، یک آیکن ذرهبین، امروزه به خوبی با مفهوم جستجو، در بین مردم جا افتاده است.
باید تا جای ممکن تلاش کنیم، انتخاب آیکنها، با یکنواختی و رعایت انتقال موضوع به مخاطب، صورت گیرد. توجه داشته باشید که طراحی آیکن و تصویرسازی یک تخصص حرفهای به حساب میآید. ممکن است لزوماً یک طراح UI، طراح آیکن نباشد. اما طراحان UI هرچه بیشتر ابزارهایی مثل ایلاستریور را مسلط شوند، دست بازی در ویرایش و بهبود آیکنها خواهند داشت.
انتخاب آیکنهای یکنواخت
پکیجهای آیکن متنوعی وجود دارد. برخی آیکنها به صورت تمام رنگ هستند که به آنها Bold و گاهی Solid نیز گفته میشود. برخی آیکنها به صورت Outline هستند و رنگ زمینه ندارند و صرفا Border دارند.
پکیجهای آیکن رنگی کامل، دو رنگ، تک رنگ زمینهدار، گردینت، Broken یا دارای شکستگی و کلی حالت دیگر نیز وجود دارد. ذکر این نکته ضروری است که انتخاب شما باید یکنواخت و اصولی باشد. به تصویر مقابل دقت کنید. در تصویر سمت چپ، آیکنها از نظر رنگ و استایل، کاملا یکنواخت بوده و این باعث میشود تا درک و خوانایی محتوا برای کاربران آسانتر باشد. به همین دلیل اکثر طراحان حرفهای برای طراحی سایت سعی میکنند تا از آیکنهای یکنواختی استفاده کنند.
دسترسیپذیری در آیکنها
در جلسهای که درباره دسترسیپذیری صحبت کردیم، موضوعات مختلفی از جمله آیکنها را بیان کردیم. هنگام درج دکمهها و آیکنها، باید توجه کنیم که بند اول انگشت اشاره انسان، حدود 48 پیکسل هست (البته دست انسانها نیز متفاوت هست) اما حداقل باید آیکن 24 پیکسلی و فضای حاشیه آن، در جمع به 48 پیکسل برسد که کاربر هنگام tap کردن، راحت باشد و دو آیتم کلیک نشود. این مقوله هنگام استفاده از ماوس نیز صدق میکند.
منابع استفاده از آیکنها
وبسایت و ابزار آنلاین، کامیونیتی فیگما (اعم از فایل و پلاگین)، پکیجهای دانلودی داخل سیستم، استفاده از دیزاینسیستمهای آماده و حتی طراحی آیکن از صفر، در دسترس ما هستند تا بتوانیم وبسایت خود را با آیکنهای مناسب، بهبود دهیم.
وبسایت و ابزار آنلاین
با استفاده از ابزارهایی مانند flaticon.com و icons8.com میتوانیم به صورت آنلاین، آیکنهای خود را ویرایش کنیم و از آنها خروجی بگیریم. پکیجی که ما در پروژه استفاده کردیم iconsax.io هست که با مراجعه به وبسایت آن، میتوانید آن را دانلود کنید. وبسایتهای زیاد دیگری همچون hicon.me نیز هستند که در ویدئو آموزشی به آنها اشاره کردهایم. پکیج قدرتمند fontawesome.com را نیز به خاطر داشته باشید. سایتهای نام برده شده منابع خوبی نیز برای دانلود رایگان آیکون برای طراحی سایت هستند.
کامیونیتی فیگما
داخل کامیونیتی فیگما به آدرس figma.com/community تعداد زیادی از فایلهای آماده و کامپوننتشده از آیکن را میتوانید بیابید. کافی است که واژه آیکن را جستجو کنید. موارد زیادی را خواهید یافت. افزون بر این، با جستجو در پلاگینهای فیگما، موارد زیادی همچون پکیج قدرتمند Material design icons را خواهید یافت که مربوط به شرکت گوگل و دیزاین سیستم متریال است. اگر برای کار با نرمافزار رایگان فیگما نیاز به آموزش دارید، میتوانید به قسمتهای قبلی دوره مراجعه کنید.
تاثیر مثبت انتخاب درست آیکنها در UI
درست است که استفاده از آیکن و تصاویر میتواند شکل و رنگ دیگری به طراحی بدهد. اما دقت داشته باشید که اگر پکیج آیکن یا تصویر خود را به درستی انتخاب نکنید، این موضوع میتواند نتیجه عکس دهد.
در این قسمت از دوره رایگان ui ux آموزش استفاده از آیکنها در UI و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال میشویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاهها، از متخصصین آژانس نوآوری رسام بپرسید.
موفق باشید 😍
16 پاسخ
ممنون از لطف شما و پاسخ های به موقع و دقیق. ببخشید یه سوال دیگه هم پیش اومده واسم. فرض کنید ما دوتا پکیج ایکون iconsax و hicon رو اد میکنیم یا اینکه دو نوع ایکون linear و outline اد کرده باشیم در پیج ایکونها. وقتی در قسمت assets سرچ میزنیم و ایکونی رو میاره واسمون، از کجا میشه فهمید این ایکون مربوط به کدوم پکیجه یا از نوع linear هست یا outline؟ یا اینکه این کار اشتباهه و باید فقط یک پکیج و یک جنس ایکون اد کنیم که دیگه نیازی به فهمیدن اینا نباشه؟
درود بر شما. وقت بخیر
اگر از بخش Assets چیزی را داخل فریم بندازید، میتوانیم روی آن کلیک راست کنیم و Go to main components رو بزنیم. اینطوری مشخص میشود که از کجا آمده است. لزوماً اشکالی ندارد که بیش از یک پکیج داشته باشیم. البته باید مواظب باشیم تناسب طراحی هم بهم نریزد.
موفق باشید.
سلام و درود. بابت زمان، انرژی و آموزشهای رایگانی که در اختیار ما قرار دادید نهایت تشکر و قدردانی رو از شما دارم، همیشه سلامت باشید. در این شرایط اقتصادی مملکت واقعا لطف بزرگی رو در حق این جامعه بزرگ کردید.
دوتا سوال داشتم:
در این جلسه شما سه روش اد کردن آیکون هارو آموزش دادید. یکی اضافه کردن یک پک کامل از ایکون ها در خود پروژه و پیج icons و اد کردن اونها از اون قسمت با کپی پیست کردنش یا سرچ در قسمت assets. روش دوم استفاده از پلاگین ها. روش سوم هم استفاده از سایتهای متعدد. شما کدوم یک رو پیشنهاد میدید؟ کدوم روش اصولی تره؟
سوال دوم ابن بود که وقتی ما یک تک ایکونی رو از یک سایت دانلود می کنیم، مستقیما داخل پروژه اد میکنیم یا اینکه باید اول تبدیل به کامپوننت کنیم و بعدش در پیج icons اضافه کنیم، و در پروژه از کپی همون ایکون کامپوننت شده استفاده کنیم؟
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی شما. امیدوارم مفید واقع شود.
به نظرمن بهتر است همیشه یک پکیج آیکن کامپوننت شده اضافه بکنیم. این باعث میشود هزار آیکن و یا حتی بیشتر، در دسترس ما باشد که ظاهر یکنواختی در طراحی دارند. اما گاهی آیکنی که میخواهیم در آن لیست وجود ندارد و یا اصلا برخی آیکنها ظاهر پیچیدهتری دارند و حالت استفاده متفاوتی دارند. بنابراین ابتدا باید یک پکیج خوب کامپوننت شده اضافه کنیم. در نهایت از سایتهایی مثل flaticon و icons8 و… را استفاده کنیم برای سایر موارد. حتی گاهی پروژه ممکن است کوچکتر باشد و همان پکیج کامپوننت شده، کارمان را راه بیاندازد.
الزامی نیست اگر یک آیکن اضافه کردیم حتما آنرا کامپوننت کنیم. در واقع این کار زمانی لازم است که قرار باشد از آن آیکن به دفعات بیش از 2 بار استفاده کنیم.
موفق باشید.
سلاام و روز بخیر.
من رسیدم به بخش آیکون ها و فقط خواستم بازم بگم ممنونم بابت این آموزش اصولی و دقیق. دمتون گرم 🙂
درود بر شما. وقت شما بخیر
بزرگوارید. سپاس از همراهی شما.
موفق باشید.
سلام وقتتون بخیر. آموزش هاتون عالی هستش و من خیلی استفاده کردم از آموزش های شما.
یک سوالی داشتم اینکه وقتی آیکونهارو کپی میکنم توی کار خودم نمیتوانم رنگشو تغییر بدم علتش چی هستش؟
درود بر شما. وقت شما بخیر
سپاس از لطف و مهربانی شما.
همان پکیج iconsax را دارید استفاده میکنید؟ دقت بفرمائید که نباید به آنها Fill بدهید. پائینتر از بخش Fill یک قسمتی هست که رنگ آیکن را آنجا شناخته. از آنجا رنگ را تغییر بدهید.
موفق باشید.
سلام
مثل همیشه کلی دعاتون میکنم بابت این همه انتقال دانش و مهارت
برقرار باشید
درود بر شما. وقت بخیر
سپاسگزارم از لطف و مهربانی و همراهی شما. خوشحالم اگر مفید است.
موفق باشید.
چطور میتونم تشکر کنم. مرسی از حضور شما
درود بر شما. وقت شما بخیر.
سپاس از لطف، مهربانی و همراهی شما.
موفق باشید.
سلام و عرض خسته نباشید ممکنه در مورد سایز استاندارد آیکون در طراحی رابط کاربری هم بفرمایید.
درود بر شما. وقت بخیر
کم و بیش صحبت کردهایم. به عنوان مثال در خصوص آکونوگرافی و شیوه ساخت یک آیکن (طراحی آیکن) صحبت شده. همچنین ابزارهای آماده تهیه آیکن (فایل در کامیونیتی فیگما، پلاگین فیگما، ابزارهای تحت وب و…) نیز صحبت کردهایم و منابع متفاوتی را معرفی کردهایم. در طول پروژه و در جلسات پیش رو نیز (خصوصا هنگام اجرای پروتوتایپ پروژه) نکات دیگری را خواهیم گفت. در جلسه دیزاین سیستم نیز نکاتی هست که جلسات را پیش بروید با آنها مواجه خواهید شد.
موفق باشید.
آموزشهای کمیاب و ارزشمند
کللللی سپاااااسسسسس
درود بر شما دوست گرامی، وقت بخیر
سپاس از لطف و مهربانی شما. خوشحالم که مفید بوده محتوا.
سپاسگزارم. موفق باشید.