طراحی Date Picker و Calendar UI؛ راهنمای کامل UX/UI برای انتخاب تاریخ
مقدمه: چرا Date Picker مهم است؟
Date Picker یکی از پرکاربردترین کامپوننتهای UI در فرمها، فیلترها، رزرواسیونها و داشبوردهای تحلیلی است. تجربه کاربر در انتخاب تاریخ مستقیماً روی نرخ تکمیل فرم، خطاهای ورودی و رضایت کلی کاربر تأثیر میگذارد.
طراحی ضعیف Date Picker میتواند منجر به:
- انتخاب اشتباه تاریخ (اشتباه روز/ماه)
- سردرگمی کاربر در تغییر ماه/سال
- سختی استفاده در موبایل
- رها کردن فرم (Drop-off) شود.
در این مقاله از زاویهی طراح UX/UI به اصول طراحی Date Picker و Calendar UI نگاه میکنیم.
انواع سناریوهای استفاده از Date Picker
برای طراحی درست، باید سناریوی استفاده را بشناسی، چون الگوی مناسب برای «انتخاب یک تاریخ» با «انتخاب بازه تاریخ» متفاوت است.
۱. انتخاب یک تاریخ (Single Date)
مثالها:
- تاریخ تولد (Sign up)
- تاریخ رزرو یک جلسه
- انتخاب روز تحویل کالا
در این سناریو معمولاً یک Calendar ساده با قابلیت انتخاب یک روز کافی است.
۲. انتخاب بازه تاریخ (Date Range)
مثالها:
- رزرو هتل (Check-in / Check-out)
- فیلتر گزارشها: از تاریخ X تا Y
- بازه کمپین مارکتینگ
در این حالت معمولاً از Range Date Picker استفاده میشود که کاربر دو نقطه (شروع و پایان) را روی یک یا دو تقویم انتخاب میکند.
۳. انتخاب تاریخ و زمان (DateTime Picker)
مثالها:
- تنظیم Reminder
- رزرو جلسه آنلاین
- زمانبندی انتشار محتوا
در این حالت Date Picker با Time Picker (انتخاب ساعت و دقیقه) ترکیب میشود.
۴. انتخاب تاریخهای متعدد (Multiple Dates)
مثالها:
- انتخاب روزهای حضور در کلاس
- انتخاب روزهای کاری خاص در یک ماه
در این سناریو الگوی UI باید امکان انتخاب و نمایش چند تاریخ را بدهد.
الگوهای رایج طراحی Date Picker
در جدول زیر رایجترین الگوهای UI را میبینی:
نکته: انتخاب الگو باید بر اساس فضای صفحه، دستگاه (Desktop/Mobile) و اهمیت وظیفه (Critical vs. Optional) انجام شود.
اصول UX در طراحی Date Picker
۱. تطبیق با فرمت تاریخ (Localization)
کاربر ایرانی با فرمتهای مختلف مواجه است:
- تاریخ شمسی (۱۴۰۳/۰۲/۰۱)
- تاریخ میلادی (2024-10-21)
در پروژههای بومی (بانک، دولت، سرویس داخلی) حتماً باید:
- تقویم شمسی (Jalali) و ترتیب روز/ماه/سال را رعایت کنی.
- فرمت ورودی/خروجی را با نیاز Backend هماهنگ کنی.
- Label و Placeholder واضح استفاده کنی:
- مثال:
تاریخ تولد (مثال: ۱۴۰۰/۰۱/۲۵)
۲. نمای ماه، سال و Navigation
یک Date Picker خوب باید:
- امکان جابهجایی سریع بین ماهها و سالها را بدهد.
- برای سناریوهایی مثل «تاریخ تولد» (بازگشت چند دهه) مکانیزم پرش سریع سال داشته باشد (Dropdown سال، انتخاب دهه، یا Scrolling سریع).
- از آیکونهای قبلی/بعدی (Chevron) واضح استفاده کند.
۳. حالتهای مختلف (States)
هر روز در تقویم میتواند حالتهای مختلفی داشته باشد:
بهوضوح نشان دادن این حالتها جوهرهی UX خوب در Date Picker است.
اصول Visual Design در Calendar UI
۱. شبکه شفاف و خوانا
- عرض ستونهای روزها یکسان باشد.
- سرتیتر روزها (
ش، ی، د، س، چ، پ، جیا نسخه کوتاه انگلیسی) واضح و خوانا باشد. - فاصلهها (Spacing) بهقدری باشد که لمس در موبایل راحت شود (۲۴–۴۴ px برای Touch Target).
۲. تأکید بصری روی روزهای مهم
با استفاده از:
- رنگ
- پسزمینه
- Border
- Icon (مثل نقطه زیر روزهایی که Event دارند)
میتوانی روزهای مهم را برجسته کنی.
۳. هماهنگ با Design System
Date Picker باید:
- با رنگهای برند هماهنگ باشد (Primary / Secondary).
- تایپوگرافی (فونت، اندازه متن، وزن فونت) مطابق سیستم طراحی اصلی باشد.
- در حالت Dark Mode هم درست کار کند (کنتراست، رنگها، Borderها).
تفاوت طراحی Date Picker در دسکتاپ و موبایل
نسخه Desktop
- فضای بیشتری داری → میتوانی دو تقویم کنار هم برای Date Range نشان بدهی.
- Hover State مهمتر است (اشارهگر ماوس).
- امکان استفاده از Tooltip و Microcopy برای راهنمایی بیشتر وجود دارد.
نسخه Mobile
- فضای نمایش محدود است → معمولاً از Modal Full-Screen استفاده میشود.
- Tap Targetها باید بزرگتر باشند (Min 44x44 px).
- Scroll و Gestureها (سوایپ ماهها) تجربهی بهتری میدهند.
- صفحهکلید (Keyboard) نباید ناخواسته باز بماند.
الگوهای خاص: Date Range Picker
در Date Range Picker مشکل رایج، سردرگمی در:
- اینکه کدام تاریخ شروع، کدام پایان است.
- تشخیص بازه انتخابشده.
بهترین Practices
- وقتی کاربر تاریخ اول را انتخاب میکند، Label یا Hint واضح نشان بده:
- «تاریخ شروع انتخاب شد، لطفاً تاریخ پایان را انتخاب کنید.»
- تفاوت بصری Start / End و In-range را واضح کن.
- برای Rangeهای طولانی (مثلاً یک سال) اجازه بده کاربر مستقیماً از ورودی متن هم استفاده کند.
- برای سناریوهای تحلیلی (Analytics Dashboard) از Preset Range استفاده کن:
- امروز، دیروز، ۷ روز گذشته، این ماه، ماه گذشته، Custom Range.
خطاهای رایج در طراحی Date Picker
Best Practices برای Date Pickerهای Business / SaaS
در محصولات B2B و SaaS (داشبوردهای تحلیلی، CRM، ERP) Date Picker یکی از اصلیترین ابزارهای فیلتر است.
توصیهها:
- حتماً Quick Filters/Preset Range داشته باش.
- امکان ذخیرهی Rangeهای پرکاربرد (Saved Filters) را در نظر بگیر.
- اگر از Time Zone استفاده میکنی، آن را واضح نمایش بده (مثلاً UTC+3:30).
- برای Rangeهای بزرگ (مثلاً گزارش سالانه) هشدار Performance را طراحی کن یا Range Max تعریف کن.
CheckList طراحی Date Picker و Calendar UI
برای جمعبندی، این چکلیست را میتوانی هنگام طراحی استفاده کنی:
- [ ] فرمت تاریخ مطابق زبان و فرهنگ کاربران است.
- [ ] Today بهطور واضح Highlight شده است.
- [ ] حالتهای Selected / Range / Disabled قابلتشخیصاند.
- [ ] UI روی موبایل و دسکتاپ تست شده است.
- [ ] Text Input و Calendar هر دو پشتیبانی میشوند (Hybrid).
- [ ] Navigation ماه/سال واضح و سریع است.
- [ ] پیامهای خطا (Validation) واضح و غیرتکنیکی هستند.
- [ ] با Screen Reader و کیبورد قابل استفاده است (Accessibility).
سوالات متداول (FAQ)
آیا همیشه باید از Calendar UI استفاده کنم؟
نه. برای سناریوهایی مثل «ورود دستی تاریخ مخصوصاً تاریخهای قدیمی» (مثلاً تولد ۱۳۶۰) استفاده فقط از Input Masked ممکن است تجربه بهتری بدهد. Calendar مفید است وقتی کاربر نیاز دارد روز هفته یا بازه زمانی نسبی را ببیند.
برای تاریخ تولد، بهترین الگو چیست؟
ترکیب Dropdown سال/ماه و لیست روز یا Date Picker با پرش سریع سال. نگذار کاربر برای برگشت به سالهای خیلی قبل، دهها بار روی فلش «قبلی» کلیک کند.
برای Mobile App چه الگویی بهتر است؟
معمولاً Full-screen Modal Date Picker با Navigation ساده (سوایپ ماهها، دکمه Today، دکمه تأیید/لغو).
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر میدهد!