انتخابگرها تاریخ به کاربران اجازه می دهند یک تاریخ یا طیف وسیعی از تاریخ ها را انتخاب کنند.
به کاربران اجازه می دهند تاریخ یا دامنه تاریخ را انتخاب کنند. آنها باید برای زمینه ای که در آن ظاهر می شوند مناسب باشند به دوشکل می توان اجرا کرد:
تناسب
می توانند تاریخ گذشته، حال یا آینده را نمایش دهند به کاربرد و وظیفه آن بستگی دارد.
وضوح
به صورت واضح تاریخ های مهم، جاری و انتخاب شده را نمایش دهد.
قابلیت درک
برای اینکه انتخاب زمان یا تاریخ بصری باشد از پترن های رایج استفاده کنید مثل تقویم.
انتخابگر تقویم موبایل
کاربرد
برای انتخاب تاریخ در آینده نزدیک یا گذشته می توان استفاده کرد.زمانی مفید هستند که آنها را در فرمت تقویم ماه ببینیم. آنها در dialog نمایش داده می شوند.
معمولا در کیس هایی استفاده می شوند که شامل موارد زیر است:
رزرو رستوران
برنامه ریزی یک جلسه
آنها برای انتخاب تاریخ در گذشته های خیلی دور یا آینده ایده آل نیستند چون نیاز به navigation بیشتری دارند مانند تاریخ انقضا یا تاریخ تولد.
انتخابگر تقویم موبایل امکان انتخاب یک تاریخ و سال واحد را می دهد.
پدینگ چپ و راست را 16dp از لبه صفحه حفظ کنید. بالا و پایین انتخاب کننده باید به صورت عمودی در وسط صفحه قرار بگیرد. سمت چپ و راست را بیش از 16dp در نظر نگیرید چون اهداف لمسی کوچکتری ایجاد می کند.(یعنی با کوچکتر شدن دکمه ها و آیکون ها انتخاب آن ها با انگشتان دست سخت تر می شود.)
برای انتخاب تاریخ در گذشته های دور یا آینده از تقویم استفاده نکنید به جای آن از انتخابگر ورودی موبایل یا تکست فیلد استفاده کنید.
رفتار
در انتخابگرهای تقویم موبایل به چندین روش در تاریخ ها می توان حرکت کرد:
برای جا به جایی میان ماه ها، swipe افقی
برای جا به جایی بین سال ها، اسکرول عمودی
برای دسترسی به انتخاب سال، ضربه روی سال
انتخابگر تقویم تلفن همراه با جهت گیری دستگاه سازگار هستند.
استفاده
انتخابگر دامنه تاریخ امکان انتخاب طیفی از تاریخ را فراهم می کند. آنها کل صفحه را می پوشانند.
موارد استفاده متداول شامل:
بوکینگ پرواز
رزرو هتل
رفتار
در انتخابگرهای دامنه تاریخ موبایل به چندین روش در تاریخ ها می توان حرکت کرد:
برای انتخاب دامنه تاریخ، ضربه روی تاریخ شروع و تاریخ پایان روی تقویم
برای جابه جایی بین ماه ها، اسکرول عمودی
استفاده
انتخابگرهای input تاریخ موبایل اجازه می دهند تا با اعداد روی صفحه کلید تاریخ های دستی وارد کنیدکاربران می توانند تاریخ یا طیف تاریخ را در دیالوگ وارد کنند.
انتخابگر ورودی تاریخ موبایل
انتخابگرهای ورودی تاریخ موبایل اجازه می دهند تا ورودی صفحه کلید برای انتخاب تاریخ یا دامنه تاریخ استفاده شود.
برای تاریخ هایی که نیاز به نمایش تقویم ندارند انتخابگر ورودی تاریخ را به عنوان پیش فرض قرار دهید.
از طرف دیگر یک تکست فیلد با متن راهنمای مناسب می تواند برای تاریخ ها، به سرعت استفاده کمک کند مانند استفاده در یک فرم.
رفتار
به انتخابگر ورودی تاریخ موبایل از طریق هر یک از انتخابگر ها با آیکون ادیت می توان دسترسی پیدا کرد.
انتخابگرهای تاریخ دسکتاپ
استفاده
انتخابگرهای تاریخ دسکتاپ امکان انتخاب یک تاریخ و سال خاص را می دهند. انتخابگر تاریخ دسکتاپ به صورت پیش فرض به صورت date input field نمایش داده می شوند و یک تقویم dropdown زمانی که کاربر روی input filed ضربه می زند ظاهر می شود.
انتخابگرهای تاریخ دسکتاپ برا جا به جایی تاریخ در گذشته (یا آینده) نزدیک و گذشته (یا آینده) دور ایده آل هستند زیرا راه های مختلفی برای انتخاب تاریخ ها ارائه می دهند.
رفتار
کاربرها می توانند با استفاده از یک صفحه کلید یا با حرکت به ui تقویم تاریخ را وارد کنند، هر دو گزینه بلافاصله در دسترس است زمانی که به انتخابگر تاریخ دسکتاپ دسترسی داشته باشید.
انتخابگر طیف تاریخ دسکتاپ
انتخابگر های طیف تاریخ دسکتاپ امکان انتخاب طیفی از روزها را فراهم میکنند. آن ها با تقویم و date input field ها نمایش داده می شوند.
از حالت hover برای پیش نمایش انتخاب کاربر استفاده کنید.
برای حالت hover و انتخاب شده از استایل یکسان استفاده نکنید.
برای توضیح نحوه استفاده از کنترل های انتخابگر از tooltip ها می توانید استفاده کنید.
موارد استفاده از tooltip ها:
نمونه سفارشی شده 1
انتخابگرها می توانند برای بیان هویت برند به وسیله تغییر در طرح، تایپوگرافی، شکل، رنگ و حرکت سفارشی سازی شوند.
رنگ
از رنگ می توان برای ایجاد لحظات دیداری بولد در یک picker استفاده کرد.
شکل
شکل نشان دهنده انتخاب میتواند برای درجه میزان بولد بودن مطلوب یا هم تراز کردن با استایل خاص سفارشی سازی شود.
طرح بندی
انتخابگرهای تاریخ از عرض کل صفحه استفاده می کنند.
دسترسی
در تلفن همراه، یک انتخابگر تاریخ به کاربران امکان ورود دستی تاریخ به وسیله ورودی متن، بدون استفاده از انتخابگر را می دهد. interaction امکان روش های ورود چندگانه را می دهد و آن را در دسترس افرادی قرار می دهد که از فناوری کمکی استفاده می کنند.
در دسکتاپ، فیلد متنی می تواند برای ورودی استفاده شود.
در موبایل، انتخابگر ورودی باید برای انتخابگر تقویم به وسیله آیکون ویرایش در دسترس باشد.
اهداف لمسی
اهداف لمسی برای انتخابگر تاریخ موبایل باید به اندازه ممکن بزرگ باشد و فضای موجود را را پر کند. حداقل اندازه هدف لمسی برای انتخابگر موبایل 32X32 dp است.
در انتخابگر دامنه تاریخ موبایل، اهداف لمسی حداکثر 48X48 dp هستند.
انتخابگر تقویم موبایل یک دیالوگ استاندارد است.
پدینگ راست و چپ: 24dp
پدینگ بالا و پایین نوار منو: 16dp
آیکون ویرایش: 24x24 dp
اولین baseline: از بالا 32dp
دومین baseline: از اولین بیسلاین 72dp
سومین baseline: از پایین هدر 32dp
پدینگ بین button و اسم ماه: 4dp
دکمه dropdown ماه: 24x24 dp
پیجینیشن ماه: 24x24 dp
پدینگ بین پیجینیشن ماه: 24dp
ابعاد: 328x512 dp
پدینگ راست و چپ: 12dp
باکس محدودیت تاریخ: 40x40 dp
تاریخ انتخاب شده:36x36 dp
پدینگ میان تاریخ ها: 4dp
انتخابگر تقویم موبایل حاوی یک منوی dropdown در معرض نمایش است که انتخاب سال را امکان پذیر می کند.
حاشیه های راست و چپ: 24dp
باکس محدودیت سال: 88x52 dp
سال انتخاب شده: 72x36 dp
انتخابگر تقویم موبایل یک دیالوگ تمام صفحه است.
حاشیه های راست و چپ: 12dp
ارتفاع هدر: 128dp
فاصله متن هدر: 60dp از حاشیه چپ
اولین baseline: از دومین بیسلاین 36dp
دومین baseline: از پایین هدر 24dp
سومین baseline (نام ماه): 32dp از روزهای هفته
آیکون ویرایش: 24x24 dp
پدینگ آیکون ویرایش: 16dp از راست
باکس محدودیت تاریخ: 48x48 dp
تاریخ انتخاب شده: 40x40 dp
پدینگ میان ماه ها: 4dp
انتخابگر تقویم موبایل یک دیالوگ استاندارد است.
ابعاد: 264x328 dp
پدینگ راست و چپ: 24dp
اولین baseline: از بالا 28dp
دومین baseline: از اولین بیسلاین 72dp
آیکون ویرایش: 24x24 dp
تکست فیلد: 16dp از پایین header
ارتفاع تکست فیلد: 56dp
پدینگ چپ منو: 24dp
پدینگ راست منو: 8dp
پدینگ بالا منو: 16dp
پدینگ پایین منو: 12dp
دکمه dropdown ماه: 24x24 dp
پیجینیشن ماه: 24x24 dp
پدینگ بین دکمه و اسم ماه: 4 dp
پدینگ بین پیجینیشن ماه: 24 dp
پدینگ چپ و راست ناحیه تقویم: 16dp
پدینگ پایین: 8dp
اولین baseline: از بالا 32 dp
دومین baseline: از اولین بیسلاین 36 dp
باکس محدودیت تاریخ: 32x32 dp
تاریخ انتخاب شده: 28x28 dp
پدینگ چپ: 12dp
پدینگ راست: 20dp
پدینگ پایین: 8dp
ارتفاع منو: 52dp
پدینگ بین منو و سال ها: 4dp
باکس محدودیت سال: 56x32dp
سال انتخاب شده: 52x28dp
انتخابگر طیف تاریخ دسکتاپ شامل دو انتخابگر مجزا که ماه های متوالی را نمایش می دهد.
پدینگ راست،چپ و داخلی: 16dp
پدینگ پایین: 8dp
بیسلاین عنوان ماه از بالا: 32dp
پیکان های پیجینیشن: 24x24 dp
