Element States | حالت‌های عنصر
حالت‌های عنصر مجموعه وضعیت‌هایی است که یک جزء رابط در جریان تعامل می‌تواند داشته باشد: پیش‌فرض، شناور، فوکوس، فعال یا فشرده، انتخاب‌شده، غیرفعال، بارگذاری، خطا و گاهی موفقیت. طراحی فقط ماکت حالت آرام نیست؛ طراحی گفتگوی لحظه‌ای میان کاربر و سیستم است. وقتی حالت‌ها ناقص تعریف شوند، کاربر نمی‌فهمد آیا کلیک ثبت شده، آیا فیلد معتبر است، یا چرا دکمه‌ای مرده به نظر می‌رسد. سیستم طراحی بالغ حالت را مثل اندازه و رنگ، توکن و قرارداد می‌کند تا مهندسی حدس نزند و تجربه در همه صفحات یک‌صدا بماند.
عنصر زنده است نه فقط قاب استاتیک
ماکت زیبای حالت پیش‌فرض اغلب در ارائه برنده است، اما محصول واقعی پر از حرکت است: نشانگر وارد می‌شود، انگشت فشار می‌دهد، صفحه‌کلید فوکوس را جابه‌جا می‌کند، شبکه کند است، اعتبارسنجی شکست می‌خورد. اگر فقط حالت آرام ساخته شده باشد، توسعه یا حالت را از قلم می‌اندازد یا در هر صفحه اختراع می‌کند. نتیجه ناهماهنگی و باگ‌های ظریف اعتماد است—مثل دکمه‌ای که بعد از ارسال همچنان فعال می‌ماند و سفارش دوبل می‌سازد. فکر کردن به چرخهٔ عمر تعامل جزء از روز اول، هزینهٔ این غافلگیری را کم می‌کند.
حالت‌ها همچنین روایت توانمندی را می‌سازند. کنترل غیرفعال بدون توضیح، کاربر را مجازات می‌کند؛ کنترل غیرفعال با راهنمای «ابتدا فروشگاه را انتخاب کنید» آموزش می‌دهد. تفاوت در طراحی حالت به‌علاوهٔ پیام همراه است، نه فقط خاکستری کردن رنگ.
حالت‌های پایه تعامل: از پیش‌فرض تا غیرفعال
پیش‌فرض نقطهٔ شروع دیداری و معنایی است. شناور روی اشاره‌گر ظریف می‌گوید این چیز تعاملی است؛ در لمس خالص ممکن است شناور وجود نداشته باشد پس نباید اطلاعات حیاتی فقط در شناور پنهان شود. فعال یا فشرده بازخورد آنی فشار را می‌دهد تا تأخیر شبکه با سکوت اشتباه گرفته نشود. انتخاب‌شده در سوییچ‌ها، تب‌ها و گزینه‌ها وضعیت جاری را اعلام می‌کند و باید از پیش‌فرض و فوکوس متمایز باشد. غیرفعال اعلام می‌کند اقدام الآن ممکن نیست؛ باید کنتراست کافی برای خواندن داشته باشد اما شبیه کنترل فعال به نظر نرسد.
اشتباه رایج یکی کردن دیداری انتخاب‌شده و فوکوس است. فوکوس «من اینجا هستم برای ورودی» را می‌گوید؛ انتخاب «این گزینه فعال است» را. کاربر صفحه‌کلیدی اگر نتواند این دو را جدا کند، گم می‌شود. طراحی حالت یعنی طراحی تمایز معنادار، نه فقط تنوع رنگی تصادفی.
فوکوس، فشار و بازخورد آنی
نشان فوکوس دسترس‌پذیری حیاتی است و نباید برای زیبایی حذف شود. حلقه یاOutline با کنتراست روشن، مسیر صفحه‌کلید و فناوری کمکی را ممکن می‌کند. بازخورد فشار—تغییر مختصر مقیاس، رنگ یا سایه—به کاربر می‌گوید سیستم ضربه را گرفته است. در دکمه‌های ارسال، این بازخورد باید با قفل موقت یا حالت بارگذاری همراه شود تا ارسال‌های تکراری کم شوند. تأخیر بدون تغییر حالت، یکی از قوی‌ترین محرک‌های کلیک مضاعف و تیکت پشتیبانی است.
برای فیلدها، حالت فوکوس می‌تواند برچسب شناور، کمک‌متن و قالب ورودی را برجسته کند. حالت تکمیل‌شدهٔ معتبر گاهی با علامت ظریف همراه است، اما علامت نباید جایگزین پیام خطای روشن در حالت نامعتبر شود. ترتیب دیدن: اول بگو چه غلط است، بعد بگو چگونه درست شود.
بارگذاری، خطا و خالی به‌عنوان وضعیت درجه یک
حالت بارگذاری فقط اسپینر تزئینی نیست؛ باید بگوید چه چیزی در حال آماده‌شدن است و آیا می‌توان لغو کرد یا نه. اسکلتون برای ساختار صفحه، پیشرفت معین برای کارهای دارای درصد، و پیشرفت نامعین برای انتظار نامشخص ابزارهای متفاوت‌اند. حالت خطا باید در سطح فیلد و سطح صفحه طراحی شود: خلاصهٔ بالا برای فناوری کمکی و نشانگر کنار فیلد برای چشم. حالت خالی—لیست بدون آیتم، جستجوی بدون نتیجه—نیز وضعیت عنصر یا ظرف است و نیاز به تصویر، پیام و اقدام پیشنهادی دارد.
موفقیت و هشدار هم اگر بخشی از چرخهٔ همان عنصر باشند باید در سیستم ثبت شوند: مثلاً سوییچ ذخیره‌شده با تیک کوتاه، یا بنر ملایم. ناپدید شدن بی‌صدا بعد از ذخیره گاهی کافی است، اما در جریان‌های پرریسک تأیید صریح‌تر اعتماد می‌سازد. انتخاب میان بازخورد خاموش و بلند باید تابع شدت پیامد باشد.
هم‌ترازی حالت‌ها در سیستم طراحی و کد
نام‌گذاری مشترک میان فیگما و کد—default، hover، focus، active، disabled، loading، error، selected—از ترجمهٔ پرخطا جلوگیری می‌کند. هر حالت توکن رنگ، حاشیه، سایه و در صورت نیاز حرکت خودش را دارد. شبه‌کلاس‌های CSS و ویژگی‌های ARIA باید با ظاهر هم‌معنا باشند: غیرفعال واقعی نه فقط خاکستری دیداری که هنوز کلیک می‌پذیرد. ناهماهنگی ظاهر و رفتار بدترین نوع فریب غیرعمد است.
مستند جزء باید جدول حالت‌ها را نشان دهد، نه یک قاب تکی. داستان‌های استوری‌بوک یا معادل آن برای هر حالت، بازبینی را سریع و رگرسیون را ممکن می‌کند. وقتی محصول تم روشن و تیره دارد، همهٔ حالت‌ها باید در هر دو تم تعریف شوند؛ بسیاری از باگ‌های تم تیره دقیقاً در شناور و فوکوس ظاهر می‌شوند.
دسترس‌پذیری حالت‌ها بدون تکیهٔ صرف به رنگ
اگر تنها تفاوت خطا و پیش‌فرض قرمز شدن حاشیه باشد، کاربر بدون ادراک رنگ کامل ممکن است آن را از دست بدهد. باید نشانهٔ دوم داشت: آیکون، متن، الگو یا تغییر شکل. فوکوس نباید فقط با کاهش کنتراست «زیبا» شود تا محو گردد. حالت غیرفعال نباید آن‌قدر کم‌کنتراست باشد که متن خوانده نشود؛ استانداردها برای متن غیرفعال هم حدی از خوانایی می‌خواهند. آزمایش با صفحه‌کلید Alone، بزرگنمایی، و شبیه‌سازی کوررنگی بخشی از پذیرش حالت است نه کار اختیاری آخر.
برای اجزای مرکب مثل منوی کشویی یا تاریخ‌گزین، حالت‌ها تو در تو می‌شوند: ماشه، فهرست، گزینه، و پیام خطا. طراحی باید مشخص کند فوکوس وقتی فهرست باز است کجا می‌رود و Escape چه می‌کند. این جزئیات همان تفاوت میان جزء قشنگ و جزء قابل استفاده برای همه است.
چک پذیرش قبل از انتشار کامپوننت
قبل از دانستن جزء به‌عنوان کامل، بپرسید: آیا پیش‌فرض، فوکوس، فعال، غیرفعال و در صورت نیاز شناور طراحی و پیاده شده؟ آیا بارگذاری و خطا برای اقدام‌های غیرهمگام وجود دارد؟ آیا انتخاب‌شده از فوکوس جداست؟ آیا تم تیره پوشش دارد؟ آیا رفتار با ظاهر یکی است؟ آیا صفحه‌کلید و خواندن صفحه مسیر روشنی دارند؟ اگر پاسخی منفی است، جزء هنوز در حالت «ماکت» است نه «محصول».
حالت‌های عنصر لایهٔ اعتماد لحظه‌ای رابط‌اند. کاربر در کسری از ثانیه از آن‌ها می‌فهمد سیستم زنده است، شنیده است، و قوانین دارد. سرمایه‌گذاری روی این لایه کمتر از ویژگی جدید می‌درخشد اما بیش از بسیاری ویژگی‌ها از سردرگمی و خطای انسانی جلوگیری می‌کند. در سامانهٔ طراحی، حالت کامل نشانهٔ بلوغ است: تیم پذیرفته که تعامل یک رویداد نقطه‌ای نیست، بلکه مسیر کوتاهی با ایستگاه‌های روشن است.
حالت و اندازه؛ دو قرارداد مکمل نه جایگزین
اندازه عنصر می‌گوید هدف چقدر بزرگ و چقدر مهم است؛ حالت عنصر می‌گوید الآن در کدام ایستگاه تعامل ایستاده‌ایم. قاطی کردن این دو—مثلاً فقط با بزرگ‌کردن دکمه به‌جای نشان دادن بارگذاری—بازخورد ناقص می‌سازد. دکمهٔ بزرگ در حالت بارگذاری همچنان باید قفل و دارای نشان پیشرفت باشد؛ فیلد درشت در حالت خطا همچنان به پیام متنی نیاز دارد. تیم‌هایی که سیستم طراحی را حول هر دو محور توکن‌بندی می‌کنند، کمتر دچار اجزای نیمه‌کاره می‌شوند و بازبینی کیفیت را می‌توانند روی جدول حالت‌ها و مقیاس اندازه‌ها به‌صورت جداگانه اما هماهنگ انجام دهند.
سوالات متداول
وضعیت‌های یک جزء در تعامل مثل پیش‌فرض، شناور، فوکوس، فعال، انتخاب‌شده، غیرفعال، بارگذاری و خطا.
چون کاربر واقعی کلیک، فوکوس، تأخیر شبکه و خطا را تجربه می‌کند؛ بدون حالت‌های میانی بازخورد و اعتماد می‌شکند.
فوکوس محل ورودی جاری را نشان می‌دهد؛ انتخاب‌شده گزینه یا وضعیت فعال را. این دو باید دیداری متمایز باشند.
نشان فوکوس واضح، عدم تکیهٔ صرف به رنگ برای خطا، خوانایی حالت غیرفعال، و هم‌خوانی ظاهر با رفتار واقعی.
با نام‌گذاری مشترک، توکن در سیستم طراحی، جدول حالت در مستند جزء، و پوشش استوری برای هر وضعیت در هر تم.