راهنمای سریع الگوهای UI برای کنترل‌های فرم

راهنمای سریع الگوهای UI برای کنترل‌های فرم

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

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

1. ورودی های متن

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

نوار جستجوی گوگلنوار جستجوی گوگلنوار جستجوی گوگل

تیک، تیک، تیک – چک باکس ها مانند چک باکس های دیجیتالی برای لیست کارهای شما هستند. Trello (ابزار مدیریت پروژه) با استفاده از چک باکس ها برای مدیریت بدون دردسر وظایف، آن را ثابت می کند. آنها به طور رضایت بخشی قابل کلیک هستند و پیگیری موارد تکمیل شده را آسان می کنند. مثل این است که چیزهایی را بدون خط‌نوشته‌های نامرتب از فهرست خود حذف کنید.

تابلوی Trello که چک باکس‌ها را نشان می‌دهدتابلوی Trello که چک باکس‌ها را نشان می‌دهدتابلوی Trello که چک باکس‌ها را نشان می‌دهد

3. دکمه های رادیویی

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

انیمیشن دکمه رادیوییانیمیشن دکمه رادیوییانیمیشن دکمه رادیویی

4. منوهای کشویی

منوی کشویی نوع دیگری از کنترل فرم است که با کلیک یا ضربه زدن، لیستی از گزینه ها را نمایش می دهد و به کاربران امکان می دهد یک گزینه را از لیست انتخاب کنند. آنها معمولاً برای صرفه جویی در فضا و ساده کردن ناوبری با ارائه گزینه ها در قالب فشرده تا زمانی که نیاز باشد استفاده می شوند.

UI - کشوییUI - کشوییUI - کشویی

چه زمانی از منوهای کشویی یا دکمه های رادیویی استفاده کنیم؟

اگر کمتر از پنج گزینه وجود دارد، از دکمه های رادیویی استفاده کنید. اگر بیش از پنج گزینه وجود دارد، از یک کشویی استفاده کنید – برای جلوگیری از داشتن یک لیست بسیار طولانی.

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

5. کنترل لغزنده

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

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

اسلایدر رابط کاربری را کنترل می کنداسلایدر رابط کاربری را کنترل می کنداسلایدر رابط کاربری را کنترل می کند

6. دکمه ها و حالت های دکمه

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

حالت پیش فرض یک دکمه ظاهر اولیه آن است که برای اولین بار توسط کاربر مواجه می شود. خنثی و بی تکلف است و منتظر ورودی کاربر است.

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

حالت فعال زمانی فعال می شود که کاربر روی دکمه کلیک یا ضربه می زند. این عملکرد کاربر را تأیید می کند و بازخورد فوری از فعال شدن دکمه ارائه می دهد. این حالت اغلب شامل تغییرات بصری، مانند تغییر رنگ یا افزایش کنتراست، برای نشان دادن حالت فشار دادن دکمه است.

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

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

دکمه حالت شناور و فعالدکمه حالت شناور و فعالدکمه حالت شناور و فعال

درباره دکمه‌های Tuts+ بیشتر بدانید:

در اینجا لیست کنترل های فرم به پایان می رسد!

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

با مثال‌های واقعی از شرکت‌هایی مانند Google، Trello و Netflix، واضح است که کلید موفقیت در شکل‌گیری کنترل در سادگی و شهودی است. بنابراین ادامه دهید، مقداری جادوی UX را در کنترل‌های فرم خود بپاشید – کاربران شما از شما برای آن تشکر خواهند کرد.

منبع: https://webdesign.tutsplus.com/ui-patterns-for-form-controls–cms-108661a