فیلدهای متنی در طراحی متریال

فیلدهای متنی در طراحی متریال

تاریخ انتشار: 14 فروردین 1395

تعداد بازدید: 77 نفر

فیلدهای متنی به کاربر اجازه میدهند تا متن را وارد نماید، متنی را انتخاب کند و یا داده ای را از طریق قابلیت تکمیل خودکار (auto completion) بیابد.

ورودی :

لمس کردن یک فیلد متنی باعث قرار گرفتن علامت اشاره گر در آن فیلد و نمایش کیبورد میشود.

انواع ورودی ها :

نوع فیلد متنی مشخص میکند که چه نوع داده هایی میتوانند در آن قرار بگیرند.

انواع رایج ورودی ها :

  • عددی : شماره تلفن، شماره کارت اعتباری، PIN
  • متنی : نام، نام کاربری، آدرس سایت (URL)

بزرگنمایی اتوماتیک :

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

برچسب ها :

زمانی که کاربر شروع به تایپ کردن در فیلد متنی می نماید، برچسب آن فیلد به بالای فیلد منتقل میشود.
 



برچسب های داخلی شناور

رنگ برچسب :

رنگ برچسب باید نشان دهنده پالت رنگ برنامه شما باشد، در حالی که دارای نرخ کنتراست مناسبی هم میباشد.

زمینه روشن :


 

زمینه تیره :


 

مشخصات :

  • فونت ورودی و متن کمکی : 16sp Roboto Regular
  • فونت برچسب : 12sp Roboto Regular
  • ارتفاع قطعه : 72dp
  • padding بالا و پایین متن : 16dp
  • padding جداکننده فیلد متنی : 8dp

ارتفاع برچسب : 72dp
padding بالای متن برچسب : 16dp
padding بین برچسب و متن ورودی : 8dp
padding پایین متن ورودی (شامل جداکننده) : 16dp
padding پایین جداکننده متن : 8dp


متن ورودی و برچسب : 13sp
ارتفاع برچسب : 60dp
padding بالای متن برچسب : 12dp
padding بین برچسب و متن ورودی : 4dp
padding پایین متن ورودی (شامل جداکننده) : 12dp
padding پایین جداکننده متن : 4dp

سبک :

رنگ :

رنگ فیلدهای متنی باید نشان دهنده پالت رنگ های برنامه شما باشد.
  • فیلدهای متنی و علامت اشاره گر : رنگ مشخص و تأکیدی برنامه یا رنگ متفاوت را برای فیلد متنی و اشاره گر انتخاب نمایید.
  • خطا (error) : از یک رنگ متفاوت برای نشان دادن خطا استفاده نمایید مانند یک سایه با رنگ گرمتر مثل قرمز یا نارنجی

فیلد متنی یک خطی :

این فیلدها در صورت طولانی شدن متن ورودی و رسیدن آن به انتهای فیلد، اشاره گر را به ابتدای فیلد انتقال میدهند.
 



فیلد متنی یک خطی
 

زمینه روشن :

رنگ انتخابی شما باید نشان دهنده پالت رنگ های برنامه باشد.
  • فونت ورودی و متن کمکی : 16sp Roboto Regular
  • متن کمکی در حالت فعال : مشکی 54%
  • ارتفاع قطعه : 48dp
  • padding بالا و پایین متن : 16dp
  • padding جداکننده فیلد متنی : 8dp

زمینه تیره :

  • متن کمکی در حالت فعال : مشکی 70%


فیلد متنی یک خطی
ارتفاع : 48dp
padding بالا و پایین متن : 16dp
padding پایین جداکننده : 8dp

فیلد متنی یک خطی متراکم
متن کمکی و ورودی : 13sp
ارتفاع : 40dp
padding بالا و پایین متن : 12dp
padding پایین جداکننده : 4dp

زمینه روشن با آیکون :

  • فونت ورودی و متن کمکی : 16sp Roboto Regular
  • ارتفاع قطعه : 48dp
  • padding بالا و پایین متن : 16dp
  • padding جداکننده فیلد متنی : 8dp

زمینه روشن در حالت نرمال با متن کمکی، در حالت فعال و در حالت نرمال با متن ورودی

 

زمینه تیره با آیکون :


زمینه تیره در حالت نرمال با متن کمکی، در حالت فعال و در حالت نرمال با متن ورودی


فیلد متنی یک خطی به همراه آیکون
ارتفاع : 48dp
padding بالا و پایین متن : 16dp
padding پایین جداکننده : 8dp
آیکون : 24dp


فیلد متنی یک خطی متراکم به همراه آیکون
متن کمکی و ورودی : 13sp
ارتفاع : 40dp
padding بالا و پایین متن : 12dp
padding پایین جداکننده : 4dp
آیکون : 20dp

فیلد متنی چند خطی :

در این فیلدها زمانی که متن طولانی شده و به انتهای فیلد میرسد، ادامه متن اتوماتیک به خط دیگر منتقل میشود و در صورت زیاد شدن به صورت عمودی scroll میگیرد.
 

فیلد متنی چند خطی
 

زمینه روشن :

رنگ انتخابی شما باید نشان دهنده پالت رنگ های واسط کاربری شما باشد.
  • فونت ورودی و متن کمکی : 16sp Roboto Regular
  • فونت برچسب : Roboto Regula 12sp
  • padding بالا و پایین متن : 16dp
  • padding جداکننده فیلد متنی : 8dp

فیلد متنی چند خطی با زمینه روشن در حالت نرمال با متن کمکی، در حالت فعال و در حالت نرمال با متن ورودی

 

زمینه تیره :


فیلد متنی چند خطی با زمینه تیره در حالت نرمال با متن کمکی، در حالت فعال و در حالت نرمال با متن ورودی


زمینه تیره
padding بالا و پایین برچسب : 16dp


زمینه تیره متراکم
متن برچسب و ورودی : 13sp
padding بالا و پایین متن برچسب : 12dp

فیلد متنی با پهنای کامل (full width) :

این نوع فیلدها مناسب عملیات های عمقی تر میباشند.



فیلد متنی با پهنای کامل

فیلدهای متنی یک خطی و چند خطی :

  • فونت متن ورودی و کمکی : 16sp Roboto Regular
  • padding بالا و پایین متن : 20dp

فیلدهای متنی یک خطی و چند خطی در حالت های نرمال، فعال و نرمال با ورودی چندخطی


فیلد متنی یک خطی تمام پهنا
ارتفاع : 56dp
padding بالا و پایین متن : 20dp

فیلد متنی یک خطی متراکم با پهنای کامل
متن کمکی و ورودی : 13sp
ارتفاع : 48dp
padding بالا و پایین متن : 16dp



شمارشگر تعداد کاراکتر :

در صورت وجود محدودیت تعداد کاراکتر از شمارشگر برای شمارش تعداد کاراکترها استفاده نمایید.

فیلد متنی یک خطی با شمارشگر کاراکتر :

متن کانتر : 12sp Roboto Regular

فیلد متنی یک خطی با شمارشگر کاراکتر به همراه خط سبز که نشان میدهد تعداد کاراکترهای وارد شده توسط کاربر از حد مجاز عبور نکرده است.


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

 

فیلد متنی چند خطی با شمارشگر کاراکتر :

متن کانتر : 12sp Roboto Regular





فیلد متنی تمام پهنا با شمارشگر کاراکتر :

 

فیلد متنی تمام پهنا با شمارشگر کاراکتر


فیلدهای متنی یک خطی و چند خطی در حالت فعال



فیلد متنی با قابلیت تکمیل خودکار :

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

 

فیلد متنی با قابلیت تکمیل خودکار

فیلد متنی با قابلیت تکمیل خودکار به صورت کشویی

 

تکمیل خودکار داخلی :

کلمه پیشنهادی به صورت کشویی باز نمی شود بلکه در داخل فیلد نمایش داده میشود.
 

تکمیل خودکار داخلی
 

فیلتر جستجو :

نوار اپلیکیشن میتواند مانند یک فیلد متنی عمل نماید. در زمان تایپ متن، محتوا فیلتر شده و مرتب میشود و نمایش داده میشود.
 

نوار اپلیکیشن مانند یک فیلد متنی عمل میکند.


نوار اپلیکیشن مانند یک فیلد متنی عمل میکند و در زمان تایپ متن، محتوا فیلتر شده و مرتب میشود و نمایش داده میشود.


فیلدهای ضروری :

جهت نمایش این نوع فیلدها یک علامت * در کنار آن ها قرار دهید و همچنین در پایین فیلد توضیحی در این باره بنویسید که پر کردن آن فیلد اجباری میباشد.

متن کمکی :

متن کمکی میتواند در پایین فیلد متنی و به صورت دائمی قرار بگیرد یا تنها با کلیک کردن بر روی فیلد مورد نظر ظاهر شود.
 

فیلدهای ضروری به علامت ستاره نمایش داده شده اند.

 

رمز عبور (password) :

زمانی که رمز عبور را وارد میکنید کاراکترهای آن به طور پیش فرض پنهان (مخفی) میباشد. و به جای کاراکترها، دایره های کوچک نمایش داده میشوند.
فعال و غیر فعال کردن حالت نمایش رمز عبور :
زمانی که آیکون حالت نمایش در کنار یک فیلد متنی قرار داده میشود به این معنی میباشد که میتوان حالت نمایش آن فیلد را تغییر داد(فعال یا غیرفعال کردن).
  • فعال : شفافیت آیکون 54%، رمز عبور نمایش داده میشود.
  • غیرفعال : شفافیت آیکون 38%، رمز عبور مخفی بوده و با دایره های کوچک نمایش داده میشود.
 

آیکون حالت نمایش در سمت راست فیلد متنی


مطلب بعدی -> tooltip

اشتراک گذاری:
021-41658