یک اپلیکیشن تحت وب کامل، حرفهای و واکنشگرا با نام «Focus & Water Tracker» طراحی و پیادهسازی کن. این پروژه یک فضای شخصی برای مدیریت تمرکز، زمان کاری، وظایف روزانه و میزان مصرف آب است.
تمام بخشهای زیر باید با یکدیگر هماهنگ باشند و اطلاعات آنها بهصورت دائمی ذخیره شود تا با بستن یا رفرشکردن مرورگر از بین نرود.
هدف اصلی پروژه
کاربر باید بتواند:
- وظایف و پروژههای خود را مدیریت کند.
- برای هر وظیفه زمان تخمینی تعیین کند.
- زمان واقعی صرفشده روی وظایف را ثبت کند.
- در طول روز حداکثر ۷ ساعت زمان مفید برنامهریزی کند.
- زمان پرشده و زمان آزاد روز را بهصورت بصری ببیند.
- روی یک وظیفه تایمر تمرکز اجرا کند.
- مصرف روزانه آب را ثبت کند.
- عملکرد روزانه و اختلاف زمان تخمینی با زمان واقعی را بررسی کند.
- گزارش فعالیتها را در قالب Excel یا CSV دریافت کند.
زبان و جهت رابط کاربری
رابط کاربری اصلی فارسی و کاملاً راستچین باشد.
- تمام متنها، تاریخها، دکمهها و پیامها فارسی باشند.
- اعداد و زمانها خوانا و واضح نمایش داده شوند.
- ساختار رابط کاربری در دسکتاپ، تبلت و موبایل بهدرستی واکنشگرا باشد.
- برای بخشهای دارای داده زیاد، نسخه موبایل نباید فشرده یا غیرقابل استفاده شود.
طراحی ظاهری
طراحی باید مدرن، مینیمال، حرفهای و مناسب استفاده روزانه طولانیمدت باشد.
- از کارتهای مرتب، گوشههای گرد، سایههای بسیار ملایم و فاصلهگذاری استاندارد استفاده کن.
- تمرکز بصری اصلی صفحه روی تایمرها، برنامه ۷ ساعته و وظایف امروز باشد.
- از شلوغی، رنگهای بسیار تند و انیمیشنهای غیرضروری خودداری کن.
- زمان آزاد و زمان پرشده باید با تضاد رنگی کاملاً مشخص باشند.
- هر سطح اولویت رنگ مخصوص داشته باشد.
- وضعیتهای فعال، متوقف، تکمیلشده، عقبافتاده و آینده کاملاً قابل تشخیص باشند.
- حالت روشن و تاریک در نظر گرفته شود و انتخاب کاربر ذخیره شود.
- تمام دکمهها و کنترلها دارای حالت Hover، Focus و Disabled باشند.
داشبورد اصلی
داشبورد باید مهمترین اطلاعات امروز را در اولین نگاه نشان دهد:
- تاریخ امروز
- تایمر اصلی تمرکز
- تایمر معکوس ظرفیت مفید روز
- زمان مفید ثبتشده امروز
- زمان باقیمانده از سقف ۷ ساعت
- میزان زمان برنامهریزیشده
- میزان زمان آزاد
- وظایف امروز
- پنج وظیفه مهم
- وضعیت مصرف آب
- خلاصه عملکرد امروز
در نسخه دسکتاپ، بخش تایمر باید فضای عریض و برجستهای در بالای صفحه داشته باشد. تایمر اصلی و تایمر معکوس ۷ ساعته باید بزرگ، واضح و در مرکز توجه باشند.
تایمر تمرکز
یک تایمر شمارش رو به بالا برای ثبت زمان واقعی کار ایجاد کن.
تایمر باید امکانات زیر را داشته باشد:
- انتخاب یک وظیفه قبل از شروع
- دکمه شروع
- دکمه توقف موقت
- دکمه ادامه
- دکمه پایان و ثبت زمان
- نمایش نام وظیفه فعال
- نمایش نام پروژه مربوط به وظیفه
- نمایش زمان سپریشده بهصورت ساعت، دقیقه و ثانیه
- ذخیره وضعیت تایمر هنگام رفرش صفحه
- ادامه محاسبه زمان حتی اگر تب مرورگر غیرفعال شود
- جلوگیری از اجرای همزمان بیش از یک تایمر
- ثبت زمان شروع، زمان پایان و مدت فعالیت
- امکان افزودن توضیح کوتاه هنگام پایان فعالیت
- امکان ثبت دستی زمان برای یک وظیفه
اگر تایمر به ۴۰ دقیقه رسید، بهصورت خودکار متوقف شود و یک پیام واضح نمایش داده شود:
«۴۰ دقیقه تمرکز شما کامل شد. آیا میخواهید ادامه دهید؟»
کاربر بتواند یکی از گزینههای زیر را انتخاب کند:
- ادامه تایمر
- پایان و ثبت فعالیت
- شروع استراحت کوتاه
هشدار خروج از صفحه
اگر تایمر در حال اجراست و کاربر به تب یا برنامه دیگری رفت:
- یک هشدار بصری نمایش داده شود.
- عنوان تب مرورگر تغییر کند.
- آیکون سایت یا Favicon بهصورت چشمکزن وضعیت تایمر فعال را نشان دهد.
- در صورت امکان از اعلان مرورگر استفاده شود.
- زمان واقعی فعالیت بدون خطا ادامه پیدا کند.
اگر مرورگر یا تب بسته شد، پس از بازگشت کاربر وضعیت تایمر بازیابی شود.
سقف ۷ ساعت زمان مفید روزانه
حداکثر ظرفیت مفید روزانه کاربر ۷ ساعت در نظر گرفته شود.
یک تایمر معکوس بزرگ در کنار تایمر اصلی نمایش بده که از ۷ ساعت شروع شود و با ثبت زمان مفید روزانه کاهش پیدا کند.
این بخش باید موارد زیر را نشان دهد:
- ظرفیت کل روز: ۷ ساعت
- زمان استفادهشده امروز
- زمان باقیمانده
- زمان برنامهریزیشده
- زمان آزاد و برنامهریزینشده
- درصد تکمیل ظرفیت روز
- درصد زمان برنامهریزیشده
اگر مجموع زمان تخمینی وظایف امروز بیشتر از ۷ ساعت شد:
- از ثبت وظیفه جلوگیری نکن.
- هشدار واضح نمایش بده.
- میزان اضافهبرنامهریزی را مشخص کن.
- پیشنهاد بده بعضی وظایف به روز دیگری منتقل شوند.
اگر کاربر به سقف ۷ ساعت رسید، وضعیت روز به شکل «ظرفیت مفید امروز تکمیل شد» نمایش داده شود.
نوار برنامه روزانه و بلوکهای زمانی
یک نمای بصری برای نمایش کل ۷ ساعت کاری روز طراحی کن.
این نمای زمانی باید:
- زمان پرشده و زمان آزاد را با تضاد رنگی بالا نمایش دهد.
- هر وظیفه را به شکل یک بلوک زمانی مجزا نشان دهد.
- طول هر بلوک متناسب با زمان تخمینی وظیفه باشد.
- نام وظیفه داخل یا کنار بلوک نمایش داده شود.
- رنگ بلوک براساس پروژه یا اولویت مشخص شود.
- زمان شروع و پایان تقریبی بلوک نمایش داده شود.
- بخشهای آزاد روز کاملاً مشخص باشند.
- وظایف تکمیلشده، فعال و برنامهریزیشده ظاهر متفاوتی داشته باشند.
برای مثال اگر یک وظیفه ۹۰ دقیقه زمان تخمینی دارد، یک بلوک ۹۰ دقیقهای در برنامه روز نمایش داده شود.
امکان تغییر ترتیب وظایف ترجیحاً با کشیدن و رهاکردن فراهم شود. با تغییر ترتیب، زمان شروع و پایان تقریبی بلوکها دوباره محاسبه شود.
مدیریت پروژهها
کاربر بتواند پروژههای مختلف ایجاد و مدیریت کند.
هر پروژه شامل موارد زیر باشد:
- نام پروژه
- توضیح کوتاه
- رنگ اختصاصی
- وضعیت فعال یا بایگانیشده
- تاریخ ایجاد
- مجموع زمان تخمینی
- مجموع زمان واقعی ثبتشده
- تعداد وظایف باز
- تعداد وظایف تکمیلشده
کاربر بتواند پروژه را ویرایش یا بایگانی کند. حذف پروژه فقط با تأیید نهایی انجام شود و وظایف آن بدون تصمیم کاربر حذف نشوند.
مدیریت وظایف
هر وظیفه باید شامل اطلاعات زیر باشد:
- عنوان وظیفه
- توضیحات
- پروژه
- اولویت
- تاریخ انجام
- زمان تخمینی
- زمان واقعی مصرفشده
- وضعیت
- نوع وظیفه
- زمان ایجاد
- زمان تکمیل
- یادداشت اختیاری
سطوح اولویت:
- زیاد
- متوسط
- کم
وضعیتهای وظیفه:
- باز
- در حال انجام
- متوقف
- تکمیلشده
- عقبافتاده
نوع وظیفه:
- عادی
- روتین یا تکرارشونده
عملیات موردنیاز:
- ایجاد وظیفه
- ویرایش وظیفه
- تکمیل وظیفه
- بازگرداندن وظیفه تکمیلشده
- انتقال به تاریخ دیگر
- ثبت دستی زمان
- شروع تایمر مستقیم از روی وظیفه
- حذف با تأیید
- مشاهده تاریخچه زمانهای ثبتشده
تاریخ انجام وظایف
هر وظیفه باید دارای Due Date یا تاریخ انجام باشد.
نمای روزانه فقط وظایفی را نمایش دهد که:
- تاریخ انجام آنها امروز است.
- از روزهای قبل عقب افتادهاند.
- وظیفه روتین امروز هستند.
وظایف آینده نباید بهصورت پیشفرض در فهرست امروز نمایش داده شوند.
فیلترهای جداگانه ایجاد کن:
- وظایف امروز
- وظایف عقبافتاده
- وظایف آینده
- وظایف بدون تاریخ
- وظایف تکمیلشده
- تمام وظایف
وظایف عقبافتاده باید هشدار رنگی مشخص داشته باشند و تعداد روزهای تأخیر آنها نمایش داده شود.
انتقال خودکار وظایف ناتمام
وظایف عادی که تا پایان روز تکمیل نشدهاند، در روز بعد همچنان در بخش عقبافتادهها قابل مشاهده باشند.
برای هر وظیفه عقبافتاده، کاربر بتواند:
- آن را به امروز منتقل کند.
- تاریخ جدید انتخاب کند.
- آن را تکمیل کند.
- آن را حذف کند.
- بدون تغییر تاریخ در فهرست عقبافتاده نگه دارد.
وظایف روتین
وظایف روتین پس از تکمیل نباید برای همیشه حذف شوند.
کاربر بتواند الگوی تکرار را تعیین کند:
- روزانه
- روزهای کاری
- هفتگی
- روزهای مشخص هفته
- سفارشی
پس از تکمیل نمونه امروز، نمونه بعدی براساس برنامه تکرار ایجاد یا نمایش داده شود.
تکمیل وظیفه روتین امروز نباید تاریخچه دفعات قبلی را پاک کند.
پنج وظیفه مهم
بخشی با عنوان «پنج وظیفه مهم امروز» ایجاد کن.
قوانین این بخش:
- حداکثر ۵ وظیفه میتوانند در این بخش قرار بگیرند.
- اگر کاربر بخواهد وظیفه ششم اضافه کند، پیام محدودیت نمایش داده شود.
- ترتیب وظایف قابل تغییر باشد.
- هر وظیفه مستقیماً از همین بخش قابل شروع، تکمیل یا ویرایش باشد.
- وظایف تکمیلشده ظاهر خطخورده یا کمرنگ داشته باشند.
- تعداد وظایف تکمیلشده از ۵ مورد نمایش داده شود.
زمان تخمینی در مقابل زمان واقعی
برای هر وظیفه و پروژه موارد زیر را محاسبه کن:
- زمان تخمینی
- زمان واقعی
- اختلاف زمانی
- درصد انحراف
- سریعتر یا کندتر بودن نسبت به تخمین
برای مثال:
- تخمین: ۹۰ دقیقه
- زمان واقعی: ۱۱۰ دقیقه
- اختلاف: ۲۰ دقیقه بیشتر از تخمین
این اطلاعات در گزارش روزانه و جزئیات وظیفه نمایش داده شوند.
ثبت دستی زمان
کاربر بتواند بدون اجرای تایمر، زمان مصرفشده را بهصورت دستی ثبت کند.
فرم ثبت دستی شامل:
- انتخاب وظیفه
- تاریخ
- ساعت شروع اختیاری
- ساعت پایان اختیاری
- مدت فعالیت
- توضیح
- دکمه ثبت
از ثبت مقدار منفی یا اطلاعات نامعتبر جلوگیری شود.
پیگیری مصرف آب
یک بخش ساده و جذاب برای ثبت مصرف آب روزانه طراحی کن.
امکانات:
- تعیین هدف روزانه آب
- هدف پیشفرض قابل ویرایش
- ثبت هر لیوان یا مقدار مشخص آب
- دکمههای سریع مانند ۲۵۰، ۵۰۰ و ۷۵۰ میلیلیتر
- امکان واردکردن مقدار سفارشی
- امکان حذف آخرین ثبت اشتباه
- نمایش مجموع مصرف امروز
- نمایش مقدار باقیمانده تا هدف
- نمایش درصد تکمیل
- نمایش تاریخچه ثبتها
- ریست خودکار آمار در شروع روز جدید بدون حذف تاریخچه روزهای قبل
نمایش پیشرفت میتواند به شکل حلقه، بطری یا نوار پیشرفت باشد؛ اما باید ساده، خوانا و حرفهای باقی بماند.
گزارش روزانه
در انتهای داشبورد یا صفحه گزارشها، خلاصه امروز نمایش داده شود:
- مجموع زمان مفید
- تعداد فعالیتهای تمرکز
- تعداد وظایف تکمیلشده
- تعداد وظایف باقیمانده
- زمان تخمینی کل
- زمان واقعی کل
- میزان اختلاف با برنامه
- درصد استفاده از ظرفیت ۷ ساعته
- میزان آب مصرفشده
- درصد تکمیل هدف آب
گزارشها و خروجی Excel
کاربر بتواند اطلاعات را براساس بازه زمانی فیلتر و خروجی دریافت کند.
فیلترها:
- امروز
- دیروز
- این هفته
- ماه جاری
- بازه سفارشی
- پروژه
- وظیفه
- وضعیت
- اولویت
فایل خروجی Excel یا CSV شامل ستونهای زیر باشد:
- تاریخ
- نام پروژه
- نام وظیفه
- اولویت
- وضعیت
- زمان تخمینی
- زمان واقعی
- اختلاف زمان
- ساعت شروع
- ساعت پایان
- توضیحات
- میزان آب مصرفشده روز
ذخیرهسازی اطلاعات
تمام اطلاعات باید دائمی باشند:
- پروژهها
- وظایف
- تنظیمات
- تاریخچه تایمر
- زمانهای ثبتشده
- وظایف روتین
- ظرفیت روزانه
- مصرف آب
- انتخاب حالت روشن یا تاریک
اگر Backend یا پایگاه داده در دسترس نیست، از ذخیرهسازی محلی ساختاریافته استفاده کن. معماری دادهها را طوری طراحی کن که بعداً بتوان آن را بدون بازنویسی کامل به پایگاه داده واقعی متصل کرد.
مدیریت تغییر روز
سیستم باید تغییر تاریخ را بهدرستی مدیریت کند.
در شروع روز جدید:
- زمان مفید امروز صفر شود.
- ظرفیت ۷ ساعته دوباره کامل شود.
- میزان مصرف آب امروز صفر شود.
- وظایف روتین مربوط به روز جدید ظاهر شوند.
- وظایف عادی ناتمام بهعنوان عقبافتاده باقی بمانند.
- تاریخچه روزهای قبل حذف نشود.
- تایمر فعالی که از نیمهشب عبور کرده، بهدرستی بین دو روز تقسیم شود.
اعتبارسنجی و جلوگیری از خطا
موارد زیر را کنترل کن:
- اجرای همزمان چند تایمر
- ثبت زمان منفی
- ثبت وظیفه بدون عنوان
- ثبت پروژه بدون نام
- انتخاب تاریخ نامعتبر
- اضافهکردن بیش از پنج وظیفه مهم
- حذف اشتباهی اطلاعات
- ثبت چندباره وظیفه روتین برای یک روز
- ازبینرفتن تایمر هنگام رفرش
- محاسبه نادرست زمان هنگام غیرفعالشدن تب
- بیشترشدن زمان برنامهریزیشده از ظرفیت روز
برای حذف پروژه، وظیفه یا سابقه زمانی، پنجره تأیید نمایش داده شود.
تجربه کاربری
- ایجاد وظیفه باید سریع و بدون فرم پیچیده باشد.
- تنظیمات پیشرفته در بخش جداگانه یا فرم بازشونده قرار بگیرند.
- پیامهای موفقیت و خطا واضح باشند.
- پس از هر عملیات، رابط کاربری فوراً بهروزرسانی شود.
- وضعیت خالی هر بخش دارای متن راهنما و دکمه اقدام باشد.
- عناصر قابل کلیک در موبایل اندازه مناسب داشته باشند.
- استفاده کامل با صفحهکلید امکانپذیر باشد.
- برای آیکونها Tooltip یا برچسب قابل فهم قرار بده.
- در صورت وجود تغییر ذخیرهنشده، قبل از خروج هشدار بده.
ساختار پیشنهادی صفحات
داشبورد
- تایمر اصلی
- تایمر معکوس ۷ ساعت
- نمای بلوکهای زمانی
- پنج وظیفه مهم
- وظایف امروز
- مصرف آب
- خلاصه عملکرد
وظایف
- فهرست تمام وظایف
- فیلتر براساس تاریخ، پروژه، اولویت و وضعیت
- ایجاد و ویرایش وظیفه
- وظایف عقبافتاده
- وظایف آینده
- وظایف تکمیلشده
پروژهها
- فهرست پروژهها
- آمار هر پروژه
- ایجاد و ویرایش پروژه
- مشاهده وظایف هر پروژه
گزارشها
- گزارش زمانی
- مقایسه زمان تخمینی و واقعی
- گزارش ظرفیت ۷ ساعته
- گزارش مصرف آب
- خروجی Excel یا CSV
تنظیمات
- هدف روزانه آب
- ظرفیت مفید روزانه با مقدار پیشفرض ۷ ساعت
- حداکثر زمان هر جلسه با مقدار پیشفرض ۴۰ دقیقه
- تنظیم اعلانها
- حالت روشن و تاریک
- تنظیمات وظایف روتین
- مدیریت دادهها و تهیه نسخه پشتیبان
معیار نهایی کیفیت
خروجی نهایی نباید فقط یک نمونه ظاهری یا صفحه نمایشی باشد. تمام دکمهها، فرمها، تایمرها، فیلترها، محاسبات، ذخیرهسازی، مدیریت تاریخ و گزارشها باید واقعاً کار کنند.
اطمینان حاصل کن که:
- تایمر پس از رفرش صحیح ادامه پیدا میکند.
- زمان مفید روز دقیق محاسبه میشود.
- شمارش معکوس ۷ ساعت دقیق است.
- بلوکهای زمانی با وظایف هماهنگ هستند.
- زمان آزاد و پرشده واضح است.
- وظایف روتین در روز مناسب دوباره ظاهر میشوند.
- وظایف آینده در فهرست امروز نمایش داده نمیشوند.
- وظایف عقبافتاده بهدرستی مشخص میشوند.
- پنج وظیفه مهم بیشتر از پنج مورد نمیشود.
- مصرف آب در هر روز جداگانه ذخیره میشود.
- گزارش Excel یا CSV اطلاعات صحیح دارد.
- رابط کاربری فارسی، راستچین، واکنشگرا و قابل استفاده است.
- هیچ قابلیت نمایشی، ناقص یا بدون عملکرد واقعی باقی نماند.