طراحی آیکون رابط کاربری؛ چرا آیکون خوب در ۲۰ پیکسل ساخته می‌شود

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

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

#چرا ۲۰ پیکسل؟

آیکون‌های رابط معمولاً در اندازه‌ی ۱۶ تا ۲۴ پیکسل، کنار متن نمایش داده می‌شوند. وقتی آیکون را روی همان شبکه‌ای طراحی کنید که نمایش داده می‌شود (مثلاً ۲۰ × ۲۰)، هر واحد طراحی دقیقاً یک پیکسل است و خط‌ها تیز می‌مانند. آیکونی که در ۲۴ طراحی و در ۲۰ نمایش داده شود، خط‌هایش بین پیکسل‌ها می‌افتد و تار دیده می‌شود.

#شبکه و ناحیه‌ی امن

روی بوم ۲۰ × ۲۰، آیکون تا لبه نمی‌رود. در کاشی، مرکز خط‌ها بین ۲٫۷۵ و ۱۷٫۲۵ می‌ماند تا با خط ۱٫۵ واحدی، لبه‌ی بیرونی روی ۲ و ۱۸ بنشیند. این دو واحد هوا در هر طرف باعث می‌شود آیکون‌ها کنار هم نفس بکشند و هیچ‌کدام بزرگ‌تر از بقیه دیده نشود.

اندازه را هم چشمی تنظیم کنید، نه فقط با خط‌کش. دایره و مثلث در یک اندازه‌ی هندسی، کوچک‌تر از مربع دیده می‌شوند؛ پس کمی بزرگ‌ترشان بکشید تا هم‌وزن به نظر برسند.

#یک وزن خط برای کل خانواده

مهم‌ترین تصمیم یک آیکون‌ست، ضخامت خط است. در کاشی همه‌ی آیکون‌ها خط ۱٫۵ با سر و گوشه‌ی گرد دارند. فقط جزئیات ریز، مثل نقطه‌ها یا شیارها، اگر لازم باشد ۱٫۱ تا ۱٫۳ می‌شوند. آیکونی که خطش ضخیم‌تر از بقیه است، کنار آن‌ها «بلندتر حرف می‌زند» و چشم را بی‌دلیل می‌کشد.

#فضای منفی را لبه‌به‌لبه بسنجید

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

#یک مفهوم، یک شکل

وقتی آیکون تازه لازم دارید، اول بپرسید: این یک مفهوم تازه است یا حالتی از یک مفهوم موجود؟

• «فایل» یک مفهوم است و طراحی خودش را می‌خواهد.
• «فایل قفل‌شده» حالتی از فایل است: همان شکل فایل، با یک نشان کوچک قفل در گوشه.

تغییر فقط رنگ، ضخامت یا جای آیکون هیچ‌وقت مفهوم تازه نمی‌سازد؛ کاربر در ۲۰ پیکسل این تفاوت‌ها را نمی‌بیند.

#سبک‌ها از یک منبع ساخته می‌شوند

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

#جهت در رابط راست‌به‌چپ

در رابط فارسی، آیکون‌هایی که جهت رابط را نشان می‌دهند (بعدی، قبلی، بازگشت، ارسال) باید قرینه شوند. آیکون‌هایی که شیء واقعی را نشان می‌دهند (ساعت، دکمه‌ی پخش، تیک تایید) نه. این را در خود آیکون‌ست علامت بزنید تا هر بار دستی تصمیم گرفته نشود. برای قاعده‌های بیشتر راست‌به‌چپ، چک‌لیست رابط RTL را ببینید.

#بررسی خودکار، نه فقط چشم

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

#خلاصه

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