هدف از recolor این نیست که هر رنگ را تصادفی عوض کنیم؛ باید نقش رنگ—اصلی، تأکیدی، پس‌زمینه و حالت هشدار—در تمام آیکن‌ها ثابت بماند.
قبل از تغییر رنگ، ساختار مجموعه را بررسی کنید
یک نسخه از فایل بسازید و آیکن‌ها را بر اساس سبک و نقش رنگ بررسی کنید. ممکن است مشکی ظاهری در چند شیء RGB/CMYK متفاوت یا opacity مختلف باشد. Swatches و Select > Same برای پیدا کردن تفاوت‌های پنهان مفیدند.
اگر مجموعه هم نسخه خطی و هم پر دارد، تصمیم رنگی یکسان لزوماً نتیجه بصری یکسان نمی‌دهد؛ جرم بصری آیکن پر بیشتر است و رنگ تیره‌تر به نظر می‌رسد.
روش سریع با Recolor Artwork
همه آیکن‌های موردنظر را انتخاب و Recolor Artwork را باز کنید. ستون رنگ‌های فعلی را به پالت مقصد نگاشت کنید. پیش‌نمایش را روشن نگه دارید و رنگ‌های عملکردی—مثلاً قرمز خطا—را قفل یا جداگانه تنظیم کنید.
این ابزار برای نگاشت هماهنگ عالی است، اما تصمیم طراحی را جایگزین نمی‌کند. نتیجه را روی پس‌زمینه روشن و تیره و در اندازه نهایی ببینید.
- رنگ برند را به‌صورت Global Swatch تعریف کنید.
- رنگ‌های معنایی را از رنگ تزئینی جدا کنید.
- نسخه تک‌رنگ را برای حالت‌های محدود آماده کنید.
کنترل کنتراست و حالت‌های رابط
آیکن تعاملی حداقل حالت عادی، hover، active و disabled دارد. تفاوت این حالت‌ها باید قابل تشخیص باشد، اما نباید زبان بصری مجموعه را تکه‌تکه کند. فقط کم‌کردن opacity برای disabled روی هر پس‌زمینه نتیجه خوبی نمی‌دهد.
در آیکن‌های چندرنگ، عنصر اصلی باید اولویت بصری داشته باشد. اگر همه رنگ‌ها شدت یکسان دارند، کاربر نمی‌فهمد کدام بخش حامل معناست.
چک‌لیست خروجی
پس از recolor، خطوط ناخواسته، اشیای بدون fill/stroke، رنگ‌های خارج از پالت و شفافیت را جست‌وجو کنید. سپس SVG یا PNG را در اندازه مصرف واقعی خروجی بگیرید و کنار نسخه اصلی مقایسه کنید.
برای وب، رنگ‌هایی که باید با پوسته تغییر کنند می‌توانند در SVG به currentColor یا متغیرهای طراحی متصل شوند؛ این تصمیم باید در فرایند توسعه نیز پشتیبانی شود.
جمع‌بندی عملی
پالت را به نقش‌های معنایی تبدیل کنید، با ابزار Recolor آن نقش‌ها را نگاشت کنید و نتیجه را در حالت‌ها و اندازه واقعی بسنجید. یکپارچگی مهم‌تر از تعداد رنگ‌هاست.
