انتخاب و یکدست‌سازی آیکون‌ها؛ راهنمای عملی برای طراحان

آیکون خوب چه شکلی است؟

آیکون، کوتاه‌ترین جملهٔ یک رابط کاربری است؛ جایی که هزار کلمه توضیح، با یک علامت ۲۴ پیکسلی جایگزین می‌شود. اما همین عنصر کوچک، یکی از سریع‌ترین راه‌های لو رفتن کار غیرحرفه‌ای است: وقتی آیکون‌های یک صفحه از پنج خانوادهٔ متفاوت با پنج ضخامت خط مختلف آمده باشند، حتی بینندهٔ غیرمتخصص حس بی‌نظمی می‌گیرد بدون اینکه بتواند منشأش را نام ببرد. آیکون خوب سه ویژگی دارد: در یک نگاه فهمیده می‌شود، در سایز کوچک (۱۶ پیکسل) هم واضح می‌ماند و با هم‌خانواده‌هایش کاملاً هم‌سبک است.

معیارهای فنی یک خانوادهٔ آیکون استاندارد را بشناسید تا در ارزیابی منابع چشم‌تان تیز شود: طراحی روی شبکهٔ ۲۴ در ۲۴، ضخامت خط ۲ پیکسل (یا نسخه‌های ۱.۵ و ۳ برای تراکم‌های مختلف)، گوشه‌های گرد با شعاع یکسان و یک منطق مشترک برای سبک (خطی یا توپر). این‌ها همان چیزهایی هستند که سیستم طراحی به‌عنوان قواعد آیکون مستند می‌کند و هرچه زودتر عادتشان کنید، آیکون‌های پروژه‌های شما زودتر حرفه‌ای می‌شوند.

منابع معتبر: کجا بگردیم و کجا نه؟

خبر خوب اینکه بهترین آیکون‌ست‌های دنیا رایگان و متن‌بازند و جست‌وجوی گوگلِ «icon download» فهرست امنی نیست؛ سایت‌های آیکون پر از لایسنس مبهم و فایل‌های کم‌کیفیت‌اند. این پنج منبع، نقطهٔ شروع استاندارد هستند:

• Lucide: ادامه‌دهندهٔ مسیر فیتر، بیش از ۱۵۰۰ آیکون خطی ساده؛ پلاگین فیگما رسمی دارد و انتخاب پیش‌فرض پروژه‌های مدرن است.
• Phosphor: خانوادهٔ کامل با شش وزن (رنگی، خطی، توپر، دوخطی و…)؛ وقتی هم خطی و هم توپر لازم دارید، این بهترین است.
• Material Symbols: مجموعهٔ گوگل با تنوع بالا؛ برای پروژه‌های اندرویدی طبیعی‌تر است اما حجم انتخابش گیج‌کننده می‌شود.
• Feather: کلاسیک و مینیمال؛ آیکون‌های پایه مثل خانه، جست‌وجو و تنظیمات در بهترین ساده‌ترین شکلشان.
• Iconify: موتور جست‌وجو روی صدها مجموعه؛ برای پیدا کردن آیکون خاص، اما موقع استفاده، حتماً همه را از یک خانواده بردارید نه از ده خانواده.

قبل از دانلود، لایسنس را چک کنید: هر پنج مورد بالا MIT یا مشابه آن هستند و استفادهٔ تجاری آزاد است. فهرست منابع بیشتر و روش ارزیابی‌شان در چک‌لیست منابع رایگان طراحی آمده؛ همان قاعدهٔ «کم اما درست» آن‌جا هم صدق می‌کند.

قانون طلایی: یک خانواده، یک پروژه

مهم‌ترین قانون آیکون، ساده و بی‌استثناست: در هر پروژه فقط از یک خانواده استفاده کنید. وسوسهٔ رایج این است: آیکون سبد خرید از لوساید خوب است اما آیکون قلب فسفر قشنگ‌تر است؛ دو تا برداریم! این‌جا همان‌جایی است که یکدستی می‌میرد. تفاوت‌ها در جدا از هم معلوم نیستند اما کنار هم، ضخامت خط‌ها، زاویهٔ گردی و حتی منطق فضای خالی داخل آیکون‌ها با هم جنگیده‌اند و نتیجه، حس «چسبیده‌شده به هم» است.

یک آزمایش قبل و بعد انجام دهید: در یک دکمه، آیکونِ فلشِ لوساید و آیکونِ کاربرِ فسفر را کنار هم بگذارید؛ حالا هر دو را از لوساید عوض کنید و دوباره نگاه کنید. تفاوت در «آرامش» دومی، با توضیح منتقل نمی‌شود اما بیننده حسش می‌کند. اگر خانوادهٔ انتخابی‌تان یک آیکون خاص را ندارد، دو راه درست دارید: یا همان آیکون را با سبک خانواده خودتان بازطراحی کنید، یا مفهوم را با آیکون دیگری از همان خانواده برسانید؛ هیچ‌وقت از خانوادهٔ دوم قرض نگیرید.

مدیریت مجموعهٔ آیکون در فیگما

وقتی منبع را انتخاب کردید، آیکون‌ها را بی‌نظم در صفحات مختلف نریزید؛ سیستم کوچک خودتان را بسازید. یک صفحهٔ مشخص در فایل با نام Icons بسازید و هر آیکون را به یک کامپوننت مستقل تبدیل کنید با نام‌گذاری استاندارد icon/نام مثل icon/arrow-right و icon/user-plus. حالا از پنل Assets، آیکون‌ها را مثل قطعات لگو به صفحات می‌کشید و هر جا لازم شد، فقط رنگش را عوض می‌کنید؛ نه سایزش را با کشیدن دستی (که آیکون را خراب می‌کند) و نه شکلش را.

سه قاعدهٔ استفاده که کیفیت را حفظ می‌کنند: اول، آیکون را فقط در سایزهای استاندارد ۱۶، ۲۰ و ۲۴ به کار ببرید؛ سایزهای غیر استاندارد، تناسبات داخلی را می‌شکنند. دوم، رنگ آیکون را با استایل رنگ تعریف کنید تا تغییر تم، صد آیکون را یک‌جا عوض کند. سوم، آیکون و متن کنارش را با فاصلهٔ ۸ پیکسل و تراز عمودی وسط بچینید؛ اگر مقدمات کامپوننت‌سازی در فیگما برایتان تازه است، آموزش فیگما از صفر این بخش را گام‌به‌گام دارد. و اگر پروژه بزرگ شد، همین صفحهٔ آیکون شما هستهٔ آیندهٔ سیستم طراحی تیم خواهد بود.

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

برای پروژه‌های فارسی، یک لایهٔ دقت اضافه لازم است: آیکون‌های جهت‌دار باید در رابط راست‌به‌چپ آینه شوند. فلشِ «بعدی» در رابط انگلیسی به راست اشاره می‌کند اما در رابط فارسی باید به چپ باشد؛ آیکون «بازگشت» برعکس. نکتهٔ ظریف این است که همهٔ آیکون‌ها آینه‌شدنی نیستند: فلش و منو و برگشت، بله؛ اما علامت سؤال، ساعت و میکروفن نه — منطق دنیای واقعی را باید حفظ کنند. فهرست کامل این تصمیم‌ها در طراحی راست‌به‌چپ برای محتوای فارسی با مثال آمده و اگر پروژه‌تان دو نسخهٔ فارسی و انگلیسی دارد، از همان اول واریانت RTL برای کامپوننت‌های جهت‌دار بسازید.

آزمون نهایی هر آیکون این است: کاربر بدون خواندن متن کنارش، در نیم ثانیه معنایش را می‌فهمد؟ اگر جواب منفی است یا آیکون عوض کنید یا متن را نگه دارید و آیکون را حذف کنید؛ آیکون مبهم از نداشتن آیکون بدتر است چون فضا می‌گیرد و ابهام می‌سازد.

چک‌لیست نهایی و اشتباهات رایج

• همه از یک خانواده‌اند؟ فهرست آیکون‌های یک صفحه را بنویسید و منبع هرکدام را چک کنید؛ هر چیزی که از بقیه جدا بود، پیدا می‌شود.
• ضخامت خط‌ها یکی است؟ آیکون خطی با خط ۲ را کنار آیکون خط ۱.۵ نگذارید؛ در سایز کوچک، این ناهماهنگی زشت‌ترین اتفاق ممکن است.
• در ۱۶ پیکسل تست شده؟ هر آیکون را در کوچک‌ترین سایز استفاده‌اش ببینید؛ جزئیاتی که در ۲۴ قشنگ بودند، در ۱۶ به لکه بدل می‌شوند.
• آیکون مبهم، متن هم‌راه دارد؟ برای مفاهیم مبهم مثل «همگام‌سازی» یا «اشتراک‌گذاری»، برچسب متنی کنار آیکون اجباری است.
• کشیده یا چرخانده نشده؟ آیکون را هرگز با ابزار Scale یا Rotate تغییر شکل ندهید؛ فقط سایز عددی و رنگ.

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