باید ها و نبایدهای انتخابگرهای تاریخ (date Pickers) در material design

انتخابگرها تاریخ به کاربران اجازه می دهند یک تاریخ یا طیف وسیعی از تاریخ ها را انتخاب کنند. به کاربران اجازه می دهند تاریخ یا دامنه تاریخ را انتخاب کنند. آنها باید برای زمینه ای که در آن ظاهر می شوند مناسب باشند به دوشکل می توان اجرا کرد:به صورت dialog برای موبایل به صورت Text field dropdown برای دسکتاپاصولتناسبمی توانند تاریخ گذشته، حال یا آینده را نمایش دهند به کاربرد و وظیفه آن بستگی دارد.وضوحبه صورت واضح تاریخ های مهم، جاری و انتخاب شده را نمایش دهد.قابلیت درک برای اینکه انتخاب زمان یا تاریخ بصری باشد از پترن های رایج استفاده کنید مثل تقویم.ساختارانتخاب کننده تاریخ نقویم موبایلعنوان تاریخ انتخاب شدهآیکون ورودی سوییچ به کیبوردمنوی انتخاب سالصفحه بندی ماهتاریخ فعلیتاریخ انتخاب شدهانتخابگر دامنه تاریخ در موبایل عنوان محدوده تاریخ انتخاب شدهآیکون ورودی سوییچ به کیبوردبرچسب ماه و سالتاریخ فعلیتاریخ شروعمحدوده انتخاب شدهتاریخ پایانانتخاب کننده ورودی موبایلعنوان تاریخ انتخاب شدهآیکون نمایش سوییچ به تقویمتکست فیلدانتخاب کننده ورودی دسکتاپ تکست فیلد انتخاب ماه و سالصفحه بندی ماهتاریخ امروزروز انتخاب شدهوضعیت hoverانتخاب کننده موبایلانتخابگر تقویم موبایلکاربردبرای انتخاب تاریخ در آینده نزدیک یا گذشته می توان استفاده کرد.زمانی مفید هستند که آنها را در فرمت تقویم ماه ببینیم. آنها در dialog نمایش داده می شوند.معمولا در کیس هایی استفاده می شوند که شامل موارد زیر است:رزرو رستورانبرنامه ریزی یک جلسهآنها برای انتخاب تاریخ در گذشته های خیلی دور یا آینده ایده آل نیستند چون نیاز به navigation بیشتری دارند مانند تاریخ انقضا یا تاریخ تولد.انتخابگر تقویم موبایل امکان انتخاب یک تاریخ و سال واحد را می دهد.Mobile calendar picker پدینگ چپ و راست را 16dp از لبه صفحه حفظ کنید. بالا و پایین انتخاب کننده باید به صورت عمودی در وسط صفحه قرار بگیرد. سمت چپ و راست را بیش از 16dp در نظر نگیرید چون اهداف لمسی کوچکتری ایجاد می کند.(یعنی با کوچکتر شدن دکمه ها و آیکون ها انتخاب آن ها با انگشتان دست سخت تر می شود.)برای انتخاب تاریخ در گذشته های دور یا آینده از تقویم استفاده نکنید به جای آن از انتخابگر ورودی موبایل یا تکست فیلد استفاده کنید.رفتاردر انتخابگرهای تقویم موبایل به چندین روش در تاریخ ها می توان حرکت کرد:برای جا به جایی میان ماه ها، swipe افقیبرای جا به جایی بین سال ها، اسکرول عمودیبرای دسترسی به انتخاب سال، ضربه روی سالانتخابگر تقویم تلفن همراه با جهت گیری دستگاه سازگار هستند.انتخابگر range در موبایلاستفادهانتخابگر دامنه تاریخ امکان انتخاب طیفی از تاریخ را فراهم می کند. آنها کل صفحه را می پوشانند.موارد استفاده متداول شامل:بوکینگ پروازرزرو هتلرفتاردر انتخابگرهای دامنه تاریخ موبایل به چندین روش در تاریخ ها می توان حرکت کرد:برای انتخاب دامنه تاریخ، ضربه روی تاریخ شروع و تاریخ پایان روی تقویمبرای جابه جایی بین ماه ها، اسکرول عمودیانتخابگرهای ورودی تاریخ موبایلاستفادهانتخابگرهای 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