Jafar Rezaei
Jafar Rezaei
خواندن ۳ دقیقه·۴ سال پیش

آیکون‌باکس! پایانی بر دغدغه‌های استفاده از آیکون

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

https://www.freepik.com/premium-photo/flat-lay-human-hands-choosing-beautiful-skeins-purple-green-tones-with-blank-label-mock-up-wooden-table_8022757.htm
https://www.freepik.com/premium-photo/flat-lay-human-hands-choosing-beautiful-skeins-purple-green-tones-with-blank-label-mock-up-wooden-table_8022757.htm


اگه رابط کاربری تولید می‌کنید(حتی مهم نیست برا کدوم پلتفرم) حتما توی هر پروژه‌ای که باهاش کار می‌کنید یا کار می‌کردین به آیکون‌ها نیاز داشتین.

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

بزارین اول با بررسی اینکه اصلا icon چیه شروع کنیم. در تعریفی که توی ویکی‌پدیا اومده، گفته شده که :

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system.

خب ترجمه غیر تحت لفظی‌ش میشه: یه تصویر یا ایدئوگرام که روی نمایشگر به مسیر حرکتی کاربر کمک می‌کنه.

البته مفاهیمی مثل symbol, index و ... هم بعضا برای بیان همین مضمون(تقریبا) به کار می‌رفت ولی واژه مرسوم همون icon هست.

انسان مدرن امروزی قطعا یه جوری خودشو با icon سازگار کرده بوده و نیازشو رفع می‌کرده. از اونجایی که جدیدا شهرنشینی آغاز شده بود. مردم از عکس برای قرار دادن icon و حتی خیلی کارهای دیگه استفاده می‌کردن. منظورم از عکس، اره، مثلا همون تگ img یا css background توی صفحات وب بود. البته واقعا کار سخت و اعصاب خوردکنی بود. توی پروژه‌های فعلی هم ممکنه نیاز باشه این کارها رو انجام بدیم. ولی خب اینجا سعی می‌کنیم موارد عمومی که توی اکثر پروژه‌ها نیازه رو بررسی کنیم.

با یه بررسی کلی می‌بینیم که روش‌های مرسومی که بشر برای نمایش iconها استفاده کرده اینا بوده :

  • استفاده از تصاویر تکی iconها : غیرکاربردی، به دلیل نیاز به درخواست جداگانه برای لود هر عکس
  • استفاده از مجموعه sprite شده از ‌تصاویر‌ : دردسر برای جایگزینی و تولید sprite image و وکتور نبودن
  • استفاده از فونت آیکون‌ها : محدودیت در انتخاب آیکون، دردسر برای تولید کردن فونت‌ آیکون و الزام به لود فایل فونت برای لود همه آیکون‌ها به شکل یکجا
  • استفاده از فونت آیکون‌های کاستوم شده : همان موارد فوق منهای محدودیت در انتخاب آیکون
  • استفاده از آیکون‌های svg : مدیریت assetهای svg و بهینه کردن کدهای svg
  • شاید استفاده از css برای ساخت آیکون : سخت بودن تولید آیکون و بیشتر برای لوگو و تک آیکون‌ها می ارزه


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


نتیجه این تلاش بشر، تولید یه سایت به اسم آیکون‌باکس شده که به شکل رایگان و متن‌باز در دسترسه :)

نسخه دسک تاپ و موبایلش هم با یه رابط کاربری جذاب برای استفاده روی کامپیوتر، گوشی، pwa و به شکل in-app در نرم افزارهایی مثل فیگما و ادوبی xd بهینه‌سازی شده و به زودی پشتیبانی این برنامه‌ها هم اضافه میشه.


iconbox.space

app.iconbox.space

با بازنشر این نوشته و حمایت از ما، به بشر امروزی کمک کنید.

آیکونری‌اکت
https://sayjeyhi.com
شاید از این پست‌ها خوشتان بیاید