وضعیت و حالت های مختلف اجزای رابط کاربری

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

استفاده مؤثر از تغییرات ظریف طراحی برای تمایز بین حالت‌های عناصر تو رابط کاربری‌تون، نشانه‌های بصری ارزشمندی رو به کاربراتون ارائه می‌ده. این نشانه‌ها اونا رو تو کارهایی که باید انجام بدن راهنمایی می‌کنه و بیشتر از طرح‌هایی که هیچ بازخوردی ارائه نمی‌دن، اونا رو جذب می‌کنه.

حالت فعال (Enabled state)

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

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

حالت غیرفعال (Disabled state)

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

حالت شناور (Hover state)

وقتی موس کاربر روی یه عنصر قرار بگیره، باید به حالت شناور خودش تغییر کنه. این به کاربرا یه نشانه بصری می‌ده که می‌تونن یه نوع عملی رو با عنصر انجام بدن.

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

حالت فشرده (Pressed state)

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

حالت متمرکز (Focused state)

حالت متمرکز برای دسترسی‌پذیری حیاتیه. در حالی که بعضی از کاربرا هرگز حالت متمرکز رو نمی‌بینن، کسایی که از صداشون یا کلید Tab برای حرکت تو یه رابط کاربری استفاده می‌کنن، از یه نشانه بصری که بهشون می‌گه کدوم عنصر در حال حاضر متمرکزه، سود می‌برن.

حالت‌های متمرکز اغلب با یه حاشیه دور عنصر، یه پوشش یا یه تغییر تو رنگ پرکننده عنصر نشون داده می‌شن. مراقب باشین که از یه حالت متمرکز که خیلی شبیه به حالت‌های دیگه عنصر باشه استفاده نکنین، تا کاربرا رو گیج نکنین.

حالت انتخاب شده (Selected state)

حالت انتخاب شده نشون دهنده انتخاب کاربره و بیشتر در اطراف عناصری مثل جعبه‌های انتخاب یا دکمه‌های رادیویی دیده می‌شه. این حالت صرف نظر از اینکه کاربر چطور انتخابش رو انجام داده، چه با لمس، کلیک، استفاده از صدا یا با کیبوردش، ظاهر می‌شه.

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

حالت فعال شده (Activated state)

حالت‌های فعال شده نشون می‌دن که کاربر چی رو می‌بینه، مثل فیلترهای نتیجه جستجو یا تب فعلی تو یه رابط کاربری. اونا معمولاً با پوشش‌ها یا تغییر رنگ‌ها برجسته می‌شن.

حالت‌های فعال شده یه نقطه مرجع فوری به کاربرا می‌دن تا خودشون رو تو یه وب‌سایت یا برنامه پیدا کنن. مطمئن بشین که اونا بدون تحت الشعاع قرار دادن سایر عناصر طراحی، به راحتی تو رابط کاربری قابل مشاهده هستن.

حالت کشیده شده (Dragged state)

وقتی یه رابط کاربری شامل عناصر قابل کشیدن باشه (مثل امکان تغییر ترتیب یه لیست پخش)، ایجاد یه حالت کشیده شده ضروریه. وقتی یه عنصر نگه داشته می‌شه و از یه جا به جای دیگه منتقل می‌شه، وارد این حالت می‌شه.

یکی از مؤثرترین راه‌ها برای نشون دادن یه حالت کشیده شده، یه سایه صافه که ارتفاع رو نشون می‌ده، انگار که عنصر بلند شده. کاهش شفافیت عناصر اطراف هم می‌تونه تو این حالت کمک کنه. مطمئن بشین که یه نشانه بصری برای جایی که عنصر کشیده شده وقتی رها می‌شه قرار می‌گیره، قرار بدین.

حالت‌های روشن و خاموش (On and off states)

مثل کلیدهای فیزیکی، کلیدهای رابط کاربری می‌تونن هر دو حالت روشن و خاموش رو داشته باشن. حالت روشن فوریه و بلافاصله تأثیر می‌ذاره. رنگ و ظاهر کلی باید تغییر کنه و به وضوح نشون بده که کلید روشنه یا خاموش.

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

حالت خطا (Error state)

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

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