طراحی فرم و فیلد های متنی – کامپوننت های رابط کاربری

قوانین ساده UX-UI (برای طراحی فرم و فیلد) که به شما کمک می کند فرم هایی را طراحی کنید که کاربران دوست دارند آنها را پُر کنند.سالهاست که فرم ها وجود دارند. از آنها برای ساده کردن تهیه پیش نویس ها و دعاوی حقوقی استفاده می شده. با پیشرفت تکنولوژی و ابزار های جمع آوری اطلاعات فرم ها نیز تکامل پیدا کرده اند. از آنجایی که فرم های چاپی سالها وجود داشته اند، می توانیم نکاتی را از طراحی آن‌ها یاد بگیریم.تاریخچه فیلد ها و فرم ها ui DESIGNآناتومی فیلد های متنی – TextBoxفیلد های متنی به کاربران اجازه می دهد متنی را در واسط کاربری وارد کنند. آنها معمولا در فرم ها یا دیالوگ باکس ها قرار می گیرند. طراحی فیلد های متنی باید طوری باشد که استفاده از آن و تعامل با آن برای کاربر روشن و واضح باشد. در واقع، تکست فیلد ها باید قابل کشف، در دسترس و کارآمد باشند.آناتومی تکست فیلدعناصر کلیدی یک فیلد متنیContainer – محل ورود اطلاعات و تعامل با کاربرInput text – محل وارد کردن متنLabel Text – محلی که به کاربر می گوییم چه اطلاعاتی را در فیلد وارد کند.Placeholder text – شرح یا نمونه ای از اطلاعاتی که قصد داریم کاربر وارد کند. (پس از وارد کردن اطلاعات توسط کاربر این قسمت حذف می شود.)Helper or Validation text(optional) – متن کمکی یا اعتبار سنجی (اختیاری است)Leading icon(optional) – ایکونی که نوع ورودی مورد نیاز ما را تعیین می کند. (اختیاری است)Trailing icon(optional) – کنترل اضافی برای متن وارد شده، مانند پاک کردن، پنهان کردن/نمایش و غیره (اختیاری است)انواع فیلد های متنیمدل های مختلف فیلد های متنی برای مدیریت بهتر نوع خاصی از اطلاعات ایجاد شده اند. مثلا برای گرفتن تاریخ، شماره کارت بانکی و… در اینجا چندتا از ورودی های مختلفی که در رابط های کاربری زیاد استفاده می کنیم را قرار دادیم:انواع فیلد های متنیانواع و نوع های مختلف تکست باکس(ما به طور خاص در مورد نوع های دیگر ورودی مانند چک باکس ها و دکمه های رادیویی صحبت نمی کنیم زیرا در ادامه این سری به آنها خواهیم پرداخت).از نوع ورودی مناسب برای جمع آوری داده استفاده کنید.استفاده از نوع مناسب فیلد متنی برای دریافت داده، به کاربران کمک می کند تا اطلاعات را با فرمت مناسب وارد کنند و از اشتباه جلوگیری کنند و این فرآیند را تا حد امکان آسان و کارآمد می کند.استفاده از فیلد مناسب برای جمع آوری دادهفیلدهای متنی باید ظاهر خود را بر اساس تعاملات حالت و کاربر تغییر دهندتغییر ظاهر بر اساس تعاملات کاربراین کار را می توان با ارائه نشانه های بصری که وضعیت فیلد متنی را به اشتراک می گذارد، انجام داد. فیلدهای متن ورودی می‌توانند یکی از حالت‌های زیر را داشته باشند:Inactive – وقتی از فیلد استفاده نمی کنیم،Hover – وقتی موس روی آن قرار میگیرد.Disabled – غیرفعالFocused – متمرکز،Validation – اعتبارسنجیError – خطا.همه حالت ها باید به وضوح از یکدیگر متمایز شوند و در ظاهر و کاربرد کل فرم ها یکسان باشند. بهتر است بهترین شیوه‌ها را دنبال کنید تا مدل‌های ذهنی کاربر را به چالش نکشید. (استاندارد ها را دنبال کنید.)بهترین استایل را برای فیلد متنی انتخاب کنید.معمولاً سه گزینه اصلی برای تعیین موقعیت برچسب خواهید داشت: تراز بالا، چپ و راست. بهترین استایل برای شما به اهداف و اندازه های کلیدی فرم، کتابخانه کامپیوننت ها و پلتفرمی که برای آن طراحی می کنید بستگی دارد. همه آنها مزایا و معایبی دارند.استایل مناسب برای تکست باکس هاورودی زیر خطی که با دستورالعمل‌های اصلی طراحی متریال رایج شده است، بهترین گزینه نیست. قبلاً بر اساس مطالعه بزرگ Evolution of Material Design تجدید نظر شده بود که به شما توصیه می کنم بررسی کنید. جالب توجه است که همین مطالعه نشان داد که کاربران ورودی هایی با گوشه های گرد را ترجیح می دهند.تراز کردن متن؛ سمت چپ فیلد متنیاین روش برای زمانی که داده های درخواست شده برای کاربران ناآشنا باشد، انتخاب خوبی است.مزایا: لیبل ها ها به راحتی مقیاس پذیر و واکنشگرا خواهند بود، استفاده خوب از فضای عمودیمعایب: فاصله زیاد و متغیر بین برچسب ها و ورودی های مربوطه باعث افزایش زمان تکمیل می شود.تراز کردن متن فیلد سمت چپبرای مطالعه مقاله کامل وارد لینک زیر شوید. https://hossein-aslani.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%81%d8%b1%d9%85-%d9%88-%d9%81%db%8c%d9%84%d8%af-%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d9%86%db%8c-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa-%d9%87%d8%a7/