طراحی وب و اپلیکیشن موبایل پویا بدون آیکون های جذاب و زیبا امکان پذیر نیست. در این مطلب قصد داریم 5 کتابخانه آیکون برای طراحان وب و موبایل را معرفی و بررسی کنیم.
هر طراح با سلیقه و حرفه ای برای ایجاد یک رابط کاربری زیبا و کاربر پسند از آیکون ها و المان های بصری مختلفی در طراحی خود استفاده می کند. آیکون ها بخش بسیار مهمی در طراحی یک صفحه وب و اپلیکیشن موبایل هستند زیرا اولین المان یا عنصری که کاربر را در صفحه راهنمایی می کند همین آیکون ها هستند. مثلا آیکون سبد خرید یا آیکون حساب کاربری و جستجو.
کتابخانه آیکون برای طراحان وب و موبایل چیست؟
قبل از معرفی کتابخانه ها بگذارید اول ببینیم یک کتابخانه آیکون چیست؟ اگر طراح رابط کاربری باشید و یا کمی با طراحی آشنا باشید حتما نام Font Awesome به گوشتان خورده است. Font Awesome و دیگر کتابخانه های مشابه مجموعه ای از هزاران آیکون قابل استفاده در رابط کاربری است که می تواند در قالب فونت به پروژه اضافه شود و مورد استفاده قرار گیرد.
برای مثال می توان به جای نمایش یک تصویر به جای سبد خرید، با نوشتن یک متن یک آیکون سبد خرید را نمایش داد. این کار هم برای طراح راحت تر است و هم برای کاربر جذاب تر. اما کتابخانه هایی مانند Font Awesome در کنار هزاران آیکونی که ارائه می کنند، مشکلاتی هم دارند که نمی توانند انتخاب مناسبی برای پروژه های با کیفیت بالا و حتی موبایل باشند. مثلا غیر رایگان بودن، زیبا نبودن آیکون ها و سنگین بودن فونت ها.
در سمت مقابل کتابخانه های SVG قرار دارند. این کتابخانه ها تعداد زیادی آیکون را در قالب فایل SVG ارائه می کنند که حجم بسیار کمی دارند و به سادگی قابل ویرایش هستند. در این روش می توان آیکون های بسیار زیبا با امکان استفاده در وب و موبایل ارائه کرد.
در ادامه به بررسی 5 کتابخانه آیکون برای طراحان وب و موبایل خواهیم پرداخت که در برنامه های مختلف قابل استفاده بوده و از نظر کیفیت ساخت نیز در سطح بالاتری از نمونه های مشابه Font Awesome قرار دارند.
1- کتابخانه Phosphor Icons
Phosphor Icons یک کتابخانه آیکون با بیش از 9000 المان است که از استایل نیمه شکسته و زیبایی استفاده می کند. این کتابخانه تقریبا برای هر المانی که بخواهید یک آیکون دارد و بعید است نتوانید آیکون مورد نظرتان را در این کتابخانه عظیم و زیبا پیدا کنید. همچنین یکی از مزیت های Phosphor Icons تگ های آماده برای استفاده سریع در پروژه های مختلف مانند React، Flutter، Vue، Swift و وب است.
2- کتابخانه Tabler Icons
Tabler Icons بیش از 5700 آیکون pixel-perfect برای طراحان رابط کاربری دارد که از نظر زیبایی و کیفیت در سطح بسیار بالایی قرار دارند. بر اساس تجربه کاری می توان گفت Tabler Icons یکی از بهترین کتابخانه های آیکون موجود است. این کتابخانه رایگان و متن باز و برای وب و موبایل قابل استفاده است. در Tabler Icons آیکون ها در دو نسخه SVG و PNG ارائه می شوند و استفاده از آنها بسیار ساده است.
3- کتابخانه Heroicons
Heroicons فقط 316 آیکون دارد اما در همین تعداد کم آیکون ها بسیار با کیفیت و زیبا طراحی شده اند. اگر با Tailwind CSS کار کرده باشید پس حتما عاشق Heroicons هم خواهید شد چون هر دو سازندگان مشترک دارند. این کتابخانه به صورت SVG عرضه شده و به صورت پیشفرض برای وب و React قابل استفاده است. همچنین می توان از Heroicons در فیگما هم استفاده کرد.
4- کتابخانه Radix Icons
Radix Icons تنها 333 آیکون دارد اما با همین تعداد کم استایل جالب و زیبایی ارائه کرده که می تواند برای طراحان جذاب باشد. آیکون ها به صورت SVG ارائه شدند اما امکان استفاده از آنها در فیگما، اسکچ و به صورت پکیج NPM هم وجود دارد. اگر به آیکون هایی با طرح crisp یا شکسته نیاز داشته باشید Radix Icons گزینه بسیار مناسبی است.
5- کتابخانه Feather Icons
Feather Icons هم تعداد کمی آیکون دارد، فقط 287 تا که به صورت SVG ارائه شده است. در جواب این سوال که چرا باید از این کتابخانه استفاده کنیم باید گفت چون طراحی آیکون ها زیبا و بسیار کاربر پسند است و به دور از هرگونه اضافه کاری، بسیار ساده طراحی شده و مفهوم مورد نظر طراح را به خوبی بیان می کند.
جمع بندی
در این مطلب 5 کتابخانه آیکون برای طراحان وب و موبایل را معرفی و بررسی کردیم. کتابخانه های عظیمی مانند Phosphor Icons و Tabler Icons با هزاران آیکون زیبا را معرفی کردیم که برای نیاز هر طراحی المانی در چنته دارند. همچنین کتابخانه های کوچکتر اما خاصتری مانند Heroicons، Radix Icons و Feather Icons را با طراحی منحصر به فرد معرفی کردیم که می توانند جلوه ای متفاوت ارائه دهند.
در نهایت انتخاب کتابخانه آیکون یا استفاده از فونت آیکون هایی نظیر Font Awesome به سلیقه طراح بستگی دارد اما با در نظر داشتن شرایطی مانند حجم برنامه، زمان بارگزاری و تعداد درخواست ها می توان برای استفاده از آنها تصمیم گیری کرد.
