‏چک‌لیست interfaces.dev برای رابط کاربری بهتر

این مطلب یه برگهٔ تقلب (cheat sheet) از سایت interfaces.dev هست: فهرستی از قانون‌های کوتاه و عملی برای ساختن رابط کاربری، بدون مقدمه و توضیح اضافه. هر خط یه تصمیم مشخصه، نه یه توصیهٔ کلی. تو بخش رابط کاربری مثلاً اومده که شعاع گوشهٔ المان‌های تودرتو باید هم‌مرکز باشه، چیدمان باید بصری تنظیم بشه نه هندسی، و تصویرها یه خط دور 1px با offset منفی بگیرن که تو حالت روشن مشکی و تو حالت تیره سفید با شفافیت ۸ درصد باشه.

بخش انیمیشن سخت‌گیرترین قسمتشه. نویسنده می‌گه هیچ‌وقت transition: all ننویس و به جاش دقیقاً اسم همون ویژگی‌هایی که عوض می‌شن رو بیار. دکمه موقع فشرده شدن باید یه کم کوچیک بشه، جایی بین 0.95 و 0.98 با transition: scale 200ms ease-out. برای جابه‌جایی آیکون‌ها هم کراس‌فید پیشنهاد می‌ده: آیکون واردشونده از مقیاس 0.25 به 1 می‌ره و بلورش از 4px به صفر می‌رسه، آیکون خارج‌شونده هم همین مسیر رو برعکس طی می‌کنه.

نکتهٔ کاربردی دیگه اینه که برای تعامل‌ها از transition استفاده کن نه keyframes، چون transition وسط کار قابل قطع شدنه و keyframes مناسب توالی‌هاییه که فقط یه بار اجرا می‌شن. موقع عوض کردن تم روشن و تیره هم باید همهٔ انیمیشن‌ها خاموش بشن. will-change فقط برای transform، opacity و filter توصیه شده، و اگه المانی موقع انیمیشن یکی دو پیکسل بی‌دلیل جابه‌جا می‌شه، مخصوصاً تو سافاری iOS، اضافه کردن will-change: transform مشکل رو حل می‌کنه.

تو تایپوگرافی و رنگ، قانون‌ها بیشتر دربارهٔ نظم‌ان. فقط .woff2 روی وب، font-variant-numeric: tabular-nums برای هر عددی که تغییر می‌کنه مثل تایمر و قیمت و ستون داده، متن بلند بین ۶۰ تا ۷۵ کاراکتر در هر خط، و text-wrap: balance برای تیتر و text-wrap: pretty برای توضیح. سمت رنگ هم می‌گه کامپوننت‌ها باید از توکن معنایی مثل --color-text-secondary استفاده کنن نه از مقدار خام مثل --blue-500، اسم توکن نباید از روی ظاهر یا اولین کاربردش انتخاب بشه، و پالت حالت تیره فقط برعکس پالت روشن نیست.

طولانی‌ترین بخش، دسترسی‌پذیریه و لحنش قاطع‌تره. المان بومی درست رو به کار ببر، :focus-visible رو استایل بده و outline: none رو بدون جایگزین نذار. برای tabindex فقط صفر و منفی یک، چون مقدار مثبت ترتیب طبیعی تب رو خراب می‌کنه. به دکمه‌های فقط‌آیکون یه aria-label توصیفی بده و جلوی paste رو نگیر، چون آدم‌ها رمز و کد یک‌بارمصرف رو کپی می‌کنن. آخر فهرست هم به متن رابط می‌رسه: لیبل دکمه با فعل شروع بشه و مخاطب رو «تو» خطاب کن نه «کاربر».

نکات کلیدی:

• به جای transition: all فقط اسم همون ویژگی‌هایی که تغییر می‌کنن رو بنویس
• مقیاس دکمه موقع فشرده شدن بین 0.95 و 0.98 با transition: scale 200ms ease-out
• will-change فقط برای transform، opacity و filter
• متن بلند بین ۶۰ تا ۷۵ کاراکتر در هر خط و فونت وب همیشه .woff2
• توکن معنایی مثل --color-text-secondary جای مقدار خام مثل --blue-500 می‌شینه
• ناحیهٔ کلیک حداقل 24x24px، روی لمسی 44x44px و روی دسکتاپ 40x40px
• tabindex مثبت ترتیب تب رو خراب می‌کنه؛ فقط صفر و منفی یک
• استایل هاور رو داخل @media (hover: hover) بذار تا روی لمسی نچسبه