آیکون‌ست یکدست؛ چرا آیکون‌های چند کتابخانه را با هم قاطی نکنیم

داستان آشناست: محصول با یک کتابخانه‌ی آیکون شروع می‌شود. بعد آیکونی لازم می‌شود که در آن کتابخانه نیست، پس از کتابخانه‌ی دیگری برداشته می‌شود. بعد طراح تازه‌ای چند آیکون از سومی اضافه می‌کند. دو سال بعد، رابط محصول آیکون‌هایی دارد که هر کدام با لهجه‌ی متفاوتی حرف می‌زنند.

کاربر شاید نتواند بگوید چه چیزی اشتباه است، ولی حس می‌کند محصول «تمیز» نیست.

#پنج نشانه‌ی ناهمخوانی

1. ضخامت خط متفاوت. یکی ۱٫۵، یکی ۲ و یکی ۱. آیکون ضخیم‌تر «بلندتر حرف می‌زند» و چشم را بی‌دلیل می‌کشد.
2. گوشه‌های متفاوت. سر خط گرد در یکی و صاف در دیگری؛ گوشه‌ی تیز کنار گوشه‌ی نرم.
3. اندازه‌ی دیده‌شده‌ی متفاوت. همه ۲۰ پیکسل‌اند، ولی یکی تا لبه پر شده و دیگری وسط کادر کوچک نشسته.
4. میزان جزئیات متفاوت. یک آیکون ساده‌ی دو خطی کنار آیکونی با ده جزء ریز.
5. سبک متفاوت. خطی کنار توپر، بدون این‌که معنایی پشت این تفاوت باشد.

#ممیزی آیکون‌های موجود

پیش از هر کاری، همه‌ی آیکون‌های محصول را کنار هم و در اندازه‌ی واقعی ببینید: یک صفحه با همه‌ی آیکون‌ها در ۲۰ پیکسل، روی زمینه‌ی تیره و روشن. ناهمخوانی‌ها فوراً دیده می‌شوند. بعد برای هر آیکون یکی از این سه تصمیم را بگیرید:

• می‌ماند: با بقیه هم‌خانواده است.
• جایگزین می‌شود: معادلش در کتابخانه‌ی اصلی هست.
• بازطراحی می‌شود: معادل ندارد و باید با قواعد خانواده دوباره کشیده شود.

#وقتی آیکون لازم دارید که در کتابخانه نیست

این‌جا همان لحظه‌ای است که بیشتر آیکون‌ست‌ها خراب می‌شوند. به‌جای برداشتن از کتابخانه‌ی دیگر، آیکون تازه را با قواعد همان خانواده بکشید: همان شبکه، همان ضخامت، همان گوشه، همان ناحیه‌ی امن. قواعد دقیق را در طراحی آیکون در ۲۰ پیکسل نوشته‌ام.

برای محصول‌های ایرانی این لحظه زیاد پیش می‌آید: «کارت‌به‌کارت»، «پلاک»، «شبا» یا «سامانه‌ی مودیان» در هیچ کتابخانه‌ی خارجی نیستند.

#قاعده را بنویسید و خودکار کنید

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