طراحی اپ تقویم: بازطراحی صفحه روز، قبل و بعد
صفحه روز یک تقویم که در آن پنج رویداد، یک شبکه ماه و یک هشدار قرمز همزمان فریاد می‌زنند، و همان صفحه پس از اصلاح: یک تایملاین آرام، یک ردیف برای جلسه بعدی، یک نوار هفته و یک منوی Day. همه تغییرها کنار هم، با فایل رایگان Figma.
صفحه روز در یک تقویم یک کار بیشتر ندارد: بگوید بعدی چیست و چقدر از روز مانده است. پیش‌نویس اول زیر کل روز را می‌شناسد، اما پنج رویداد را با پنج رنگ جیغ نقاشی می‌کند، یک شبکه ماه اضافه می‌کند و یک هشدار قرمز بالای همه می‌گذارد، پس هیچ چیز مهم‌تر از چیز دیگری به نظر نمی‌رسد. جلسه‌ای که ۱۹ دقیقه دیگر شروع می‌شود همان وزن ناهار را دارد.
اصلاح، همه عملکردها را نگه میدارد و فقط وزن را عوض می‌کند. جلسه‌های بلند بلند دیده می‌شوند، زمان آزاد ساده خالی است، و تنها جلسه‌ای که همین حالا مهم است ردیف آرام خودش را می‌گیرد.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، چشم جایی برای نشستن ندارد. هدر، چهار دکمه، بنر قرمز، شبکه ماه و دسته کارتهای پررنگ همه برای نگاه اول می‌جنگند. کارتهای رویداد بلندترین صدای صفحه‌اند و همه‌شان به یک اندازه بلندند. قرمز دو بار استفاده شده: یک بار برای هشدار و یک بار برای رویداد، پس قرمز دیگر معنایی ندارد.
در سمت راست، صفحه ترتیب روشنی از بالا به پایین دارد: در هفته کجا هستم، بعدی چیست، و بقیه روز چه شکلی است. رنگ آرام است و برای یک کار استفاده می‌شود: تشخیص رویدادها از هم.
چه چیزی عوض شد، با عدد
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| رویدادها | پنج کارت تمامرنگ، هر کدام با زنگ، آواتار و برچسب | بلوک‌های کمرنگ با نوار رنگی ۳ px، شعاع گوشه ۶ |
| زمان | نشان داده نمی‌شود، کارت‌ها هم‌قد هستند | تایملاین با ۷۰ px برای هر ساعت، پس طول دیده می‌شود |
| جلسه بعدی | بنر هشدار قرمز با یک جمله | یک ردیف ۷۶ px: «In 19 min»، افراد و دکمه Join با ارتفاع ۳۶ px |
| انتخاب تاریخ | شبکه ماه ۱۵۸ px با نقطه‌های رنگی | نوار هفته، یک دایره توپر ۳۶ px روی امروز |
| نماها | چهار دکمه هم‌وزن ۲۴ px | یک منوی کوچک Day |
| آیکون‌های هدر | کوچک، ناهمگون | ۲۴ px، ساده |
| حاشیه‌ها | ۱۴ px چپ، ۱۲ px راست | یکسان، ردیف‌ها لبه تا لبه |
| اندازه متن‌ها | ۸ تا ۱۶ px | مقیاس خوانا با یک اندازه برای هر نقش |
| دکمه شناور | ۵۲ px، روی آخرین کارت نشسته | حذف شد، افزودن یک پلاس در هدر است |
| نوار تب | پنج تب | پنج تب در نوار شناور ۶۲ px که روز زیرش ادامه دارد |
اصلاح ۱: کارت‌ها را به تایملاین تبدیل کنید
قبل
بعد
پنج کارت تمامرنگ روی هم، آبی، قرمز، نارنجی، سبز و بنفش، همه هم‌قد، هر کدام با زنگ، آواتار و برچسب، در برابر یک تایملاین با برچسب ساعت‌ها، یک جلسه گذشته خاکستری، خط قرمز در ۹:۴۱ و چهار بلوک کمرنگ با نوار رنگی نازک، که در آن ناهار و تماس با مشتری بلندتر از جلسه یک‌به‌یک هستند.
فهرستی از کارت‌ها فقط می‌گوید «این هم پنج چیز» و بس. یک جلسه یک‌ساعته و یک کارگاه سه‌ساعته جای یکسان می‌گیرند و فاصله‌های بینشان، که بخش اصلی چیزی است که مردم از تقویم می‌خواهند ببینند، دیده نمی‌شوند.
تایملاین به روز شکل میدهد. جلسه ۴۵ دقیقه‌ای بلوک کوتاه است، جلسه بلند بلوک بلند، و زمان آزاد فضای سفیدی است که می‌توان دید. رنگ از کل کارت به یک نوار نازک سمت چپ و یک زمینه کمرنگ رفته، پس متن یکجا خوانده می‌شود و رنگ هنوز تماس کاری را از ناهار جدا می‌کند.
دو جزئیات کوچک معنا دارند. Team Standup خاکستری است چون تمام شده. خط قرمز ۹:۴۱ را نشان میدهد، پس دقیقاً می‌بینید کجای روز هستید.
قاعده برای استفاده مجدد: زمان را به شکل فضا نشان بدهید و رنگ پرصدا را برای تنها چیزی که همین حالا در جریان است نگه دارید.
اصلاح ۲: یک ردیف آرام برای چیزی که بعدی است
قبل
بعد
یک بنر قرمز با زنگ و جمله You have 5 events today. Next event in 19 minutes، در برابر یک ردیف سفید با متن Roadmap Review، سپس In 19 min به رنگ قرمز با Zoom کنارش، سه آواتار کوچک و دکمه زرد Join.
هشدار پیش‌نویس سعی می‌کند در یک جمله سه چیز بگوید: چند رویداد هست، یکی بعدی است، و چه زمانی. مثل یک خطا خوانده می‌شود. کسی به شمار رویدادهای امروز نیاز ندارد، چون صفحه خودشان را نشان میدهد.
اصلاح به تنها سؤالی که مردم هنگام باز کردن تقویم دارند جواب میدهد: بعدی چیست و می‌توانم join کنم؟ اول نام می‌آید، «In 19 min» با رنگ قرمز تنها قرمز صفحه است، و دکمه Join با ارتفاع ۳۶ px جایی است که انگشت به آن میرسد. زمان‌ها هم می‌خوانند: نوار وضعیت ۹:۴۱ را نشان میدهد و Roadmap Review ساعت ۱۰:۰۰ شروع می‌شود.
الگو همان است که Notion Calendar برای دکمه join استفاده می‌کند: جلسه، شمارش معکوس و یک اقدام.
قاعده برای استفاده مجدد: بنری که روز را توصیف می‌کند با ردیفی عوض کنید که به حرکت بعدی کمک می‌کند.
اصلاح ۳: ماه را با هفته عوض کنید
قبل
بعد
یک شبکه کامل ماه، پنج ردیف عدد با نقطه‌های رنگی کوچک زیر بسیاری از آنها و امروز در یک دایره زرد کوچک، در برابر یک ردیف هفته با یک حرف بالای هر عدد، یک دایره توپر زرد بزرگ روی سه‌شنبه ۳ام و خط Tuesday, November 3 زیر آن.
شبکه ماه به پرسشی جواب میدهد که صفحه روز نمی‌پرسد. ۱۵۸ px از گوشی را خرج نشان دادن ۳۰ روز نقطه رنگی می‌کند، و نقطه‌ها شبیه کارتهای زیرشان هستند، پس صفحه دو خلاصه رقیب از یک چیز دارد.
نوار هفته آنچه نمای روز لازم دارد نگه میدارد: امروز و روزهای کنارش. یک دایره توپر امروز را نشان میدهد و تاریخ کامل با حروف درست زیرش است. ماه هنوز هست: November در هدر به نمای ماه برمی‌گردد و یک کشیدن روی نوار یک هفته جابه‌جا می‌کند.
قاعده برای استفاده مجدد: سطح زوم همان چیزی را نشان بدهید که صفحه درباره‌اش است. صفحه روز هفته می‌خواهد، نه ماه.
اصلاح ۴: چهار دکمه را در یک منو جمع کنید
قبل
بعد
هدری با November 2026، دو فلش، یک لوگوتایپ، چیپ Today، آیکون‌های جستجو و تنظیمات، و زیرش چهار دکمه هم‌وزن خط‌دار: Day، Week، Month و Year، در برابر هدری با فلش برگشت و November، یک منوی کوچک Day با فلش، یک آیکون جستجو و یک آیکون پلاس.
چهار دکمه یکسان می‌گویند هر چهار نما به یک اندازه محتمل‌اند. نیستند: مردم در یک نما می‌مانند و به ندرت عوضش می‌کنند. دکمه‌ها یک ردیف کامل می‌گیرند و شبیه کارتهای زیرشان هستند.
اصلاح آنها را در یک منوی کوچک جمع می‌کند که نمای فعلی را نشان میدهد. Week، Month و Year یک ضربه فاصله دارند. جستجو و افزودن به آیکون‌های ساده ۲۴ px تبدیل می‌شوند، Settings در نوار تب می‌ماند، و لوگوتایپ می‌رود، چون صفحه خودش محصول است و Apple Calendar هم لوگوتایپ ندارد.
قاعده برای استفاده مجدد: وقتی گزینه‌ها نابرابر استفاده می‌شوند، گزینه فعلی را نشان بدهید و بقیه را پشتش پنهان کنید.
اصلاح‌های کوچک‌تر
- همه عملکردها می‌مانند. فلش‌ها همان کشیدن روی نوار هفته‌اند. زنگ، برچسب‌ها و مکان هر رویداد با باز کردن خود رویداد در دسترس‌اند.
- همان رویدادها. هر پنج رویداد روی هر دو صفحه هستند و هر کدام رنگ قبلی‌اش را به شکل یک زمینه کمرنگ نگه داشته. Team Standup خاکستری است چون تمام شده، و Roadmap Review زرد برند است چون بعدی است.
- نوار تب شناور. با ۶۲ px و روزی که زیرش ادامه دارد، صفحه از کل ارتفاع استفاده می‌کند و نوار تب دیگر شبیه جعبه‌ای جدا نیست.
- بدون دکمه شناور. پلاس ۵۲ px قبلاً روی آخرین کارت و افرادش می‌نشست. حالا یک آیکون هدر است.
- حاشیه‌های یکسان. پیش‌نویس ۱۴ px چپ و ۱۲ px راست دارد. ردیف‌های اصلاح‌شده لبه تا لبه روی یک گرید می‌روند.
- Zoom روی هر دو. Roadmap Review روی هر دو صفحه در Zoom است، پس Join معنا دارد.
صفحه تقویم خودتان را بازرسی کنید
| پرسش | چرا مهم است |
|---|---|
| آیا جلسه بلند بلند دیده می‌شود؟ | طول اولین چیزی است که تقویم باید نشان بدهد |
| آیا زمان آزاد به شکل فضای خالی دیده می‌شود؟ | مردم تقویم را برای پیدا کردن فاصله‌ها باز می‌کنند |
| آیا یک ردیف برای چیزی که بعدی است هست؟ | بیشترین پرسش همین است |
| آیا قرمز فقط برای یک چیز استفاده شده؟ | رنگ هشدار فقط یک بار کار می‌کند |
| آیا انتخاب‌گر تاریخ با نما می‌خواند؟ | شبکه ماه در صفحه روز خلاصه دوم است |
| آیا نماهای کم‌استفاده جمع شده‌اند؟ | دکمه‌های یکسان یعنی استفاده یکسان |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش به شکل کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه روز تقویم، قبل و بعد
هر دو صفحه و هر بخش به شکل کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خود کپی کنید.
سؤالات متداول
نمای روز در اپ تقویم چطور باید طراحی شود؟
به شکل یک تایملاین که ارتفاع بلوک برابر طول جلسه است، با رنگهای ملایم و نوار رنگی نازک، زمان آزاد خالی، و یک خط برای زمان فعلی. جلسه بعدی را در یک ردیف بالای آن بگذارید.
جلسه بعدی را در اپ تقویم چطور نشان بدهیم؟
در یک ردیف با نام جلسه، شمارش معکوس مثل «In 19 min»، افراد و دکمه Join وقتی تماسی هست. از بنری که رویدادهای روز را می‌شمارد پرهیز کنید.
آیا اپ تقویم باید شبکه ماه را روی صفحه روز نشان بدهد؟
معمولاً نه. نوار هفته با یک دایره توپر روی امروز زمینهای را که نمای روز لازم دارد میدهد و ماه یک ضربه از هدر فاصله دارد.
یک اپ تقویم به چند دکمه نما نیاز دارد؟
یکی. نمای فعلی را در یک منوی کوچک نشان بدهید، اینجا Day، و Week، Month و Year را داخلش بگذارید.
چرا کارتهای رویداد تمامرنگ در تقویم بد هستند؟
وقتی هر رویداد اشباع است، هر رویداد فوری به نظر میرسد و رنگ دیگر آنها را جدا نمیکند. زمینه کمرنگ با نوار رنگی نازک دسته را نگه میدارد و اجازه میدهد متن خوانده شود.
دکمه join تقویم چه رنگی باید باشد؟
رنگ برند، به عنوان تنها دکمه پر روی صفحه، و قرمز را فقط برای شمارش معکوس نگه دارید.
منابع
- هر دو صفحه از خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. اپ، Sundial، افراد و رویدادها ساختگی‌اند. زمان‌ها سازگارند: نوار وضعیت ۹:۴۱ را نشان میدهد، Roadmap Review ساعت ۱۰:۰۰ شروع می‌شود و ۳ نوامبر ۲۰۲۶ سه‌شنبه است.
- بررسی متن و کنتراست: جوهر
#1B1A17روی marigold با#FFC233برابر ۱۰٫۸ به ۱ است. متن رویداد روی زمینه‌اش ۸٫۱ (زرد)، ۶٫۵ (نارنجی)، ۶٫۸ (سبز) و ۸٫۴ (بنفش) به ۱ است. «In 19 min» قرمز با#D70015روی سفید ۵٫۴ به ۱ است. - الگوی بررسی‌شده: نمای روز Apple Calendar (برگشت به ماه بالا چپ، جستجو و افزودن به شکل آیکون ساده، نوار هفته با یک امروز توپر، بلوک‌های رنگی با نوار رنگ، فضای خالی به عنوان زمان آزاد) و دکمه join در Notion Calendar.
- لوگوتایپ در صفحه قبل: Playfair Display Bold. عکس‌های آواتار از Pexels: Peter Platou، Son Hoa Nguyen، Luthfi Ramaditya و Carlos Gutierrez.
- ابتدا به شکل کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
